/* =====================================================================
   MobileSerwis - style aplikacji (wspolne dla wszystkich skorek).
   Wydzielone z libs/jquery.alerts/jquery.alerts.css (ktory zostaje
   wylacznie dla komponentu alertow jAlert/jConfirm/jPrompt).
   Ladowany w header.tpl PRZED arkuszem skorki - skorki nadpisuja kolory.
   ===================================================================== */

/* ===== Reset (Meyer) — na samym poczatku, zeby kolejne reguly app.css go
   nadpisywaly (konwencja). Przeniesiony z BAZA / dawnego theme/mobile.css. ===== */
/* reset style */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
th,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Czcionka aplikacji: nowoczesny stack systemowy (czytelniejszy od Verdany,
   bez hostowania pliku - natywny font kazdego systemu: SF/Segoe UI/Roboto).
   Uzywany globalnie przez var(--app-font); skorki moga go nadpisac. */
:root {
	--app-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* reset style */

/* a11y: tresc tylko dla czytnikow ekranu (etykiety, opisy) - wizualnie ukryta */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* a11y: link "Przejdz do tresci" - widoczny dopiero po sfokusowaniu klawiatura */
.skip-link {
	position: absolute;
	left: 8px; top: -48px;
	z-index: 100001;
	padding: 8px 14px;
	background: #2A9FFF;
	color: #fff !important;
	border-radius: 0 0 8px 8px;
	font-weight: bold;
	text-decoration: none;
	transition: top .15s;
}
.skip-link:focus { top: 0; }

/* zmienne --popup-* dla #skin_switcher (skorki nadpisuja je w theme/skins/<skin>.css) */
#skin_switcher {
	--popup-bg: #ffffff;
	--popup-fg: #333333;
	--popup-border: #c4cad3;
	--popup-radius: 8px;
	--popup-shadow: 0 12px 40px rgba(0, 0, 0, .35);

	--popup-title-bg: linear-gradient(#fcfcfd, #e9edf2);
	--popup-title-fg: #444444;
	--popup-title-border: #d3d8e0;

	--popup-panel-bg: #f4f6f9;
	--popup-panel-border: #e2e4e8;

	--popup-ok-bg: #2A9FFF;
	--popup-ok-bg-hover: #1488ee;
	--popup-ok-fg: #ffffff;

	--popup-cancel-bg: #ffffff;
	--popup-cancel-bg-hover: #eef2f7;
	--popup-cancel-fg: #555555;
	--popup-cancel-border: #c4cad3;

	--popup-focus-ring: rgba(42, 159, 255, .35);

	/* kontener */
	font-family: var(--app-font);
	font-size: 12px;
	min-width: 320px;
	max-width: 600px;
	background: var(--popup-bg);
	color: var(--popup-fg);
	border: 1px solid var(--popup-border);
	border-radius: var(--popup-radius);
	box-shadow: var(--popup-shadow);
	overflow: hidden;
}

/* =====================================================================
   Ikony aplikacji (SVG, linia) - kolor z currentColor, wiec dopasowuja
   sie do kazdej skorki. Uzywane w menu i belce (helper app_icon()).
   ===================================================================== */
.appico {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	flex: 0 0 auto;
}
#menu ul a .appico {
	width: 19px;
	height: 19px;
	margin-right: 6px;
	margin-top: -2px;
}
#head .appico {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	opacity: .92;
}
#head > ul > li a:hover .appico { opacity: 1; }
/* Belka: linki akcji (Telefon / user / Wyloguj / wersja) uzywaja koloru TEKSTU
   naglowka skorki (dziedzicza po li/#ver), a NIE globalnego niebieskiego linku 'a' -
   inaczej na kolorowych belkach (morska #00565f, jasna #1e293b) sa nieczytelne.
   Hover (#fff) ze skorki ma wyzsza specyficznosc i zostaje. */
#head > ul > li a { color: inherit; }
#head #ver a { color: inherit; }

/* =====================================================================
   Menu glowne (zakladki) - STRUKTURA wspolna dla wszystkich skorek.
   Kolory ze zmiennych --menu-* (theme/skins/<skin>.css). Wzor: dashboard W1.
   Desktop: JEDEN rzad, bez zawijania - rozmiar dopasowuje theme/menu.js
   (skaluje font-size #menu ul; reszta w 'em'). Mobile (<=1024px): hamburger.
   ===================================================================== */
#menu { overflow: visible; padding: 0 10px; position: relative; }
#menu_toggle { display: none; }
/* hamburger w belce #head (mobile): domyslnie ukryty (desktop = poziome zakladki) */
#head_burger { display: none; }
/* tytul-widok w belce: tylko mobile (desktop pokazuje brand + poziome zakladki w #menu) */
#head h1 .h-view { display: none; }
#head_burger .bars { position: relative; width: 20px; height: 14px; flex: 0 0 auto; }
#head_burger .bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
#head_burger .bars i:nth-child(1) { top: 0; }
#head_burger .bars i:nth-child(2) { top: 6px; }
#head_burger .bars i:nth-child(3) { top: 12px; }
body.menu-open #head_burger .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open #head_burger .bars i:nth-child(2) { opacity: 0; }
body.menu-open #head_burger .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
#menu ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: .25em;
	width: 100%;
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
	padding: .6em 0 0;
	font-size: 13px;
	overflow: hidden;
	list-style: none;
}
#menu ul li { margin: 0; padding: 0; min-width: 0; flex: 0 0 auto; }
#menu ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	height: 2.7em;
	padding: 0 1.05em;
	border-radius: 8px 8px 0 0;
	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	text-shadow: none;
	color: var(--menu-fg, #0a4a57);
	background: var(--menu-tab-bg, rgba(255,255,255,.45));
	border-top: 2px solid transparent;
	transition: background .12s, color .12s;
}
#menu ul li a:hover {
	color: var(--menu-fg-hover, var(--menu-accent, #0a6cb0));
	background: var(--menu-tab-bg-hover, rgba(255,255,255,.72));
}
#menu ul li.active a,
#menu ul li.active a:link,
#menu ul li.active a:visited {
	color: var(--menu-active-fg, var(--menu-accent, #0a6cb0));
	background: var(--menu-active-bg, #ffffff);
	border-top: 2px solid var(--menu-accent, #2A9FFF);
	box-shadow: 0 -1px 5px rgba(0,0,0,.07);
	font-weight: 800;
}
#menu ul li a .appico { width: 1.3em; height: 1.3em; margin: 0; color: currentColor; flex: 0 0 auto; }
/* pozycje przeniesione z belki (wersja/Nowosc/wyloguj) - widoczne tylko w szufladzie
   na mobile; na desktopie (poziome zakladki) ukryte. */
#menu ul li.m-extra { display: none; }

/* ===== MOBILE (iPad/telefon): hamburger + rozwijane menu ===== */
@media only screen and (max-width: 1024px) {
	#menu { padding: 0; }
	/* stary pasek hamburgera ukryty - hamburger jest teraz w belce #head (#head_burger) */
	#menu_toggle { display: none !important; }
	/* szuflada przyklejona POD belka #head (ktora jest sticky); --head-h ustawia menu.js */
	#menu ul {
		display: none; position: fixed; left: 0; right: 0; top: var(--head-h, 52px); z-index: 9000;
		flex-direction: column; flex-wrap: nowrap; gap: 3px;
		width: 100%; max-width: none; margin: 0; padding: 7px; font-size: 14px;
		max-height: calc(100dvh - var(--head-h, 52px)); overflow-y: auto;
		background: var(--menu-active-bg, #fff); box-shadow: 0 14px 30px rgba(0,0,0,.22); border-radius: 0 0 12px 12px;
	}
	#menu.open ul { display: flex; }
	#menu ul li { width: 100%; }
	#menu ul li a { width: 100%; height: auto; justify-content: flex-start; padding: 12px 14px; border-radius: 8px; border-top: 0; box-shadow: none; font-size: 14px; }
	#menu ul li a .appico { width: 18px; height: 18px; }
	#menu ul li.active a { border-top: 0; border-left: 3px solid var(--menu-accent, #2A9FFF); background: var(--menu-tab-bg-hover, rgba(0,0,0,.05)); }
	/* sekcja przeniesiona z belki: wersja + Nowosc + Wyloguj (na dole szuflady) */
	#menu ul li.m-extra { display: block; }
	#menu ul li.m-divider { height: 1px; padding: 0; margin: 7px 12px; background: rgba(127,127,127,.25); border-radius: 0; }
	#menu ul li.m-changes a { display: flex; align-items: center; gap: .5em; }
	#menu ul li.m-changes .me-ver { font-weight: 700; }
	#menu ul li.m-changes .ver-badge { margin-left: auto; }
	#menu ul li.m-logout a { color: #c0392b; }
	#menu ul li.m-logout a .appico { color: #c0392b; }
}

/* =====================================================================
   RWD: nagłówek #head (belka firmy/usera). Bazowy #head jest definiowany
   w generowanych theme/skins/*.css (min-width:920px + dzieci absolute),
   ktore laduja sie PO app.css - dlatego nadpisujemy z wieksza
   specyficznoscia (body #head ...) oraz !important na min-width/position.
   Kolory (#333 itd.) zostaja w skorce - tu zmieniamy TYLKO uklad.
   ===================================================================== */
@media only screen and (max-width: 1024px) {
	body #head {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;       /* padding nie powieksza belki ponad 100% (overflow 20px na tablecie) */
		height: auto !important;
		/* belka zostaje na gorze przy scrollu; modale (pelnoekranowe na mobile) ja zakrywaja */
		position: sticky; top: 0; z-index: 50;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		gap: 4px 8px;
		padding: 6px 10px;
		margin-bottom: 4px;
	}
	/* hamburger przed logo; tytul belki = nazwa biezacego widoku (zamiast brandu) */
	body #head #head_burger {
		display: inline-flex; align-items: center; justify-content: center;
		order: -1; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; margin: 0;
		border: 0; background: transparent; color: #fff; cursor: pointer; border-radius: 8px;
	}
	body #head #head_burger:hover { background: rgba(255,255,255,.14); }
	body #head h1 .h-brand { display: none; }
	body #head h1 .h-view { display: inline; font-weight: 700; }
	body #head h1 .app-logo { flex: 0 0 auto; }
	body #head h1,
	body #head #ver,
	body #head > ul { position: static !important; }
	body #head h1 {
		left: auto; margin: 0; padding: 0; height: auto;
		flex: 1 1 auto; min-width: 0;
		font-size: 14px;
		overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	}
	body #head h1 span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	body #head #ver {
		left: auto; width: auto; margin: 0; padding: 0;
		order: 3; flex: 0 0 auto; font-size: 11px;
	}
	body #head > ul {
		right: auto; margin: 0 0 0 auto; padding: 0;
		display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
		list-style: none;
	}
	body #head > ul > li { float: none; margin: 0; padding: 0; height: auto; }
	body #head > ul > li,
	body #head > ul > li > a { display: inline-flex; align-items: center; gap: 5px; }
	body #head > ul > li > a {
		min-width: 40px; min-height: 40px; justify-content: center;
		padding: 0 8px; border-radius: 8px;
	}
	body #head > ul > li > a:hover { background: rgba(255,255,255,.12); }
	body #head .appico { width: 20px; height: 20px; margin: 0; }
}
/* telefon i TABLET: belka tylko z ikonami (etykiety+wersja chowane, by kontrolki
   sie nie sklejaly); wieksze odstepy miedzy ikonami akcji. */
@media only screen and (max-width: 1024px) {
	body #head .hlabel,
	body #head #voip_link,
	body #head #ver { display: none; }
	body #head h1 { font-size: 14px; }
	body #head > ul { gap: 4px; }
	body #head > ul > li > a { padding: 0 8px; }
	/* spojny, czytelny kolor WSZYSTKICH ikon na ciemnym topbarze (skorka dawala
	   #aaa dla nie-linkow -> firma/user slabo widoczne; linki mialy akcent). */
	body #head > ul > li,
	body #head > ul > li > a,
	body #head > ul > li > a:hover,
	body #head .appico { color: #fff; opacity: 1; }
	body #head > ul > li > a { border-radius: 8px; }
	body #head > ul > li > a:hover { background: rgba(255,255,255,.14); }
	/* sama ikona uzytkownika (bez nazwy) nic nie wnosi na telefonie -> chowamy */
	body #head > ul > li.head-user { display: none; }
	/* telefon (VoIP) zbedny na mobile; Wyloguj + wersja/Nowosc przeniesione do
	   szuflady menu (.m-extra w tpl/menu.tpl) -> chowamy je z belki, by nie zawijala
	   sie do 2 linii. W belce zostaja: firma, skorka, ustawienia. */
	body #head > ul > li.head-voip,
	body #head > ul > li.head-logout,
	body #head > ul > li.head-help,
	body #head > ul > li.head-settings { display: none; }
	/* nazwa firmy w belce na mobile: widoczna, ale ograniczona szerokoscia okna
	   (max-width + wielokropek), zeby nie rozpychala belki. Reszta .hlabel zostaje ukryta. */
	body #head > ul > li.companies{ min-width: 0; min-height: 40px; padding: 0 8px; gap: 6px; border-radius: 8px; }
	body #head > ul > li.companies.has-switch:hover,
	body #head > ul > li.companies.has-switch.open{ background: rgba(255,255,255,.14); }
	body #head > ul > li.companies .hlabel{
		display: inline-block; max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
		white-space: nowrap; vertical-align: middle; font-size: 12px;
	}
}
/* user w belce: klikalny -> zmiana hasla (showChangePass) */
#head > ul > li.head-user { cursor: pointer; }
#head > ul > li.head-user:hover { color: #fff; }
/* WASKI DESKTOP (1025-1280): za malo miejsca w belce -> "Telefon" tylko ikona
   (bez napisu) oraz user TYLKO ikona (bez nazwy); nachodzily na numer wersji (#ver). */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
	body #head #voip_link { display: none; }
	body #head > ul > li.head-user .hlabel { display: none; }
}
/* TELEFON: ukrywamy z menu moduly nieuzywane mobilnie (Rozliczenia/Gwarancje/
   Uruchomienia). Klasa m-<modul> nadawana w tpl/menu.tpl. */
@media only screen and (max-width: 600px) {
	#menu ul li.m-money,
	#menu ul li.m-protocols,
	#menu ul li.m-devices { display: none !important; }
}
/* stopka: w skorce ma sztywne width:940px -> na tablecie/telefonie rozpycha
   strone. Nadpisujemy szerokoscia plynna (body div#footer > skorka). */
@media only screen and (max-width: 1024px) {
	body div#footer {
		width: auto; max-width: 100%;
		margin: 18px auto; padding: 0 12px;
		box-sizing: border-box;
	}
}

/* --- przyciski paska filtrow (toolbar): duzy, wygodny tap-target --- */
a.toolbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 2px;
	border-radius: 8px;
	vertical-align: middle;
}
a.toolbtn .appico {
	width: 30px;
	height: 30px;
}
a.toolbtn:hover { background: rgba(127, 127, 127, .16); }

/* Przyciski "Dodaj ..." (wzorzec add-btn): zakladki ustawien + okna dialogowe
   (dodawanie pozycji: czesci zlecenia, urzadzenia/przypomnienia klienta, magazyn) */
.add-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid rgba(127, 127, 127, .35);
	border-radius: 8px;
	background: rgba(127, 127, 127, .06);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
}
#tabs .add-btn { margin: 14px 6px 16px 0; }
.ui-dialog .add-btn { margin: 4px 0 10px; }
.add-btn:hover { background: rgba(42, 159, 255, .12); border-color: #2A9FFF; }
.add-btn img,
.add-btn .appico { width: 20px; height: 20px; margin: 0; }

/* --- przyciski dodawania dokumentow magazynowych (PZ/WZ/MM): kolorowa ikona-badge --- */
a.docbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 1px;
	border-radius: 8px;
	vertical-align: middle;
}
a.docbtn .appico { width: 30px; height: 30px; }
a.docbtn:hover { background: rgba(127, 127, 127, .16); }

/* =====================================================================
   Tabele-siatki: komorki ZAWIJAJA tresc (mieszcza sie w kontenerze/oknie, bez
   poziomego scrolla). Skorki NIE narzucaja juz white-space:nowrap (usuniete z
   default.css/dark.css). Wyjatek: komorka AKCJI z ikonami nie lamie sie - ale
   TYLKO na desktopie (>1024px); na tablecie/telefonie tabele i tak sa zwezone/karty.
   Pigulki statusu/priorytetu (.st-pill/.pl-pill) maja wlasny nowrap i tu nie lamia. */
table.grid td, table.grid th { white-space: normal; overflow-wrap: break-word; }
@media (min-width:1025px){
	table.grid td.actions { white-space: nowrap; }
}

/* --- ikony akcji w tabelach: czytelne do klikania, niska wysokosc wiersza --- */
td.actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 26px;
	margin: 0 1px;
	border-radius: 6px;
	vertical-align: middle;
}
td.actions a .appico {
	width: 22px;
	height: 22px;
}
td.actions a:hover { background: rgba(127, 127, 127, .16); }
td.actions .ind {
	display: inline-flex;
	align-items: center;
	padding: 0 3px;
	vertical-align: middle;
	opacity: .7;
}
td.actions .ind .appico { width: 18px; height: 18px; }

/* --- linki-ikony tworzone globalnie (shim PNG->SVG): wygodny tap-target --- */
a.icolink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 26px;
	margin: 0 1px;
	border-radius: 6px;
	vertical-align: middle;
}
a.icolink .appico { width: 22px; height: 22px; }
a.icolink:hover { background: rgba(127, 127, 127, .16); }
[id$="searchform"] a.icolink { min-width: 40px; height: 40px; margin: 0 2px; }
/* jednolity rozmiar WSZYSTKICH ikon w pasku narzedzi (szim/icolink oraz serwerowe app_icon) */
[id$="searchform"] a.icolink .appico,
[id$="searchform"] a .appico,
[id$="searchform"] a .calico { width: 30px; height: 30px; }

/* --- widocznosc ikon w tresci/dialogach (akcje + toolbar) - skorki jasne; dark nadpisuje --- */
#content .appico,
.ui-dialog .appico { color: #44515f; }
#content table.grid tr.focused td .appico { color: #ffffff; }
/* ikony na kolorowych komorkach naglowka (bialy tekst) - musza byc biale.
   .ui-dialog: naglowki grid w oknach dialogowych (sub-listy: Czesci/Historia,
   Sprzet/Przypomnienia klienta) - inaczej lapie je .ui-dialog .appico (ciemny). */
#content td.grid_user .appico,
#content tr.grid_title .appico,
#content table.grid th .appico,
.ui-dialog tr.grid_title .appico,
.ui-dialog table.grid th .appico,
#content td.grid_today .appico,
#content td.grid_saturday .appico,
#content td.grid_sunday .appico,
#content td.grid_holiday .appico { color: #ffffff; }

/* --- ikona alarmu/alertu: czytelny czerwony niezaleznie od skorki --- */
.appico.ico-alert { color: #e24b4a !important; }

/* --- kolorowe ikony statusow kalendarza (stale kolory, bez akcentu) --- */
.calico { width: 24px; height: 24px; vertical-align: middle; padding: 3px;}
/* ostrzezenie uwag serwisanta w kalendarzu - wyrazniejsze (prosba klienta) */
.calico.svc-warn { width: 22px; height: 22px; padding: 0; }

/* --- znacznik "zaznaczone" w komorkach boolean (Aktywny/Domyslny itp.) --- */
.grid-check { color: #1f9d57; font-weight: bold; font-size: 15px; line-height: 1; }

/* --- wartosc drugorzedna/domyslna w komorce listy (np. "firmowa" skorka) --- */
.grid-muted { opacity: .55; font-style: italic; }

/* --- miniaturka skorki w liscie userow (jak w oknie szybkiej zmiany skorki) --- */
.grid-skin { display: inline-flex; align-items: center; gap: 7px; }
.grid-skin-sw {
	display: inline-flex;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid rgba(128, 128, 128, .35);
	flex: 0 0 auto;
	vertical-align: middle;
}
.grid-skin-sw i { display: block; width: 7px; height: 14px; }

/* --- tryb gestosci kalendarza w liscie userow (obok skorki) --- */
.grid-density { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
	border-radius: 11px; background: rgba(127, 127, 127, .15); font-weight: 600; font-size: 12px; }
.grid-density .appico { width: 14px; height: 14px; }

/* =====================================================================
   Formularz urlopu (#service_form) - nowoczesny, kompaktowy, bez tla.
   ===================================================================== */
#service_form {
	background: transparent !important;
	border: 0;
	padding: 6px 0 2px;
}
/* Pasek nagłówka edytora urlopu (OPIS/TYP/TERMIN + poprzednie/następne) PRZYKLEJONY do góry
   okna - tabela dni przewija się pod nim (jak przyklejony pasek w oknie rozliczenia). */
.hol-head {
	position: sticky; top: 0; z-index: 20;
	margin: 0; padding: 6px 12px 8px;
	background: #fff;
	border-bottom: 1px solid rgba(127, 127, 127, .28);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .09);
}
.hol-head .nav.nav_top { margin: 0; }
.hol-title {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 16px;
}
.hol-form { max-width: 640px; margin: 0 auto; }
.hol-field { margin-bottom: 12px; }
.hol-field > label {
	display: block;
	font-size: 11px;
	font-weight: bold;
	opacity: .7;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.hol-field input.text { width: 100%; box-sizing: border-box; }
.hol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

/* kompaktowy rzad: Typ + Termin od + Termin do obok siebie */
.hol-row2 { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: stretch; }
/* naglowki (label) w jednej linii u gory, a kontrolki wyrownane rowno do dolu */
.hol-row2 .hol-field { margin-bottom: 0; display: flex; flex-direction: column; }
.hol-row2 .hol-field > .hol-types,
.hol-row2 .hol-field > .hol-inline,
.hol-row2 .hol-field > input.text { margin-top: auto; }
.hol-inline { display: flex; gap: 8px; }
.hol-inline .text.date { width: 120px; }
.hol-inline .text.time { width: 64px; }

/* wybor typu urlopu - duze ikony zamiast widocznych radiobuttonow */
.hol-types { display: flex; gap: 12px; }
.typeopt { position: relative; display: inline-block; cursor: pointer; line-height: 0; }
/* radiobutton ukryty (przykryty ikona) - wysoka specyficznosc, by pokonac regule skorki input[type=radio] */
.typeopt input[type="radio"] {
	position: absolute !important;
	top: 0; left: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.typeopt .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 34px;
	border: 1px solid rgba(127, 127, 127, .45);
	border-radius: 8px;
	background: rgba(127, 127, 127, .06);
	transition: border-color .12s, background .12s, box-shadow .12s;
}
.typeopt .ico .calico,
.typeopt .ico .appico { width: 22px; height: 22px; }
.typeopt:hover .ico { border-color: #2A9FFF; }
.typeopt input[type="radio"]:checked + .ico,
.typeopt.sel .ico {
	border-color: #2A9FFF;
	background: rgba(42, 159, 255, .16);
	box-shadow: 0 0 0 2px rgba(42, 159, 255, .30);
}

/* ikony wyboru zakresu dat w siatce urlopu */
#hol_calendar a.holpick .appico,
#hol_calendar a .appico,
#hol_calendar a .calico { width: 22px; height: 22px; }
#hol_calendar a.holpick { display: inline-flex; padding: 3px; border-radius: 6px; }
#hol_calendar a.holpick:hover { background: rgba(127, 127, 127, .16); }

/* Siatka edytora urlopu: zmiesc caly tydzien (7 dni) w oknie dialogu.
   Bez tego komorka z dlugim adresem zlecenia (white-space:nowrap w table.grid)
   rozpychala kolumne do ~250px i miescily sie tylko 3 dni. table-layout:fixed
   wyrownuje kolumny dni, a przyciecie z wielokropkiem trzyma adres w jednej
   linii (pelne dane i tak w popoverze pod ikona zlecenia). */
#hol_calendar table.calendar { table-layout: fixed; width: 100%; }
#hol_calendar table.calendar td { overflow: hidden; text-overflow: ellipsis; }
#hol_calendar table.calendar tr td:first-child { width: 80px; }

/* =====================================================================
   Nowoczesne paski paginacji list (poprzednie / licznik / nastepne).
   Zachowuje licznik wpisow (#rowsb), te same style dla gory i dolu.
   ===================================================================== */
/* kontener: auto-wysokosc, by pigulki sie miescily (skorka wymusza height:20px) */
#client_all, #order_client_all,
div.nav, div.nav_top, div.nav_bottom {
	height: auto !important;
	min-height: 0 !important;
	padding: 7px 8px !important;
	box-sizing: border-box;
}
#client_all ul, #order_client_all ul,
div.nav ul, div.nav_top ul, div.nav_bottom ul {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	position: static !important;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 8px;
}
#client_all ul li, #order_client_all ul li,
div.nav ul li, div.nav_top ul li, div.nav_bottom ul li {
	position: static !important;
	width: auto !important;
	min-width: 0 !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	float: none !important;
}
li.status { flex: 1 1 auto; text-align: center; }

/* przyciski "poprzednie" / "nastepne" jako nowoczesne pigulki z szewronem */
li.prev a, li.next a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 18px;
	border: 1px solid rgba(127, 127, 127, .35);
	background: rgba(127, 127, 127, .07);
	font-weight: bold;
	white-space: nowrap;
	transition: background .12s, border-color .12s, color .12s;
}
li.prev a:hover, li.next a:hover {
	border-color: #2A9FFF;
	background: rgba(42, 159, 255, .12);
}
li.prev a::before { content: '\2039'; font-size: 18px; line-height: 1; margin-top: -2px; }
li.next a::after  { content: '\203A'; font-size: 18px; line-height: 1; margin-top: -2px; }

/* licznik(i) wpisow - kontener na pigulki (#rowsb i pochodne *rowsb) */
li.status > div, li.status #rowsb, [id$="rowsb"] {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
/* pojedyncza pigulka (licznik, Netto, Brutto ...) */
.navpill {
	display: inline-block;
	padding: 5px 16px;
	border-radius: 18px;
	background: rgba(127, 127, 127, .12);
	font-weight: bold;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

/* --- trigger datepickera (ikona SVG zamiast bitmapy) --- */
/* ujednolicenie WSZYSTKICH triggerow datepickera (rozmiar, wyrownanie, margines)
   - bije rozproszone reguly skorek (.sections / #..searchform z marginesem -4px) */
img.ui-datepicker-trigger, img.dp-ico {
	width: 22px !important;
	height: 22px !important;
	vertical-align: middle !important;
	margin: 0 7px 0 5px !important;
	padding: 0 !important;
	cursor: pointer;
	box-sizing: content-box;
}

/* --- kalendarz: duze guziki zmiany trybu widoku --- */
#client_calendar_type, #order_client_calendar_type { padding-top: 5px; }
#order_client_calendar_type { margin-bottom: 6px; }
#client_calendar_type a.icolink,
#client_calendar_type a.calview,
#order_client_calendar_type a.icolink,
#order_client_calendar_type a.calview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 30px;
	margin: 0 4px;
	border: 1px solid rgba(127, 127, 127, .45);
	border-radius: 8px;
}
#client_calendar_type a.icolink:hover,
#client_calendar_type a.calview:hover,
#order_client_calendar_type a.icolink:hover,
#order_client_calendar_type a.calview:hover { background: rgba(127, 127, 127, .14); }
#client_calendar_type a.icolink .appico,
#client_calendar_type a.calview .appico,
#order_client_calendar_type a.icolink .appico,
#order_client_calendar_type a.calview .appico { width: 20px; height: 20px; }

/* Przycisk „Agenda" (lista wizyt) - wylacznie telefon. Na desktopie/tablecie chowamy
   (matryca tygodnia jest tam widokiem podstawowym). Media query telefonu go pokazuje. */
#client_calendar_type a.calview.calview-agenda { display: none; }

/* aktywny tryb widoku - wyrazne podswietlenie (akcent; skorki nadpisuja kolor) */
#client_calendar_type a.calview.active,
#order_client_calendar_type a.calview.active {
	background: #2A9FFF;
	border-color: #2A9FFF;
	box-shadow: 0 2px 6px rgba(42, 159, 255, .35);
}
#client_calendar_type a.calview.active .appico,
#order_client_calendar_type a.calview.active .appico { color: #ffffff; }
/* przelacznik gestosci „kompakt" - osobna kontrolka, CALKIEM Z PRAWEJ (nie w grupie widokow)
   i mniejsza. Kontener position:relative; przycisk absolutny do prawej krawedzi. */
#client_calendar_type, #order_client_calendar_type { position: relative; }
#client_calendar_type a.calview.cal-density-sep,
#order_client_calendar_type a.calview.cal-density-sep {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	min-width: 0; width: 28px; height: 28px; margin: 0; padding: 0;   /* MNIEJSZY niz przyciski widoku (44x30) */
}
#client_calendar_type a.calview.cal-density-sep .appico,
#order_client_calendar_type a.calview.cal-density-sep .appico { width: 15px; height: 15px; }

/* okno zlecenia: dane klienta - akcje (edycja/GPS/telefon) wyrownane do prawej */
#client_fieldset .client-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#client_fieldset .client-head-act { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#client_fieldset .client-head-act a { display: inline-flex; align-items: center; line-height: 0; }
#client_fieldset .client-head-act img,
#client_fieldset .client-head-act .appico { width: 18px; height: 18px; vertical-align: middle; }

/* ===== Okno zlecenia (nowe/edycja): panele rownej wysokosci, naglowki sekcji, Znaczniki jako sekcja zlecenia ===== */
#order_form .sections { display: grid !important; grid-template-columns: auto 1fr 1fr 1fr; gap: 10px; align-items: stretch; overflow: visible !important; }
#order_form .sections > .section { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
#order_form .sections > .section > fieldset { height: 100%; min-height: 0; min-width: 0; margin: 0; box-sizing: border-box; overflow: visible; }
#order_form .sections .ord-sec-h { font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px; }
#order_form .sections textarea { max-height: none; }

/* ===== WSPOLNY font pol WE WSZYSTKICH OKNACH-FORMULARZACH (id konczace sie na "_form":
   #order_form, #client_form, #reminder_form, #client_gear_form, #client_reminder_form,
   #doc_form, ...). Jedno miejsce zamiast poprawiania czcionki osobno per okno (prosba klienta -
   baza aplikacji to drobne 8pt). Uklad sekcji/kolumn/fieldsetow ZOSTAJE per-okno, bo realnie
   sie rozni (zlecenie=4 kolumny + zielone panele skorki, klient=auto-fit, gear/doc=1 kolumna). ===== */
[id$="_form"] .sections label { font-size: 13px; line-height: 1.35; }
[id$="_form"] .sections input:not([type="checkbox"]):not([type="hidden"]),
[id$="_form"] .sections select,
[id$="_form"] .sections textarea { font-family: inherit; font-size: 14px; }
/* karta klienta w oknie zlecenia - wieksza tresc (etykiety zostaja drobne) */
#client_fieldset .cc-name { font-size: 17px; }
#client_fieldset .cc-val { font-size: 14px; }
#order_form #order_plan_list { max-height: 320px; overflow-y: auto; }
/* Znaczniki - sekcja zlecenia (pelna szerokosc, pod panelami) */
#order_form .znaczniki-row { clear: both; margin: 8px 5px 10px 0; padding: 8px 10px; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; }
#order_form .znaczniki-row h2,
#order_form .znaczniki-row .ord-sec-h { font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; margin: 0 0 8px; }
#order_form .znaczniki-row fieldset.tags { min-height: auto; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#client_fieldset .phone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ===== Karta KLIENTA w oknie zlecenia (#client_fieldset) - uklad jak karta listy klientow =====
   Nazwisko + znaczniki (kropki) wieksza czcionka; pola kontaktu jako etykieta (desktop) lub
   ikona .cardico (<=600px) + wartosc. Wspoldzielony szablon: tpl/order_client_card.tpl. */
#client_fieldset .cc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; }
#client_fieldset .cc-name { font-size: 16px; font-weight: 800; color: var(--pl-ink, #222a31); line-height: 1.2; }
#client_fieldset .cc-tags { display: inline-flex; align-items: center; gap: 5px; }
#client_fieldset .cc-tags .tag { margin: 0; vertical-align: middle; }
#client_fieldset .cc-line { margin: 0 0 8px; }
#client_fieldset .cc-ico { display: none; }                 /* ikona pola - tylko mobile (.cardico) */
#client_fieldset .cc-lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; opacity: .6; margin: 0 0 1px; }
#client_fieldset .cc-val { display: block; min-width: 0; word-break: break-word; }
#client_fieldset .cc-addr .cc-val { color: var(--pl-fg, #3f4750); }
#client_fieldset .cc-addr #client_street, #client_fieldset .cc-addr #client_city { display: block; }
#client_fieldset .cc-phone, #client_fieldset .cc-mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
#client_fieldset .cc-phone .cc-lbl, #client_fieldset .cc-mobile .cc-lbl { flex: 1 1 100%; }
#client_fieldset .cc-phone .cc-val, #client_fieldset .cc-mobile .cc-val { display: inline-block; }
#client_fieldset .cc-edit { flex: 0 0 auto; }
#client_fieldset .cc-edit img { width: 16px; height: 16px; vertical-align: middle; }
#client_fieldset .cc-notes { display: block; margin: 2px 0 0; }
#client_fieldset .cc-notes textarea { width: 100%; box-sizing: border-box; margin-top: 3px; }
#client_fieldset .cc-rem .cc-ico-rem { display: inline-flex; }
#client_fieldset .cc-rem .cc-ico-rem img { vertical-align: middle; }

/* ===== Okno klienta (edycja): panele jak w oknie zlecenia (ord-sec-h) + Znaczniki jako sekcja ===== */
#client_form .sections { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: stretch; overflow: visible !important; margin: 0; }
#client_form .sections > .section { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
#client_form .sections > .section > fieldset { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; padding: 8px 10px; box-sizing: border-box; overflow: visible; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; }
#client_form .sections .ord-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px; }
#client_form .ord-sec-act { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
#client_form .ord-sec-act a { display: inline-flex; align-items: center; line-height: 0; }
#client_form .ord-sec-act img, #client_form .ord-sec-act .appico { width: 16px; height: 16px; vertical-align: middle; }
#client_form .sections label { display: block; float: none !important; margin: 0 0 7px; max-width: none; }
#client_form .sections input:not([type="checkbox"]):not([type="hidden"]),
#client_form .sections select,
#client_form .sections textarea { display: block; width: 100%; box-sizing: border-box; margin: 3px 0 0; }
#client_form .sections .frow2 { display: flex; gap: 8px; margin: 0; }
#client_form .sections .frow2 > label { flex: 1 1 0; min-width: 0; margin: 0 0 7px; }
#client_form .sections .frow2 > label.narrow { flex: 0 0 96px; }
#client_form .sections .gps-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
#client_form .sections .gps-row > label { flex: 1 1 90px; margin: 0; }
#client_form .sections label:has(textarea) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#client_form .sections label:has(textarea) textarea { flex: 1 1 auto; min-height: 70px; resize: vertical; }

/* ===== Pod-okna klienta (urządzenie / przypomnienie cykliczne): ten sam schemat paneli, jedna kolumna.
   #order_gear_form = to samo okno urządzenia (tpl/client_gear_form.tpl) otwierane z okna zlecenia. ===== */
#client_gear_form .sections, #order_gear_form .sections, #client_reminder_form .sections { display: grid !important; grid-template-columns: 1fr; gap: 10px; align-items: stretch; overflow: visible !important; margin: 0; }
#client_gear_form .sections > .section, #order_gear_form .sections > .section, #client_reminder_form .sections > .section { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
#client_gear_form .sections > .section > fieldset, #order_gear_form .sections > .section > fieldset, #client_reminder_form .sections > .section > fieldset { display: flex; flex-direction: column; margin: 0; padding: 8px 10px; box-sizing: border-box; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; }
#client_gear_form .ord-sec-h, #order_gear_form .ord-sec-h, #client_reminder_form .ord-sec-h { font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px; }
#client_gear_form .sections label, #order_gear_form .sections label, #client_reminder_form .sections label { display: block; float: none !important; margin: 0 0 7px; max-width: none; }
#client_gear_form .sections input:not([type="checkbox"]):not([type="hidden"]), #client_gear_form .sections select, #client_gear_form .sections textarea,
#order_gear_form .sections input:not([type="checkbox"]):not([type="hidden"]), #order_gear_form .sections select, #order_gear_form .sections textarea,
#client_reminder_form .sections input:not([type="checkbox"]):not([type="hidden"]), #client_reminder_form .sections select, #client_reminder_form .sections textarea { display: block; width: 100%; box-sizing: border-box; margin: 3px 0 0; }
#client_gear_form .sections .frow2, #order_gear_form .sections .frow2, #client_reminder_form .sections .frow2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#client_gear_form .sections .frow2 > label, #order_gear_form .sections .frow2 > label, #client_reminder_form .sections .frow2 > label { flex: 1 1 120px; min-width: 0; margin: 0 0 7px; }
#client_gear_form .sections label.inline-check, #order_gear_form .sections label.inline-check { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
#client_gear_form .sections label.inline-check input, #order_gear_form .sections label.inline-check input { width: auto; margin: 0; }
#client_reminder_form .sections label:has(textarea) textarea { min-height: 70px; resize: vertical; }

/* ===== Okno dokumentacji: ten sam schemat paneli co klient (ord-sec-h), jedna kolumna ===== */
#doc_form .sections { display: grid !important; grid-template-columns: 1fr; gap: 10px; align-items: stretch; overflow: visible !important; margin: 0; }
#doc_form .sections > .section { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
#doc_form .sections > .section > fieldset { display: flex; flex-direction: column; margin: 0; padding: 8px 10px; box-sizing: border-box; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; }
#doc_form .ord-sec-h { font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px; }
#doc_form .sections label { display: block; float: none !important; margin: 0 0 7px; max-width: none; }
#doc_form .sections input:not([type="checkbox"]):not([type="hidden"]), #doc_form .sections textarea { display: block; width: 100%; box-sizing: border-box; margin: 3px 0 0; }
#doc_form .sections label:has(textarea) textarea { min-height: 70px; resize: vertical; }

/* ===== Pliki klienta: nowoczesny upload wielu plikow z paskiem postepu ===== */
#tab_files { text-align: left; }
/* Siatka plików/zdjęć zlecenia — kafelki jak w aplikacji mobilnej */
.files-area { padding: 4px 2px; border-radius: 8px; transition: background .12s, box-shadow .12s; }
.files-area.drag { background: rgba(42,159,255,.08); box-shadow: inset 0 0 0 2px #2A9FFF; }
.files-thumbs { display: flex; flex-wrap: wrap; gap: 14px; }
.files-empty { padding: 18px; text-align: center; opacity: .6; font-size: 13px; }

.file-thumb { position: relative; width: 110px; display: flex; flex-direction: column; }
.file-thumb-link { display: flex; align-items: center; justify-content: center; height: 90px; border-radius: 10px; background: rgba(127,127,127,.10); overflow: hidden; text-decoration: none; }
.file-thumb-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Plakietka formatu (nie-obrazy): kolor wg rozszerzenia */
.file-thumb-doc { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 30px; padding: 0 10px;
  border-radius: 6px; font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #fff; background: #7a8699; }
.file-thumb-doc.fmt-pdf { background: #d6423c; }
.file-thumb-doc.fmt-doc, .file-thumb-doc.fmt-docx, .file-thumb-doc.fmt-rtf, .file-thumb-doc.fmt-odt { background: #2a6fd6; }
.file-thumb-doc.fmt-xls, .file-thumb-doc.fmt-xlsx, .file-thumb-doc.fmt-csv, .file-thumb-doc.fmt-ods { background: #2d9a52; }
.file-thumb-doc.fmt-ppt, .file-thumb-doc.fmt-pptx { background: #e0722b; }
.file-thumb-doc.fmt-zip, .file-thumb-doc.fmt-rar, .file-thumb-doc.fmt-7z { background: #9159c4; }
.file-thumb-doc.fmt-txt { background: #5a6472; }
.file-thumb-name { margin-top: 6px; font-size: 12px; line-height: 1.25; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-thumb-meta { margin-top: 1px; font-size: 11px; line-height: 1.2; text-align: center; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.file-thumb-del { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); color: #555; font-size: 17px; line-height: 22px; cursor: pointer; padding: 0; }
.file-thumb-del:hover { color: #d63c3c; }
.file-thumb-del svg { width: 13px; height: 13px; }

.file-thumb-badge { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; line-height: 15px; }

.file-thumb-add { cursor: pointer; align-items: center; justify-content: center; height: 90px; border: 2px dashed rgba(127,127,127,.45); border-radius: 10px; color: var(--ui-accent-ink, #1373c4); transition: border-color .12s, background .12s; }
.file-thumb-add:hover { border-color: #2A9FFF; background: rgba(42,159,255,.06); }
.file-thumb-add svg { display: block; width: 30px; height: 30px; }
.file-thumb-addtxt { margin-top: 4px; font-size: 12px; font-weight: 600; }
#upload_progress { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.up-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid rgba(127,127,127,.3); border-radius: 6px; background: rgba(127,127,127,.04); }
.up-row .up-name { flex: 1 1 auto; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-row .up-bar { flex: 0 0 150px; height: 8px; border-radius: 5px; background: rgba(127,127,127,.22); overflow: hidden; }
.up-row .up-bar-fill { height: 100%; width: 0; background: #2A9FFF; transition: width .15s; }
.up-row .up-pct { flex: 0 0 40px; text-align: right; font-size: 12px; font-weight: bold; color: var(--ui-accent-ink, #1373c4); }
.up-row.done { border-color: rgba(45,160,90,.5); }
.up-row.done .up-bar-fill { background: #2DA05A; }
.up-row.done .up-pct { color: #2DA05A; }
.up-row.fail { border-color: rgba(214,60,60,.5); }
.up-row.fail .up-bar-fill { background: #d63c3c; }
.up-row.fail .up-pct { color: #d63c3c; }
#client_form .znaczniki-row { clear: both; margin: 10px 0; padding: 8px 10px; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; }
#client_form .znaczniki-row h2 { font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; margin: 0 0 8px; }
#client_form .znaczniki-row fieldset.tags { min-height: auto; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   Przelacznik skorek w belce (#skin_switcher) - dziedziczy palete popupu
   (zmienne --popup-* zadeklarowane wspolnie z #popup_container powyzej).
   ===================================================================== */
#skin_switcher {
	position: fixed;
	top: 44px;
	right: 8px;
	z-index: 100000;
	min-width: 240px;
	max-width: 280px;
	padding: 0 0 6px;
}

#skin_switcher_title {
	font-size: 12px;
	font-weight: bold;
	color: var(--popup-title-fg);
	background: var(--popup-title-bg);
	border-bottom: 1px solid var(--popup-title-border);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
	padding: 8px 12px;
	margin: 0 0 4px;
}

#skin_switcher ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#skin_switcher li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px;
	cursor: pointer;
	border-left: 3px solid transparent;
}

#skin_switcher li:hover {
	background: var(--popup-cancel-bg-hover);
}

#skin_switcher li.active {
	border-left-color: var(--popup-ok-bg);
	font-weight: bold;
}

#skin_switcher li.active .ss-check {
	visibility: visible;
}

#skin_switcher .ss-check {
	margin-left: auto;
	color: var(--popup-ok-bg);
	font-weight: bold;
	visibility: hidden;
}

#skin_switcher .ss-sw {
	display: inline-flex;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--popup-border);
	flex: 0 0 auto;
}

#skin_switcher .ss-sw i {
	display: block;
	width: 12px;
	height: 18px;
}

#skin_switcher .ss-name {
	color: var(--popup-fg);
}

#skin_switcher li.ss-reset {
	margin-top: 4px;
	border-top: 1px solid var(--popup-title-border);
	color: var(--popup-cancel-fg);
	font-style: italic;
}

/* przelacznik skorek: na telefonie nie moze uciekac poza ekran -> pelna szerokosc */
@media (max-width:600px){
	#skin_switcher{ left:8px; right:8px; top:52px; width:auto; max-width:none; }
}

/* =====================================================================
   Przelacznik FIRM (multicomp) - ladny popup w stylu skins (#skin_switcher).
   Nadpisuje plaski dropdown ze skorki (div.companies). Dziala na hover (desktop)
   oraz po dodaniu klasy .open (tap na mobile - JS w header.tpl).
   ===================================================================== */
/* przelacznik firmy podswietla sie jak ikona skorki - ale .companies to <li> BEZ <a>,
   wiec regula `li > a:hover` go nie lapie; celujemy bezposrednio w li.
   DESKTOP: ikony belki podswietlaja sie SAMYM kolorem (#fff), bez tla/ramki -> tu tak samo
   (tylko rozjasnienie tekstu na hover/.open). Tlo "pudelko" jest tylko na mobile (nizej). */
#head li.companies.has-switch{ cursor:pointer; }
#head li.companies.has-switch:hover,
#head li.companies.has-switch.open{ color:#fff; }

#head li.companies div.companies{
	position:absolute; top:calc(100% + 6px); left:auto; right:0;
	min-width:220px; max-width:280px; padding:6px;
	/* belka #head jest ciemna w KAZDEJ skorce -> ciemny fallback (nie bialy),
	   gdy skorka nie definiuje --popup-* dla dropdownu firm (default/jasna/morska) */
	background:var(--popup-bg,#2a2f37); color:var(--popup-fg,#e6e9ec);
	border:1px solid var(--popup-border,#3a434f); border-radius:var(--popup-radius,8px);
	box-shadow:var(--popup-shadow, 0 12px 40px rgba(0,0,0,.35)); z-index:100000;
}
/* otwieramy WYLACZNIE klikiem (klasa .open) - hover ma martwa strefe (6px przerwy)
   i popup znikal przy przejsciu kursora na liste; klik go pinuje */
#head li.companies:hover div.companies{ display:none; }
#head li.companies.open div.companies{ display:block; }
#head li.companies div.companies ul{ list-style:none; margin:0; padding:0; }
#head li.companies div.companies li{ padding:0; color:inherit; white-space:nowrap; }
#head li.companies div.companies li a{
	display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px;
	color:var(--popup-fg,#e6e9ec); text-decoration:none; font-weight:600;
	font-family:inherit; font-size:14px; cursor:pointer; transition:background .12s, color .12s;
}
/* wyrazne podswietlenie calego wiersza akcentem (niebieskie tlo + jasny tekst) -
   #head>ul>li a:hover ze skorki nadpisywaloby sam kolor, wiec wymuszamy oba */
#head li.companies div.companies li a:hover,
#head li.companies div.companies li a:focus{
	background:var(--popup-ok-bg,#2A9FFF); color:var(--popup-ok-fg,#fff);
}
@media (max-width:600px){
	/* na telefonie: arkusz pelnej szerokosci pod belka (nie ucieka poza ekran) */
	#head li.companies div.companies{ position:fixed; top:52px; left:8px; right:8px; min-width:0; max-width:none; }
}

/* =====================================================================
   RWD: KALENDARZ. Telefon (<=600) = AGENDA dnia (getdata.php?view=agenda,
   tpl/calendar_agenda.tpl); tablet (601-1024) = matryca tygodnia z poziomym
   przewijaniem. Pasek mobilny .cal-mnav steruje agendą (calendar.js).
   ===================================================================== */
.cal-mnav{ display:none; }

/* Zaslepka #grid na czas przelaczania widoku przy zmianie rozdzielczosci (debounce+AJAX):
   stala wysokosc trzyma layout (bez skoku/migania), wirujaca ikona = "trwa odswiezanie".
   Poza @media -> dziala w obie strony progu 600px. Animacja ms-loader-spin z ms-loader.css. */
.cal-loading-panel{ min-height:500px; display:flex; align-items:center; justify-content:center; }
.cal-loading-spin{ display:block; width:42px; height:42px; border:4px solid var(--pl-line,#e2e4e8);
	border-top-color:var(--pl-accent-d,#1373c4); border-radius:50%;
	-webkit-animation:ms-loader-spin .8s linear infinite; animation:ms-loader-spin .8s linear infinite; }

/* Plakietki na mapie (markery zlecen/serwisantow/tras): wspolny miekki cien
   (kolory/zaokraglenia pozostaja per skorka). app.css laduje sie przed skorka,
   ale skorki nie deklaruja box-shadow na tych klasach, wiec ten cien obowiazuje. */
.order-tag, .service-tag, .route-tag{ box-shadow:0 2px 6px rgba(20,30,50,.28); }

/* Matryca kalendarza (serwisanci x godziny) bywa bardzo szeroka. #grid MUSI scrollowac
   ja w sobie ZAWSZE (nie tylko <=1024) - inaczej szeroka tabela rozpycha strone, a na
   iPadzie layout-viewport rosnie ponad 1024px i WYLACZA wszystkie reguly RWD (<=1024),
   przez co m.in. dni przestaja sie zawijac. overflow-x:auto trzyma #grid w szerokosci
   rodzica i scrolluje tabele w srodku, wiec viewport nie puchnie. */
.calendars #grid{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; contain:inline-size; }
@media (min-width:601px) and (max-width:1024px){
	.calendars #grid table.calendar{ min-width:760px; }
}
/* Naglowki matrycy kalendarza (data + nazwa dnia / serwisant): nazwy to POJEDYNCZE
   slowa ("Poniedzialek", "Wisniewski") - sama white-space:normal nie zawija (brak
   spacji), a skorka daje nowrap -> w waskiej kolumnie tekst wychodzi poza komorke
   (zglaszane na starszym iPadzie). Wymuszamy zawijanie + lamanie dlugich slow.
   BEZWARUNKOWO (nie tylko <=1024), bo na iPadzie szeroka matryca potrafi rozdac
   layout-viewport > 1024 i wylaczyc reguly mobilne - to lamanie ma dzialac zawsze. */
.calendars table.calendar tr.grid_title td{
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Telefon PIONOWO: przelacznik widoku ukryty - zawsze agenda 1-dniowa. Pelny kalendarz
   (dzien/pracownik/mapa) mozna wlaczyc dopiero w POZIOMIE (patrz nizej + calMobileView() w JS). */
@media (max-width:600px) and (orientation:portrait){
	#client_calendar_type{ display:none !important; }
}

/* Agenda dziala w DWOCH sytuacjach (lista @media = OR):
   - telefon pionowo (max-width:600) -> 1 dzien (1 kolumna),
   - telefon poziomo (orientation:landscape + niska wysokosc) -> 3 dni obok siebie.
   Niska wysokosc (max-height:500) odrozni telefon-landscape od tabletu (iPad landscape
   ma wysokosc 768+), wiec na tablecie zostaje matryca tygodnia. */
@media (max-width:600px), (orientation:landscape) and (max-height:500px){
	/* Przelacznik Agenda / pelny kalendarz jest dostepny TYLKO w poziomie (telefon landscape).
	   W PIONIE switcher jest ukryty i zawsze wymuszamy agende (regula ponizej). PELNY KALENDARZ
	   (html.cal-mfull): matryca/lista/mapa z paginacja tygodnia, bez paska agendy. Mape (.calendar_map)
	   steruje JS. „Pokaz kalendarze" zbedne. */
	#client_all{ display:none !important; }
	#client_calendar_type a.calview.calview-agenda{ display:inline-flex; }
	html:not(.cal-mfull) .calendars .cal-nav{ display:none !important; }
	html:not(.cal-mfull) .cal-mnav{ display:flex; align-items:center; gap:8px; padding:8px 4px; }
	html.cal-mfull .cal-mnav{ display:none !important; }
	.cal-mnav-btn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center;
		border:1px solid var(--pl-wkbd,#cfe6ff); background:var(--pl-wkbg,#eef7ff); color:var(--pl-accent-d,#1373c4); border-radius:10px;
		font-size:22px; font-weight:800; text-decoration:none; }
	.cal-mnav-today{ flex:1 1 auto; text-align:center; height:40px; line-height:40px; border:1px solid var(--pl-line,#e2e4e8);
		border-radius:10px; color:var(--pl-fg,#3f4750); font-weight:700; text-decoration:none; }

	.cal-agenda{ padding:0 2px 14px; }
	/* Kolumny dni: 1 dziecko (pionowo) = pelna szerokosc; 3 dzieci (poziomo) dziela
	   szerokosc rowno. min-width:0 pozwala kolumnom sie kurczyc (dlugie nazwy zawijaja). */
	.cal-ag-cols{ display:flex; gap:10px; align-items:stretch; }
	.cal-ag-col{ flex:1 1 0; min-width:0; }
	/* lekka pionowa kreska oddzielajaca dni (tylko widok 3-dniowy/poziomy) */
	.cal-agenda-multi .cal-ag-col + .cal-ag-col{ border-left:1px solid var(--pl-line,#e2e4e8); padding-left:10px; }
	.cal-ag-daybar{ text-align:center; font-weight:800; color:var(--pl-ink,#222a31); padding:4px 0 10px; }
	.cal-ag-daybar small{ display:block; font-weight:600; color:var(--pl-muted,#6b7682); font-size:11px; }
	.cal-ag-daybar.today{ color:var(--pl-accent-d,#1373c4); }
	/* pasek 7 dni (tydzien) - wybor dnia */
	.cal-ag-strip{ display:flex; gap:5px; padding:6px 2px 10px; }
	.cal-ag-day{ flex:1 1 0; min-width:0; text-align:center; padding:6px 0 5px; border:1px solid var(--pl-line,#e2e4e8);
		border-radius:10px; background:var(--pl-soft,#f2f6fb); color:var(--pl-fg,#3f4750); text-decoration:none;
		display:flex; flex-direction:column; align-items:center; }
	.cal-ag-day .dw{ font-size:10px; text-transform:uppercase; font-weight:700; color:var(--pl-muted,#6b7682); }
	.cal-ag-day b{ font-size:15px; color:var(--pl-ink,#222a31); line-height:1.1; }
	.cal-ag-day.wknd .dw{ color:#c0392b; }
	.cal-ag-day.today{ border-color:var(--pl-wkbd,#cfe6ff); }
	.cal-ag-day.sel{ background:var(--menu-accent,#2A9FFF); border-color:var(--menu-accent,#2A9FFF); }
	.cal-ag-day.sel .dw, .cal-ag-day.sel b{ color:#fff; }
	/* licznik wizyt na dany dzien (kropka + liczba) */
	.cal-ag-dcnt{ margin-top:4px; height:15px; min-width:16px; padding:0 4px; border-radius:8px; font-size:9px; font-weight:800;
		display:inline-flex; align-items:center; justify-content:center; background:var(--menu-accent,#2A9FFF); color:#fff; }
	.cal-ag-dcnt:not(.has){ width:6px; min-width:6px; height:6px; padding:0; margin-top:7px; background:var(--pl-line,#cfd8e1); }
	.cal-ag-day.sel .cal-ag-dcnt.has{ background:#fff; color:var(--pl-accent-d,#1373c4); }
	.cal-ag-day.sel .cal-ag-dcnt:not(.has){ background:rgba(255,255,255,.6); }
	.cal-ag-group{ margin:0 0 10px; }
	.cal-ag-head{ display:flex; align-items:center; gap:8px; background:#1c8444; color:#fff; padding:7px 12px;
		border-radius:8px; font-weight:700; font-size:12.5px; text-shadow:0 1px 0 rgba(0,0,0,.2); }
	.cal-ag-head .cal-ag-cnt{ margin-left:auto; background:rgba(255,255,255,.25); border-radius:10px; padding:1px 8px; font-size:11px; }
	.cal-ag-slot{ display:flex; gap:10px; padding:8px 2px; border-bottom:1px solid var(--pl-line2,#eef1f4); cursor:pointer; }
	.cal-ag-t{ flex:0 0 56px; font-weight:800; color:var(--pl-accent-d,#1373c4); font-size:12px; padding-top:2px; }
	.cal-ag-ev{ flex:1 1 auto; background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid #6366f1;
		border-radius:10px; padding:9px 11px; }
	.cal-ag-ev.wyk{ border-left-color:#16a34a; }
	.cal-ag-ev.zaw{ border-left-color:#d97706; }
	.cal-ag-ev.pre{ border-left-color:#0891b2; }
	.cal-ag-ev.nwy{ border-left-color:#dc2626; }
	.cal-ag-ev.free{ border-left-color:#9aa3ad; background:var(--pl-soft,#fcfdfe); }
	.cal-ag-c{ font-weight:700; color:var(--pl-ink,#222a31); font-size:13px; }
	/* ikona stanu zlecenia w slocie (jak w matrycy) - wyrownana do pierwszej linii nazwy */
	.cal-ag-ev:not(.free) .cal-ag-c{ display:flex; align-items:flex-start; gap:6px; }
	.cal-ag-c .cal-ag-ico{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; }
	.cal-ag-a{ color:var(--pl-muted,#6b7682); font-size:11.5px; margin-top:2px; }
	/* telefon klienta - click-to-call */
	.cal-ag-tel{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-weight:700; font-size:12.5px;
		color:var(--pl-accent-d,#1373c4); text-decoration:none; }
	.cal-ag-tel .appico{ width:15px; height:15px; flex:0 0 auto; }
	/* "Wolne / urlop" z ikona */
	.cal-ag-ev.free .cal-ag-c{ display:flex; align-items:center; gap:7px; color:var(--pl-fg,#3f4750); }
	.cal-ag-ev.free .cal-ag-c .appico{ width:16px; height:16px; flex:0 0 auto; color:#9aa3ad; }
	.cal-ag-p{ margin-top:7px; display:flex; gap:5px; flex-wrap:wrap; }
	.cal-ag-empty{ color:var(--pl-muted,#6b7682); text-align:center; padding:24px 0; }
}

/* Telefon POZIOMO (3 dni obok siebie): malo miejsca w pionie + waskie kolumny.
   Kompaktujemy pasek dni, naglowki i sloty, zeby zmiescic 3 dni czytelnie. */
@media (orientation:landscape) and (max-height:500px){
	.cal-ag-strip{ padding:4px 2px 8px; gap:4px; }
	.cal-ag-day{ padding:3px 0; }
	.cal-ag-day b{ font-size:13px; }
	.cal-ag-daybar{ padding:2px 0 8px; font-size:13px; }
	.cal-ag-daybar small{ font-size:10px; }
	.cal-ag-head{ padding:5px 9px; font-size:11.5px; }
	.cal-ag-slot{ gap:7px; padding:6px 2px; }
	.cal-ag-t{ flex:0 0 46px; font-size:11px; }
	.cal-ag-ev{ padding:7px 9px; }
	.cal-ag-c{ font-size:12px; }
	.cal-ag-a{ font-size:10.5px; }
	.cal-ag-tel{ font-size:11.5px; }
}

/* =====================================================================
   RWD: na telefonie OFERTY i SPRZET sa tylko do PODGLADU. Ich formularzy nie
   robimy responsywnych, wiec chowamy akcje otwierajace formularz (zostaje lista).
   (Sprzet klienta jest tez ukryty przez .tabs-box display:none w dialogach.)
   ===================================================================== */
@media (max-width:600px){
	#ofe_list table.grid td.c-actions{ display:none !important; }   /* oferty: lista-podglad */
	.ofe-add{ display:none !important; }                            /* "Nowa oferta" ukryte */
	#order_form #gear_edit, #order_form #gear_add{ display:none !important; }  /* sprzet: bez edycji/dodawania */
}

/* =====================================================================
   RWD: RAPORTY na telefonie (<=600) - tabele .raport_grid -> KARTY.
   Etykiety pol auto-kopiowane z naglowka tabeli przez raportAutoLabel()
   (raports.js). Uklad "Etykieta .... wartosc" (kompakt dla tabel statystyk).
   ===================================================================== */
/* ANTY-ROZDYMANIE: szerokie tabele (raporty, listy ms, matryca kalendarza) maja duzy
   min-content (nowrap), ktory na iPadzie/telefonie rozdyma layout-viewport ponad
   breakpoint i wylacza reguly RWD (karty). `contain:inline-size` IZOLUJE szerokosc
   kontenera od jego tresci - tabela nie propaguje min-content w gore, viewport zostaje
   przy szerokosci ekranu. `overflow-x:auto` daje tabeli lokalny scroll (desktop/tablet).
   Bezpieczne dla desktopu (listy i tak mieszcza sie na 100%). */
.raport_grid,
[data-ms-grid]{ overflow-x:auto; -webkit-overflow-scrolling:touch; contain:inline-size; }

/* Szerokie tabele list (.grid) renderowane PO STRONIE SERWERA do kontenerow #grid_*
   (Ustawienia: Szablony 15 kolumn, Uzytkownicy, Serwisanci, Grupy, Znaczniki, Rodzaje,
   Typy, VoIP, Backup) potrafia byc szersze niz okno i rozpychac strone ponad 100%.
   Kontener bezposrednio zawierajacy tabele dostaje lokalny scroll poziomy zamiast
   rozpychac uklad. (:has wspierane; listy-karty maja kontenery #..._list, nie #grid_*). */
div[id^="grid_"]:has(> table.grid){ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; contain:inline-size; }

@media (max-width:600px){
	.raport_grid table.grid,
	.raport_grid table.grid tbody,
	.raport_grid table.grid tr,
	.raport_grid table.grid td{ display:block; width:auto !important; }
	.raport_grid table.grid{ border-spacing:0; }
	.raport_grid table.grid tr.grid_title,
	.raport_grid table.grid thead{ display:none; }
	.raport_grid table.grid tr:not(.grid_title){
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 10px; padding:6px 12px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	.raport_grid table.grid td{
		border:0 !important; border-bottom:1px solid var(--pl-line2,#eef1f4) !important;
		background:transparent !important; padding:6px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important;
		display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--pl-ink,#222a31);
	}
	.raport_grid table.grid tr:not(.grid_title) td:last-child{ border-bottom:0 !important; }
	.raport_grid table.grid td[data-label]::before{
		content:attr(data-label); flex:0 0 auto; margin-right:auto; color:var(--pl-muted,#6b7682);
		font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.3px;
	}
	.raport_grid table.grid td:empty{ display:none; }
}

/* =====================================================================
   RWD: TABS z tabelami -> KARTY na telefonie (<=600).
   Dotyczy zakladek dzialajacych jak kolejne raporty: MAGAZYN (Dokumenty,
   Zamowienia, Magazyny, Raporty wewnetrzne), Dokumentacja itp. Tabele sa
   wstrzykiwane przez JS (readTable/runRaport) do kontenerow <div class="grid">
   BEZ atrybutu data-ms-grid. Listy ms-list ([data-ms-grid]) maja wlasne bloki
   kart i sa tu WYKLUCZONE. Etykiety pol kopiowane z naglowka tabeli
   (thead / tr.grid_title) przez msGridAutoLabel() w libs/ms_list.js.
   ===================================================================== */
@media (max-width:600px){
	div.grid:not([data-ms-grid]) .grid_scroll{ overflow:visible; max-height:none; }
	div.grid:not([data-ms-grid]) table.grid,
	div.grid:not([data-ms-grid]) table.grid thead,
	div.grid:not([data-ms-grid]) table.grid tbody,
	div.grid:not([data-ms-grid]) table.grid tr,
	div.grid:not([data-ms-grid]) table.grid td{ display:block; width:auto !important; }
	div.grid:not([data-ms-grid]) table.grid{ border-spacing:0; }
	div.grid:not([data-ms-grid]) table.grid thead,
	div.grid:not([data-ms-grid]) table.grid tr.grid_title{ display:none; }
	div.grid:not([data-ms-grid]) table.grid tbody tr,
	div.grid:not([data-ms-grid]) table.grid tr:not(.grid_title){
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 10px; padding:6px 12px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	div.grid:not([data-ms-grid]) table.grid td{
		border:0 !important; border-bottom:1px solid var(--pl-line2,#eef1f4) !important;
		background:transparent !important; padding:6px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important;
		display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--pl-ink,#222a31);
	}
	div.grid:not([data-ms-grid]) table.grid tbody tr td:last-child,
	div.grid:not([data-ms-grid]) table.grid tr:not(.grid_title) td:last-child{ border-bottom:0 !important; }
	div.grid:not([data-ms-grid]) table.grid td[data-label]::before{
		content:attr(data-label); flex:0 0 auto; margin-right:auto; color:var(--pl-muted,#6b7682);
		font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.3px;
	}
	div.grid:not([data-ms-grid]) table.grid td:empty{ display:none; }
	/* komorka akcji (ikony edit/print/drukuj) - wyrownana do prawej */
	div.grid:not([data-ms-grid]) table.grid td[nowrap]{ justify-content:flex-end; gap:10px; }
}

/* =====================================================================
   RWD: pasek zakladek (#tabs .ui-tabs-nav) na telefonie/tablecie (<=1024).
   Zamiast lamania w kilka linii - poziomy przewijany pasek (jak material tabs).
   ===================================================================== */
@media (max-width:1024px){
	.ui-tabs .ui-tabs-nav{
		display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.ui-tabs .ui-tabs-nav::-webkit-scrollbar{ display:none; }
	.ui-tabs .ui-tabs-nav li{ flex:0 0 auto; float:none !important; }
	.ui-tabs .ui-tabs-nav li a{ white-space:nowrap; padding:8px 12px; }
}

/* === Drobne poprawki RWD (zlecenia / menu) na mobile i tablecie (<=1024) === */
@media (max-width:1024px){
	/* Okno ZLECENIA: przyciski Wyślij, Drukuj i "+" (nowe zlecenie) zbedne na telefonie/iPadzie */
	.order_form_dialog #button-send,
	.order_form_dialog #button-print,
	.order_form_dialog #button-add{ display:none !important; }
	/* Lista ZLECEN: dlugi e-mail nie wychodzi poza komorke/ekran */
	#orders_list table.grid td.tel{ overflow-wrap:anywhere; word-break:break-word; }
	#orders_list table.grid td.tel a{ display:inline-block; max-width:100%; overflow-wrap:anywhere; word-break:break-all; }
	/* nazwa widoku w belce oraz pozycje szuflady: zawsze 1 linia (bez zawijania) */
	#head h1 .h-view{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
	#menu ul li a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* =====================================================================
   ZNACZNIKI / TAGI - jednolity, nowoczesny wyglad
   (mini kulki w listach/kalendarzu, pigulki w filtrach i formularzach)
   ===================================================================== */

/* --- mini kulki (kolor klienta) w listach klientow/zlecen i kalendarzu --- */
div.tag {
	width: 16px !important;
	height: 16px !important;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .9) !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .25);
	display: inline-block !important;
	margin: 0 5px 0 0 !important;
	vertical-align: middle;
	position: relative;
	top: -1px;
	overflow: hidden;
	box-sizing: border-box;
}

/* --- pigulki w pasku filtrow: kolor klienta, bez widocznego checkboxa --- */
.filter_tag {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 24px;
	height: 22px !important;
	padding: 0 9px !important;
	margin: 2px !important;
	border-radius: 11px !important;
	border: 2px solid rgba(0, 0, 0, .18) !important;
	cursor: pointer;
	vertical-align: middle;
	box-sizing: border-box;
	opacity: .4;
	transition: opacity .12s, box-shadow .12s, border-color .12s;
}
.filter_tag input[type="checkbox"] { display: none !important; }
.filter_tag:hover { opacity: .75; }
.filter_tag:has(input:checked) {
	opacity: 1;
	border-color: rgba(0, 0, 0, .4) !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75), 0 1px 3px rgba(0, 0, 0, .25);
}

/* --- pigulki znacznikow w formularzach (klient / zlecenie) --- */
#client_form fieldset.tags, #order_form fieldset.tags { min-height: auto; border: 0; }
#client_form fieldset.tags label.tagpill,
#order_form fieldset.tags label.tagpill {
	--tag: #888;
	--tagfg: #fff;
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 5px 12px !important;
	margin: 4px 6px 4px 0 !important;
	border-radius: 16px !important;
	border: 1px solid rgba(127, 127, 127, .4);
	background: rgba(127, 127, 127, .06);
	cursor: pointer;
	line-height: 1.2;
	vertical-align: middle;
	transition: background .12s, border-color .12s;
}
#client_form fieldset.tags label.tagpill::before,
#order_form fieldset.tags label.tagpill::before {
	content: '';
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--tag);
	border: 1px solid rgba(0, 0, 0, .25);
	flex: 0 0 auto;
}
#client_form fieldset.tags label.tagpill input[type="checkbox"],
#order_form fieldset.tags label.tagpill input[type="checkbox"] { display: none !important; }
#client_form fieldset.tags label.tagpill font,
#order_form fieldset.tags label.tagpill font { color: inherit !important; font-weight: bold; }
#client_form fieldset.tags label.tagpill:has(input:checked),
#order_form fieldset.tags label.tagpill:has(input:checked) {
	background: var(--tag);
	border-color: var(--tag);
	color: var(--tagfg);
}
#client_form fieldset.tags label.tagpill:has(input:checked)::before,
#order_form fieldset.tags label.tagpill:has(input:checked)::before {
	background: #fff;
	border-color: rgba(255, 255, 255, .7);
}
#client_form fieldset.tags label.tagpill:has(input:checked) font,
#order_form fieldset.tags label.tagpill:has(input:checked) font { color: var(--tagfg) !important; }
/* trigger daty (np. Ecocomfort) wewnatrz pigulki - zachowany, wyrownany */
#client_form fieldset.tags label.tagpill img,
#order_form fieldset.tags label.tagpill img { vertical-align: middle; }

/* --- karty sekcji formularza klienta (spojnie ze zleceniem) --- */
#client_form fieldset:not(.tags),
#client_gear_form fieldset,
#order_gear_form fieldset,
#client_reminder_form fieldset {
	background: rgba(127, 127, 127, .045);
	border: 1px solid rgba(127, 127, 127, .25);
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* =====================================================================
   Powiadomienie o nowych wpisach w historii zmian (belka, przy wersji)
   ===================================================================== */
.ver-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border-radius: 11px;
	background: #e24b4a;
	color: #fff !important;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .03em;
	vertical-align: middle;
	text-decoration: none;
	animation: verpulse 1.8s ease-in-out infinite;
}
.ver-badge:hover { background: #c9302c; color: #fff !important; }
@keyframes verpulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, .55); }
	50% { box-shadow: 0 0 0 6px rgba(226, 75, 74, 0); }
}
/* Numer wersji + plakietka „Nowość" w jednej linii — bez sztywnych 200px,
   wyśrodkowanie przez transform (badge nie wpada pod numer wersji).
   Wyższa specyficzność (html ...) nadpisuje reguły skórek ładowane później. */
html #head #ver {
	width: auto;
	margin-left: 0;
	transform: translateX(-50%);
	white-space: nowrap;
}


/* ===================================================================
   Korekty ukladu okna zlecenia (v2) + dialog/zakladki globalnie
   =================================================================== */
/* akcje klienta (edycja/GPS) w naglowku sekcji KLIENT */
#order_form .sections .ord-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#order_form .ord-sec-act { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
#order_form .ord-sec-act a { display: inline-flex; align-items: center; line-height: 0; }
#order_form .ord-sec-act img, #order_form .ord-sec-act .appico { width: 16px; height: 16px; vertical-align: middle; }

/* WIZYTA dopasowana do tresci (koniec z pustym miejscem) + marginesy dookola paneli */
#order_form .sections { grid-template-columns: auto minmax(260px,1fr) auto minmax(260px,1fr); padding: 8px 12px 4px; box-sizing: border-box; max-width: 100%; }
#order_form .znaczniki-row { margin: 4px 12px 12px; }

/* PROPOZYCJA TERMINU: wypelnia kolumne i zawija sie (bez wychodzenia poza ekran) */
#order_form #order_plan_list { width: auto !important; max-width: 100%; max-height: 340px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(172px,1fr)); gap: 7px; padding: 2px; }
#order_form .order_plan { width: auto !important; float: none !important; margin: 0 !important; }

/* ===== Dialogi jQuery UI - spojny naglowek (globalnie, wszystkie okna) ===== */
.ui-dialog { border-radius: 10px; overflow: hidden; box-shadow: 0 14px 44px rgba(0,0,0,.28); }
/* color:inherit - skorki koloruja .ui-widget-header (np. jasna: biały tekst na fiolecie),
   a tlo paska nadpisujemy tu na neutralne -> bez inherit tytul bylby bialy na jasnym pasku */
.ui-dialog .ui-dialog-titlebar { background: rgba(127,127,127,.14); color: inherit; border: 0; border-bottom: 1px solid rgba(127,127,127,.25); border-radius: 0; padding: 9px 14px; font-size: 13px; }
.ui-dialog .ui-dialog-title { font-weight: 600; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid rgba(127,127,127,.2); margin-top: 0; }

/* ===== Blokada przewijania strony pod otwartym modalnym oknem dialogowym =====
   Klasa ms-dialog-open dokladana jest przez util.js, gdy widoczne jest jakiekolwiek
   modalne okno jQuery UI. overflow:hidden blokuje przewijanie tla, a
   overscroll-behavior:contain na tresci okna zatrzymuje "przebijanie" scrolla z okna
   na strone pod spodem (scroll chaining - widoczne zwlaszcza na mobile po dojechaniu
   do konca listy w oknie). scrollbar-gutter rezerwuje miejsce po znikajacym pasku
   przewijania - brak przeskoku ukladu na desktopie. */
html.ms-dialog-open, body.ms-dialog-open { overflow: hidden !important; }
html.ms-dialog-open { scrollbar-gutter: stable; }
.ui-dialog .ui-dialog-content { overscroll-behavior: contain; }

/* ===== Dialog "Zmień hasło" (#changepass_form) - prosty, 1 kolumna ===== */
#changepass_form .cp-form label { display: block; margin: 0 0 11px; font-size: 12px; font-weight: 600; }
#changepass_form .cp-form input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border-radius: 6px; }
#changepass_form .cp-msg { color: #c0392b; font-size: 12px; min-height: 16px; margin-top: 2px; }

/* ===== Mini-okno szybkiego dyzuru (#alarm_quick, calendar.js) - 1 kolumna jak "Zmien haslo" ===== */
#alarm_quick { font-size: 12px; }
#alarm_quick .alarm-quick-info { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
#alarm_quick label { display: block; margin: 0 0 11px; font-size: 12px; font-weight: 600; }
#alarm_quick input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border-radius: 6px; }

/* ===== Tokeny motywu UI (akcent skorki; nadpisywane w theme/skins/*.css) ===== */
:root { --ui-accent: #2A9FFF; --ui-accent-ink: #1373c4; } /* ink = czytelny wariant akcentu dla TEKSTU (>=4.5:1); skorki nadpisuja */

/* ===== Zakladki (hist_tabs i inne ui-tabs) - plaskie, aktywna z podkresleniem (globalnie) ===== */
.ui-tabs { padding: 0; border: 0; background: transparent; }
.ui-tabs .ui-tabs-nav { background: transparent; border: 0; border-bottom: 1px solid rgba(127,127,127,.3); border-radius: 0; padding: 0 4px; margin: 0 0 4px; }
.ui-tabs .ui-tabs-nav li { border: 0 !important; background: transparent !important; margin: 0 2px -1px 0 !important; border-radius: 0 !important; top: 0 !important; }
.ui-tabs .ui-tabs-nav li a { padding: 8px 14px; font-weight: 600; border: 0; border-bottom: 2px solid transparent; color: var(--ui-accent-ink, var(--ui-accent)) !important; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-active a { border-bottom-color: currentColor; }
/* panel zakladek: jQuery UI ma padding 1em 1.4em - gorny padding tworzyl
   zbedny odstep miedzy zakladkami a panelem (np. pasek filtrow Przypomnien).
   Zerujemy gore (separacje daje margines nav); boki/dol zostaja. */
.ui-tabs .ui-tabs-panel { padding-top: 0; }


/* Zgloszenie: select sprzetu wypelnia szerokosc panelu (miejsce na przyciski edycji/+) */
#order_form .sections #order_id_gear { width: calc(100% - 64px) !important; max-width: calc(100% - 64px); box-sizing: border-box; vertical-align: middle; }


/* WIZYTA: Data / Od / Do w jednym rzedzie (Do nie ucieka do drugiej linii) */
#order_form .dt-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: nowrap; }
#order_form .dt-row > label { float: none !important; margin: 0 !important; display: block; }


/* ZGLOSZENIE ~ szerokosc KLIENT, wiecej miejsca dla WIZYTA */
#order_form .sections { grid-template-columns: auto minmax(340px,0.7fr) minmax(320px,1fr) minmax(340px,1.4fr); }
/* WIZYTA: kontrolki rownej szerokosci (wyrownane do prawej krawedzi panelu) */
#order_form .sections #repair_kind_field,
#order_form .sections #priority_field,
#order_form .sections #order_state,
#order_form .sections #order_serwisantfield { width: 100% !important; box-sizing: border-box; }
/* SPRZET: select + przyciski edycji/+ w jednym rzedzie (przycisk + nie ucieka do drugiej linii) */
#order_form .gear-row { display: flex; align-items: center; gap: 4px; }
#order_form .gear-row > #order_id_gear { flex: 1 1 0; width: auto !important; min-width: 0; max-width: 100%; box-sizing: border-box; }


/* PROPOZYCJA TERMINU: wypelnia panel (rowna wysokosc z reszta), lista scrolluje wewnatrz */
#order_form .plan-panel { display: flex; flex-direction: column; }
#order_form .plan-panel #order_plan_list { flex: 1 1 0; min-height: 0; max-height: none; }
/* KLIENT: uwagi/tresc nie wychodza poza ramke */
#order_form #client_fieldset { overflow-wrap: break-word; word-break: break-word; }
#order_form #client_fieldset textarea, #order_form #client_infofield { width: 100% !important; box-sizing: border-box; max-width: 100%; }
/* data w znaczniku z czasem - mala czcionka */
#order_form .tagpill .tag-date { font-size: 9px; opacity: .7; margin-left: 2px; white-space: nowrap; }


/* KLIENT: tresc wypelnia karte; ikona edycji telefonu dociagnieta do prawej krawedzi */
#order_form #client_fieldset, #order_form #client_fieldset label { max-width: none !important; }
#order_form #client_fieldset .phone-row { width: 100%; }
#order_form #client_fieldset .phone-row #phone_edit { margin-left: auto; flex: 0 0 auto; }


/* ===== Przyciski dialogow jQuery UI - styl aplikacji (akcent dla Zapisz, stonowane Zamknij) ===== */
.ui-dialog .ui-dialog-buttonpane { padding: 8px 12px; }
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonpane .ui-button {
	font-family: inherit !important; font-size: 12px !important; font-weight: bold !important;
	min-width: 88px; padding: 7px 18px !important; margin: 0 0 0 8px !important;
	border-radius: 5px !important; border: 1px solid rgba(127,127,127,.4) !important; cursor: pointer;
	background: rgba(127,127,127,.08) !important; color: var(--ui-accent-ink, #1373c4) !important; text-shadow: none !important;
	transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text { padding: 0 !important; }
.ui-dialog .ui-dialog-buttonpane .ui-icon { display: none !important; }
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:hover { background: rgba(42,159,255,.12) !important; border-color: #2A9FFF !important; }
.ui-dialog .ui-dialog-buttonpane button[id^="save"],
.ui-dialog .ui-dialog-buttonpane button#button-save {
	background: #2A9FFF !important; border-color: #2A9FFF !important; color: #fff !important;
}
.ui-dialog .ui-dialog-buttonpane button[id^="save"]:hover,
.ui-dialog .ui-dialog-buttonpane button#button-save:hover { background: #1488ee !important; border-color: #1488ee !important; }


/* ===== Datepicker (jQuery UI) - styl aplikacji (globalnie, wszystkie okna) ===== */
.ui-datepicker { border-radius: 8px !important; padding: 6px !important; border: 1px solid rgba(127,127,127,.35) !important; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ui-datepicker .ui-datepicker-header { background: #2A9FFF !important; border: 0 !important; border-radius: 6px !important; color: #fff !important; }
.ui-datepicker .ui-datepicker-title { font-weight: bold; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; top: 3px; }
.ui-datepicker .ui-datepicker-calendar th { font-size: 11px; padding: 5px 4px; opacity: .75; }
.ui-datepicker .ui-datepicker-calendar td { padding: 1px; }
.ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span { border: 0 !important; background: transparent !important; color: inherit !important; text-align: center; border-radius: 5px; padding: 5px !important; }
.ui-datepicker .ui-datepicker-calendar td a:hover { background: rgba(42,159,255,.15) !important; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active { background: #2A9FFF !important; color: #fff !important; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight { box-shadow: inset 0 0 0 1px #2A9FFF; font-weight: bold; }


/* Datepicker: nawigacja (prev/next) - okragly, stonowany hover zamiast kwadratu jQuery UI */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
	border: 0 !important; background: transparent !important; border-radius: 6px !important; cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev-hover { top: 2px !important; left: 2px !important; }
.ui-datepicker .ui-datepicker-next-hover { top: 2px !important; right: 2px !important; }
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
	background: rgba(255,255,255,.28) !important;
}


/* data na znaczniku - czytelniejsza; na zaznaczonym (kolorowym) tle kolor kontrastowy --tagfg */
#order_form .tagpill .tag-date { opacity: .82; }
#order_form fieldset.tags label.tagpill:has(input:checked) .tag-date { color: var(--tagfg) !important; opacity: .95; }
#order_form fieldset.tags label.tagpill:has(input:checked) img.ui-datepicker-trigger,
#order_form fieldset.tags label.tagpill:has(input:checked) img.dp-ico { filter: brightness(0) invert(1); opacity: .85; }

/* ===== Okno przypomnienia (#reminder_form): panele jak w pozostalych oknach ===== */
#reminder_form .sections { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: stretch; overflow: visible !important; margin: 0; }
#reminder_form .sections > .section { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
#reminder_form .sections > .section > fieldset { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 8px 10px; box-sizing: border-box; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; background: rgba(127,127,127,.045); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#reminder_form .ord-sec-h { font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .6; border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px; }
#reminder_form .sections label { display: block; float: none !important; margin: 0 0 7px; max-width: none; }
#reminder_form .sections input:not([type="checkbox"]):not([type="hidden"]), #reminder_form .sections select, #reminder_form .sections textarea { display: block; width: 100%; box-sizing: border-box; margin: 3px 0 0; border: 1px solid #999; border-radius: 4px; padding: 6px 8px; }
#reminder_form .sections .frow2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#reminder_form .sections .frow2 > label { flex: 1 1 120px; min-width: 0; margin: 0 0 7px; }
#reminder_form .sections label:has(textarea) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#reminder_form .sections label:has(textarea) textarea { flex: 1 1 auto; min-height: 60px; resize: vertical; }
#reminder_form .rem-client { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
#reminder_form .rem-static { padding: 5px 2px; font-weight: bold; }
#reminder_form .rem-history { margin-top: 10px; border: 1px solid rgba(127,127,127,.35); border-radius: 6px; padding: 8px 10px; }
#reminder_form .rem-history .ord-sec-h { border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px; }

/* Wprowadzil / Modyfikowal w jednej linii gdy starczy szerokosci (nizsze panele) */
#order_form .im-row { display: flex; flex-wrap: wrap; gap: 8px; }
#order_form .im-row > label { flex: 1 1 120px; min-width: 0; margin: 0 !important; }
#order_form .im-row #order_insertfield, #order_form .im-row #order_modyffield { width: 100% !important; box-sizing: border-box; }

/* pusty stan historii przypomnien */
.rem-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 10px; color: rgba(127,127,127,.8); font-style: italic; font-size: 13px; }
.rem-empty svg { opacity: .5; }

/* paginacja: stan disabled (kazda skorka - przygaszenie + brak klikania) */
li.prev.disabled a, li.next.disabled a { opacity: .4 !important; pointer-events: none !important; cursor: default !important; }


/* =====================================================================
   Paski filtrow (toolbar wyszukiwania) - ulepszenia UX (theme/searchform.js):
   1) "floating label" - po wpisaniu wartosci pokazuje sie mini-etykieta nad
      kontrolka (placeholder / pierwsza opcja selecta); pusta kontrolka wyglada
      jak dotychczas (zwykly placeholder w srodku).
   2) Uklad flex: kontrolki i znaczniki zawijaja sie do kolejnych wierszy,
      a przyciski akcji (szukaj/dodaj/drukuj/excel) zostaja w prawym gornym
      rogu okna.
   Klasy .sbar / .sbar-main / .sbar-actions / .flab / .flab-t nadaje JS.
   ===================================================================== */

/* NOWY markup (div+flex): #..searchform.searchbar > [form] > .sbar-row.
   STARY markup (legacy): JS zamienia <table><td> na .sbar > .sbar-row.
   Oba korzystaja z tych samych klas .sbar-row / .sbar-main / .sbar-actions. */

/* legacy: tabela paska na cala szerokosc (przyciski do prawej krawedzi) */
table.sbar-host { width: 100% !important; }
/* form nie psuje ukladu flex - jego dzieci wchodza wprost do .searchbar */
.searchbar > form { display: contents; }

/* wewnetrzny wiersz flex: lewa czesc (kontrolki) + prawa (przyciski) */
.sbar-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	padding-top: 16px;   /* miejsce na floating label pierwszego wiersza */
	box-sizing: border-box;
}
/* lewa, elastyczna czesc - kontrolki i znaczniki zawijaja sie tutaj.
   flex-basis 0 (nie auto!) - inaczej max-content kontrolek zajmuje caly
   pierwszy wiersz i wypycha przyciski akcji do nowej linii (na dol). */
.sbar-main {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px 5px;       /* odstep w pionie - miejsce na floating label w kolejnych wierszach */
}
/* prawa, stala czesc - przyciski akcji przyklejone do prawej krawedzi, na gorze */
.sbar-actions {
	flex: 0 0 auto;
	margin-left: auto;
	align-self: flex-start;   /* na rowni z 1. wierszem kontrolek */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
}
/* przyciski akcji dopasowane wysokoscia do kontrolek - srodek ikon na rowni
   z 1. wierszem pol (a nie nizej przez wiekszy box 40px) */
.sbar-actions a.toolbtn,
.sbar-actions a.icolink {
	height: 28px;
	width: auto;
	min-width: 32px;
	margin: 0 1px;
}
.sbar-actions a.toolbtn .appico,
.sbar-actions a.icolink .appico { width: 22px; height: 22px; }
/* w pasku flex odstep pionowy kontrolek daje gap (skorki ustawiaja margin 6px) */
.sbar-main input.text,
.sbar-main select,
.sbar-main .flab > input.text,
.sbar-main .flab > select { margin-top: 0 !important; margin-bottom: 0 !important; }

/* MSDateRange (.ms-daterange) w pasku filtra: dopasuj wysokosc chipa/strzalek/„Teraz"
   do pozostalych inputow (~26px), zeby kontrolki nie wystawaly ponad reszte. */
.sbar-main .ms-daterange .msdr-chip,
.sbar-main .ms-daterange .msdr-steps,
.sbar-main .ms-daterange .msdr-now { height: 26px; box-sizing: border-box; }
.sbar-main .ms-daterange .msdr-steps button { height: 100%; }
.sbar-main .ms-daterange .msdr-chip { font-size: 13px; }

/* Chip MSDateRange w paskach filtrow ma ramke jak inputy/selecty aplikacji (#c9ced6) —
   tylko w skorkach jasnych (:not(.msdr-dark)); w ciemnej zostaje themed (--msdr-border
   z .msdr-dark). Focus i transition sa w komponencie (libs/msdaterange.css). */
.ms-daterange:not(.msdr-dark) { --msdr-border: #c9ced6; }

/* Magazyny — stare paski filtra (table) maja nizsze inputy (~23px) niz nowy .sbar-main;
   dopasuj wysokosc/font chipa, zeby nie wystawal. */
#document_searchform .ms-daterange .msdr-chip,
#orders_searchform .ms-daterange .msdr-chip,
[id^="raport-"] .ms-daterange .msdr-chip { height: 24px; box-sizing: border-box; font-size: 12px; }

/* Magazyny → Raporty: stare paski (inline w <table>) mialy mieszane marginesy/wysokosci,
   przez co kontrolki sie rozjezdzaly, a wysoki multi-select rozpychal wiersz. Ujednolicamy
   td jako flex wyrownany do gory (wysoki listbox wisi pod wierszem, reszta rowno na gorze). */
#raport-tabs form table td { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
#raport-tabs .text, #raport-tabs select, #raport-tabs .ms-daterange { margin: 0; }
/* multi-select magazynow: zwarty listbox w stylu pozostalych pol (zamiast 180x150 inline) */
#raport-tabs select.multi { height: 96px; width: 160px; border-radius: 5px; padding: 2px 3px; font-size: 12px; }

/* W skorkach jest agresywne "#order_form div{display:block}", ktore kasuje wewnetrzny
   uklad popupu MSDateRange (grid/flex/none) w formularzu zlecenia. Przywracamy wlasciwe
   display z wyzsza specyficznoscia (#order_form + klasa  >  #order_form div). */
#order_form .msdr-pop { display: none; }
#order_form .msdr-pop.open { display: block; }
#order_form .msdr-popbody { display: flex; }
#order_form .msdr-presets { display: flex; }
#order_form .msdr-calhead { display: flex; }
#order_form .msdr-grid { display: grid; }
#order_form .msdr-foot { display: flex; }
#order_form .msdr-mini { display: flex; }
#order_form .msdr-compact .msdr-popbody { display: block; }
#order_form .msdr-compact .msdr-presets { display: none; }
#order_form .msdr-compact .msdr-foot { display: none; }

/* To samo "#order_form div{display:block}" rozbija flexowy uklad uploadu plikow
   (dropzone + paski postepu) w zakladce Pliki zlecenia — wyglada inaczej niz u klienta.
   Przywracamy flex z wyzsza specyficznoscia (#order_form + klasa/id  >  #order_form div). */
#order_form .file-drop-inner { display: flex; }
#order_form #upload_progress { display: flex; }
#order_form .up-row { display: flex; }

/* MSDateRange jako pole w stosowym formularzu (label u gory, pole pod spodem) — np.
   #reminder_form: host blokowy (inaczej inline-flex laduje chip obok etykiety), a chip
   wygladem zblizony do <select>/<input> formularza: pelna szerokosc kolumny, ciemniejsza
   ramka, odstep od labela, strzalka przy prawej krawedzi. */
#reminder_form .msdr { display: block; }
#reminder_form .msdr-chip {
  width: 100%;
  height: 31px;              /* rowna z inputami/selectami dialogu (font 14 + padding 6/6 + border) */
  margin-top: 3px;            /* odstep od labela jak w select/input */
  border-color: #999;        /* ciemniejsza ramka jak input/select */
  border-radius: 4px;
  font-size: 14px;           /* rowny z inputami dialogu (bylo 11px -> rozjazd po ujednoliceniu fontu) */
  font-weight: normal;
}
/* focus (akcent skorki) jest w komponencie — tu tylko ciemniejsza ramka #999 jak inputy dialogu */
#reminder_form .msdr-car { margin-left: auto; }   /* strzalka dosunieta do prawej, jak w select */

/* grupa znacznikow - opcjonalny wrapper (zawsze zawija sie razem) */
.sbar-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* ikona rozdzielajaca grupy tagow (zlecenia / klient), zeby bylo widac czyje sa */
.sbar-tags-ico { display: inline-flex; align-items: center; opacity: 1; color: var(--menu-accent, #2A9FFF); }
.sbar-tags-ico .appico { width: 17px; height: 17px; }
.sbar-tags-ico:not(:first-child) { margin-left: 10px; }

/* --- floating label --- */
.flab { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.flab > .flab-t {
	position: absolute;
	left: 8px;
	bottom: 100%;          /* tuz nad polem (niezaleznie od wysokosci czcionki) */
	margin-bottom: 1px;    /* etykieta lekko dotyka linii kontrolki */
	max-width: calc(100% - 6px);
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: 7px;
	background: var(--flab-bg, var(--ui-accent, #2A9FFF));
	color: var(--flab-fg, #fff);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	opacity: 0;
	transform: translateY(5px);
	transition: opacity .12s ease, transform .12s ease;
	pointer-events: none;
	z-index: 3;
}
/* etykieta pojawia sie DOPIERO gdy kontrolka ma wartosc;
   pusta kontrolka (takze w fokusie) = etykieta zbedna (jest placeholder) */
.flab.filled > .flab-t { opacity: 1; transform: translateY(0); }

/* ============ LOGO APLIKACJI ============ */
/* miniatura obok nazwy w pasku narzedzi */
#head h1 { display: flex; align-items: center; gap: 8px; }
#head h1 .app-logo {
	height: 26px; width: 26px;
	flex: 0 0 auto; display: block;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* miniatura w oknie logowania */
div#loginBox header .login-logo-img { margin: 0 0 14px; text-align: center; line-height: 0; }
div#loginBox header .login-logo-img img {
	width: 68px; height: 68px;
	display: inline-block;
	border-radius: 16px;
	box-shadow: 0 8px 20px rgba(0,0,0,.20);
}

/* przelacznik skorek w oknie logowania */
#login_skins { margin: 20px 0 2px; text-align: center; }
#login_skins .ls-label {
	display: block; margin-bottom: 9px;
	font-size: 11px; letter-spacing: .4px;
	color: var(--login-muted, #94a3b8);
}
#login_skins .ls-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#login_skins .ls-skin {
	display: flex; align-items: center; gap: 8px;
	width: 100%; box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--login-input-border, #d8e0ea);
	border-radius: 10px;
	background: var(--login-input-bg, #ffffff);
	color: var(--login-fg, #334155);
	font-family: inherit; font-size: 12px;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
}
#login_skins .ls-skin:hover { border-color: var(--login-accent, #2A9FFF); }
#login_skins .ls-skin.active {
	border-color: var(--login-accent, #2A9FFF);
	box-shadow: 0 0 0 2px var(--login-accent-ring, rgba(42,159,255,.22));
}
#login_skins .ls-sw { display: inline-flex; border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
#login_skins .ls-sw i { width: 9px; height: 15px; display: block; }
#login_skins .ls-name { line-height: 1; }


/* =====================================================================
   PULPIT (dashboard startowy) — komponent wspolny; kolory na zmiennych.
   Skorka ciemna nadpisuje --pl-* w theme/skins/dark.css.
   ===================================================================== */
.pl-wrap{
	--pl-card:#fff; --pl-line:#e2e4e8; --pl-line2:#eef1f4;
	--pl-ink:#222a31; --pl-fg:#3f4750; --pl-muted:#6b7682; --pl-muted2:#69727e; /* a11y: #8a93a0 dawal 3.11:1; #69727e = ~4.9:1 na bialej karcie */
	--pl-accent:#2A9FFF; --pl-accent-d:#1373c4;
	--pl-soft:#fcfdfe; --pl-wkbg:#eef7ff; --pl-wkbd:#cfe6ff;
	max-width:1320px; margin:0 auto; padding:14px 18px 28px; font-size:12px; color:var(--pl-fg);
}
.pl-wrap h2{ margin:0; font-size:18px; font-weight:800; color:var(--pl-ink); }
.pl-pagehead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 2px 14px; border-bottom:1px solid var(--pl-line); margin-bottom:16px; }
.pl-psub{ font-size:12px; color:var(--pl-muted2); margin-top:3px; }
.pl-wk{ display:inline-flex; align-items:center; gap:8px; background:var(--pl-wkbg); border:1px solid var(--pl-wkbd); color:var(--pl-accent-d); border-radius:8px; padding:8px 13px; font-weight:700; white-space:nowrap; }
.pl-wk .appico{ width:16px; height:16px; color:var(--pl-accent); }
.pl-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.pl-kpi{ background:var(--pl-card); border:1px solid var(--pl-line); border-radius:8px; padding:14px 15px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.pl-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.pl-lab{ font-size:11px; color:var(--pl-muted); text-transform:uppercase; letter-spacing:.5px; font-weight:700; line-height:1.35; }
.pl-chip{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pl-chip .appico{ width:21px; height:21px; }
.pl-kpi.c-blue .pl-chip{ background:#e9f3ff; color:#1373c4; }
.pl-kpi.c-green .pl-chip{ background:#e7f7ee; color:#16a34a; }
.pl-kpi.c-amber .pl-chip{ background:#fdf2dc; color:#c47f0a; }
.pl-kpi.c-teal .pl-chip{ background:#e2f5f2; color:#0d9488; }
.pl-num{ font-size:31px; font-weight:800; color:var(--pl-ink); line-height:1; margin:12px 0 5px; }
.pl-sub{ font-size:11px; color:var(--pl-muted2); line-height:1.4; }
.pl-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }
.pl-panel{ background:var(--pl-card); border:1px solid var(--pl-line); border-radius:8px; overflow:hidden; margin-bottom:16px; }
.pl-panel>h3{ margin:0; padding:10px 14px; font-size:11px; font-weight:700; color:var(--pl-muted); text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--pl-line); display:flex; align-items:center; gap:8px; }
.pl-panel>h3 .appico{ width:15px; height:15px; color:#9aa3ad; }
.pl-cnt{ margin-left:auto; color:var(--pl-muted2); font-weight:700; letter-spacing:0; text-transform:none; font-size:11px; }
.pl-b{ padding:14px; }
.pl-empty{ color:var(--pl-muted2); font-size:12px; padding:6px 2px; }
.pl-donut-wrap{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.pl-donut{ position:relative; width:172px; height:172px; flex:0 0 auto; }
.pl-ctr{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pl-ctr .pl-t{ font-size:29px; font-weight:800; color:var(--pl-ink); line-height:1; }
.pl-ctr .pl-l{ font-size:11px; color:var(--pl-muted2); }
.pl-dleg{ flex:1; min-width:190px; display:flex; flex-direction:column; gap:9px; }
.pl-li{ display:flex; align-items:center; gap:9px; font-size:12px; }
.pl-sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.pl-nm{ color:var(--pl-fg); font-weight:600; }
.pl-vl{ margin-left:auto; font-weight:800; color:var(--pl-ink); }
.pl-pc{ color:var(--pl-muted2); width:40px; text-align:right; font-size:11px; }
.pl-paylist{ display:flex; flex-direction:column; gap:10px; }
.pl-payfoot{ display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--pl-line2); font-size:12px; font-weight:700; color:var(--pl-accent-d); text-decoration:none; }
.pl-payfoot:hover{ text-decoration:underline; }
.pl-payfoot .appico{ width:15px; height:15px; }
.pl-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.pl-day{ border:1px solid var(--pl-line); border-radius:7px; text-align:center; padding:8px 4px; background:var(--pl-soft); }
.pl-dn{ font-size:10px; color:var(--pl-muted); text-transform:uppercase; font-weight:700; }
.pl-dd{ font-size:10px; color:#aab2bb; margin:1px 0 6px; }
.pl-cc{ font-size:20px; font-weight:800; color:var(--pl-ink); }
.pl-cl{ font-size:9px; color:#aab2bb; }
.pl-day.today{ background:var(--pl-wkbg); border-color:var(--pl-wkbd); }
.pl-day.today .pl-cc{ color:var(--pl-accent-d); }
.pl-day.today .pl-dd{ color:var(--pl-accent); }
.pl-day.wknd .pl-cc{ color:#9aa3ad; }
.pl-al{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--pl-line2); }
.pl-al:last-child{ border-bottom:0; }
.pl-pill{ display:inline-block; flex:0 0 auto; align-self:flex-start; font-size:9px; font-weight:800; color:#fff; border-radius:5px; padding:3px 7px; letter-spacing:.3px; vertical-align:middle; }
.pl-pill.aw{ background:#e5484d; } .pl-pill.wy{ background:#f59e0b; } .pl-pill.no{ background:#2d8659; } .pl-pill.tel{ background:#3b82f6; }

/* Status cyklu przypomnien cyklicznych (lista "Cykliczne"): aktywne / do wyslania / zakonczone. */
.rem-badge{ display:inline-block; font-size:10px; font-weight:800; border-radius:5px; padding:3px 8px; letter-spacing:.2px; white-space:nowrap; }
.rem-badge--active{ background:rgba(45,134,89,.14); color:#2d8659; box-shadow:inset 0 0 0 1px rgba(45,134,89,.35); }
.rem-badge--due{ background:rgba(245,158,11,.16); color:#a86500; box-shadow:inset 0 0 0 1px rgba(245,158,11,.45); }
.rem-badge--ended{ background:rgba(127,127,127,.14); color:#6b7280; box-shadow:inset 0 0 0 1px rgba(127,127,127,.35); }

/* Wybor priorytetu plakietkami w formularzu zlecenia: niezaznaczone wyblakle,
   zaznaczona pelny kolor + obwodka. Kolory te same co .pl-pill aw|wy|no|tel. */
.pl-pill-select{ display:flex; flex-wrap:wrap; gap:6px; padding:3px 0; }
.pl-pill-select .pl-pill{ cursor:pointer; font-size:11px; padding:5px 12px; opacity:.38; transition:opacity .15s ease, box-shadow .15s ease; }
.pl-pill-select .pl-pill:hover{ opacity:.7; }
.pl-pill-select .pl-pill.sel{ opacity:1; box-shadow:0 0 0 2px rgba(0,0,0,.18); }
.pl-pill-select.disabled .pl-pill{ cursor:default; }
.pl-pill-select.disabled .pl-pill:not(.sel){ opacity:.28; }
.pl-pill-select.disabled .pl-pill:hover{ opacity:.28; }
.pl-pill-select.disabled .pl-pill.sel{ opacity:1; }

/* kompaktowa plakietka w siatce kalendarza/list (waska kolumna, mniej miejsca) */
table.grid .pl-pill{ font-size:8px; padding:1px 4px; letter-spacing:0; }

/* w siatce kalendarza plakietka priorytetu (AWARIA/WYSOKI/TELEFON) stoi obok
   znacznikow stanu i kulek-tagow (16px) - wyrownaj jej wysokosc do tych ikon,
   wysrodkuj pionowo, zeby nie byla nizsza niz markery. */
table.grid.calendar .pl-pill{
	display:inline-flex; align-items:center; box-sizing:border-box;
	height:16px; line-height:1; vertical-align:middle;
	font-size:9px; padding:0 6px; letter-spacing:.2px;
}

/* Rowny podzial kolumn w siatce kalendarza (wspolne dla obu widokow).
   table-layout:fixed wymusza rowny podzial kolumn bez zadanej szerokosci,
   kolumna info ma stale 80px -> reszta dzielona po rowno. */
table.cal-fixed{ table-layout:fixed; }
table.cal-fixed col.cal-col-info{ width:54px; }   /* waska kolumna czasu (stos godzin) - bez marnowania miejsca */
/* Przedzial godzinowy w kolumnie info: start pogrubiony NAD przygaszonym koncem (2 linie),
   w OBU widokach (komfort i kompakt). Pelny opis ($period.info) chowamy - zostaje w DOM
   (display:none, poza drzewem a11y). Kompakt nizej tylko zmniejsza font i zweza kolumne. */
td.cal-per .cal-per-full{ display:none; }
td.cal-per .cal-per-split{ display:flex; flex-direction:column; align-items:center; line-height:1.2; font-variant-numeric:tabular-nums; }
td.cal-per .cal-per-split .cpf{ font-weight:600; font-size:13px; }
td.cal-per .cal-per-split .cpt{ opacity:.58; font-size:12px; }
/* Matryca kalendarza: tresc wizyt ZAWIJA sie w waskich kolumnach. Skorka DEFAULT ma
   tr.grid td{white-space:nowrap} (inne skorki nie) -> wizyty wychodzily poza komorke
   i nakladaly sie na sasiednia kolumne. Wyzsza specyficznosc bije regule skorki. */
table.grid.calendar td{ white-space:normal; overflow-wrap:break-word; }
/* Widok "wg dni": niedziela (ostatnia kolumna) wezsza niz pozostale dni. */
table.cal-byday col.cal-col-sun{ width:8%; }

/* =====================================================================
   Tlo siatki kalendarza (widoki "wg dni" i "wg pracownika") - spokojne i
   czytelne, zeby biale karty `.cal-ev` sie wybijaly (zamiast jaskrawej zoltej
   zebry). ZAKRES: tylko `table.grid.calendar` - listy klientow/zlecen zostaja
   bez zmian. Kolory przez zmienne: jasne domyslne obsluguja default/jasna/morska;
   dark nadpisuje w theme/skins/dark.css. Wyzsza specyficznosc bije skorkowe
   `tr.grid td{background:...}` (skorka laduje po app.css, ale te selektory sa
   bardziej szczegolowe). */
table.grid.calendar{
	--calbg-odd:   #e9eef4;   /* wiersz nieparzysty (przedzial) - byl jaskrawy #ffffb0 */
	--calbg-even:  #f6f8fb;   /* wiersz parzysty */
	--calbg-today: #bfe8f7;   /* kolumna "dzis" */
}
table.grid.calendar tr.grid td{ background: var(--calbg-odd); }
table.grid.calendar tr.grid_even td{ background: var(--calbg-even); }
table.grid.calendar tr.grid_title td.grid_today,
table.grid.calendar tr.grid td.grid_today,
table.grid.calendar tr.grid_even td.grid_today{ background: var(--calbg-today); }

/* =====================================================================
   Kafelek zdarzenia w klasycznej siatce kalendarza (oba widoki: wg dni /
   wg pracownika). 2 sekcje jak w widoku z mapa (mscalendar):
   - naglowek .cal-ev-head: ikona stanu + znaczniki + dodatki (alert/zalaczniki/
     zdjecie/pigulka priorytetu),
   - szczegoly .cal-ev-det: adres w 2 liniach (kod+miasto / ulica).
   Karta na pozycje rozdziela 2+ zlecen w komorce; akcent z lewej = kolor STANU.
   Kolory karty/tekstu przez zmienne --cal-* (skorki nadpisuja TYLKO zmienne,
   nie cale reguly - patrz theme/skins/dark.css). Akcenty stanu (border-left)
   to stale, saturowane kolory - czytelne na jasnym i ciemnym tle. */
table.calendar td .cal-ev{
	--cal-card-bg: #fff;   /* NIEprzezroczyste - inaczej saturowane tlo wiersza (np. zolty #ffffb0 skorki default) przebija przez karte */
	--cal-card-bd: rgba(30,40,50,.12);
	--cal-fg:  #39424b;   /* adres, linia 1 (kod+miasto) */
	--cal-fg2: #5f6670;   /* adres, linia 2 (ulica) */
	display:block;                   /* karta-selektor pickera to <a> (inline!) - bez tego
	                                    ramka+border-radius rozpadaja sie na fragmenty przy zawijaniu */
	position:relative;               /* kotwica dla badge priorytetu w rogu */
	background:var(--cal-card-bg); border:1px solid var(--cal-card-bd);
	border-left:4px solid #6366f1;   /* domyslnie PRZYJETE (indygo) */
	border-radius:8px; padding:5px 8px; margin:0 0 6px;
	text-align:left;                 /* td kalendarza ma center - tresc do lewej */
	text-decoration:none;            /* karta-selektor w pickerze zlecenia to <a> */
}
table.calendar td .cal-ev:last-child{ margin-bottom:0; }
/* akcent z lewej wg stanu (paleta .st-pill.s-*) */
table.calendar td .cal-ev[data-state="PRZEKAZANE"]   { border-left-color:#0891b2; }
table.calendar td .cal-ev[data-state="W ZAWIESZENIU"]{ border-left-color:#d97706; }
table.calendar td .cal-ev[data-state="WYKONANE"]     { border-left-color:#16a34a; }
table.calendar td .cal-ev[data-state="NIE WYKONANE"] { border-left-color:#dc2626; }
table.calendar td .cal-ev[data-state="ROZLICZONE"],
table.calendar td .cal-ev[data-state="ROZLICZONE_NW"]{ border-left-color:#0e9f6e; }
/* wykonane/rozliczone -> lekko zielone tlo karty (spojne z msCalendar --msc-done) */
table.calendar td .cal-ev[data-state="WYKONANE"],
table.calendar td .cal-ev[data-state="ROZLICZONE"],
table.calendar td .cal-ev[data-state="ROZLICZONE_NW"]{ --cal-card-bg:#eafaf0; }
table.calendar td .cal-ev.cs-cancel{ --cal-card-bg:#fff; }   /* anulowane z kalendarza: bez zieleni */
table.calendar td .cal-ev[data-state="ANULOWANE"]    { border-left-color:#6b7280; }
table.calendar td .cal-ev[data-state="ARCHIWUM"]     { border-left-color:#94a3b8; }
table.calendar td .cal-ev.cs-cancel                  { border-left-color:#6b7280; }  /* cal_state=-1 */
/* dni wolne / urlopy: BEZ karty; OBOK SIEBIE (inline-block) - dwa urlopy w jednej komorce
   nie marnuja miejsca pionowo (td=text-align:center centruje grupe ikon; „+" to blok nizej).
   Wiecej urlopow zawija sie do kolejnego rzedu. */
table.calendar td .cal-ev.cal-ev-free{ display:inline-block; vertical-align:middle; background:none; border:0; border-radius:0; padding:0; margin:1px 2px; text-align:center; }
/* naglowek */
table.calendar td .cal-ev.popupTrigger{ cursor:pointer; }   /* klik = cały panel (showCalendarOrder), nie osobne <a> */
table.calendar td .cal-ev-head{ display:flex; align-items:center; flex-wrap:wrap; gap:3px; line-height:1; }
table.calendar td .cal-ev-head > .cal-ic{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:3px; min-width:0; }
/* priorytet jako badge przyklejony do prawego gornego rogu karty (tylko
   TELEFON/WYSOKI/AWARIA; NORMALNY bez badge). Absolutny -> nie zajmuje miejsca
   w rzedzie, znaczniki plyna pod spodem. Gdy badge jest, naglowek schodzi kilka
   px nizej, by kropki nie chowaly sie pod plakietka. */
table.calendar td .cal-badge{
	position:absolute; top:0; right:0; z-index:3;
	font-size:9px; font-weight:800; color:#fff; letter-spacing:.2px; line-height:1.35;
	padding:2px 6px; border-radius:0 8px 0 7px;
}
table.calendar td .cal-badge.aw { background:#e5484d; }
table.calendar td .cal-badge.wy { background:#f59e0b; }
table.calendar td .cal-badge.tel{ background:#3b82f6; }
table.calendar td .cal-ev:has(.cal-badge) .cal-ev-head{ margin-top:4px; }   /* naglowek tuz pod badge (~1px nad znacznikami) */
table.calendar td .cal-ev-head .tag{ width:12px !important; height:12px !important; margin:0 !important; }  /* jak mscalendar; bije globalne div.tag{16px} */
/* szczegoly: adres 2 linie */
table.calendar td .cal-ev-det{ display:block; margin-top:2px; color:var(--cal-fg2); }
table.calendar td .cal-ev-det .cal-l1{ display:block; font-weight:600; color:var(--cal-fg); }
table.calendar td .cal-ev-det .cal-l2{ display:block; }

/* „Chip" plikow w prawym dolnym rogu kafelka (jak w apce mobilnej): spinacz + liczba.
   Absolutny -> nie zajmuje miejsca w tresci; kafelek rezerwuje dol pod niego.
   Klik = lista plikow (msFilesPopover w util.js). Chip to <a>, wiec guard onclick
   kafelka (event.target.closest('a')) nie odpala showOrder/showCalendarOrder. */
table.calendar td .cal-ev:has(.cal-files){ padding-bottom:21px; }
table.calendar td .cal-files{
	position:absolute; right:2px; bottom:2px; z-index:2;   /* mocniej w prawy DOLNY rog */
	display:inline-flex; align-items:center; gap:2px;
	padding:0 5px 0 4px; height:18px; border-radius:9px;    /* +2px wyzszy */
	background:var(--cal-card-bd, rgba(30,40,50,.12)); color:var(--cal-fg2,#5f6670);
	font-size:11px; font-weight:700; line-height:18px; text-decoration:none;
	cursor:pointer; transition:background-color .12s, color .12s, box-shadow .12s;
}
/* hover: czytelne podswietlenie tla - widac, ze chip jest klikalny (lista plikow) */
table.calendar td .cal-files:hover{
	color:#1f2937;
	background:color-mix(in srgb, #2A9FFF 24%, var(--cal-card-bd, rgba(30,40,50,.12)));
	box-shadow:0 0 0 1px rgba(42,159,255,.55);
}
table.calendar td .cal-files .appico{ width:14px; height:14px; }   /* +2px */
/* popover z lista plikow (dopinany do <body> przez util.js) — naglowek
   "nr · klient · miasto" + chip licznika, wewnetrzna karta z sekcjami
   PLIKI ZLECENIA / PLIKI KLIENTA, wiersz = ikona typu + nazwa + rozmiar */
.cal-files-pop{
	position:absolute; z-index:30050; min-width:280px; max-width:380px;
	background:#fff; border:1px solid #dfe6ee; border-radius:12px;
	box-shadow:0 12px 32px rgba(15,30,50,.16); padding:12px; font-size:13px; color:#2a3138;
}
.cal-files-pop .cfp-head{ display:flex; align-items:center; gap:10px; padding:2px 2px 10px; }
.cal-files-pop .cfp-title{ flex:1 1 auto; font-weight:700; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-files-pop .cfp-count{
	flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
	padding:2px 9px; border:1px solid #cfe0f2; border-radius:12px;
	background:#eef5fc; color:#3b6ea5; font-weight:700; font-size:12px; line-height:16px;
}
.cal-files-pop .cfp-count .cfp-ico{ width:13px; height:13px; }
.cal-files-pop .cfp-card{ background:#f7f9fb; border:1px solid #e7edf3; border-radius:9px; padding:6px 0; max-height:280px; overflow:auto; }
.cal-files-pop .cfp-sec{
	padding:6px 12px 4px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
	text-transform:uppercase; color:#8a95a3;
}
.cal-files-pop .cfp-row{ display:flex; align-items:center; gap:8px; padding:5px 12px; text-decoration:none; color:#1f2937; }
.cal-files-pop .cfp-row:hover{ background:#eaf1f8; }
.cal-files-pop .cfp-row .cfp-ico{ flex:0 0 auto; width:15px; height:15px; color:#6b7684; }
.cal-files-pop .cfp-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-files-pop .cfp-size{ flex:0 0 auto; color:#9aa4b0; font-size:12px; }

/* „+" szybkiego dodania zlecenia w komorce klasycznego kalendarza (wg dni / wg
   pracownika). Gated globalnym CALENDAR_QUICK_ADD_ORDER (cfg_main). Dyskretny,
   wyrazniejszy po najechaniu na komorke; na dotyku widoczny zawsze. */
table.calendar td .cal-add-ord{
	display:block; text-align:center; margin:3px 0 1px; padding:2px 0; box-sizing:border-box;
	border:1.5px dashed transparent; border-radius:8px; line-height:1;
	color:#9aa3ad; opacity:.2; text-decoration:none; cursor:pointer;
	transition:opacity .12s, padding .12s, background-color .12s, border-color .12s, color .12s;
}
table.calendar td .cal-add-ord .appico{ width:13px; height:13px; transition:width .12s, height .12s; }
/* „+" dodania — WSPOLNY styl OBU kalendarzy (glowny table.calendar ORAZ picker #order_calendar;
   picker „+" ma klase .cal-add-ord, komorka .cell-add). „+" to OVERLAY (position:absolute) -> NIE
   zajmuje miejsca w komorce (komorki ciasne, bez „plywania"). Widoczny (dashed ramka + tlo + „+")
   TYLKO na hover PUSTEJ czesci komorki - ZNIKA gdy najedziesz na kafelek/urlop (.cal-ev:hover).
   Dotyczy TAKZE komorek z urlopem: kafelek urlopu .cal-ev-free to tez .cal-ev (z-index:1 nad
   overlayem), a padding-bottom daje margines na podswietlenie pod klepsydra.
   Kafelki w normalnym flow (z-index:1 nad overlayem) -> busy komorki sie nie rozjezdzaja. */
table.calendar td.cell-add{ position:relative; cursor:pointer; }
table.calendar td.cell-add > .cal-ev{ position:relative; z-index:1; }
/* komorka Z WPISAMI (zlecenia LUB urlop): min. 4px wolnego paska na dole (kafelki go nie zajmuja)
   -> zawsze jest gdzie kliknac/najechac „+", nawet gdy kafelki/klepsydra wypelniaja komorke */
table.calendar td.cell-add:has(.cal-ev){ padding-bottom:4px; }
table.calendar td.cell-add > .cal-add-ord{
	position:absolute; inset:2px; z-index:0; margin:0; padding:0 0 4px;
	display:flex; align-items:flex-end; justify-content:center;
	opacity:0; border:1.6px dashed transparent; border-radius:8px; background:transparent;
	transition:opacity .1s, border-color .1s, background-color .1s;
}
table.calendar td.cell-add:not(:has(.cal-ev)) > .cal-add-ord{ align-items:center; padding:0; }   /* pusta: „+" wysrodkowany */
table.calendar td.cell-add:hover:not(:has(.cal-ev:hover)) > .cal-add-ord{
	opacity:1; border-color:rgba(42,159,255,.6); background:rgba(42,159,255,.06);
}
table.calendar td.cell-add .cal-add-ord .appico{ width:18px; height:18px; }
.cal-compact table.calendar td.cell-add .cal-add-ord .appico{ width:15px; height:15px; }
/* URLOP: RAMKA (dashed) obejmuje CALA komorke jak wszedzie (nie polowe!), ale AKTYWNE POLE
   = poswiata/wypelnienie tylko w DOLNYM pasku (gradient) - zostawia miejsce ikonie urlopu
   (nie swieci calej wysokiej komorki), a „+" siedzi na dole (align-items:flex-end z bazy). */
table.calendar td.cell-add:has(.cal-ev-free):hover:not(:has(.cal-ev:hover)) > .cal-add-ord{
	background: linear-gradient(to top, rgba(42,159,255,.12) 20px, transparent 20px);
}

/* =====================================================================
   KOMPAKTOWY widok listy kalendarza (opcja; klasa .cal-compact na <html>,
   przelacznik w oknie kalendarza + picker). NISKI, ZAOKRAGLONY kafelek.
   Grid 2-kolumnowy: LEWA = status+znaczniki, prawa (1fr) = adres (cala ulica ->
   2. linia gdy nie miesci, bez lamania fragmentu). Priorytet PRZYKLEJONY do
   prawego GORNEGO rogu (absolutny, jak w pelnym widoku) - nie zabiera wiersza,
   dzieki czemu kafelek jest niski; pliki tuz pod nim (jedno nad drugim). Adres
   dostaje rezerwe z prawej, wiec nie chowa sie pod priorytetem. Kropki bez ramki
   (mniej miejsca). Ikon dni wolnych/urlopow NIE zmniejszamy. Obejmuje oba
   klasyczne widoki ORAZ picker (#order_calendar). ===== */
.cal-compact table.calendar td .cal-ev:not(.cal-ev-free){
	display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:2px;
	padding:2px 5px 2px 3px; margin:0 0 3px; font-size:11.5px;
}
.cal-compact table.calendar td .cal-ev:not(.cal-ev-free) .cal-ev-head{ display:contents; }
/* status + znaczniki: WASKA lewa kolumna (adres wazniejszy -> dostaje wiecej miejsca).
   Ikona STANU minimalna wypelnia 1. rzad waskiej kolumny (max-width ~ szer. ikony), wiec
   kropki (znaczniki) ZAWIJAJA sie POD nia w kolejnych rzedach (nie obok). */
.cal-compact table.calendar td .cal-ev-head > .cal-ic{ grid-column:1; align-self:center;
	display:flex; flex-wrap:wrap; justify-content:flex-start; align-content:center; gap:1px;
	box-sizing:border-box; max-width:16px; }
/* ikona STANU (nie urlopu!) - MINIMALNA, w flow (nie absolutna), padding:0 (glif wypelnia box,
   wieksza bez zmiany pola), dosunieta do lewej */
.cal-compact table.calendar td .cal-ev-head > .cal-ic > :first-child{ position:static; transform:none;
	width:15px !important; height:15px !important; padding:0 !important; box-sizing:border-box; }
/* kropki (znaczniki) BEZ ramki + 5px, POD ikona */
.cal-compact table.calendar td .cal-ev-head .tag{ width:5px !important; height:5px !important; border:0 !important; box-shadow:none !important; }
/* adres: prawa kolumna (1fr). Cale linie (kod+miasto / ulica) zawijaja sie w calosci
   (flex-wrap), a gdy pojedyncza linia jest szersza od waskiej kolumny (wielu serwisantow)
   -> przycinamy ja wielokropkiem (min-width:0 + ellipsis) ZAMIAST wylewac tekst pod badge. */
.cal-compact table.calendar td .cal-ev-det{ grid-column:2; align-self:center; min-width:0; overflow:hidden; margin-top:0; line-height:1.22;
	display:flex; flex-wrap:wrap; gap:0 5px; align-items:baseline; }
.cal-compact table.calendar td .cal-ev-det .cal-l1{ min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; }
.cal-compact table.calendar td .cal-ev-det .cal-l2{ min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
/* WIDOK „wg dni" (cal-byday, kolumny=dni -> szerokie): wiekszy font adresu (12.5px) niz „wg
   pracownika", bo miejsca jest wiecej. Dotyczy KOMFORTU (bylo 8pt/10.6px) I KOMPAKTU (bylo 11.5px).
   Regula .cal-compact ma te sama specyficznosc co 11.5px wyzej -> zostaje PO niej (source order). */
/* PELNY (komfort) widok wg dni: font WIEKSZY (jest wiecej miejsca) niz kompakt */
table.cal-byday td .cal-ev-det .cal-l1{ font-size:14px; }
table.cal-byday td .cal-ev-det .cal-l2{ font-size:13px; }
/* KOMPAKT wg dni: mniejszy (gestszy) */
.cal-compact table.cal-byday td .cal-ev-det .cal-l1{ font-size:12.5px; }
.cal-compact table.cal-byday td .cal-ev-det .cal-l2{ font-size:12px; }
/* priorytet: PRZYKLEJONY do prawego gornego rogu (absolutny jak w pelnym widoku), maly. */
.cal-compact table.calendar td .cal-badge{ top:0; right:0; border-radius:0 7px 0 6px;
	font-size:8px; padding:1px 5px; line-height:1.5; }
/* Napis SKROCONY (AWARIA->AW, WYSOKI->WY, TELEFON->TEL) TYLKO w widoku „wg pracownika"
   (serwisanci=kolumny -> waskie przy wielu serwisantach). Widok dnia (cal-byday, kolumny=dni,
   szersze) zostaje z PELNYM napisem. Pelny napis zawsze w DOM (font-size:0) dla a11y. */
.cal-compact table.calendar:not(.cal-byday) td .cal-badge{ font-size:0; }
.cal-compact table.calendar:not(.cal-byday) td .cal-badge::before{ font-size:8px; font-weight:800; letter-spacing:.2px; }
.cal-compact table.calendar:not(.cal-byday) td .cal-badge.aw::before{ content:"AW"; }
.cal-compact table.calendar:not(.cal-byday) td .cal-badge.wy::before{ content:"WY"; }
.cal-compact table.calendar:not(.cal-byday) td .cal-badge.tel::before{ content:"TEL"; }
/* pliki: przyklejone do prawego DOLNEGO rogu (priorytet trzyma gorny) - jedno nad drugim */
.cal-compact table.calendar td .cal-files{ top:auto; right:1px; bottom:1px; margin:0;
	height:15px; border-radius:7px; font-size:9.5px; line-height:15px; padding:0 4px 0 3px; }   /* +2px, blizej rogu */
.cal-compact table.calendar td .cal-files .appico{ width:13px; height:13px; }   /* +2px */
/* rezerwa z prawej: adres nie wchodzi pod priorytet/pliki; minimalna wysokosc pod stos.
   „wg pracownika" (:not cal-byday) = skrocony badge -> mala rezerwa; widok dnia (cal-byday)
   = PELNY badge -> wieksza rezerwa (jak przed skracaniem). */
.cal-compact table.calendar td .cal-ev:has(.cal-files){ padding-right:34px; min-height:30px; }
.cal-compact table.calendar:not(.cal-byday) td .cal-ev:has(.cal-badge){ padding-right:30px; }
.cal-compact table.calendar:not(.cal-byday) td .cal-ev:has(.cal-badge):has(.cal-files){ padding-right:34px; }
.cal-compact table.cal-byday td .cal-ev:has(.cal-badge){ padding-right:52px; }
.cal-compact table.cal-byday td .cal-ev:has(.cal-badge):has(.cal-files){ padding-right:52px; }
.cal-compact table.calendar td .cal-ev:has(.cal-badge) .cal-ev-head{ margin-top:0; }
/* dni wolne/urlopy: obok siebie (jak w komforcie), tylko ciasniej; IKON NIE zmniejszamy */
.cal-compact table.calendar td .cal-ev-free{ margin:1px 2px; }
/* „+" dodania: ciasniej (hover bez powiekszania juz w regule bazowej). */
.cal-compact table.calendar td .cal-add-ord{ margin:1px 0; padding:0; }
/* przedzial godzinowy „stos" (wariant A): w kompakcie tylko WEZSZA kolumna (wiecej miejsca
   kafelkom) i mniejszy font. Sam uklad start/koniec jest domyslny (wyzej, tez w komforcie). */
.cal-compact table.cal-fixed col.cal-col-info{ width:50px; }
.cal-compact table.calendar td.cal-per{ padding:2px 4px; }
.cal-compact table.calendar td.cal-per .cal-per-split{ line-height:1.14; }
.cal-compact table.calendar td.cal-per .cal-per-split .cpf{ font-size:12px; }
.cal-compact table.calendar td.cal-per .cal-per-split .cpt{ font-size:11.5px; }

/* Picker kalendarza w oknie zlecenia (#order_calendar): przycisk "+" wyboru slotu.
   WYROZNIONY (przerywana obwodka akcentu + plus w kolorze akcentu), zeby nie zlewal
   sie z ikona wolnego dnia (kolorowy kalendarz). ID #order_calendar bije `.ui-dialog
   .appico{color:#44515f}`. Gdy slot zaznaczony, setOrderSlotIcon podmienia plus na
   calendar_current (stale kolory .calico). */
/* Baza/hover „+" w pickerze = WSPOLNE reguly .cal-add-ord / td.cell-add (picker „+" ma obie
   klasy). Tu zostaje TYLKO to, co specyficzne dla pickera: WYBRANY slot (calendar_current). */
/* SLOT WYBRANY: setOrderSlotIcon podmienil plus -> calendar_current (.calico).
   Pasek ZAWSZE pelny/prominent na CALA SZEROKOSC (solid + tlo akcentu, niezaleznie od hover) - wyraznie inny niz "+". */
#order_calendar .ord-cal-add:has(.calico){ opacity:1; border-style:solid; border-color:var(--pl-accent-d,#1373c4); background:var(--pl-wkbd,#cfe6ff); padding:6px 0; }
#order_calendar .ord-cal-add:has(.calico) .calico{ width:18px; height:18px; }
/* AKTYWNE (edytowane) zlecenie - WYBRANY slot ma wyrazne niebieskie tlo + obwodke
   + ring, zeby latwo go znalezc. Wyroznienie idzie za ZAZNACZENIEM (`:has(.calico)`
   = ikona calendar_current), NIE za statyczna klasa .cal-pick - inaczej po zmianie
   slotu/serwisanta podswietlenie zostawaloby na STAREJ (odznaczonej) karcie.
   rgba akcentu dziala na jasnym i ciemnym tle. */
#order_calendar a.cal-pick:has(.calico){
	background:rgba(42,159,255,.16);
	border-color:rgba(42,159,255,.45);
	box-shadow:0 0 0 1px rgba(42,159,255,.35);
}
/* ODZNACZONY (NIEAKTYWNY) slot - stary termin, z ktorego zlecenie zostalo
   przeniesione: pokazuje "+" (`:has(.appico)`). Szare, wyciszone tlo/tekst +
   szary lewy akcent, zeby jasno rozniс sie od aktywnej (niebieskiej) karty.
   "+" zostaje niebieski (ponizej) = afordancja „kliknij, by ponownie dodac". */
#order_calendar a.cal-pick:has(.appico){
	background:rgba(120,132,145,.12);
	border-color:rgba(120,132,145,.30);
	box-shadow:none;
}
#order_calendar a.cal-pick:has(.appico) .cal-l1{ color:var(--pl-muted,#8a929c); }
#order_calendar a.cal-pick:has(.appico) .cal-l2{ color:var(--pl-muted,#9aa1a9); }
/* slot biezacego zlecenia (karta-selektor): "+" w kolorze akcentu (mozna dodac) */
#order_calendar a.cal-pick .appico{ color:var(--pl-accent-d,#1373c4); }

/* --- kolumna "Status / Priorytet / Rodzaj" w liscie zlecen --- */
td.col-spk{ text-align:center; vertical-align:middle; }
td.col-spk .spk-stack{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
td.col-spk .spk-stack .pl-pill{ align-self:center; }
/* status i priorytet w kolumnie listy: JEDNOLITY rozmiar.
   (table.grid .pl-pill zmniejszalo priorytet do 8px, st-pill mialo 9px -> nierowne) */
td.col-spk .st-pill,
td.col-spk .spk-stack .pl-pill{ font-size:9px; padding:3px 7px; letter-spacing:.3px; border-radius:5px; line-height:1.45; }
td.col-spk .spk-kind{ font-size:11px; line-height:1.25; opacity:.7; white-space:normal; }
td.col-spk .spk-kind.warr{ font-weight:800; opacity:1; }
/* plakietka statusu - takie samo tlo+bialy tekst jak priorytet, wiec czytelna na kazdej skorce */
.st-pill{ display:inline-block; font-size:9px; font-weight:800; color:#fff; border-radius:5px; padding:3px 7px; letter-spacing:.3px; white-space:nowrap; }
.st-pill.s-prz{ background:#6366f1; } /* PRZYJETE */
.st-pill.s-pre{ background:#0891b2; } /* PRZEKAZANE */
.st-pill.s-zaw{ background:#d97706; } /* W ZAWIESZENIU */
.st-pill.s-wyk{ background:#16a34a; } /* WYKONANE */
.st-pill.s-nwy{ background:#dc2626; } /* NIE WYKONANE */
.st-pill.s-roz{ background:#0e9f6e; } /* ROZLICZONE */
.st-pill.s-rnw{ background:#0e9f6e; } /* ROZLICZONE_NW */
.st-pill.s-anu{ background:#6b7280; } /* ANULOWANE */
.st-pill.s-arc{ background:#94a3b8; } /* ARCHIWUM */
.pl-info{ flex:1; min-width:0; }
.pl-info .pl-t{ font-weight:700; color:var(--pl-ink); font-size:12px; }
.pl-info .pl-d{ color:var(--pl-muted2); font-size:11px; margin-top:2px; }
.pl-whenc{ flex:0 0 auto; text-align:right; font-size:10px; color:var(--pl-muted2); white-space:nowrap; }
.pl-whenc b{ display:block; color:var(--pl-ink); font-size:12px; }
.pl-act{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--pl-line2); align-items:flex-start; }
.pl-act:last-child{ border-bottom:0; }
.pl-dot{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; }
.pl-dot .appico{ width:15px; height:15px; }
.pl-dot.b{ background:#2A9FFF; }
.pl-tx{ flex:1; font-size:11px; color:var(--pl-fg); line-height:1.45; }
.pl-tx b{ color:var(--pl-ink); }
.pl-tm{ flex:0 0 auto; font-size:10px; color:#aab2bb; white-space:nowrap; }
.pl-holi{ display:flex; flex-direction:column; gap:7px; }
.pl-h{ display:flex; align-items:center; gap:8px; background:var(--pl-soft); border:1px solid var(--pl-line); border-radius:7px; padding:8px 11px; font-size:11px; }
.pl-hic{ width:28px; height:28px; border-radius:7px; background:var(--pl-line2); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pl-hic .appico, .pl-hic .calico{ width:20px; height:20px; }
.pl-h b{ color:var(--pl-ink); } .pl-rng{ margin-left:auto; color:var(--pl-muted2); }
@media (max-width:980px){ .pl-kpis{ grid-template-columns:repeat(2,1fr); } .pl-grid{ grid-template-columns:1fr; } }

/* nawigacja tygodnia (strzalki przy dacie) */
.pl-wknav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-wkarrow{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--pl-line); border-radius:8px; background:var(--pl-card); color:var(--pl-muted); text-decoration:none; }
.pl-wkarrow:hover{ color:var(--pl-accent-d); border-color:var(--pl-wkbd); background:var(--pl-wkbg); }
.pl-wkarrow .appico{ width:18px; height:18px; }
.pl-wkreset{ font-size:11px; font-weight:700; color:var(--pl-accent-d); text-decoration:none; border:1px solid var(--pl-wkbd); background:var(--pl-wkbg); border-radius:8px; padding:7px 11px; line-height:1; }
.pl-wkreset:hover{ filter:brightness(.97); }

/* klikalny wiersz — kursor + podświetlenie po najechaniu */
.pl-al.pl-click{ cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; transition:background .12s; }
.pl-al.pl-click:hover{ background:var(--pl-line2); }
.pl-open{ display:flex; align-items:center; flex:0 0 auto; color:#c2cad2; }
.pl-open .appico{ width:17px; height:17px; }
.pl-al.pl-click:hover .pl-open{ color:var(--pl-accent-d); }

.pl-act.pl-click{ cursor:pointer; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:6px; transition:background .12s; }
.pl-act.pl-click:hover{ background:var(--pl-line2); }

.pl-h.pl-click{ cursor:pointer; transition:background .12s, border-color .12s; }
.pl-h.pl-click:hover{ background:var(--pl-line2); border-color:var(--pl-line); }

/* =====================================================================
   RWD: Pulpit (telefon). Bazowo @media 980px daje juz KPI 4->2 i grid 2->1
   kolumny - tu dostrajamy pod waski ekran: pagehead pionowo, mniejsze
   liczby/odstepy, donut + legenda jedno pod drugim, a najwazniejsze panele
   (Awarie/pilne + Urlopy) nad reszta. Bez zmian w danych modulu.
   ===================================================================== */
@media (max-width:600px){
	.pl-wrap{ padding:10px 12px 22px; }
	.pl-pagehead{ flex-direction:column; align-items:stretch; gap:10px; }
	.pl-wknav{ justify-content:flex-start; }
	.pl-kpis{ gap:10px; }
	.pl-kpi{ padding:12px; }
	.pl-num{ font-size:26px; margin:8px 0 4px; }
	.pl-chip{ width:34px; height:34px; }
	.pl-chip .appico{ width:18px; height:18px; }
	.pl-b{ padding:12px; }
	.pl-donut-wrap{ gap:14px; justify-content:center; }
	.pl-dleg{ min-width:0; width:100%; }
	.pl-week{ gap:5px; }
	/* klikalne wiersze - pewny tap-target */
	.pl-al, .pl-act, .pl-h{ min-height:44px; }
	/* Awarie/pilne + Urlopy (prawa kolumna) nad reszta na telefonie */
	.pl-grid > div:last-child{ order:-1; }
}

/* =====================================================================
   RWD: Lista KLIENTOW (telefon). Tabela #clients_list (10 kolumn,
   render server-side tpl/clients_list.tpl) zamienia sie w KARTY.
   Zakres ograniczony do #clients_list, by NIE ruszac matrycy kalendarza
   (tez table.grid). Etykiety pol z atrybutu data-label (dodane w szablonie).
   Czysto CSS - dane/markup listy bez zmian funkcjonalnych.
   ===================================================================== */
@media (max-width:600px){
	#clients_list table.grid,
	#clients_list table.grid tbody,
	#clients_list table.grid tr,
	#clients_list table.grid td { display:block; width:auto !important; }
	#clients_list table.grid { border-spacing:0; }
	#clients_list table.grid tr.grid_title { display:none; }   /* naglowki kolumn */

	/* wiersz danych = karta (pasek z lewej w kolorze akcentu) */
	#clients_list table.grid tr[data-id]{
		background:var(--pl-card,#fff);
		border:1px solid var(--pl-line,#e2e4e8);
		border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:10px 12px;
		box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	/* komorki: etykieta (data-label) nad wartoscia */
	#clients_list table.grid td{
		border:0 !important; background:transparent !important;
		padding:3px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important; font-size:12.5px;
	}
	#clients_list table.grid td[data-label]::before{
		content:attr(data-label); display:block;
		font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
		color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	/* tytul karty = nazwisko klienta */
	#clients_list table.grid td.c-name{
		font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); padding-top:0 !important;
	}
	#clients_list table.grid td.c-name::before{ display:none; }
	/* nieistotne na telefonie + puste komorki bez pustej etykiety */
	#clients_list table.grid td.c-lp,
	#clients_list table.grid td.c-gps,
	#clients_list table.grid td:empty{ display:none; }
	/* akcje: rzad przyciskow pelnej szerokosci */
	#clients_list table.grid td.c-actions{
		display:flex; flex-wrap:wrap; gap:6px;
		margin-top:8px; padding-top:8px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#clients_list table.grid td.c-actions a{
		flex:1 1 0; min-width:60px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px;
		color:var(--pl-accent-d,#1373c4);
	}
}

/* =====================================================================
   RWD: Lista DOKUMENTACJI (telefon). Tabela #doc_list table.grid -> KARTY,
   ten sam schemat co lista klientow. Etykiety z data-label (msGridAutoLabel
   POMIJA [data-ms-grid], wiec sa wpisane w tpl/documentation_list_doc.tpl).
   ===================================================================== */
@media (max-width:600px){
	#doc_list table.grid,
	#doc_list table.grid tbody,
	#doc_list table.grid tr,
	#doc_list table.grid td { display:block; width:auto !important; }
	#doc_list table.grid { border-spacing:0; }
	#doc_list table.grid tr.grid_title { display:none; }
	#doc_list table.grid tr[data-id]{
		background:var(--pl-card,#fff);
		border:1px solid var(--pl-line,#e2e4e8);
		border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:10px 12px;
		box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#doc_list table.grid td{
		border:0 !important; background:transparent !important;
		padding:3px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important; font-size:12.5px;
	}
	#doc_list table.grid td[data-label]::before{
		content:attr(data-label); display:block;
		font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
		color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	/* tytul karty = nazwa dokumentu (badge + nazwa + opis w .doc-open) */
	#doc_list table.grid td.doc-namecell{ padding-top:0 !important; }
	#doc_list table.grid td.doc-namecell::before{ display:none; }
	#doc_list table.grid td.doc-namecell .doc-name{ font-size:15px; font-weight:800; }
	/* Typ zbedny na telefonie (badge w nazwie juz go niesie) + Lp/puste ukryte */
	#doc_list table.grid td.c-lp,
	#doc_list table.grid td[data-label="Typ"],
	#doc_list table.grid td:empty{ display:none; }
	/* akcje: przycisk pelnej szerokosci karty */
	#doc_list table.grid td.c-actions{
		display:flex; flex-wrap:wrap; gap:6px;
		margin-top:8px; padding-top:8px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#doc_list table.grid td.c-actions::before{ display:none; }
	#doc_list table.grid td.c-actions a{
		flex:1 1 0; min-width:60px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px;
		color:var(--pl-accent-d,#1373c4);
	}
}

/* =====================================================================
   WSPOLNY STYL ikon akcji we WSZYSTKICH listach (klienci, zlecenia, oferty,
   magazyn, przypomnienia, urzadzenia...). Ramka (tlo+obwodka) na KAZDEJ
   szerokosci - wczesniej tylko na mobile i tylko per lista. Samowystarczalny
   box (czesc komorek ma sam .c-actions bez .actions). Wykluczamy przycisk
   "Dostosuj tabele" (.ms-cols-hdr) - to nie akcja wiersza.
   ===================================================================== */
/* akcje w JEDNYM rzedzie (nie zawijac). Atrybut `nowrap` na <td> bywa nadpisany przez
   white-space:normal komorek listy (przypomnienia: 3 przyciski zawijaly sie 2+1 przy waskiej
   kolumnie). Na mobile c-actions=flex+flex-wrap (RWD karty) - white-space nie steruje flex-wrap,
   wiec tam zawijanie zostaje bez zmian. */
table.grid td.c-actions { white-space:nowrap; }
table.grid td.c-actions a:not(.ms-cols-hdr) {
	display:inline-flex; align-items:center; justify-content:center;
	min-width:30px; height:28px; padding:0 4px; box-sizing:border-box;
	background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8);
	border-radius:8px; margin:0 2px;
}
/* rozmiar ikony akcji - spojnie 22px we WSZYSTKICH listach. Bez tego komorki z sama
   klasa `c-actions` (np. przypomnienia) lapaly domyslne 18px, a te z `.actions`
   (klienci: `td.actions a .appico`) mialy 22px - stad rozjazd. */
table.grid td.c-actions a:not(.ms-cols-hdr) .appico { width:22px; height:22px; }
/* kolory wg funkcji - spojnie miedzy listami. Prefiks #content / .ui-dialog:
   musi bic reguly `#content .appico`/`.ui-dialog .appico { color:#44515f }`
   (ID-specyficznosc), inaczej ikony akcji lapaly domyslny ciemny kolor. */
#content table.grid td.c-actions a.edit .appico,    .ui-dialog table.grid td.c-actions a.edit .appico    { color:#5f6670; }
#content table.grid td.c-actions a.orders .appico,  .ui-dialog table.grid td.c-actions a.orders .appico  { color:#1373c4; }
#content table.grid td.c-actions a.reminders .appico, .ui-dialog table.grid td.c-actions a.reminders .appico { color:#b8730a; }
#content table.grid td.c-actions a.delete .appico, .ui-dialog table.grid td.c-actions a.delete .appico { color:#dc2626; }
/* stany widoczne na liscie klientow: OTWARTE ZLECENIE zielone, AKTYWNE
   PRZYPOMNIENIE fioletowe (tlo-chip) - od razu widac. */
table.grid td.c-actions a.orders.open-order { background:#eaf3de; }
#content table.grid td.c-actions a.orders.open-order .appico, .ui-dialog table.grid td.c-actions a.orders.open-order .appico { color:#2f7d4f; }
table.grid td.c-actions a.reminders.active-reminder { background:#efeaf9; }
#content table.grid td.c-actions a.reminders.active-reminder .appico, .ui-dialog table.grid td.c-actions a.reminders.active-reminder .appico { color:#7c5cbf; }
/* druk (teal) + eksport Excel (zielony marki Excela) - w akcjach wierszy ORAZ na paskach
   narzedzi list (sbar-*, #device_xls). Prefiks #content/.ui-dialog jak wyzej (bije #content .appico). */
#content a.print .appico,      .ui-dialog a.print .appico,
#content .sbar-print .appico,  .ui-dialog .sbar-print .appico   { color:#0f766e; }
#content a.export .appico,     .ui-dialog a.export .appico,
#content .sbar-export .appico, .ui-dialog .sbar-export .appico,
#content #device_xls .appico,  .ui-dialog #device_xls .appico   { color:#217346; }
/* 3 raporty czesci (magazyn) - rozne ikony i kolory: Historia=fiolet (zegar),
   Stany w magazynach=cyan (slupki), Zamowienia=pomarancz (koszyk).
   Listy: product_list_stany.tpl + picker czesci products_list_partspicker.tpl. */
#content a.raport-hist .appico,   .ui-dialog a.raport-hist .appico   { color:#7c5cbf; }
#content a.raport-stany .appico,  .ui-dialog a.raport-stany .appico  { color:#0891b2; }
#content a.raport-orders .appico, .ui-dialog a.raport-orders .appico { color:#ea580c; }

/* Picker klienta w nowym zleceniu: jedno uniwersalne pole szukania (param q),
   zawsze w jednej linii z przyciskami szukaj/dodaj - na kazdej szerokosci. */
#order_clientsearch .ocp-search{ display:flex; gap:8px; align-items:center; width:100%; }
#order_clientsearch .ocp-search input[name="q"]{ flex:1 1 auto; min-width:0; min-height:40px; box-sizing:border-box; }
#order_clientsearch .ocp-search .toolbtn{ flex:0 0 auto; }

/* =====================================================================
   RWD: picker KLIENTA w nowym zleceniu (#order_clientpicker) -> KARTY.
   Lista ms ([data-ms-grid]) zywa w dialogu pelnoekranowym; potrzebuje wlasnego
   bloku kart, bo generyczna regula div.grid:not([data-ms-grid]) jej nie obejmuje.
   Etykiety pol z atrybutow data-label wpisanych w tpl/clients_list_picker_order.tpl
   (msGridAutoLabel POMIJA tabele w [data-ms-grid], wiec nie stempluje ich auto).
   Akcja "utworz zlecenie" = przycisk pelnej szerokosci na dole karty.
   Prog 1024px - taki sam, od ktorego dialog jest pelnoekranowy (inaczej na tablecie
   601-1024 dialog jest pelnoekranowy, ale tabela zostawala szeroka/przewijana). */
@media (max-width:1024px){
	#order_clientpicker table.grid,
	#order_clientpicker table.grid tbody,
	#order_clientpicker table.grid tr,
	#order_clientpicker table.grid td{ display:block; width:auto !important; }
	#order_clientpicker table.grid{ border-spacing:0; }
	#order_clientpicker table.grid tr.grid_title{ display:none; }
	#order_clientpicker table.grid tr{
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8);
		border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:10px 12px;
		box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#order_clientpicker table.grid td{
		border:0 !important; background:transparent !important;
		padding:3px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important; font-size:12.5px;
	}
	#order_clientpicker table.grid td[data-label]::before{
		content:attr(data-label); display:block;
		font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
		color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	/* tytul karty = klient (2. kolumna); Lp. i puste komorki ukryte */
	#order_clientpicker table.grid td:nth-child(2){
		font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); padding-top:0 !important;
	}
	#order_clientpicker table.grid td:nth-child(2)::before{ display:none; }
	#order_clientpicker table.grid td:first-child,
	#order_clientpicker table.grid td:empty{ display:none; }
	/* akcja (utworz zlecenie): kompaktowy przycisk wyrownany do prawej na dole karty
	   (NIE na cala szerokosc - inaczej jest gigantyczny) */
	#order_clientpicker table.grid td[nowrap]{
		display:flex; justify-content:flex-end; align-items:center;
		margin-top:6px; padding-top:8px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#order_clientpicker table.grid td[nowrap]::before{ display:none; }
	#order_clientpicker table.grid td[nowrap] a.ocp-pick{ flex:0 0 auto; padding:8px 18px; }
}

/* Przycisk wyboru klienta w pickerze: czytelny "Wybierz", subtelny styl na tokenach
   skorki (pasuje tez do ciemnej). Ikona zlecenia proporcjonalna do napisu. */
/* Przyciski akcji pickerow: „Wybierz klienta" (.ocp-pick) i „Dodaj czesc" (.pp-add) =
   przycisk PRIMARY aplikacji (jak jQuery UI „Zapisz": #2A9FFF, hover #1488ee, radius 5px,
   12px bold). Akcent = token skorki (--pl-accent), wiec spojne tez na ciemnej. */
#order_clientpicker .ocp-pick,
.ui-dialog a.pp-add, #content a.pp-add{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	padding:7px 16px; border-radius:5px; white-space:nowrap; text-decoration:none;
	font-family:inherit; font-size:12px; font-weight:bold; line-height:1;
	background:var(--pl-accent,#2A9FFF); border:1px solid var(--pl-accent,#2A9FFF); color:#fff;
	box-shadow:0 1px 2px rgba(0,0,0,.12);
	transition:background-color .12s, border-color .12s, box-shadow .12s;
}
#order_clientpicker .ocp-pick:hover,
.ui-dialog a.pp-add:hover, #content a.pp-add:hover{ background:#1488ee; border-color:#1488ee; box-shadow:0 2px 7px rgba(42,159,255,.35); }
#order_clientpicker .ocp-pick .appico,
.ui-dialog a.pp-add .appico, #content a.pp-add .appico{ width:18px; height:18px; flex:0 0 auto; color:#fff; }

/* Toast/splash (krotki komunikat u dolu ekranu, nad oknami). msToast() w util.js.
   z-index ponad dialogami (parts=12000, order_form itd.). */
.ms-toast{
	position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
	z-index:100000; max-width:min(92vw,440px);
	display:flex; align-items:center; gap:9px;
	padding:11px 18px; border-radius:10px;
	background:#1f2d3a; color:#fff; font-size:13px; font-weight:600; line-height:1.35;
	box-shadow:0 10px 34px rgba(0,0,0,.30);
	opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.ms-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.ms-toast-success{ background:#16794a; }
.ms-toast .ms-toast-ico{ width:18px; height:18px; flex:0 0 auto; }

/* =====================================================================
   Wartosci wielowierszowe w komorkach listy (zamiast <br/>): kazdy wiersz
   to <span> blokowy, co daje kontrole nad stylem i ukladem (w tym w kartach
   mobilnych). Stosowane w tpl/orders_list.tpl (naglowki + pozycje).
   - th-sub  : druga/trzecia linia naglowka kolumny (lzejsza, mniejsza)
   - cell-main: glowna wartosc komorki; cell-sub: wartosc pomocnicza (przygaszona)
   - cell-note: uwagi klienta (kursywa); svc-item/svc-ext: serwisanci + zewnetrzny
   - cell-stack: pojemnik na wartosci obok ikony .cardico (komorki .cico)
   - cline    : pojedyncza linia kontaktu (telefon / e-mail) z wlasna ikona
   ===================================================================== */
table.grid .grid_title .th-sub{ display:block; font-weight:400; font-size:11px; line-height:1.25; opacity:.7; }
table.grid td .cell-main{ display:block; }
table.grid td .cell-sub{ display:block; color:var(--pl-muted,#6b7682); font-size:.92em; }
table.grid td .cell-note{ display:block; margin-top:5px; font-style:italic; font-weight:400; font-size:.92em; line-height:1.35; color:var(--pl-muted,#6b7682); }
table.grid td .svc-item{ display:block; }
table.grid td .svc-ext{ display:block; font-weight:700; }
table.grid td .cell-stack{ display:block; min-width:0; }
table.grid td .cline{ display:block; min-width:0; }
table.grid td .cline .mailaddr{ color:inherit; text-decoration:none; }
table.grid td .cline .mailaddr:hover{ text-decoration:underline; }

/* Pola OPISOWE w tabelach: max 3 linie, reszta ukryta (na desktopie/tablecie >600px;
   na telefonie sa karty -> pelna tresc). Pelny tekst w popupie na hover (util.js,
   debounce 250ms). */
@media (min-width:601px){
	/* wyzsza specyficznosc (table.grid td .ms-clamp) - bije table.grid td .cell-sub{display:block} */
	table.grid td .ms-clamp, .ms-clamp{ display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}
/* popup podgladu pelnej tresci przycietego pola */
.ms-clamp-pop{
	position:fixed; z-index:100000; max-width:360px; max-height:50vh; overflow:auto;
	background:var(--pl-card,#fff); color:var(--pl-ink,#222a31);
	border:1px solid var(--pl-line,#d5dae0); border-radius:8px;
	box-shadow:0 8px 28px rgba(20,50,80,.22); padding:9px 12px;
	font-size:12.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:break-word;
	pointer-events:none;
}

/* =====================================================================
   Modul DOKUMENTACJA: lista jako standardowa tabela systemu (#doc_list table.grid,
   jak klienci/zlecenia). W kolumnie „Dokument": kolorowy badge typu pliku wg
   rozszerzenia + nazwa + opis. Render serwerowy: tpl/documentation_list_doc.tpl.
   ===================================================================== */
#doc_list table.grid td.doc-namecell{ vertical-align:middle; }
#doc_list table.grid tr.is-inactive{ opacity:.55; }
.doc-open{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; min-width:0; }
.doc-open:hover .doc-name{ text-decoration:underline; }
/* badge typu pliku - kolorowy kwadrat z rozszerzeniem (lub ikona gdy brak pliku) */
.doc-badge{
	flex:0 0 auto; width:34px; height:34px; border-radius:8px; display:inline-flex;
	align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.4px;
	color:#fff; background:#8a94a0; text-transform:uppercase;
}
.doc-badge .appico{ width:18px; height:18px; color:#fff; }
.doc-ftype-pdf{ background:#e0483d; }
.doc-ftype-xls, .doc-ftype-xlsx, .doc-ftype-csv{ background:#1f9d55; }
.doc-ftype-doc, .doc-ftype-docx, .doc-ftype-odt, .doc-ftype-rtf{ background:#2a72d4; }
.doc-ftype-jpg, .doc-ftype-jpeg, .doc-ftype-png, .doc-ftype-gif, .doc-ftype-webp{ background:#8b5cf6; }
.doc-ftype-zip, .doc-ftype-rar, .doc-ftype-7z{ background:#d97706; }
.doc-namebody{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.doc-name{ font-weight:600; color:var(--pl-ink,#222a31); overflow-wrap:break-word; }
.doc-desc{ font-size:12px; color:var(--pl-muted2,#8b95a1); }
.doc-empty{ text-align:center; color:var(--pl-muted,#6b7682); padding:34px 10px; font-size:13.5px; }

/* Karta klienta na telefonie: IKONA zamiast tekstowej etykiety (wg makiety).
   .cardico = ikona aplikacji, domyslnie ukryta (desktop/tablet), widoczna <=600px
   w polach z klasa .cico (Adres/Telefon/E-mail/Sprzet/Ost. wizyta). */
.cardico{ display:none; }
@media (max-width:600px){
	#clients_list table.grid td.cico,
	#orders_list table.grid td.cico,
	#reminders_main table.grid td.cico{ display:flex; align-items:flex-start; gap:8px; }
	/* [data-label] + !important - bije regule #orders_list td[data-label]::before z bloku
	   kart zlecen (jest pozniej w pliku); inaczej w zleceniach widac ikone I etykiete naraz */
	#clients_list table.grid td.cico[data-label]::before,
	#orders_list table.grid td.cico[data-label]::before,
	#reminders_main table.grid td.cico[data-label]::before{ display:none !important; }
	#clients_list table.grid td.cico .cardico,
	#orders_list table.grid td.cico .cardico,
	#reminders_main table.grid td.cico .cardico{ display:inline-flex; flex:0 0 auto; margin-top:1px; color:var(--pl-muted,#6b7682); }
	#clients_list table.grid td.cico .cardico .appico,
	#orders_list table.grid td.cico .cardico .appico,
	#reminders_main table.grid td.cico .cardico .appico{ width:15px; height:15px; }
	/* Komorka Telefon/E-mail: dwie linie kontaktu jedna pod druga, kazda z wlasna
	   ikona (telefon i koperta). Nadpisuje wierszowy uklad .cico na kolumnowy. */
	#orders_list table.grid td.tel.cico{ flex-direction:column; gap:5px; }
	#orders_list table.grid td.tel.cico .cline{ display:flex; align-items:flex-start; gap:8px; }
}

/* =====================================================================
   RWD: Lista ZLECEN (telefon). Tabela #orders_list (13 kolumn, render
   server-side tpl/orders_list.tpl) -> KARTY. Karta jako flex-kolumna, by
   ustawic kolejnosc: Klient (tytul) -> Status/priorytet -> reszta pol -> akcje.
   Pigulki statusu w poziomie. Zakres #orders_list (nie rusza kalendarza).
   ===================================================================== */
@media (max-width:600px){
	#orders_list table.grid,
	#orders_list table.grid tbody,
	#orders_list table.grid tr,
	#orders_list table.grid td { display:block; width:auto !important; }
	#orders_list table.grid { border-spacing:0; }
	#orders_list table.grid tr.grid_title { display:none; }

	/* karta = siatka 2-kolumnowa: krotkie pola po 2 w rzedzie, dlugie na calosc */
	#orders_list table.grid tr[data-id]{
		display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:7px; align-items:start;
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8);
		border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:11px 13px;
		box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#orders_list table.grid td{
		border:0 !important; background:transparent !important;
		padding:0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important; font-size:12.5px; color:var(--pl-fg,#3f4750);
	}
	#orders_list table.grid td[data-label]::before{
		content:attr(data-label); display:block;
		font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
		color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}

	/* pola pelnej szerokosci (naglowek karty + dlugie tresci) */
	#orders_list table.grid td.c-name,
	#orders_list table.grid td.c-status,
	#orders_list table.grid td.c-actions,
	#orders_list table.grid td[data-label="Numer / paragon"],
	#orders_list table.grid td[data-label="Adres"],
	#orders_list table.grid td[data-label="Opis / naprawa"],
	#orders_list table.grid td[data-label="Serwisanci"]{ grid-column:1 / -1; }

	/* 1) NUMER zlecenia - na samej gorze, wyrazny */
	#orders_list table.grid td[data-label="Numer / paragon"]{
		order:-3; font-weight:800; color:var(--pl-accent-d,#1373c4); font-size:13px; line-height:1.3;
	}
	#orders_list table.grid td[data-label="Numer / paragon"]::before{ display:none; }
	/* 2) KLIENT - tytul karty */
	#orders_list table.grid td.c-name{
		order:-2; font-size:15.5px; font-weight:800; color:var(--pl-ink,#222a31);
	}
	#orders_list table.grid td.c-name::before{ display:none; }
	/* 3) STATUS / PRIORYTET / RODZAJ - pigulki pod tytulem */
	#orders_list table.grid td.c-status{ order:-1; }
	#orders_list table.grid td.c-status::before{ display:none; }
	#orders_list table.grid td.c-status .spk-stack{
		flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px;
	}
	/* JEDNOLITY rozmiar wszystkich pigulek (status/priorytet/rodzaj) - w table.grid
	   pl-pill bylo zmniejszane do 8px, st-pill mialo 9px -> stad nierowne. */
	#orders_list table.grid td.c-status .st-pill,
	#orders_list table.grid td.c-status .pl-pill,
	#orders_list table.grid td.c-status .spk-kind{
		display:inline-block; font-size:11px; font-weight:800; line-height:1.5;
		padding:3px 10px; border-radius:7px; letter-spacing:.2px; white-space:nowrap; vertical-align:middle;
	}
	/* rodzaj naprawy jako delikatna pigulka (jak na makiecie) */
	#orders_list table.grid td.c-status .spk-kind{
		background:#eef2f7; color:#55606b; opacity:1;
	}
	#orders_list table.grid td.c-status .spk-kind.warr{ background:#fde8e8; color:#b42318; }

	/* dlugie pola tekstowe nizej (po sparowanych polach krotkich) */
	#orders_list table.grid td[data-label="Adres"],
	#orders_list table.grid td[data-label="Opis / naprawa"],
	#orders_list table.grid td[data-label="Serwisanci"]{ order:1; }

	/* ukryj nieistotne + puste komorki */
	#orders_list table.grid td.c-lp,
	#orders_list table.grid td:empty{ display:none; }

	/* akcje na dole, pelna szerokosc */
	#orders_list table.grid td.c-actions{
		order:9; display:flex; flex-wrap:wrap; gap:6px;
		margin-top:4px; padding-top:9px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#orders_list table.grid td.c-actions a{
		flex:0 1 auto; min-width:44px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px;
		color:var(--pl-accent-d,#1373c4);
	}
	#orders_list table.grid td.c-actions .ind{
		display:inline-flex; align-items:center; height:40px; margin:0; opacity:.7;
	}
}

/* =====================================================================
   RWD: ROZLICZENIA (tablet <=1024; na telefonie modul ukryty z menu).
   Dwie tabele (serwisanci + historia), obie z klasa .money
   (tpl/money_list_serv.tpl, money_list_hist.tpl) -> KARTY 2-kol.
   Wiersze bez data-id -> celujemy tr:not(.grid_title). Scope: table.grid.money.
   ===================================================================== */
@media (max-width:1024px){
	table.grid.money,
	table.grid.money tbody,
	table.grid.money tr,
	table.grid.money td { display:block; width:auto !important; }
	table.grid.money{ border-spacing:0; }
	table.grid.money tr.grid_title{ display:none; }
	table.grid.money tr:not(.grid_title){
		display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:7px; align-items:start;
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:11px 13px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	table.grid.money td{
		border:0 !important; background:transparent !important; padding:0 !important;
		height:auto !important; min-height:0 !important; text-align:left !important; white-space:normal !important;
		font-size:12.5px; color:var(--pl-fg,#3f4750);
	}
	table.grid.money td[data-label]::before{
		content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase;
		letter-spacing:.4px; color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	table.grid.money td.c-name,
	table.grid.money td.c-actions,
	table.grid.money td[data-label="Opis"]{ grid-column:1 / -1; }
	table.grid.money td.c-name{ order:-2; font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); }
	table.grid.money td.c-name::before{ display:none; }
	table.grid.money td[data-label="Opis"]{ order:1; }
	table.grid.money td.c-lp,
	table.grid.money td:empty{ display:none; }
	table.grid.money td.c-actions{
		order:9; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; padding-top:9px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	table.grid.money td.c-actions a{
		flex:0 1 auto; min-width:44px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px; color:var(--pl-accent-d,#1373c4);
	}
	table.grid.money td.c-actions a img{ width:20px; height:20px; }
}

/* =====================================================================
   RWD: Lista OFERT (telefon). Tabela #ofe_list (naglowek w <thead><th>,
   wiersze w <tbody>, wrapper .grid_scroll; render tpl/offers_list_ofe.tpl)
   -> KARTY 2-kolumnowe. Wiersze bez data-id -> celujemy tbody tr.
   ===================================================================== */
@media (max-width:600px){
	#ofe_list .grid_scroll{ overflow:visible; max-height:none; }
	#ofe_list table.grid,
	#ofe_list table.grid thead,
	#ofe_list table.grid tbody,
	#ofe_list table.grid tr,
	#ofe_list table.grid td { display:block; width:auto !important; }
	#ofe_list table.grid thead{ display:none; }
	#ofe_list table.grid tbody tr{
		display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:7px; align-items:start;
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:11px 13px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#ofe_list table.grid td{
		border:0 !important; background:transparent !important; padding:0 !important;
		height:auto !important; min-height:0 !important; text-align:left !important; white-space:normal !important;
		font-size:12.5px; color:var(--pl-fg,#3f4750);
	}
	#ofe_list table.grid td[data-label]::before{
		content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase;
		letter-spacing:.4px; color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	#ofe_list table.grid td.c-name,
	#ofe_list table.grid td.c-actions,
	#ofe_list table.grid td[data-label="Uwagi"]{ grid-column:1 / -1; }
	#ofe_list table.grid td.c-name{ order:-2; font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); }
	#ofe_list table.grid td.c-name::before{ display:none; }
	#ofe_list table.grid td[data-label="Uwagi"]{ order:1; }
	#ofe_list table.grid td.c-lp,
	#ofe_list table.grid td:empty{ display:none; }
	#ofe_list table.grid td.c-actions{
		order:9; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; padding-top:9px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#ofe_list table.grid td.c-actions a{
		flex:0 1 auto; min-width:44px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px; color:var(--pl-accent-d,#1373c4);
	}
	#ofe_list table.grid td.c-actions a img{ width:20px; height:20px; }
}

/* =====================================================================
   RWD: Lista MAGAZYNU/czesci (telefon). Tabela #products_list (zmienna liczba
   kolumn: show_kon/show_roz; render tpl/product_list_stany.tpl) -> KARTY 2-kol.
   Wiersze nie maja data-id (klasa "click") -> celujemy tr:not(.grid_title).
   ===================================================================== */
@media (max-width:600px){
	#products_list table.grid,
	#products_list table.grid tbody,
	#products_list table.grid tr,
	#products_list table.grid td { display:block; width:auto !important; }
	#products_list table.grid{ border-spacing:0; }
	#products_list table.grid tr.grid_title{ display:none; }
	#products_list table.grid tr:not(.grid_title){
		display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:7px; align-items:start;
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:11px 13px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#products_list table.grid td{
		border:0 !important; background:transparent !important; padding:0 !important;
		height:auto !important; min-height:0 !important; text-align:left !important; white-space:normal !important;
		font-size:12.5px; color:var(--pl-fg,#3f4750);
	}
	#products_list table.grid td[data-label]::before{
		content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase;
		letter-spacing:.4px; color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	#products_list table.grid td.c-name,
	#products_list table.grid td.c-actions,
	#products_list table.grid td[data-label="Opis"]{ grid-column:1 / -1; }
	#products_list table.grid td.c-name{ order:-2; font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); }
	#products_list table.grid td.c-name::before{ display:none; }
	#products_list table.grid td[data-label="Opis"]{ order:1; }
	#products_list table.grid td.c-lp,
	#products_list table.grid td:empty{ display:none; }
	#products_list table.grid td.c-actions{
		order:9; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; padding-top:9px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#products_list table.grid td.c-actions a{
		flex:0 1 auto; min-width:44px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px; color:var(--pl-accent-d,#1373c4);
	}
	#products_list table.grid td.c-actions a img{ width:20px; height:20px; }
}

/* =====================================================================
   RWD: Lista PRZYPOMNIEN (telefon). Tabela #reminders_main (15 kolumn,
   render server-side tpl/reminders_list.tpl) -> KARTY 2-kolumnowe (jak zlecenia).
   ===================================================================== */
@media (max-width:600px){
	#reminders_main table.grid,
	#reminders_main table.grid tbody,
	#reminders_main table.grid tr,
	#reminders_main table.grid td { display:block; width:auto !important; }
	#reminders_main table.grid { border-spacing:0; }
	#reminders_main table.grid tr.grid_title { display:none; }

	#reminders_main table.grid tr[data-id]{
		display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:7px; align-items:start;
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 11px; padding:11px 13px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#reminders_main table.grid td{
		border:0 !important; background:transparent !important; padding:0 !important;
		height:auto !important; min-height:0 !important; text-align:left !important; white-space:normal !important;
		font-size:12.5px; color:var(--pl-fg,#3f4750);
	}
	#reminders_main table.grid td[data-label]::before{
		content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase;
		letter-spacing:.4px; color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	/* pola pelnej szerokosci */
	#reminders_main table.grid td.c-name,
	#reminders_main table.grid td.c-actions,
	#reminders_main table.grid td[data-label="Opis"],
	#reminders_main table.grid td[data-label="Uwagi"],
	#reminders_main table.grid td[data-label="Wprowadził / serwisant"]{ grid-column:1 / -1; }
	#reminders_main table.grid td.c-name{ order:-2; font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); }
	#reminders_main table.grid td.c-name::before{ display:none; }
	#reminders_main table.grid td[data-label="Opis"],
	#reminders_main table.grid td[data-label="Uwagi"],
	#reminders_main table.grid td[data-label="Wprowadził / serwisant"]{ order:1; }
	#reminders_main table.grid td.c-lp,
	#reminders_main table.grid td:empty{ display:none; }
	#reminders_main table.grid td.c-actions{
		order:9; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; padding-top:9px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#reminders_main table.grid td.c-actions a{
		flex:0 1 auto; min-width:44px; width:auto; height:40px; margin:0;
		display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px; color:var(--pl-accent-d,#1373c4);
	}
	#reminders_main table.grid td.c-actions a img{ width:20px; height:20px; }
}

/* =====================================================================
   RWD: tabele list (Zlecenia/Klienci) na LAPTOPACH/tabletach (601-1650px).
   W skorce wiersze danych maja white-space:nowrap (tr.grid td ...) -> tabela
   sie nie zawija i rozpycha poza ekran (pelne dane dopiero przy duzej szer.).
   Tu pozwalamy zawijac + zageszczamy, by wszystkie kolumny zmiescily sie juz
   na malych laptopach (1024/1280). Karty wlaczaja sie dopiero <=600px.
   ===================================================================== */
@media (min-width:601px) and (max-width:1650px){
	#orders_list table.grid,
	#clients_list table.grid,
	#reminders_main table.grid,
	#products_list table.grid,
	#ofe_list table.grid,
	table.grid.money{ width:100%; border-spacing:2px; }
	#orders_list table.grid td,
	#orders_list table.grid tr.grid_title td,
	#clients_list table.grid td,
	#clients_list table.grid tr.grid_title td,
	#reminders_main table.grid td,
	#reminders_main table.grid tr.grid_title td,
	#products_list table.grid td,
	#products_list table.grid tr.grid_title td,
	#ofe_list table.grid td,
	#ofe_list table.grid th,
	table.grid.money td,
	table.grid.money tr.grid_title td{
		overflow-wrap:break-word;
		padding:4px 6px; vertical-align:middle;
	}
	/* siatka nigdy nie rozpycha strony - ewentualny nadmiar scrolluje sie wewnatrz */
	#orders_list [data-ms-grid],
	#clients_list [data-ms-grid],
	#reminders_main [data-ms-grid],
	#products_list [data-ms-grid]{ overflow-x:auto; }
}

/* Uwaga: dawne bloki @media(>1651px) wymuszajace white-space:normal na listach/
   raportach/ustawieniach usuniete - byly workaroundem dla skorkowego nowrap
   (tr.grid td), ktory zostal wyciety z default.css/dark.css. Teraz komorki
   zawijaja domyslnie (regula globalna wyzej), a td.actions ma nowrap tylko >1024px. */

/* =====================================================================
   RWD: widok TABLETU (601-1024px) - SKONDENSOWANA tabela wg makiety:
   ukrywamy mniej istotne kolumny, by zostaly najwazniejsze (czytelniej niz
   13 kolumn naraz). Ukrywamy po pozycji (nth-child) - naglowek i dane sa
   wyrownane kolumnami. Na laptopach >1024 wracaja wszystkie kolumny.
   ===================================================================== */
@media (min-width:601px) and (max-width:1024px){
	/* Zlecenia: ukryj Lp, Data zgloszenia, Ost. wizyta, Telefon/e-mail.
	   Po KLUCZU kolumny (data-col), nie po pozycji - odporne na dodane kolumny
	   i na przestawianie kolejnosci ("Dostosuj tabelę"). Kolumny rozdzielone sa
	   i tak domyslnie ukryte (.ms-col-hidden). */
	#orders_list table.grid tr > td[data-col="lp"],
	#orders_list table.grid tr > td[data-col="date_insert"],
	#orders_list table.grid tr > td[data-col="last_visit"],
	#orders_list table.grid tr > td[data-col="phone"]{ display:none; }
	/* Klienci: ukryj Lp, Uwagi, Wspolrzedne. */
	#clients_list table.grid tr > td[data-col="lp"],
	#clients_list table.grid tr > td[data-col="info"],
	#clients_list table.grid tr > td[data-col="gps"]{ display:none; }

	/* --- styl wg makiety: wiersze jako osobne PANELE (odstep) + zielony pasek
	   naglowka z zaokraglonymi koncami. Kasujemy per-komorkowy radius:4px ze
	   skorki ("kazda sekcja zaokraglona") i radius dajemy TYLKO na konce wiersza/
	   naglowka (pierwsza/ostatnia WIDOCZNA kolumna). border-spacing daje panele. */
	#orders_list table.grid,
	#clients_list table.grid{ border-collapse:separate; border-spacing:0 8px; }
	#orders_list table.grid tr td,
	#clients_list table.grid tr td{ border-radius:0; }
	/* wiersze danych = biale panele z subtelnym cieniem */
	#orders_list table.grid tr[data-id] td,
	#clients_list table.grid tr[data-id] td{
		background:var(--pl-card,#fff);
		border-top:1px solid var(--pl-line,#e2e4e8); border-bottom:1px solid var(--pl-line,#e2e4e8);
		box-shadow:0 1px 2px rgba(20,50,80,.05);
	}
	/* zaokraglone konce PANELU: lewy = pierwsza domyslnie widoczna kolumna (data-col),
	   prawy = ostatnia komorka (kolumna akcji, zawsze :last-child i zawsze widoczna). */
	#orders_list table.grid tr[data-id] td[data-col="date"]{ border-left:1px solid var(--pl-line,#e2e4e8); border-radius:10px 0 0 10px; }
	#orders_list table.grid tr[data-id] td:last-child{ border-right:1px solid var(--pl-line,#e2e4e8); border-radius:0 10px 10px 0; }
	#clients_list table.grid tr[data-id] td[data-col="client"]{ border-left:1px solid var(--pl-line,#e2e4e8); border-radius:10px 0 0 10px; }
	#clients_list table.grid tr[data-id] td:last-child{ border-right:1px solid var(--pl-line,#e2e4e8); border-radius:0 10px 10px 0; }
	/* zaokraglone konce zielonego naglowka (srodkowe komorki bez radius -> ciagly pasek) */
	#orders_list table.grid tr.grid_title td[data-col="date"]{ border-radius:8px 0 0 8px; }
	#orders_list table.grid tr.grid_title td:last-child{ border-radius:0 8px 8px 0; }
	#clients_list table.grid tr.grid_title td[data-col="client"]{ border-radius:8px 0 0 8px; }
	#clients_list table.grid tr.grid_title td:last-child{ border-radius:0 8px 8px 0; }
	/* mniejszy naglowek (waskie kolumny) - slowa lamia sie na spacjach, nie litera-po-literze */
	#orders_list table.grid tr.grid_title td,
	#clients_list table.grid tr.grid_title td{ font-size:10.5px; padding:7px 5px; line-height:1.25; }
	/* kolumna daty: krotka, bez lamania w srodku (bije white-space:normal !important z reguly laptopowej) */
	#orders_list table.grid tr[data-id] td[data-col="date"]{ white-space:nowrap !important; }
	/* ikony akcji jako przyciski z ramka + ODSTEPY (byly za blisko) */
	#orders_list table.grid td.actions,
	#clients_list table.grid td.actions{ white-space:normal; }
	#orders_list table.grid td.actions a,
	#clients_list table.grid td.actions a{
		border:1px solid var(--pl-line,#e2e4e8); background:var(--pl-soft,#f2f6fb); border-radius:7px; width:34px; height:32px; margin:3px;
	}
	#orders_list table.grid td.actions a:hover,
	#clients_list table.grid td.actions a:hover{ border-color:var(--menu-accent,#2A9FFF); background:var(--pl-wkbg,#eef7ff); }
}

/* krotka data (d-short, np. 26.06) zamiast pelnej (d-full, 2026-06-26) TYLKO na
   TABLECIE (601-1024). Telefon i desktop pokazuja pelna date. */
.d-short{ display:none; }
@media (min-width:601px) and (max-width:1024px){
	.d-full{ display:none; }
	.d-short{ display:inline; }
}

/* =====================================================================
   RWD: DIALOGI jQuery UI pelnoekranowe na telefonie i TABLECIE (<=1024px).
   JS otwiera dialogi ze sztywna szerokoscia (np. window.width()-200, 480px),
   co sie rozjezdza. Tu nadpisujemy inline-style jQuery UI przez !important:
   dialog wypelnia ekran (takze po obrocie - CSS reaguje na zmiane orientacji),
   tresc scrolluje sie, a pasek przyciskow (Zapisz/Anuluj) jest przyklejony na
   dole i mibie sie w ekranie (wczesniej "Anuluj" uciekal poza prawa krawedz).
   Dotyczy wszystkich dialogow (klient, zlecenie, sprzet, przypomnienie...).
   ===================================================================== */
@media (max-width:1024px){
	.ui-dialog.ui-widget{
		position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
		width:100% !important; max-width:100% !important;
		height:100% !important; max-height:100% !important;       /* fallback */
		height:100dvh !important; max-height:100dvh !important;    /* uwzglednia pasek przegladarki mobilnej */
		margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
		box-sizing:border-box !important;
		/* UWAGA: display BEZ !important - inaczej nadpisuje display:none, ktorym
		   jQuery UI zamyka okno, i wszystkie zainicjowane dialogi (phone_form,
		   parts_form...) zostaja widoczne pelnoekranowo i nakladaja sie. */
		display:flex; flex-direction:column;
	}
	.ui-dialog .ui-dialog-titlebar{ flex:0 0 auto; border-radius:0; }
	.ui-dialog .ui-dialog-content{
		flex:1 1 auto; width:auto !important; height:auto !important;
		min-height:0 !important; max-height:none !important;
		box-sizing:border-box; overflow:auto;
	}
	/* pasek przyciskow ZAWSZE na dole, widoczny (przyciski pelnej szerokosci) */
	.ui-dialog .ui-dialog-buttonpane{
		flex:0 0 auto; margin:0; position:relative; z-index:2;
		border-top:1px solid var(--pl-line,#e2e4e8); background:inherit;
	}
	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{ display:flex; flex-wrap:wrap; gap:8px; width:100%; float:none; }
	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{ flex:1 1 0; min-width:0; min-height:44px; margin:0; padding:6px 8px; white-space:normal; line-height:1.15; word-break:break-word; }
	.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button .ui-button-text{ white-space:normal; }
}

/* =====================================================================
   RWD: zagniezdzone listy/tabele W DIALOGACH (telefon/tablet <=1024px).
   Np. lista Urzadzen/Przypomnien w formularzu klienta albo plan/historia w
   zleceniu to table.grid z white-space:nowrap (skorka) -> rozpychaly okno
   poza ekran (zmierzone: 641px tabela w 360px oknie). Tu pozwalamy zawijac,
   a grid dostaje wlasny scroll poziomy - okno juz sie nie rozjezdza.
   ===================================================================== */
@media (max-width:1024px){
	.ui-dialog .ui-dialog-content [data-ms-grid]{ overflow-x:auto; max-width:100%; }
	.ui-dialog .ui-dialog-content table.grid td,
	.ui-dialog .ui-dialog-content table.grid tr.grid_title td{
		white-space:normal !important; overflow-wrap:break-word;
	}
}
/* Historia przypomnien w formularzu (#rem_hist_list, 10 kolumn) -> KARTY na telefonie,
   zamiast waskiego poziomego scrolla (tabela byla szersza niz okno). */
@media (max-width:600px){
	#rem_hist_list table.grid,
	#rem_hist_list table.grid tbody,
	#rem_hist_list table.grid tr,
	#rem_hist_list table.grid td{ display:block; width:auto !important; }
	#rem_hist_list table.grid{ border-spacing:0; }
	#rem_hist_list table.grid tr.grid_title{ display:none; }
	#rem_hist_list table.grid tr:not(.grid_title){
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 10px; padding:6px 12px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#rem_hist_list table.grid td{
		border:0 !important; border-bottom:1px solid var(--pl-line2,#eef1f4) !important;
		background:transparent !important; padding:6px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important;
		display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--pl-ink,#222a31);
	}
	#rem_hist_list table.grid td[data-label]::before{
		content:attr(data-label); flex:0 0 auto; margin-right:auto; color:var(--pl-muted,#6b7682);
		font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.3px;
	}
	#rem_hist_list table.grid td.c-lp{ display:none; }
	#rem_hist_list table.grid td.c-actions{ border-bottom:0 !important; justify-content:flex-end; padding-top:6px !important; }
}

/* Lista DOKUMENTACJI (#doc_list, kol. Lp/Nazwa/Opis/Akcja) -> KARTY na telefonie. */
@media (max-width:600px){
	#doc_list .grid_scroll{ overflow:visible; max-height:none; }
	#doc_list table.grid,
	#doc_list table.grid thead,
	#doc_list table.grid tbody,
	#doc_list table.grid tr,
	#doc_list table.grid td{ display:block; width:auto !important; }
	#doc_list table.grid{ border-spacing:0; }
	#doc_list table.grid thead{ display:none; }
	#doc_list table.grid tbody tr{
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 10px; padding:8px 12px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#doc_list table.grid td{
		border:0 !important; background:transparent !important; padding:3px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important; font-size:12.5px; color:var(--pl-fg,#3f4750);
	}
	#doc_list table.grid td[data-label]::before{
		content:attr(data-label); display:block; font-size:10px; font-weight:700; text-transform:uppercase;
		letter-spacing:.4px; color:var(--pl-muted,#6b7682); margin-bottom:1px;
	}
	#doc_list table.grid td.c-name{ font-size:15px; font-weight:800; color:var(--pl-ink,#222a31); }
	#doc_list table.grid td.c-name::before{ display:none; }
	#doc_list table.grid td.c-lp,
	#doc_list table.grid td:empty{ display:none; }
	#doc_list table.grid td.c-actions{
		display:flex; gap:6px; margin-top:8px; padding-top:8px !important;
		border-top:1px solid var(--pl-line2,#eef1f4) !important;
	}
	#doc_list table.grid td.c-actions a{
		flex:1 1 0; height:40px; display:inline-flex; align-items:center; justify-content:center;
		background:var(--pl-soft,#f2f6fb); border:1px solid var(--pl-line,#e2e4e8); border-radius:9px; color:var(--pl-accent-d,#1373c4);
	}
}

/* Lista URUCHOMIEN/devices (#devices_list, 15 kolumn) -> KARTY na tablecie (<=1024;
   modul ukryty na telefonie). Uklad kompaktowy "Etykieta .... wartosc". */
@media (max-width:1024px){
	#devices_list .grid_scroll{ overflow:visible; max-height:none; }
	#devices_list table.grid,
	#devices_list table.grid tbody,
	#devices_list table.grid tr,
	#devices_list table.grid td{ display:block; width:auto !important; }
	#devices_list table.grid{ border-spacing:0; }
	#devices_list table.grid tr.grid_title{ display:none; }
	#devices_list table.grid tr:not(.grid_title){
		background:var(--pl-card,#fff); border:1px solid var(--pl-line,#e2e4e8); border-left:4px solid var(--menu-accent,#2A9FFF);
		border-radius:12px; margin:0 0 10px; padding:6px 12px; box-shadow:0 1px 3px rgba(20,50,80,.06);
	}
	#devices_list table.grid td{
		border:0 !important; border-bottom:1px solid var(--pl-line2,#eef1f4) !important;
		background:transparent !important; padding:6px 0 !important; height:auto !important; min-height:0 !important;
		text-align:left !important; white-space:normal !important;
		display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--pl-ink,#222a31);
	}
	#devices_list table.grid td[data-label]::before{
		content:attr(data-label); flex:0 0 auto; margin-right:auto; color:var(--pl-muted,#6b7682);
		font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.3px;
	}
	#devices_list table.grid td.c-name{ font-size:14.5px; font-weight:800; color:var(--pl-ink,#222a31); }
	#devices_list table.grid td.c-lp{ display:none; }
	#devices_list table.grid td.c-actions{ justify-content:flex-end; border-bottom:0 !important; padding-top:8px !important; }
}
/* ROZLICZENIE (#money_form) na tablecie (<=1024; na telefonie modul ukryty): uklad
   to <table> z td 60%/2%/38% obok siebie + szeroka 13-kol tabela protokolow.
   Zwijamy kolumny pionowo, spacer chowamy, a szerokie tabele grid scrolluja poziomo. */
@media (max-width:1024px){
	#money_form form.money > table,
	#money_form form.money > table > tbody,
	#money_form form.money > table > tbody > tr{ display:block; width:auto; }
	#money_form form.money > table > tbody > tr > td{ display:block; width:auto !important; box-sizing:border-box; overflow-x:auto; }
	#money_form form.money > table > tbody > tr > td[width="2%"]{ display:none; }
	#money_form #form{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
	#money_form #form .mh-desc input{ min-width:0; }
}
/* Zakladki w dialogach (.tabs-box: Urzadzenia/Mapa/Pliki/Przypomnienia/Notatka w
   kliencie; historia w zleceniu) na telefonie zamieniane na AKORDEON (sekcje
   domyslnie zwiniete) przez msTabsToAccordion() w util.js. Pasek zakladek (<ul>)
   chowamy; przed kazdym panelem JS wstawia klikalny naglowek .ms-acc-h.
   display:block !important na panelu nadpisuje inline display:none jQuery UI tabs. */
@media (max-width:600px){
	/* marginesy boczne 12px - rownanie z sekcjami (.sections padding-x:12) i Znacznikami (margin-x:12) */
	.ui-dialog .ui-dialog-content .tabs-box.ms-acc{ border:0 !important; padding:0 !important; margin:8px 12px 0 !important; }
	.ui-dialog .ui-dialog-content .tabs-box.ms-acc > ul{ display:none !important; }
	/* naglowek = karta z ramka (jak pozostale sekcje); kolor DZIEDZICZONY z formularza
	   (var(--pl-ink) bywal ciemny na ciemnej skorce -> tekst niewidoczny). */
	.ui-dialog .ui-dialog-content .ms-acc-h{
		cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
		padding:11px 12px; margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.03em;
		text-transform:uppercase; color:inherit; opacity:.95;
		border:1px solid rgba(127,127,127,.35); border-radius:6px;
	}
	.ui-dialog .ui-dialog-content .ms-acc-h::after{
		content:"\25BE"; margin-left:auto; flex:0 0 auto; color:var(--pl-muted,#6b7682); transition:transform .15s;
	}
	.ui-dialog .ui-dialog-content .ms-acc-h.collapsed::after{ transform:rotate(-90deg); }
	/* rozwiniety: naglowek laczy sie z panelem w jedna karte (wspolna ramka) */
	.ui-dialog .ui-dialog-content .ms-acc-h:not(.collapsed){ margin-bottom:0; border-bottom:0; border-radius:6px 6px 0 0; }
	.ui-dialog .ui-dialog-content .ms-acc-panel{ display:block !important; min-height:0 !important; }
	.ui-dialog .ui-dialog-content .ms-acc-panel.collapsed{ display:none !important; }
	.ui-dialog .ui-dialog-content .ms-acc-panel:not(.collapsed){
		border:1px solid rgba(127,127,127,.35); border-top:0; border-radius:0 0 6px 6px;
		margin:0 0 10px; padding:8px 12px 12px;
	}
}

/* Okno zlecenia 1025-1279px: 4 panele obok siebie sciskaly kolumne KLIENT
   (auto) do pionowej linijki. Uklad 2x2 - 2 sekcje po 2 panele
   (KLIENT+ZGLOSZENIE / WIZYTA+REALIZACJA). Zdejmujemy tez limit szerokosci
   KLIENT (skorki: #client_section max-width:240px), by panel wypelnil polowe. */
@media (min-width:1025px) and (max-width:1279px){
	#order_form .sections{ grid-template-columns:1fr 1fr !important; }
	#order_form #client_section,
	#order_form #client_fieldset,
	#order_form #client_fieldset label{ max-width:none !important; width:auto !important; }
	/* Okno klienta: te same 2x2 (Dane+Adres / Kontakt+Przypomnienia) zamiast auto-fit 3-4 kolumn */
	#client_form .sections{ grid-template-columns:1fr 1fr !important; }
}

/* Plakietki priorytetu w oknie zlecenia: w przedziale 1280-1580px kolumna WIZYTA
   (uklad 4-kolumnowy) jest na tyle waska, ze 4 plakietki (NORMALNY/WYSOKI/AWARIA/
   TELEFON) zawijaly sie do 2 linii. Mniejszy padding/odstep/czcionka + jedna linia. */
@media (min-width:1280px) and (max-width:1580px){
	/* display:flex jawnie - skorki maja #order_form div{display:block} (1,0,1),
	   wiec bez #order_form + klasa (1,1,0) kontener nie bylby flexem. */
	#order_form .pl-pill-select{ display:flex; flex-wrap:nowrap; gap:4px; }
	#order_form .pl-pill-select .pl-pill{ font-size:10px; padding:5px 8px; letter-spacing:.2px; }
}

/* Plakietki priorytetu ponizej 1280px (uklad 2- i 1-kolumnowy - panel WIZYTA
   szeroki): rozkladaja sie rowno na 4, wypelniajac cala szerokosc panelu.
   display:flex jawnie - bije skorkowe #order_form div{display:block} (specyficznosc). */
@media (max-width:1279px){
	#order_form .pl-pill-select{ display:flex; flex-wrap:nowrap; gap:6px; }
	#order_form .pl-pill-select .pl-pill{ flex:1 1 0; min-width:0; text-align:center; padding-left:4px; padding-right:4px; }
}

/* Formularze w dialogach: 1 PANEL (jedna kolumna sekcji) na telefonie i tablecie.
   Klient ma auto-fit minmax(240px,1fr) -> przy szerszym oknie robily sie 2 kolumny;
   tu wymuszamy pojedyncza kolumne. (gear/reminder juz sa 1-kolumnowe). */
@media (max-width:1024px){
	#client_form .sections,
	#order_form .sections{ grid-template-columns:1fr !important; }
	/* Sekcja KLIENT w zleceniu: skorki narzucaja #client_section{max-width:240px}
	   (na desktopie kolumna "auto" ma byc waska). Na telefonie/tablecie kolumna
	   jest pojedyncza -> zdejmujemy limit, by dane klienta szly na pelna szerokosc.
	   (app.css zdejmowal limit tylko z #client_fieldset, nie z #client_section). */
	#order_form #client_section,
	#order_form #client_fieldset,
	#order_form #client_fieldset label{ max-width:none !important; width:auto !important; }
	/* PROPOZYCJA TERMINU: na desktopie .plan-panel jest flex-kolumna, a lista ma
	   flex:1 1 0 (rowna wysokosc z kolumnami obok). W jednokolumnowym akordeonie
	   na telefonie/tablecie brak wolnej przestrzeni -> lista zwijala sie do 0px
	   (wpisow nie bylo widac). Tu lista dostaje naturalna wysokosc z limitem+scroll. */
	#order_form .plan-panel{ display:block; }
	#order_form .plan-panel #order_plan_list{ flex:0 0 auto !important; height:auto !important; max-height:50vh !important; overflow-y:auto; }
}

/* =====================================================================
   RWD: Formularz ZLECENIA na telefonie (<=600px) - AKORDEON (wg makiety).
   Sekcje (Klient/Zgloszenie/Wizyta/Realizacja) ida w 1 kolumnie; naglowek
   .ord-sec-h jest klikalny i zwija/rozwija sekcje (logika w orders.js).
   Pola pelnej szerokosci (nadpisuje inline width:245px/205px, size=45/55).
   ===================================================================== */
@media (max-width:600px){
	#order_form .sections{ grid-template-columns:1fr !important; gap:10px !important; }
	#order_form .sections label{ display:block; max-width:none !important; }
	#order_form .sections input:not([type="checkbox"]):not([type="hidden"]),
	#order_form .sections select,
	#order_form .sections textarea{ width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
	/* naglowek sekcji = klikalny pasek z chevronem */
	#order_form .sections .ord-sec-h{
		cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
		padding:11px 4px; margin:0 0 2px; opacity:1; font-size:12px;
	}
	#order_form .sections .ord-sec-h::after{
		content:"\25BE"; margin-left:auto; flex:0 0 auto; color:var(--pl-muted,#6b7682); transition:transform .15s;
	}
	#order_form .sections .section.collapsed .ord-sec-h::after{ transform:rotate(-90deg); }
	#order_form .sections .section.collapsed > fieldset > *:not(.ord-sec-h){ display:none; }

	/* naglowek KLIENT: ikony edycji/GPS dosuniete do prawej (przed chevronem), nie do
	   nazwy sekcji (wczesniej "uciekaly" w lewo zaraz za napisem KLIENT). */
	#order_form .sections .ord-sec-h .ord-sec-act{ margin-left:auto; }
	#order_form .sections .ord-sec-h:has(.ord-sec-act)::after{ margin-left:8px; }

	/* Karta KLIENTA: na telefonie etykiety tekstowe -> ikony (jak karta listy klientow) */
	#client_fieldset .cc-name{ font-size:17px; }
	#client_fieldset .cc-line{ display:flex; align-items:flex-start; gap:9px; }
	#client_fieldset .cc-line .cc-lbl{ display:none; }
	#client_fieldset .cc-line .cardico.cc-ico{ display:inline-flex; flex:0 0 auto; margin-top:2px; color:var(--pl-muted,#6b7682); }
	#client_fieldset .cc-line .cardico.cc-ico .appico{ width:16px; height:16px; }
	#client_fieldset .cc-line .cc-val{ flex:1 1 auto; }
	#client_fieldset .cc-addr #client_street, #client_fieldset .cc-addr #client_city{ display:inline; }
	#client_fieldset .cc-addr #client_city{ display:block; }
	#client_fieldset .cc-rem .cc-ico-rem{ flex:0 0 auto; margin-top:1px; }

	/* Sekcja ZNACZNIKI = zwijana jak pozostale (osobny kontener .znaczniki-row) */
	#order_form .znaczniki-row .ord-sec-h{
		cursor:pointer; user-select:none; display:flex; align-items:center; gap:8px;
		padding:11px 4px; margin:0; opacity:1; font-size:12px;
	}
	#order_form .znaczniki-row .ord-sec-h::after{
		content:"\25BE"; margin-left:auto; flex:0 0 auto; color:var(--pl-muted,#6b7682); transition:transform .15s;
	}
	#order_form .znaczniki-row.collapsed{ padding-top:0; padding-bottom:0; }
	#order_form .znaczniki-row.collapsed .ord-sec-h{ margin:0; }
	#order_form .znaczniki-row.collapsed .ord-sec-h::after{ transform:rotate(-90deg); }
	#order_form .znaczniki-row.collapsed > *:not(.ord-sec-h){ display:none; }
}

/* =====================================================================
   RWD: pasek wyszukiwania na telefonie i TABLECIE (<=1024px).
   - jedno pole .sbar-q (param q -> laczone OR LIKE w getdata) ZAWSZE widoczne;
   - przycisk "Filtry" (.sbar-filterbtn, wstrzykiwany przez searchform.js) rozwija
     POZOSTALE kontrolki: selecty, date-pickery (ms-daterange) i znaczniki (.sbar-tags).
     Pola TEKSTOWE (.flab-text) chowamy - sa juz w jednym polu q.
   - druk listy i eksport Excel ukryte; w akcjach zostaje "Dodaj".
   Desktop (>1024) bez zmian - pelne filtry, brak q.
   ===================================================================== */
.sbar-q{ display:none; }
.sbar-filterbtn{ display:none; }
@media (max-width:1024px){
	/* 1) jedno pole szukania - zawsze widoczne */
	.searchbar .sbar-q{ display:flex; gap:8px; width:100%; align-items:center; padding-top:6px; }
	.searchbar .sbar-q input[name="q"]{ flex:1 1 auto; min-width:0; min-height:40px; box-sizing:border-box; }
	.searchbar .sbar-q .sbar-q-go{ flex:0 0 auto; }

	/* 2) panel filtrow (selecty/daty/znaczniki) zwijany pod "Filtry" */
	.searchbar .sbar-main{ display:none; width:100%; gap:9px 8px; }
	.searchbar.filters-open .sbar-main{ display:flex; flex-wrap:wrap; }
	/* pola tekstowe sa w polu q -> chowamy je; zostaja selecty/daty/znaczniki */
	.searchbar .sbar-main > .flab-text{ display:none !important; }
	.searchbar .sbar-main > .flab{ flex:1 1 46%; min-width:0; }
	.searchbar .sbar-main > .flab > select{ width:100%; min-height:38px; box-sizing:border-box; }
	.searchbar .sbar-main > .ms-daterange{ flex:1 1 46%; min-width:0; }
	.searchbar .sbar-main > .sbar-tags{ flex:1 1 100%; }

	/* przycisk Filtry */
	.sbar-filterbtn{
		display:inline-flex; align-items:center; gap:7px; order:-1;
		height:40px; padding:0 13px; border-radius:10px; cursor:pointer;
		background:var(--pl-wkbg,#eef7ff); border:1px solid var(--pl-wkbd,#cfe6ff); color:var(--pl-accent-d,#1373c4);
		font-family:inherit; font-size:13px; font-weight:700; line-height:1;
	}
	.sbar-filterbtn .appico{ width:18px; height:18px; flex:0 0 auto; }
	.sbar-filterbtn .fl-cnt{
		min-width:18px; height:18px; padding:0 5px; border-radius:9px;
		background:var(--menu-accent,#2A9FFF); color:#fff; font-size:11px; font-weight:800;
		display:inline-flex; align-items:center; justify-content:center;
	}
	.sbar-filterbtn .fl-ch{ transition:transform .15s; }
	.searchbar.filters-open .sbar-filterbtn .fl-ch{ transform:rotate(180deg); }

	/* 3) druk/excel ukryte; redundantny przycisk szukania w akcjach ukryty (jest przy q) */
	.searchbar .sbar-print,
	.searchbar .sbar-export{ display:none !important; }
	.searchbar .sbar-actions a[data-ms-search]{ display:none; }
	.searchbar .sbar-actions{ width:100%; margin-left:0; justify-content:flex-start; gap:6px; }
	.searchbar .sbar-row{ padding-top:0; }
	/* przyciski akcji (np. Dodaj klienta) - oprawione w ramke jak "Filtry":
	   ta sama wysokosc (40px), ramka + tlo na tokenach (spojne jasna/ciemna skorka).
	   Wspolne klasy .sbar-actions a.toolbtn -> dotyczy WSZYSTKICH list. */
	.searchbar .sbar-actions a.toolbtn,
	.searchbar .sbar-actions a.icolink{
		box-sizing:border-box; height:40px; min-width:40px; width:auto; margin:0; padding:0 12px; border-radius:10px;
		background:var(--pl-wkbg,#eef7ff); border:1px solid var(--pl-wkbd,#cfe6ff); color:var(--pl-accent-d,#1373c4);
	}
	.searchbar .sbar-actions a.toolbtn .appico,
	.searchbar .sbar-actions a.icolink .appico{ width:20px; height:20px; }
	.searchbar .sbar-actions a.toolbtn:hover,
	.searchbar .sbar-actions a.icolink:hover{ border-color:var(--menu-accent,#2A9FFF); }
}

/* ===== Okna ustawien (uzytkownik/serwisant/grupa/znacznik/rodzaj/typ/voip/szablon):
   prosty, jednokolumnowy uklad sekcji jak w oknie urzadzenia (#client_gear_form).
   Style sekcji sa scope'owane po ID okien, wiec dialogi ustawien (#setting_form_*)
   nie lapaly ich wczesniej - stad legacy "szare pudelka". ===== */
[id^="setting_form_"] .sections {
	display: grid !important; grid-template-columns: 1fr; gap: 10px;
	align-items: stretch; overflow: visible !important; margin: 0;
}
[id^="setting_form_"] .sections > .section { float: none !important; width: auto !important; margin: 0 !important; min-width: 0; }
[id^="setting_form_"] .sections > .section > fieldset {
	display: flex; flex-direction: column; margin: 0; padding: 8px 10px;
	box-sizing: border-box; border: 1px solid rgba(127,127,127,.25); border-radius: 6px;
	background: rgba(127,127,127,.045); box-shadow: 0 1px 3px rgba(0,0,0,.06); /* karta jak w oknie klienta */
}
[id^="setting_form_"] .ord-sec-h,
[id^="setting_form_"] .sections > .section > h2 {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
	opacity: .6; border-bottom: 1px solid rgba(127,127,127,.35); padding-bottom: 5px; margin: 0 0 8px;
}
[id^="setting_form_"] .sections > .section > h2 { border-bottom: 0; padding-bottom: 0; }
/* przyciski-ikony w naglowku sekcji (np. zaznacz/odznacz wszystkich serwisantow) */
[id^="setting_form_"] .ord-sec-h .ord-sec-act { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
[id^="setting_form_"] .ord-sec-h .ord-sec-act a {
	display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px;
	border-radius: 6px; color: var(--ui-accent-ink, #1373c4);
}
[id^="setting_form_"] .ord-sec-h .ord-sec-act a:hover { background: rgba(42,159,255,.14); }
[id^="setting_form_"] .ord-sec-h .ord-sec-act svg { width: 17px; height: 17px; }
[id^="setting_form_"] .sections label { display: block; float: none !important; margin: 0 0 7px; margin-left: 0 !important; max-width: none; } /* margin-left:0 bije stare #setting_form_user label{margin-left:5px} - wcinalo inputy wzgledem checkboxow */
[id^="setting_form_"] .sections input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]),
[id^="setting_form_"] .sections select,
[id^="setting_form_"] .sections textarea { display: block; width: 100%; box-sizing: border-box; margin: 3px 0 0; }
/* Wybor koloru (serwisant / znacznik): schludna zaokraglona probka zamiast
   plaskiego prostokata. Wymusza !important, bo skorki maja
   input.color{border:0;margin:auto;padding:0 !important}. */
[id^="setting_form_"] .sections input.color {
	width: 52px !important; height: 32px !important; padding: 2px !important;
	margin: 3px 0 0 !important; border: 1px solid rgba(0,0,0,.2) !important;
	border-radius: 8px; background: transparent; cursor: pointer; box-sizing: border-box;
}
[id^="setting_form_"] .sections input.color::-webkit-color-swatch-wrapper { padding: 0; }
[id^="setting_form_"] .sections input.color::-webkit-color-swatch { border: none; border-radius: 6px; }
[id^="setting_form_"] .sections input.color::-moz-color-swatch { border: none; border-radius: 6px; }
[id^="setting_form_"] .sections .frow2 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; align-items: flex-end; }
[id^="setting_form_"] .sections .frow2 > label { flex: 1 1 120px; min-width: 0; margin: 0 0 7px; }
[id^="setting_form_"] .sections .frow2 > label.narrow { flex: 0 0 110px; }
/* "Dni (przed zleceniem)" - szersze pole, by etykieta zmiescila sie w 1 linii (i zwezila Szablon) */
[id^="setting_form_"] .sections .frow2 > label[for="days_remind"] { flex: 0 0 165px; }
/* grupy checkboxow ZAGNIEZDZONE w karcie (user/serwisant) - bezramkowe, by nie dublowac ramki.
   Bezposrednie .section > fieldset.shows (groups/tags/repair_kind/gear_type/template/voip) dostaja
   ramke-karte z reguly .section > fieldset (jednolite grupowanie z ramka we wszystkich oknach). */
[id^="setting_form_"] .sections fieldset fieldset.shows,
[id^="setting_form_"] .sections fieldset fieldset.services,
[id^="setting_form_"] .sections fieldset fieldset.modules { border: 0; margin: 0; padding: 0; background: transparent; }
[id^="setting_form_"] .sections fieldset.shows label,
[id^="setting_form_"] .sections fieldset.services label,
[id^="setting_form_"] .sections fieldset.modules label {
	/* !important + reset float/width: bije stare reguly skorek (display:inline-table; float:left; width:110px) */
	display: flex !important; float: none !important; width: auto !important;
	align-items: center; gap: 8px; margin: 0 0 6px;
}
[id^="setting_form_"] .sections fieldset.shows input,
[id^="setting_form_"] .sections fieldset.services input,
[id^="setting_form_"] .sections fieldset.modules input { margin: 0; flex: 0 0 auto; }

/* ===== Osoby serwisu zewnetrznego (formularz serwisanta, sekcja #ext_users_section) ===== */
/* sekcja widoczna tylko przy zaznaczonym "zewnetrzny" (Fiskalizacja wtedy schowana,
   extUsersToggle w settings.js) - zawsze na pelna szerokosc 2-kolumnowego gridu */
#setting_form_service #ext_users_section { grid-column: 1 / -1; }
[id^="setting_form_"] .ext-users-hint { font-size: 11.5px; opacity: .65; margin: 2px 0 8px; }
[id^="setting_form_"] ul.ext-users { list-style: none; margin: 0 0 8px; padding: 0; }
[id^="setting_form_"] ul.ext-users li {
	display: flex; align-items: center; gap: 8px; padding: 5px 8px;
	border: 1px solid rgba(127,127,127,.25); border-radius: 8px; margin: 0 0 5px;
	background: rgba(127,127,127,.05);
}
[id^="setting_form_"] ul.ext-users .eu-name { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[id^="setting_form_"] ul.ext-users .eu-mail { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
[id^="setting_form_"] ul.ext-users li a { flex: 0 0 auto; display: inline-flex; padding: 3px; border-radius: 6px; color: inherit; text-decoration: none; }
[id^="setting_form_"] ul.ext-users li a:hover { background: rgba(127,127,127,.18); }
[id^="setting_form_"] ul.ext-users li a.eu-del:hover { background: rgba(229,72,77,.15); color: #e5484d; }
[id^="setting_form_"] ul.ext-users li a.eu-save:hover { background: rgba(34,197,94,.18); color: #16a34a; }
[id^="setting_form_"] ul.ext-users li a.eu-cancel { font-size: 13px; line-height: 1; padding: 4px 6px; }
[id^="setting_form_"] ul.ext-users li a svg { width: 16px; height: 16px; }
/* tryb edycji wiersza: dwa pola zamiast spanow (nadpisanie generycznego .sections input) */
[id^="setting_form_"] ul.ext-users li input { margin: 0 !important; flex: 1 1 45%; min-width: 0; display: block; box-sizing: border-box; }
[id^="setting_form_"] .ext-users-add { display: flex; gap: 6px; align-items: center; }
[id^="setting_form_"] .ext-users-add input { margin: 0 !important; flex: 1 1 50%; min-width: 0; }
[id^="setting_form_"] .ext-users-add button.eu-add {
	flex: 0 0 auto; padding: 6px 14px; border: 0; border-radius: 5px;
	background: #2A9FFF; color: #fff; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 12px;
}
[id^="setting_form_"] .ext-users-add button.eu-add:hover { background: #1488ee; }

/* ===== "Zapomnij klienta" (#tabs-client_forget) - stara struktura: label + input + submit ===== */
#tabs-client_forget label {
	display: block; font-weight: 600; font-size: 11px; letter-spacing: .03em;
	text-transform: uppercase; opacity: .6; margin: 10px 0 3px;
}
#tabs-client_forget input[readonly] { display: block; width: 100%; max-width: 420px; box-sizing: border-box; }
#tabs-client_forget input[type="submit"] {
	margin-top: 12px; padding: 7px 16px; border: 1px solid rgba(127,127,127,.35);
	border-radius: 8px; background: rgba(127,127,127,.06); color: var(--ui-accent-ink, #1373c4);
	font-weight: 600; cursor: pointer; font-family: inherit; font-size: 12px;
	transition: background .12s, border-color .12s;
}
#tabs-client_forget input[type="submit"]:hover { background: rgba(42,159,255,.12); border-color: #2A9FFF; }

/* ===== "Polacz klientow / Polacz czesci" - karta scalania (Stary -> Nowy + Polacz) ===== */
#tabs-client_join .join-box, #tabs-product_join .join-box {
	max-width: 820px; margin: 12px 0 16px; padding: 12px 14px;
	border: 1px solid rgba(127,127,127,.25); border-radius: 8px;
	background: rgba(127,127,127,.045); box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
#tabs-client_join .join-hint, #tabs-product_join .join-hint { font-size: 12px; opacity: .8; line-height: 1.45; margin: 0 0 12px; }
#tabs-client_join .join-fields, #tabs-product_join .join-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
#tabs-client_join .join-fields > label, #tabs-product_join .join-fields > label {
	display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; min-width: 0;
	font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .85;
}
#tabs-client_join .join-fields > label input, #tabs-product_join .join-fields > label input {
	width: 100%; box-sizing: border-box; font-weight: 400; text-transform: none; letter-spacing: 0;
	background: rgba(127,127,127,.10); cursor: default;
}
#tabs-client_join .join-arrow, #tabs-product_join .join-arrow {
	flex: 0 0 auto; display: inline-flex; align-items: center; align-self: flex-end;
	height: 30px; opacity: .45;
}
#tabs-client_join .join-arrow svg, #tabs-product_join .join-arrow svg { width: 22px; height: 22px; }
#tabs-client_join .join-btn, #tabs-product_join .join-btn {
	flex: 0 0 auto; align-self: flex-end; height: 32px; padding: 0 20px;
	border: 0; border-radius: 8px; background: #1268b3; color: #fff;
	font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
	transition: background .12s;
}
#tabs-client_join .join-btn:hover, #tabs-product_join .join-btn:hover { background: #0f5aa0; }
/* pole z przyciskiem "Wybierz..." (otwiera dialog wyboru) */
#tabs-client_join .join-pick, #tabs-product_join .join-pick { display: flex; gap: 6px; align-items: stretch; }
#tabs-client_join .join-pick input, #tabs-product_join .join-pick input { flex: 1 1 auto; min-width: 0; }
#tabs-client_join .join-pick-btn, #tabs-product_join .join-pick-btn {
	flex: 0 0 auto; padding: 0 14px; border: 1px solid rgba(127,127,127,.4); border-radius: 6px;
	background: rgba(127,127,127,.08); color: var(--ui-accent-ink, #1373c4);
	font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
	transition: background .12s, border-color .12s;
}
#tabs-client_join .join-pick-btn:hover, #tabs-product_join .join-pick-btn:hover { background: rgba(42,159,255,.12); border-color: #2A9FFF; }
/* dialog wyboru klienta/czesci - formularz filtrow w rzedzie + klikalne wiersze listy */
#client_picker #client_searchform form, #product_picker #product_searchform form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
#client_picker table.grid tr:not(.grid_title):hover td, #product_picker table.grid tr:not(.grid_title):hover td { outline: 2px solid rgba(42,159,255,.35); outline-offset: -2px; }

/* ===== Okna ustawien uzytkownika/serwisanta: czytelny uklad przy wielu polach
   (np. 40+ serwisantow w sekcji Serwisanci) ===== */
/* SERWISANT: dwie kolumny sekcji (grid) */
#setting_form_service .sections {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px !important;
	align-items: start;
}
/* UZYTKOWNIK: upakowanie kolumnowe (masonry) - male panele pakuja sie wg wysokosci
   (bez pustych wierszy), a sekcje pelnej szerokosci rozbijaja kolumny (column-span). */
#setting_form_user .sections {
	display: block !important;
	column-count: 3;
	column-gap: 14px;
}
#setting_form_user .sections > .section {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	width: 100%; margin: 0 0 14px;
}
/* Serwisanci/Regiony (fieldset.services) + Uprawnienia/Moduly (grid3): pelna szerokosc + odstep nad (po kolumnach).
   UWAGA: w multicol dolny margines ostatniej sekcji w kolumnie bywa "zjadany" przed elementem column-span:all
   (karta najwyzszej kolumny dotykala wtedy sekcji pelnej szerokosci). padding-top nie podlega temu zjadaniu,
   wiec daje pewny odstep niezaleznie od wysokosci kolumn. */
#setting_form_user .sections > .section:has(fieldset.services),
#setting_form_user .sections > .section-grid3 {
	-webkit-column-span: all; column-span: all;
	margin-top: 0;
	padding-top: 16px;
}
#setting_form_user .section-grid3 fieldset.shows > div,
#setting_form_user .section-grid3 fieldset.modules > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* grupy checkboxow (uprawnienia / serwisanci / regiony / moduly): wiele kolumn zamiast jednej */
[id^="setting_form_"] .sections fieldset.shows > div,
[id^="setting_form_"] .sections fieldset.services > div,
[id^="setting_form_"] .sections fieldset.modules > div {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 2px 14px; align-content: start;
}
/* dlugie listy (serwisanci/regiony) - ograniczona wysokosc + scroll, by dialog nie rosl w nieskonczonosc.
   Bez wlasnej ramki - ramke daje karta sekcji (unikamy podwojnego obramowania). */
[id^="setting_form_"] .sections fieldset.services > div {
	max-height: 210px; overflow: auto;
}
/* TELEFON (<=600): formularze ustawien w 1 panelu (serwisant ma 2 kol., uzytkownik 3-kol
   masonry - oba z !important, wiec tu nadpisujemy). Tablet zostaje wielokolumnowy. */
@media (max-width:600px){
	#setting_form_service .sections{ grid-template-columns:1fr !important; }
	#setting_form_user .sections{ column-count:1 !important; }
	#setting_form_user .section-grid3 fieldset.shows > div,
	#setting_form_user .section-grid3 fieldset.modules > div{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)) !important; }
}
/* pasek narzedzi listy (zaznacz / odznacz wszystkich) */
[id^="setting_form_"] .chk-tools { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 11px; }
[id^="setting_form_"] .chk-tools a { color: var(--ui-accent-ink, #1373c4); font-weight: 600; cursor: pointer; }
[id^="setting_form_"] .chk-tools .chk-count { margin-left: auto; opacity: .6; }

/* ===== Voip: wizard Action URL - mapowanie "pole w telefonie" -> gotowy adres + Kopiuj ===== */
#tabs-voip .voip-help { margin: 8px 0 4px; width: 100%; }
#tabs-voip .voip-intro { font-size: 12px; margin: 4px 0 14px; opacity: .9; }
#tabs-voip .voip-h {
	font-weight: 600; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
	opacity: .6; margin: 18px 0 8px;
}
#tabs-voip table.voip-wizard { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
#tabs-voip table.voip-wizard th {
	text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
	opacity: .6; padding: 4px 8px; border-bottom: 1px solid rgba(127,127,127,.3);
}
#tabs-voip table.voip-wizard td { padding: 5px 8px; vertical-align: middle; border-bottom: 1px solid rgba(127,127,127,.14); }
#tabs-voip .vw-label { font-weight: 600; white-space: nowrap; width: 230px; }
#tabs-voip .vw-url { width: 100%; }
#tabs-voip .vw-url input {
	width: 100%; box-sizing: border-box; font-size: 12px; padding: 5px 8px;
	border: 1px solid rgba(127,127,127,.3); border-radius: 5px; background: rgba(127,127,127,.04);
}
#tabs-voip .vw-copy {
	white-space: nowrap; padding: 6px 14px; border: 1px solid rgba(127,127,127,.35);
	border-radius: 8px; background: rgba(127,127,127,.06); color: var(--ui-accent-ink, #1373c4);
	font-weight: 600; font-family: inherit; font-size: 12px; cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
}
#tabs-voip .vw-copy:hover { background: rgba(42,159,255,.12); border-color: #2A9FFF; }
#tabs-voip .vw-copy.ok { background: rgba(45,160,90,.14); border-color: #2DA05A; color: #1f7a44; }

/* ===== Wskaznik licencji przy liscie serwisantow: mini-KPI (donut % zajetosci) wysokosci przycisku ===== */
/* Pasek narzedzi: przyciski po lewej, licencje po prawej (margin-left:auto). Flex zamiast
   float - bez niego (np. uzytkownik bez uprawnien admina nie ma przyciskow) pływające
   licencje nachodzily na szeroka tabele serwisantow. */
#tabs-services .svc-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#grid_service_info { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 16px auto; }
#grid_service_info .lic-chip {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 5px 12px; border: 1px solid rgba(127,127,127,.35); border-radius: 8px;
	background: rgba(127,127,127,.06); font-size: 12px; line-height: 1; white-space: nowrap;
}
#grid_service_info .lic-donut { position: relative; width: 24px; height: 24px; flex: 0 0 auto; }
#grid_service_info .lic-donut svg { width: 24px; height: 24px; display: block; transform: rotate(-90deg); }
#grid_service_info .lic-track { fill: none; stroke: rgba(127,127,127,.28); stroke-width: 4; }
#grid_service_info .lic-arc { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .35s ease; }
#grid_service_info .lic-name { font-weight: 600; opacity: .75; }
#grid_service_info .lic-val  { font-weight: 700; }
/* limit osiagniety/przekroczony - sygnalizacja wartosci (spina KPI z mechanizmem licencji) */
#grid_service_info .lic-chip--full .lic-val { color: #b02a37; }

/* ===== Mini-KPI aplikacji mobilnej (platforma + wersja) nad lista serwisantow ===== */
.svc-app-kpi {
	border: 1px solid rgba(127,127,127,.28); border-radius: 10px;
	background: rgba(127,127,127,.05); margin: 4px 0 16px; overflow: hidden;
}
.svc-app-h {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 14px; font-weight: 700; font-size: 13px;
	border-bottom: 1px solid rgba(127,127,127,.18); background: rgba(127,127,127,.05);
}
.svc-app-h svg { width: 16px; height: 16px; opacity: .8; }
.svc-app-total {
	margin-left: auto; font-weight: 700; font-size: 12px;
	color: #2A9FFF; background: rgba(42,159,255,.12);
	padding: 3px 10px; border-radius: 20px;
}
.svc-app-body { display: flex; flex-wrap: wrap; gap: 22px; padding: 13px 14px; }
.svc-app-col { flex: 1 1 200px; min-width: 180px; }
.svc-app-col-ver { flex: 2 1 320px; }
.svc-app-cap {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	opacity: .6; margin-bottom: 9px;
}
/* Platformy - jedna karta na platforme */
.svc-app-plats { display: flex; flex-direction: column; gap: 8px; }
.svc-plat {
	display: flex; align-items: center; gap: 9px;
	padding: 7px 11px; border: 1px solid rgba(127,127,127,.22); border-radius: 8px;
	background: rgba(127,127,127,.04); font-size: 13px;
}
.svc-plat-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.svc-plat-android .svc-plat-dot { background: #3ddc84; }
.svc-plat-ios     .svc-plat-dot { background: #8a8f98; }
.svc-plat-name { font-weight: 600; }
.svc-plat-num  { margin-left: auto; font-weight: 800; font-size: 15px; }
.svc-plat-pct  { opacity: .6; font-size: 12px; min-width: 34px; text-align: right; }
/* Wersje - slupki poziome */
.svc-app-vers { display: flex; flex-direction: column; gap: 7px; }
.svc-ver { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.svc-ver-lbl { flex: 0 0 104px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-ver-bar {
	flex: 1 1 auto; height: 10px; border-radius: 5px;
	background: rgba(127,127,127,.16); overflow: hidden;
}
.svc-ver-fill { display: block; height: 100%; border-radius: 5px; min-width: 3px; transition: width .35s ease; }
.svc-ver-android { background: #3ddc84; }
.svc-ver-ios     { background: #8a8f98; }
.svc-ver-rest    { background: rgba(127,127,127,.45); }
.svc-ver-num { flex: 0 0 auto; min-width: 20px; text-align: right; font-weight: 800; }
@media (max-width: 600px) {
	.svc-app-body { flex-direction: column; gap: 16px; }
	.svc-ver-lbl { flex-basis: 80px; }
}

/* ===== Klasy pomocnicze (utility) ===== */
.u-clear         { clear: both; }
.u-overflow-auto { overflow: auto; }
.u-w-full        { width: 100%; }
.u-text-left     { text-align: left; }
.u-text-right    { text-align: right; }
.u-float-right   { float: right; }
.u-font-verdana  { font-family: var(--app-font); }
.u-no-resize     { resize: none; }
.u-uppercase     { text-transform: uppercase; }
/* stałe szerokości pól formularzy */
.u-w40  { width:  40px; }
.u-w50  { width:  50px; }
.u-w60  { width:  60px; }
.u-w70  { width:  70px; }
.u-w80  { width:  80px; }
.u-w90  { width:  90px; }
.u-w100 { width: 100px; }
.u-w120 { width: 120px; }
.u-w130 { width: 130px; }
.u-w150 { width: 150px; }
.u-w200 { width: 200px; }
.u-w250 { width: 250px; }
.u-w300 { width: 300px; }
.u-mb5    { margin-bottom: 5px; }
.tabs-box { margin-top: 5px; border-radius: 5px; padding: 1px; }

/* =====================================================================
   BAZA wspolna wszystkich skorek (dawne theme/mobile.css) - przeniesiona
   tutaj ze skorek, gdzie byla zdublowana 4x (bajt-w-bajt identyczna).
   Skorki zawieraja teraz tylko kolory/akcenty. Sam reset (Meyer) zostal
   wydzielony na POCZATEK pliku; ponizej zostaja domyslne style bazowe
   (body/h1/ui-widget) - swiadomie na koncu (po regulach app.css), by
   zachowac dotychczasowa kaskade (tak jak gdy byly na poczatku skorki).
   ===================================================================== */
/* ============ BAZA (theme/mobile.css) - domyslne style bazowe ============ */

body {
	font-family: var(--app-font);
	font-size: 8pt;
	color: #666666;
	background-color: #8ddbf2;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.ui-widget {
	font-family: var(--app-font);
}
/* GLOBALNIE: pola formularzy NIE dziedzicza font-family same z siebie - biora
   czcionke domyslna przegladarki. Wymuszamy dziedziczenie wszedzie (nie tylko
   w oknach), inaczej listy/formularze poza .ui-widget (np. przypomnienia)
   pokazywaly inna czcionke niz reszta aplikacji. */
input,
select,
textarea,
button {
	font-family: inherit;
}
/* jQuery UI narzuca polom formularzy Arial (specyficznosc bije .ui-widget) -
   przywracamy wspolna czcionke aplikacji w oknach dialogowych. */
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: var(--app-font);
}

h1 {
	font-family: var(--app-font);
	font-size: 12pt;
	margin-left: 5px;
}


/* =====================================================================
   Wspolne reguly wyciagniete ze skorek (byly bajt-w-bajt identyczne w 4
   skorkach: default/dark/morska/jasna). Struktura/wyglad niezalezny od
   skorki + kolory bazowe (te same w kazdej skorce). Per-skorka zostaja
   tylko rozniace sie kolory/zmienne. Laduje sie przed arkuszem skorki,
   ale po reszcie app.css - kaskada jak gdy byly w skorce (po app.css).
   ===================================================================== */
a {
	font-size: 9pt;
	color: #6b6b6b; /* a11y: kontrast >=4.5:1 na bialym (#999 dawal 2.85:1) */
	text-decoration: none;
}

a:hover {
	color: #333;
}

a.folder_name:hover,
a.file_name:hover {
	color: Red;
}

input.blocked {
	background-color: #FFFFE1
}

.textmiddle {
	vertical-align: middle;
}

input.blur {
	color: #999;
}

input.highlight {
	background-color: #ffffb0
}

table.top,
td.top {
	border: 2px solid black;
	border-collapse: collapse;
	background-color: #FFFFFF
}

table.grid,
tr.grid,
td.grid {
	background-color: #fff;
	font-size: 8pt;
	border-collapse: collapse;
}

table.grid {
	border-collapse: separate;
	border-spacing: 4px;
}

table.calendar {
	/* SHOW (nie hide!) - komorki quick-add maja tylko absolutny .cal-add-ord (poza flow),
	   wiec sa "puste" wg empty-cells; przy hide ich tlo znikalo i przeswitywala biel tabeli
	   => przerwy w pasmowaniu wierszy. show = puste komorki maluja tlo (ciagle pasy). */
	empty-cells: show;
}

table.grid img {
	vertical-align: middle;
}

tr.grid_even td {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	height: 25px;
	vertical-align: middle;
	text-align: center;
}

td.busy {
	background: #fff0f0;
}

tr.click:hover {
	cursor: crosshair
}

tr.grid_service {
	white-space: nowrap;
	height: 24px;
	border: 0px;
	font-weight: bold;
	text-align: center;
	color: #666666;
	border-collapse: collapse;
}

tr.grid_service td img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

tr.grid_title td.grid_saturday, tr.grid td.grid_saturday, tr.grid_even td.grid_saturday  {
	background: #d58282;
	color: #1a1a1a; /* a11y: ciemny tekst na #d58282 = ~5.9:1 (bylo bialy 2.86:1); tlo bez zmian */
}

tr.grid_title td.grid_sunday, tr.grid td.grid_sunday, tr.grid_even td.grid_sunday  {
	background: #d36666;
	color: #1a1a1a; /* a11y: ciemny tekst na #d36666 = ~4.9:1 (bylo bialy 3.58:1); tlo bez zmian */
}

/* Swieto ustawowe (ms_polish_holidays) - naglowek dnia jak niedziela + nazwa swieta pod data */
tr.grid_title td.grid_holiday, tr.grid td.grid_holiday, tr.grid_even td.grid_holiday {
	background: #d36666;
	color: #1a1a1a;
}
.cal-holname { font-size: 10px; font-weight: 600; }

td.grid_user {
	background: #00a35d;
	color: #fff; /* a11y: bialy tekst na zieleni naglowka (#1c8444 z reguly tr.grid_title td) = 4.71:1 */
	font-weight: bold;
}

tr.grid_title, table.grid tr th {
	color: #fff; /* a11y: bialy tekst na przyciemnionej zieleni #1c8444 = 4.71:1 */
}

table.grid:not(.calendar) tr:hover:not(.grid_title) td {
	background-color: #ffee11;
	color: #000;
}

table.grid:not(.calendar) tr.focused:not(.grid_title) td {
	background-color: #2A9FFF;
	color: #fff;
	font-weight: bold;
}

a.grid_service {
	font-size: 129pt;
	color: #AAAAAF;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

a.grid_link {
	font-size: inherit;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

a.grid_link:hover {
	opacity: .8;
}

a.grid_link_active {
	font-size: inherit;
	font-weight: 700;
	color: #f55;
	text-decoration: none;
}

table.main,
tr.main,
td.main {
	border: 2px solid black;
	background-color: #FFF7FE
}

table.desc,
tr.desc,
td.desc {
	font-weight: bold;
	border: 0px solid black;
}

td.descr {
	font-size: 12pt;
	color: red;
	font-weight: bold;
	border: 0px solid black;
}

tr.title {
	font-weight: bold;
	text-align: center;
	border: 1px
}

tr.blue {
	background-color: #BBE9FF;
	border: 1px
}

tr.darkyellow {
	background-color: #EEEEAA
}

tr.yellow {
	background-color: #FFFF80
}

tr.red {
	background-color: #FF6A6A
}

#head {
	height: 40px;
	width: 100%;
	min-width: 920px;
	background: #333;
	position: relative;
	margin-bottom: 5px;
}

#head h1,
#head #ver,
#head>ul {
	position: absolute;
	text-shadow: 0px 1px 1px #000;
}

#head h1 {
	left: 0px;
	height: 20px;
	padding: 10px;
	color: #fff;
	text-shadow: 0px 1px 1px #000;
}

#head h1 strong {
	font-weight: bold;
}

#head #ver {
	width: 200px;
	height: 20px;
	padding: 12px 0px 8px;
	left: 50%;
	margin-left: -100px;
}

#head>ul {
	right: 0px;
}

#head>ul>li {
	float: left;
	height: 20px;
	padding: 12px 0px 8px;
	margin: 0px 10px;
	color: #aaa;
	white-space: nowrap;
}

#head>ul>li img {
	margin-right: 5px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

#head>ul>li a {
	font-weight: bold;
}

#head>ul>li a:hover {
	color: #fff;
}

#head_main {
	height: 40px;
	width: 100%;
	background: #000 url('../ximages/logo_background.png');
}

#head_logo {
	display: inline;
	height: 40px;
	width: 200px;
}

#head_ver {
	display: inline;
	height: 40px;
	width: 100px;
}

#head_login {
	display: inline;
	height: 40px;
	width: 200px;
}

#head_logout {
	display: inline;
	float: right;
	margin-top: 15px;
}

#content {
	background: #fff;
}

#contentWrap {}

#grid,
#hist_grid,
#doc_grid {
	margin: 0px auto;
	width: 98%;
}

#order_popup table { width: 100%; border-collapse: collapse; background: transparent; }

a.popupTrigger {
	font-size: 9pt;
}

a.popupTrigger img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 5px;
}

#service_form h1 {
	text-align: center;
}

#content h1 {
	text-align: center;
}

.content {
	padding: 20px;
}

#tabs {
	border: 0px;
}

div#client_calendar_type img {
	vertical-align: middle;
	text-align: center;
	padding: 10px;
}

div#client_all,
div.nav {
	margin: 0px auto;
}

div#client_all,
div.nav {
	width: 98%;
	height: 20px;
	padding: 10px 0px 0px;
}

div.nav_bottom {
	padding: 5px 0px 10px;
}

div#client_all,
div.nav_top {
	border-bottom: 1px solid #999;
	margin-bottom: 5px;
}

div.nav_bottom {
	border-top: 1px solid #999;
	margin-top: 5px;
}

div#client_all {
	border-bottom: 1px solid #999;
	margin-bottom: 5px;
	text-align: center;
}

div#client_all a {
	font-weight: bold;
}

#client_all ul,
div.nav ul {
	position: relative;
	width: 100%;
}

#client_all ul li,
div.nav ul li {
	position: absolute;
}

#client_all ul li.prev,
#client_all ul li.next,
div.nav ul li.prev,
div.nav ul li.next {
	width: 33%;
}

#client_all ul li.next {
	width: 33%;
}

#client_all ul li.status,
div.nav ul li.status {
	min-width: 200px;
	left: 50%;
	margin-left: -100px;
	text-align: center;
}

#client_all ul li.prev,
div.nav ul li.prev {
	left: 0px;
	text-align: left;
}

#client_all ul li.next,
div.nav ul li.next {
	right: 0px;
	text-align: right;
}

div.nav ul li a:hover {
	color: #333;
}

div#order_client_calendar_type img {
	vertical-align: middle;
	text-align: center;
	padding: 10px;
}

div#order_client_all{
	margin: 0px auto;
}

div#order_client_all{
	width: 98%;
	height: 20px;
	padding: 10px 0px 0px;
}

div#order_client_all{
	border-bottom: 1px solid #999;
	margin-bottom: 5px;
}

div#order_client_all {
	border-bottom: 1px solid #999;
	margin-bottom: 5px;
	text-align: center;
}

div#order_client_all a {
	font-weight: bold;
}

#order_client_all ul {
	position: relative;
	width: 100%;
}

#order_client_all ul li {
	position: absolute;
}

#order_client_all ul li.prev,
#order_client_all ul li.next {
	width: 33%;
}

#order_client_all ul li.status {
	width: 200px;
	left: 50%;
	margin-left: -100px;
	text-align: center;
}

#order_client_all ul li.prev {
	left: 0px;
	text-align: left;
}

#order_client_all ul li.next {
	right: 0px;
	text-align: right;
}

#loginWrap {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

div#loginBox {
	width: 360px;
	max-width: 100%;
	background: var(--login-card-bg, #ffffff);
	color: var(--login-fg, #334155);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
	overflow: hidden;
	animation: loginIn .35s cubic-bezier(.2,.8,.2,1) both;
}

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

div#loginBox header {
	padding: 30px 34px 22px;
	text-align: center;
	background: var(--login-head-bg, #f7fafc);
	border-bottom: 1px solid var(--login-divider, rgba(0,0,0,.06));
}

div#loginBox header .login-logo {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	color: #fff;
	background: var(--login-accent, #2A9FFF);
	box-shadow: 0 8px 20px var(--login-accent-shadow, rgba(42,159,255,.35));
}

div#loginBox header .login-logo svg {
	width: 30px;
	height: 30px;
	display: block;
}

div#loginBox header h1 {
	font-size: 25px;
	font-weight: 400;
	letter-spacing: .3px;
	color: var(--login-title, #1e293b);
	margin: 0;
	padding: 0;
	text-shadow: none;
	line-height: 1.1;
}

div#loginBox header h1 strong {
	font-weight: 800;
}

div#loginBox header h2 {
	margin: 7px 0 0;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: var(--login-muted, #94a3b8);
	text-shadow: none;
}

div#loginBox div#loginForm {
	width: auto;
	height: auto;
	position: static;
	padding: 26px 34px 30px;
}

div#loginBox div#loginForm form {
	margin: 0;
}

div#loginBox div#loginForm #user_name,
div#loginBox div#loginForm #password,
div#loginBox div#loginForm input[type=text],
div#loginBox div#loginForm input[type=password] {
	position: static;
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 46px;
	margin: 0 0 14px;
	padding: 0 15px;
	border: 1px solid var(--login-input-border, #d8e0ea);
	border-radius: 10px;
	background: var(--login-input-bg, #ffffff);
	color: var(--login-fg, #334155);
	font-size: 14px;
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
}

div#loginBox div#loginForm #user_name::placeholder,
div#loginBox div#loginForm #password::placeholder,
div#loginBox div#loginForm input[type=text]::placeholder,
div#loginBox div#loginForm input[type=password]::placeholder {
	color: var(--login-muted, #94a3b8);
}

div#loginBox div#loginForm #user_name:focus,
div#loginBox div#loginForm #password:focus,
div#loginBox div#loginForm input[type=text]:focus,
div#loginBox div#loginForm input[type=password]:focus {
	outline: 0;
	border-color: var(--login-accent, #2A9FFF);
	box-shadow: 0 0 0 3px var(--login-accent-ring, rgba(42,159,255,.22));
}

div#loginBox div#loginForm #autologinwrap {
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 20px;
	font-size: 12.5px;
	color: var(--login-muted, #94a3b8);
	cursor: pointer;
	user-select: none;
}

div#loginBox div#loginForm #autologinwrap input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0; margin: 0;
}

div#loginBox div#loginForm #autologinwrap .cbx {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	border: 1.5px solid var(--login-input-border, #d8e0ea);
	border-radius: 6px;
	background: var(--login-input-bg, #ffffff);
	position: relative;
	transition: background .15s, border-color .15s, box-shadow .15s;
}

div#loginBox div#loginForm #autologinwrap:hover .cbx {
	border-color: var(--login-accent, #2A9FFF);
}

div#loginBox div#loginForm #autologinwrap .cbx::after {
	content: "";
	position: absolute;
	left: 6.5px; top: 3px;
	width: 5px; height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}

div#loginBox div#loginForm #autologinwrap input:checked + .cbx {
	background: var(--login-accent, #2A9FFF);
	border-color: var(--login-accent, #2A9FFF);
}

div#loginBox div#loginForm #autologinwrap input:checked + .cbx::after {
	transform: rotate(45deg) scale(1);
}

div#loginBox div#loginForm #autologinwrap input:focus-visible + .cbx {
	box-shadow: 0 0 0 3px var(--login-accent-ring, rgba(42,159,255,.22));
}

div#loginBox div#loginForm #submit,
div#loginBox div#loginForm #forgot_submit,
div#loginBox div#loginForm #reset_submit {
	position: static;
	display: block;
	width: 100%;
	height: 47px;
	border: 0;
	border-radius: 10px;
	background: var(--login-accent, #2A9FFF);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .3px;
	font-family: inherit;
	cursor: pointer;
	transition: filter .15s, transform .05s, box-shadow .15s;
	box-shadow: 0 8px 20px var(--login-accent-shadow, rgba(42,159,255,.35));
}

div#loginBox div#loginForm #submit:hover,
div#loginBox div#loginForm #forgot_submit:hover,
div#loginBox div#loginForm #reset_submit:hover {
	filter: brightness(1.07);
}

div#loginBox div#loginForm #submit:active,
div#loginBox div#loginForm #forgot_submit:active,
div#loginBox div#loginForm #reset_submit:active {
	transform: translateY(1px);
	filter: brightness(.97);
}

div#loginBox div#loginForm #forgot_submit:disabled,
div#loginBox div#loginForm #reset_submit:disabled {
	opacity: .6;
	cursor: default;
	box-shadow: none;
}

/* Reset hasla: tekst wprowadzajacy, wybor kanalu, komunikaty, linki nawigacyjne */
div#loginBox div#loginForm .login-lead {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--login-muted, #64748b);
}

div#loginBox div#loginForm .login-channel {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--login-fg, #334155);
}

div#loginBox div#loginForm .login-channel .lc-label {
	display: block;
	margin: 0 0 6px;
	color: var(--login-muted, #64748b);
}

div#loginBox div#loginForm .login-channel label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 18px 0 0;
	cursor: pointer;
}

div#loginBox div#loginForm .login-channel input[type=radio] {
	width: auto;
	height: auto;
	margin: 0;
	accent-color: var(--login-accent, #2A9FFF);
}

div#loginBox div#loginForm .login-channel .lc-hint {
	display: block;
	margin: 8px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--login-muted, #94a3b8);
}

div#loginBox div#loginForm .login-msg {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.45;
	min-height: 1em;
}

div#loginBox div#loginForm .login-msg.err { color: #c0392b; }
div#loginBox div#loginForm .login-msg.ok  { color: #0a3d20; }

.login-forgot { text-align: center; margin: 14px 0 0; }
.login-forgot a {
	font-size: 13px;
	color: var(--login-muted, #64748b);
	text-decoration: none;
}
.login-forgot a:hover { color: var(--login-accent, #2A9FFF); text-decoration: underline; }

div#loginBox div#loginForm .login-back { text-align: center; margin: 12px 0 0; }
div#loginBox div#loginForm .login-back a {
	font-size: 13px;
	color: var(--login-muted, #64748b);
	text-decoration: none;
}
div#loginBox div#loginForm .login-back a:hover { color: var(--login-accent, #2A9FFF); text-decoration: underline; }

div#footer {
	margin: 25px auto;
	width: 940px;
	text-align: center;
	text-shadow: 0px 1px 1px #fff;
	font-size: 9pt;
	color: #666;
}

div#footer a {
	color: #666
}

div#footer a:hover {
	color: #000;
}

div#warning {
	border: 2px solid black;
	border-radius: 5px;
	padding: 5px;
	background-color: #ff7777;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
	position: fixed;
	font-size: 15px;
	top: 5px;
	height: auto;
	width: 600px;
	left: 50%;
	margin-left: -300px;
	z-index: 999;
	padding: 10px;
}

div.companies {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 100%;
	background: #333;
	display: none;
}

div.companies li {
	padding: 5px;
	color: #fff;
}

li.companies {
	position: relative;
}

li.companies:hover div.companies {
	display: block;
}

.changes li {
	padding-bottom: 10px;
}

div.tag {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #666;
	display: inline-block !important;
	margin-right: 2px;
}

.service-tag {
  background-color: #d36666;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 10px;
  padding: 6px 8px;
  position: relative;
	display: flex;
	align-items: center;
	border-top: 0px solid #d36666;
}

.service-tag::after {
  content: "";
  position: absolute;	
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: inherit;	
	border-top-width: 8px;
	border-bottom: 0px;
}

.route-tag {
  background-color: #d36666;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 12px;
  padding: 6px 8px;
  position: relative;
	display: flex;
	align-items: center;
	border-top: 0px solid #d36666;
	bottom: 25px;
}

.route-tag::after {
  content: "";
  position: absolute;	
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: inherit;	
	border-top-width: 8px;
	border-bottom: 0px;
}

.order-tag {
  background-color: #4285F4;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 12px;
  padding: 6px 8px;
  position: relative;
	display: flex;
	align-items: center;
	border-top: 0px solid #4285F4;
}

.order-tag::after {
  content: "";
  position: absolute;
	display: flex;
	align-items: center;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: inherit;
	border-top-width: 8px;
	border-bottom: 0px;
}

.order-tag img {
	width: 16px; 
	height: 16px
}

#popup {border: 2px solid black; border-radius: 5px; padding: 1px; background-color: #EEEEEE; 
  position:absolute;  left:0;  top:0;  display:none;  z-index: 200000; }

  

#calendar img{vertical-align: middle; padding-right: 5px;}

#calendar .msc-event-title{padding: 2px}

#calendar a.popupTrigger { color: #000}

#calendar a.popupTrigger:hover { color: #888}

.nav_top input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 0px 0px;}

#client_searchform {width: 98%; margin: 0px auto;}

#client_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

/* dokumentacja: pasek filtra wyrownany do siatki (98% + auto), jak lista klientow */
#doc_searchform {width: 98%; margin: 0px auto;}

.ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

.tags .ui-datepicker-trigger {margin: 0px}

.order_form_dialog {
	position: fixed;
}

/* Okno dialogowe centrowane w viewporcie niezaleznie od przewiniecia strony
   (jQuery UI liczy pozycje po nadaniu position:fixed, wiec nie dolicza scrollTop).
   Uzywane m.in. przez okno "Edycja klienta" otwierane z okna zlecenia w kalendarzu. */
.ms-dialog-fixed {
	position: fixed;
}

#order_form {border-radius: 5px; padding: 1px; min-height: 220px;}

#order_form label { display:block;}

#order_form label h3 { font-size: 10px; color: #777}

#order_form label img { vertical-align: middle;}

#order_form input { display:block; }

#order_form .text { display:block; width: 275px;}

#order_form textarea { display:block; max-height: 50px;}

#order_form fieldset { display:block; min-height: 220px; margin-bottom: 5px; margin-right: 5px; border-radius: 4px; border: 1px solid #999; padding: 4px;}

#order_form label.left { display:block; float:left; margin-right: 5px;}

#order_form .sections { overflow-x: hidden; overflow-y: hidden; }

#order_form .section { display:block; float:left; }

div.buttons {text-align: center; margin: 0 auto; width:100%}

.filter_tag {margin: 0px; padding: 5px; border-radius: 10px; background-color: #eee; display: inline-block; height: 18px; width: 24px; text-align: center; vertical-align: middle;}

.filter_tag input {text-align: center; vertical-align: middle; }

#client_name {font-weight: bold;}

#client_street {font-weight: bold;}

#client_city {font-weight: bold;}

#phone_link {font-weight: bold;}

#mobile_link {font-weight: bold;}

#email_link {font-weight: bold;}

#client_section { max-width:240px}

#client_fieldset { max-width:220px}

#client_fieldset label { max-width:220px; word-wrap:break-word;}

#client_infofield { width: 210px; height: 70px;}

#client_section input.tag { display:inline !important; }

#order_gear_form label { display:block; margin-left: 5px; float:left}

#order_gear_form input { display:block;}

#order_gear_form select { display:block;}

#order_gear_form fieldset { margin-bottom: 5px;}

#order_gear_form input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#repair_kind_field, #priority_field, #order_state {width: 205px;}

#order_serwisantfield {width: 200px;}

#order_datafield { width: 80px; }

#order_send_reminder { display:inline !important;  }

#order_send_visit { display:inline !important;  }

#order_insertfield {width: 200px;}

#order_modyffield {width: 200px;}

#order_time_fromfield, #order_time_tofield { width: 40px; }

#order_cashfield, #order_wiretransferfield, #order_creditcardfield,  #order_laborfield, #order_partsfield { width: 60px; text-align: right;}

#orderstatus {margin-bottom:10px;}

#order_form fieldset.tags {min-height: auto; border: 0px;}

#order_form fieldset.tags label {float: left; display:inline-table; margin-right: 5px; padding: 3px 5px; border-radius: 10px; background-color: #eee}

#order_form fieldset.tags input {display: initial !important;}

#order_form fieldset.tags img {vertical-align: initial !important;}

#order_calendar_cal img{vertical-align: middle; padding-right: 5px;}

#order_calendar_cal .msc-event-title{padding: 2px}

#order_calendar_cal a.popupTrigger { color: #fff}

#order_calendar_cal a.popupTrigger:hover { color: #aaa}

.order-client-nav.nav_top input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 0px 0px; width: auto; display: initial;}

/* ===== Propozycja terminu (okno zlecenia): karty w stylu aplikacji ===== */
#order_plan_list {max-height: 200px; overflow: auto; padding: 5px;}

/* karta = flex, a link flex:1 wypelnia CALA jej wysokosc i szerokosc (karty w siatce
   rozciagaja sie do najwyzszej w rzedzie - bez tego dol kafelka nie byl klikalny) */
.order_plan { position: relative; display: flex; border: 1px solid #d7dde3; background-color: #fff; border-radius: 6px; transition: border-color .15s, box-shadow .15s; }
.order_plan:hover { border-color: var(--ui-accent, #2A9FFF); box-shadow: 0 1px 5px rgba(20,136,238,.22); }
.order_plan a { display: block; flex: 1 1 auto; min-width: 0; padding: 7px 9px 7px 27px; color: #333; text-decoration: none; }
.order_plan .op-rank { position: absolute; top: 8px; left: 7px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 7px; background: rgba(127,127,127,.16); color: #666; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; box-sizing: border-box; }
/* dzien lamie sie przed godzinami (op-time = nierozrywalna calosc) - nic nie ucieka poza karte */
.order_plan .op-when { display: block; font-size: 12px; color: var(--ui-accent-ink, #1373c4); }
.order_plan .op-when b { font-weight: 700; }
.order_plan .op-time { white-space: nowrap; }
.order_plan .op-name { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order_plan .op-meta { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.order_plan .op-pill { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; line-height: 14px; background: rgba(127,127,127,.13); color: #555; }
.order_plan .op-pill-last { background: #e2f6e7; color: #0a3d20; }
/* serwisant, ktory byl u klienta ostatnio - zielony akcent karty zamiast pelnego tla */
.order_plan_last { border-color: #66d37d; }

.order-plan-empty { padding: 10px 6px; font-size: 12px; color: #888; }

a.last_order  {color: #f88}

a.last_order:hover {color: #f33}

.buttonspace {
	margin-right: 20px !important;
}

@media (min-width: 1360px) {
	#client_name {font-size:12px;}
	#client_street {font-size:12px;}
	#client_city {font-size:12px;}
	#client_section { max-width:350px}
	#client_fieldset { max-width:330px}
	#client_fieldset label { max-width:330px; }
	#client_infofield { width: 320px; }
}

#id {
	background-color: #555;
}

#client_wrap {padding: 1px; }

#client_form label { display:block; margin-left: 5px; float:left}

#client_form h2 { margin-left: 5px;}

#client_form input:not([type='checkbox']) { display:block;}

#client_form select { display:block;}

#client_form fieldset { margin-bottom: 5px;}

#client_form input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#client_form fieldset.tags label {float: left; display:inline-table; margin-right: 5px; padding: 3px 5px; border-radius: 10px; background-color: #eee}

#client_gear_form label { display:block; margin-left: 5px; float:left}

#client_gear_form input { display:block;}

#client_gear_form select { display:block;}

#client_gear_form fieldset { margin-bottom: 5px;}

#client_gear_form input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#client_reminder_form label { display:block; margin-left: 5px; float:left}

#client_reminder_form fieldset { margin-bottom: 5px;}

#client_reminder_form input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#device_searchform {width: 98%; margin: 0px auto;}

#device_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#device_inputform {width: 98%; margin: 0px auto;}

#device_form {width: 98%; margin: 0px auto; padding: 4px;}

#device_form input { margin-bottom: 2px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

fieldset.left label { float:left; margin-right: 5px}

#searchform {width: 98%; margin: 0px auto;}

#searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#wrap {padding: 1px; }

.error h3 {color: #f55 !important;}

.sections { overflow-x: hidden; overflow-y: hidden; }

.section { display:block;}

div.left { float:left; margin-right: 5px}

div.left fieldset {min-height: 280px;}

label.left { float:left; margin-right: 5px;}

.sections > label {display:block;}

.sections label h3 { font-size: 10px; color: #777}

.sections label img { vertical-align: middle;}

.sections .text {width: 150px;}

.sections .text.date {width: 70px;}

.sections .ui-datepicker-trigger {margin: 0px 5px 0px 2px;}

.sections textarea {display:block; max-height: 50px; width: 99%; width: calc(100% - 5px); margin-right: 5px; border: 1px solid #ddd; background: #fff;}

.sections fieldset {display:block; margin-bottom: 5px; border-radius: 4px; border: 1px solid #999; padding: 4px; background: #f0f0f0}

.ui-dialog-titlebar-close {visibility: hidden;}

div.grid {position:relative; overflow: auto; max-width: 100%}

#form {border: 0; border-radius: 5px; padding: 1px; background-color: #eee; }

#money_form { padding: 0; }

#money_form form.money { margin: 0; }

#money_form #form .mh-item { white-space: nowrap; font-size: 12px; }

#money_form #form .mh-desc { flex: 1 1 240px; display: flex; align-items: center; gap: 6px; font-size: 12px; }

#money_form form.money > table { margin: 8px auto 0; }

#parts_form { display: flex; flex-direction: column; height: 100%; padding: 0; }

#parts_form .nav_top, #parts_form .nav_bottom { flex: 0 0 auto; }

#parts_form #partslist_grid { flex: 1 1 auto; overflow: auto; }

#product_searchform {width: 98%; margin: 0px auto;}

#product_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#document_searchform {width: 98%; margin: 0px auto;}

#document_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#document_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#orders_searchform {width: 98%; margin: 0px auto;}

#orders_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#orders_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#product-form label, #product_form input { display:block; }

#product-form input, #product-form textarea  { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#raport-tabs input.text, #raport-tabs select.multi {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px; vertical-align: top;}

#raport-tabs select.multi {height: 100px}

#raport-tabs .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

td.filtered {font-weight: bold; color: #f55 !important;}

.sections label {display:block;}

#protocol_searchform {width: 98%; margin: 0px auto;}

#protocol_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#protocol_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#returns_searchform {width: 98%; margin: 0px auto;}

#returns_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#returns_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#reports_searchform {width: 98%; margin: 0px auto;}

#reports_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#reports_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#client_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#autoryzacja_searchform {width: 98%; margin: 0px auto;}

#autoryzacja_searchform input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#autoryzacja_searchform .ui-datepicker-trigger {margin: 0px 10px -4px 5px;}

#product_form label { display:block; }

#product_form input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#raport-tabs input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

.xui-tabs-panel {min-height: 450px;}

#rap_orders, #rap_users, #rap_har, #rap_parts {width: 98%; margin: 0px auto;}

#rap_orders input.text, #rap_users input.text, #rap_har input.text, #rap_parts input.text {border-radius: 4px; border: 1px solid #999; padding: 4px; margin: 6px 0px;}

#rap_orders img, #rap_users img, #rap_har img, #rap_parts img {
	width: 16px;
	height: 16px;
}

#setting_form_user label { display:block; margin-left: 5px; float:left}

#setting_form_user input:not([type='checkbox']) { display:block;}

#setting_form_user select { display:block;}

#setting_form_user fieldset { margin-bottom: 5px;}

#setting_form_user input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#setting_form_user fieldset.shows label {float: left; display:inline-table; width: 110px; margin-left: 0px}

#setting_form_user fieldset.services label {float: left; display:inline-table; width: 220px; margin-left: 0px}

#setting_form_user fieldset.modules label {float: left; display:inline-table; width: 110px; margin-left: 0px}

#setting_form_user fieldset.shows label:hover, 
#setting_form_user fieldset.services label:hover, 
#setting_form_user fieldset.modules label:hover {
  background:#ffffb0;
}

#setting_form_user h2 {font-weight: bold; margin-bottom: 5px;}

#setting_form_service label { display:block; margin-left: 5px; float:left}

#setting_form_service input:not([type='checkbox']) { display:block;}

#setting_form_service select { display:block;}

#setting_form_service fieldset { margin-bottom: 5px;}

#setting_form_service input { margin-bottom: 4px; border-radius: 4px; border: 1px solid #999; padding: 4px; }

#setting_form_service h2 {font-weight: bold; margin-bottom: 5px; }

input.color { padding: 0px !important; border: 0px !important; margin: auto !important; width: 120px;}

#user_form,
#useredit_form {border: 0px; border-radius: 5px; padding: 20px; background-color: #f0f0f0; }

.ui-tabs-panel {min-height: 450px}

span.dot { display: inline-block; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.25); vertical-align: middle; box-sizing: border-box; }

span.serdot { display: inline-block; width: 16px; height: 16px; padding: 0; margin: 0 7px 0 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.25); vertical-align: middle; box-sizing: border-box; }

div#voip_popup {
  position: fixed;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 24px));
  box-sizing: border-box;
  z-index: 9999;
  display: none;
  padding: 0;
  overflow: hidden;
  background: var(--voip-bg);
  color: var(--voip-fg);
  border: 1px solid var(--voip-border);
  border-radius: 14px;
  box-shadow: 0 18px 48px var(--voip-shadow);
  font-family: var(--app-font);
  font-size: 12px;
  text-shadow: none;
}

div#voip_popup #voip_content { width: auto; }

div#voip_popup #voip_popup_content > table:first-child,
div#voip_popup #voip_popup_mini > table:first-child {
  width: 100%;
  border-collapse: collapse;
  background: var(--voip-head);
  border-bottom: 1px solid var(--voip-border);
}

div#voip_popup #voip_popup_content > table:first-child td,
div#voip_popup #voip_popup_mini > table:first-child td { padding: 8px 10px; vertical-align: middle; }

div#voip_popup h2 { margin: 0; font-size: 12px; line-height: 1.2; }

div#voip_popup #voip_status,
div#voip_popup #voip_client_mini {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--voip-muted);
}

div#voip_popup #voip_popup_content > center,
div#voip_popup #voip_popup_mini > table { display: block; }

div#voip_popup #voip_popup_content > center { padding: 6px 18px 18px; }

div#voip_popup h1 { margin: 6px 0; font-size: 15px; font-weight: 700; line-height: 1.25; }

div#voip_popup #voip_client {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--voip-phone);
  margin: 12px 0 4px;
}

div#voip_popup #voip_client_info { font-size: 12px; line-height: 1.5; }

div#voip_popup #voip_client_info span { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--voip-muted); }

div#voip_popup input[type="submit"] {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--voip-btn-bd);
  background: var(--voip-btn-bg);
  color: var(--voip-btn-fg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s, border-color .15s;
}

div#voip_popup input[type="submit"]:hover { background: var(--voip-btn-h); }

div#voip_popup input[name="voip_save"] {
  display: block;
  width: 100%;
  margin: 10px auto 2px;
  padding: 9px 12px;
  font-weight: 700;
  color: #fff;
  background: var(--voip-accent);
  border-color: var(--voip-accent);
}

div#voip_popup input[name="voip_save"]:hover { background: var(--voip-accent-d); border-color: var(--voip-accent-d); }

div#voip_popup textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 0;
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--voip-input-bd);
  background: var(--voip-input-bg);
  color: var(--voip-fg);
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
}

div#voip_popup textarea:focus { outline: none; border-color: var(--voip-accent); }

div#voip_popup a img { vertical-align: middle; }

div#voip_popup a { color: var(--voip-accent); text-decoration: none; }

div#voip_popup .voip-actions { margin: 10px 0 2px; }

div#voip_popup .voip-actions a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 4px; border-radius: 10px; border: 1px solid var(--voip-border); background: var(--voip-head); }

div#voip_popup .voip-actions a:hover { background: var(--voip-btn-h); }

div#voip_popup .voip-actions a .appico { width: 22px; height: 22px; }

div#voip_popup a.voip_orders { color: var(--voip-accent); }

/* Ikony akcji w popupie VoIP: kolor WG AKCJI (jak w reszcie aplikacji) zamiast jednolitego
   niebieskiego. Kolorujemy .appico po tytule linku (stabilny, PL) - bez zmian w szablonie. */
div#voip_popup a[title="Edycja otwartego zlecenia"] .appico { color: #16a34a; }   /* otwarte zlecenie - zielony */
div#voip_popup a[title="Nowe zlecenie"] .appico { color: #2A9FFF; }               /* nowe zlecenie - niebieski */
div#voip_popup a[title="Lista połączeń"] .appico { color: #0891b2; }              /* połączenia - turkus */
div#voip_popup a[title="Dodaj klienta"] .appico { color: #16a34a; }               /* dodaj klienta - zielony */

/* Okna szybkiej edycji telefonu / komorki (editOrderPhone / editOrderMobile w orders.js):
   label nad polem, input na cala szerokosc (wczesniej size=30 + height:120 ucinaly pole).
   „Zapisz" = primary (id save-phone / save-mobile lapie regule button[id^="save"]). */
#order_phone_dialog .phone-edit, #order_mobile_dialog .phone-edit { padding: 4px 2px 2px; }
#order_phone_dialog .phone-edit label, #order_mobile_dialog .phone-edit label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; opacity: .85; }
#order_phone_dialog .phone-edit input.text, #order_mobile_dialog .phone-edit input.text { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(127,127,127,.4); border-radius: 6px; font-size: 14px; }
#order_phone_dialog .phone-edit input.text:focus, #order_mobile_dialog .phone-edit input.text:focus { outline: none; border-color: #2A9FFF; box-shadow: 0 0 0 2px rgba(42,159,255,.15); }

div#voip_popup div.tag { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--voip-border); display: inline-block; margin-right: 2px; }

div#voip_popup_mini div.tag { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--voip-border); display: inline-block; margin-right: 2px; }

div#voip_popup div.voip_clients {
  border: 1px solid var(--voip-border);
  border-radius: 8px;
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--voip-head);
  text-align: left;
}

div#voip_popup.voip--ended { background: var(--voip-ended); }

div#voip_popup.voip--ended #voip_status { color: var(--voip-muted); }

div#voip_popup.voip--missed,
div#voip_popup.voip--error { border-color: var(--voip-missed); }

div#voip_popup.voip--missed #voip_popup_content > table:first-child,
div#voip_popup.voip--missed #voip_popup_mini > table:first-child { background: var(--voip-missed-bg); }

div#voip_popup.voip--missed #voip_status { color: var(--voip-missed); }

div#voip_popup .voip-error { padding: 22px 18px; text-align: center; }

div#voip_popup .voip-error h1 { margin: 0; font-size: 16px; color: var(--voip-missed); }

#voip_searchform { width: 98%; margin: 0 auto; }

#voip_searchform input.text { border-radius: 6px; border: 1px solid var(--voip-input-bd); padding: 6px 8px; margin: 6px 0; background: var(--voip-input-bg); color: var(--voip-fg); }

textarea { resize: vertical; }

#order_form .text { width: 100%; box-sizing: border-box; }

/* =====================================================================
   Struktura wydzielona z regul 'podobne, rozne kolory' (czesc nie-kolorowa
   identyczna w 4 skorkach); kolory tych regul zostaly w skorkach.
   ===================================================================== */
#order_popup td {
	padding: 2px 6px;
	vertical-align: top;
	border: 0;
}

#order_popup td:first-child {
	white-space: nowrap;
	padding-right: 10px;
	font-weight: normal;
}

/* Znaczniki (kolorowe) w podgladzie zlecenia - mini lista z nazwami.
   Nazwy sa widoczne na stale, bo hint/title na kropce znika przy chowaniu popupu. */
.popup-tags { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(0, 0, 0, .12); }
.popup-tags-group { margin-top: 4px; }
.popup-tags-title { font-weight: bold; margin-bottom: 2px; }
.popup-tags-list { list-style: none; margin: 0; padding: 0; }
.popup-tags-list li { display: flex; align-items: center; padding: 1px 0; }
.popup-tags-list li .tag { flex: 0 0 auto; }

.charts {
	width: 100%;
	height: 300px;
	border-radius: 5px;
}

/* Pasek zmiany szerokosci kalendarz|mapa: widoczny tor + uchwyt z chevronem.
   Przeciagnij = zmien szerokosc; kliknij = zwin/rozwin mape (obsluga w resizePanel, util.js). */
.split-resizer {
	position: relative;
	flex: 0 0 14px;
	width: 14px;
	align-self: stretch;
	cursor: ew-resize;
}
.split-resizer::before {   /* tor */
	content: "";
	position: absolute; left: 50%; top: 0; bottom: 0;
	width: 4px; transform: translateX(-50%);
	background: #dfe4ea; border-radius: 4px;
	transition: background .12s;
}
.split-resizer:hover::before { background: #c6cfda; }
.split-resizer::after {    /* uchwyt z chevronem (podpowiada klik) */
	content: "\203A";        /* '>' = zwin mape (kalendarz na cala szerokosc) */
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 20px; height: 38px; box-sizing: border-box;
	background: #fff; border: 1px solid #cbd3dc; border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 700; line-height: 1; color: #64717f;
	transition: color .12s, border-color .12s;
}
.split-resizer:hover::after { border-color: #2A9FFF; color: #2A9FFF; }
.split-resizer.collapsed::after { content: "\2039"; }   /* '<' = rozwin mape */

.val-neg {
	font-weight: bold;
}

.val-pos {
	font-weight: bold;
}

input[type="checkbox"], input[type="radio"] {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	cursor: pointer;
}

/* =====================================================================
   Sekcja POMOC (mod_help) - widok w aplikacji (tpl/help.tpl).
   Karty neutralne (biale powierzchnie) + brandowy akcent #2A9FFF, by
   wygladalo spojnie we wszystkich skorkach.
   ===================================================================== */
#help_page { --help-accent:#2A9FFF; max-width: 1180px; margin: 0 auto; padding: 4px 2px 24px; color:#1f2d3a; }
#help_page .help-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin: 6px 2px 18px; }
#help_page .help-head h2 { margin:0; font-size:22px; font-weight:700; color:#16384d; display:flex; align-items:center; gap:10px; }
#help_page .help-head h2 .appico { width:26px; height:26px; color:var(--help-accent); }
#help_page .help-head-links { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
#help_page .help-sub { margin-top:5px; color:#5b6b7a; font-size:14px; max-width:680px; }
#help_page .help-manual-link { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--help-accent); text-decoration:none; padding:9px 13px; border:1px solid #cfe2f5; border-radius:9px; background:#f3f9ff; white-space:nowrap; }
#help_page .help-manual-link:hover { background:#e7f3ff; }
#help_page .help-manual-link .appico { width:18px; height:18px; }

#help_page .help-grid { display:grid; grid-template-columns: 1.55fr 1fr; gap:18px; align-items:start; }
#help_page .help-card { background:#ffffff; border:1px solid #e3eaf1; border-radius:14px; padding:20px 22px; box-shadow:0 1px 3px rgba(16,42,67,.05); }
#help_page .help-card h3 { margin:0 0 16px; font-size:16px; font-weight:700; color:#22384a; display:flex; align-items:center; gap:9px; }
#help_page .help-card h3 .appico { width:20px; height:20px; color:var(--help-accent); }

#help_page .help-label { display:block; font-size:13px; font-weight:600; color:#3c4d5e; margin:14px 0 6px; }
#help_page .help-label:first-of-type { margin-top:0; }
#help_page .help-opt { font-weight:400; color:#90a0b0; }
#help_page #help_form input[type="text"],
#help_page #help_form textarea { width:100%; box-sizing:border-box; border:1px solid #d8e0ea; border-radius:9px; padding:10px 12px; font-size:14px; font-family:inherit; color:#1f2d3a; background:#fff; }
#help_page #help_form input[type="text"]:focus,
#help_page #help_form textarea:focus { outline:none; border-color:var(--help-accent); box-shadow:0 0 0 3px rgba(42,159,255,.16); }
#help_page #help_form textarea { resize:vertical; min-height:120px; line-height:1.5; }

#help_page .help-file { margin-top:2px; }
#help_page .help-file input[type="file"] { width:100%; box-sizing:border-box; font-size:13px; padding:9px 10px; border:1px dashed #c4d3e2; border-radius:9px; background:#f8fbfe; cursor:pointer; }
#help_page .help-file-hint { font-size:12px; color:#8595a5; margin-top:6px; }
#help_page .help-file-list { list-style:none; margin:8px 0 0; padding:0; }
#help_page .help-file-list li { font-size:12.5px; color:#3c4d5e; background:#eef5fc; border:1px solid #dde9f4; border-radius:7px; padding:5px 9px; margin-top:5px; word-break:break-all; }

#help_page .help-actions { margin-top:18px; }
#help_page .help-btn { display:inline-flex; align-items:center; gap:8px; background:var(--help-accent); color:#fff; border:0; border-radius:9px; padding:11px 20px; font-size:14px; font-weight:600; cursor:pointer; }
#help_page .help-btn:hover { background:#1f86df; }
#help_page .help-btn[disabled] { opacity:.6; cursor:default; }
#help_page .help-btn .appico { width:18px; height:18px; color:#fff; }

#help_page .help-meta-card { background:#f8fbfe; }
#help_page .help-meta-intro { margin:0 0 12px; font-size:13px; color:#5b6b7a; }
#help_page dl.help-meta { margin:0; }
#help_page dl.help-meta dt { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:#90a0b0; margin-top:11px; }
#help_page dl.help-meta dt:first-child { margin-top:0; }
#help_page dl.help-meta dd { margin:2px 0 0; font-size:14px; color:#22384a; word-break:break-word; }
#help_page .help-muted { color:#8595a5; }
#help_page .help-meta-foot { margin:16px 0 0; padding-top:13px; border-top:1px solid #e3eaf1; font-size:12.5px; color:#7a8a9a; }

#help_page .help-manual-card { margin-top:18px; }
#help_page .help-manual-frame { border:1px solid #e3eaf1; border-radius:10px; overflow:hidden; }
#help_page .help-manual-frame iframe { display:block; width:100%; height:72vh; min-height:520px; border:0; background:#fff; }

@media (max-width: 900px) {
	#help_page .help-grid { grid-template-columns: 1fr; }
	#help_page .help-manual-frame iframe { height:80vh; }
}

/* Link do podrecznika na ekranie logowania (tpl/login.tpl) */
.login-help { text-align:center; margin-top:14px; }
.login-help a { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--login-muted,#64748b); text-decoration:none; opacity:.9; }
.login-help a:hover { color:var(--login-accent,#2A9FFF); opacity:1; }
.login-help a .appico { width:16px; height:16px; }

/* =====================================================================
   Strona startowa wersji DEMO (landing) - tpl/demo_landing.tpl.
   Styl sterowany zmiennymi skorki --login-* (te same co okno logowania),
   dzieki czemu automatycznie dopasowuje sie do kazdej skorki, w tym ciemnej.
   ===================================================================== */
#demo_landing { min-height:100vh; background:var(--login-head-bg,#f7fafc); color:var(--login-fg,#334155); padding:0 0 56px; overflow-x:hidden; }
#demo_landing .dl-wrap { max-width:1060px; margin:0 auto; padding:0 20px; }

#demo_landing .dl-hero { text-align:center; padding:46px 16px 30px; }
#demo_landing .dl-logo { width:74px; height:74px; border-radius:18px; display:inline-block; box-shadow:0 10px 28px rgba(0,0,0,.18); }
#demo_landing .dl-brand { font-size:30px; font-weight:300; color:var(--login-title,#1e293b); margin:14px 0 0; letter-spacing:.2px; }
#demo_landing .dl-brand strong { font-weight:800; }
#demo_landing .dl-hero h1 { font-size:23px; font-weight:700; color:var(--login-title,#1e293b); margin:10px 0 0; }
#demo_landing .dl-lead { max-width:640px; margin:12px auto 0; font-size:16px; line-height:1.55; color:var(--login-muted,#64748b); }
#demo_landing .dl-actions { margin:24px 0 0; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
#demo_landing .dl-btn { display:inline-flex; align-items:center; gap:9px; border-radius:10px; padding:13px 26px; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; }
#demo_landing .dl-btn .appico { width:18px; height:18px; }
#demo_landing .dl-btn-primary { background:var(--login-accent,#2A9FFF); color:#fff; border:0; box-shadow:0 6px 18px var(--login-accent-shadow,rgba(42,159,255,.35)); }
#demo_landing .dl-btn-primary:hover { filter:brightness(1.07); text-decoration:none; }
#demo_landing .dl-btn-ghost { background:var(--login-card-bg,#fff); color:var(--login-accent,#2A9FFF); border:1px solid var(--login-input-border,#d8e0ea); }
#demo_landing .dl-btn-ghost:hover { border-color:var(--login-accent,#2A9FFF); text-decoration:none; }
#demo_landing .dl-demo-note { margin-top:16px; font-size:14px; color:var(--login-muted,#64748b); }
#demo_landing .dl-demo-note code { background:var(--login-accent-ring,rgba(42,159,255,.22)); color:var(--login-title,#1e293b); font-weight:700; padding:2px 9px; border-radius:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; }

#demo_landing .dl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; }
#demo_landing .dl-card { background:var(--login-card-bg,#fff); border:1px solid var(--login-input-border,#d8e0ea); border-radius:14px; padding:18px; }
#demo_landing .dl-ic { width:42px; height:42px; border-radius:11px; background:var(--login-accent-ring,rgba(42,159,255,.22)); color:var(--login-accent,#2A9FFF); display:inline-flex; align-items:center; justify-content:center; }
#demo_landing .dl-ic .appico { width:23px; height:23px; }
#demo_landing .dl-card h3 { margin:12px 0 5px; font-size:16px; color:var(--login-title,#1e293b); }
#demo_landing .dl-card p { margin:0; font-size:13.5px; line-height:1.5; color:var(--login-muted,#64748b); }

#demo_landing .dl-cta { margin-top:28px; background:var(--login-card-bg,#fff); border:1px solid var(--login-input-border,#d8e0ea); border-radius:16px; padding:26px 24px; text-align:center; }
#demo_landing .dl-cta h2 { margin:0 0 8px; font-size:20px; color:var(--login-title,#1e293b); }
#demo_landing .dl-cta p { margin:0 auto; max-width:680px; color:var(--login-muted,#64748b); font-size:15px; }
#demo_landing .dl-since { margin-top:12px; font-weight:700; color:var(--login-title,#1e293b); }
#demo_landing .dl-seo { max-width:780px; margin:30px auto 0; text-align:center; }
#demo_landing .dl-seo h2 { margin:0 0 10px; font-size:20px; color:var(--login-title,#1e293b); }
#demo_landing .dl-seo p { margin:0 auto 10px; font-size:15px; line-height:1.6; color:var(--login-muted,#64748b); }
#demo_landing .dl-foot { text-align:center; margin-top:26px; font-size:13px; color:var(--login-muted,#64748b); }

@media (max-width:860px){ #demo_landing .dl-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ #demo_landing .dl-grid { grid-template-columns:1fr; } #demo_landing .dl-brand{font-size:26px;} #demo_landing .dl-hero{padding:34px 14px 24px;} }

/* ============================================================
   "Dostosuj tabelę" — widocznosc + kolejnosc kolumn (libs/ms_columns.js)
   ============================================================ */
/* Ukrycie kolumny (naglowek + komorki). Wyzsza swoistosc + !important, by wygrac
   takze w trybie kart (mobile), gdzie td dostaja display:block (bez !important). */
table.grid td.ms-col-hidden,
table.grid th.ms-col-hidden,
.ms-col-hidden { display:none !important; }

/* Przycisk "Dostosuj tabelę" w naglowku kolumny akcji (tr.grid_title) */
.ms-cols-cell { text-align:center; }
a.ms-cols-hdr { display:inline-flex; align-items:center; justify-content:center; width:26px; height:22px; color:inherit; text-decoration:none; border-radius:6px; opacity:.85; }
a.ms-cols-hdr:hover { opacity:1; background:rgba(127,127,127,.18); }
a.ms-cols-hdr .appico { width:18px; height:18px; }

/* Przycisk w pasku paginacji (.nav_top): jedyny dla list bez przycisku w naglowku;
   wariant --phone (gdy przycisk jest w naglowku) tylko na telefonie - bo tam
   naglowek tabeli jest ukryty (tryb kart). */
.nav_top ul .ms-cols-nav { float:right; list-style:none; margin:0; }
.ms-cols-bar { text-align:right; margin:0 0 6px; }
/* !important bo a.toolbtn (i skorki) maja wyzsza swoistosc niz sama klasa */
.ms-cols-nav-btn--phone { display:none !important; }
@media (max-width:600px){ .ms-cols-nav-btn--phone { display:inline-flex !important; } }

/* Dialog listy kolumn */
.ms-cols-dialog .ms-cols-dialog-body { padding:6px 4px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.ms-cols-items { list-style:none; margin:0; padding:0; }
.ms-col-item {
	display:flex; align-items:center; gap:8px;
	padding:3px 8px; border-bottom:1px solid var(--pl-line2,#eef1f4);
	background:var(--pl-card,#fff);
}
.ms-col-item:last-child { border-bottom:0; }
.ms-col-item.off .ms-col-label { color:var(--pl-muted,#6b7682); }
/* rozbita czesc kolumny zbiorczej: wciecie + subtelny lacznik, by czytac sie
   jako "podpozycja" pod kolumna zbiorcza tuz nad nia */
.ms-col-item.is-part { padding-left:24px; position:relative; }
.ms-col-item.is-part::before {
	content:""; position:absolute; left:13px; top:0; bottom:50%; width:8px;
	border-left:2px solid var(--pl-line,#e2e4e8); border-bottom:2px solid var(--pl-line,#e2e4e8);
	border-bottom-left-radius:6px;
}
.ms-col-item.is-part .ms-col-label { font-size:12.5px; }
.ms-col-handle {
	flex:0 0 auto; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
	color:var(--pl-muted,#6b7682); cursor:grab; touch-action:none;
}
.ms-col-handle:active { cursor:grabbing; }
.ms-col-handle .appico { width:16px; height:16px; }
.ms-col-handle--fixed { cursor:default; }
.ms-col-label { flex:1 1 auto; font-size:13.5px; color:var(--pl-ink,#222a31); }
/* znacznik kolumny zbiorczej ("paczka danych" - kilka pol w jednej komorce) */
.ms-col-bundle { flex:0 0 auto; display:inline-flex; align-items:center; color:var(--pl-muted,#6b7682); cursor:help; }
.ms-col-bundle .appico { width:15px; height:15px; }
.ms-col-eye {
	flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
	color:var(--pl-fg,#3f4750); border-radius:7px; text-decoration:none;
}
.ms-col-eye:hover { background:rgba(127,127,127,.14); }
.ms-col-eye.locked { color:var(--pl-muted,#6b7682); opacity:.55; cursor:default; }
.ms-col-eye.locked:hover { background:transparent; }
.ms-col-eye .appico { width:18px; height:18px; }
.ms-col-item.off .ms-col-eye:not(.locked) { color:var(--pl-muted,#6b7682); }
.ms-col-placeholder { height:30px; margin:0; background:var(--pl-wkbg,#eef7ff); border:1px dashed var(--pl-wkbd,#cfe6ff); border-radius:7px; }
.ms-cols-dialog .ui-dialog-buttonpane .ms-cols-cancel { float:left; color:#d9534f; border-color:#e3b0ad; }
.ms-cols-dialog .ui-dialog-buttonpane .ms-cols-cancel:hover { background:rgba(217,83,79,.12); border-color:#d9534f; }
.ms-cols-dialog .ui-dialog-buttonpane .ms-cols-reset { float:left; }
.ms-cols-dialog .ui-dialog-buttonpane .ms-cols-done { background:var(--pl-accent,#2A9FFF); color:#fff; border-color:var(--pl-accent-d,#1373c4); }


/* Alert + przycisk migracji plików do magazynu (superadmin, Ustawienia) */
.add-btn.btn-alert { border-color:#e0912b; box-shadow:0 0 0 1px #e0912b inset; }
.add-btn .mig-dot { display:inline-block; min-width:16px; height:16px; line-height:16px; padding:0 4px; margin-left:4px;
  border-radius:9px; background:#d63c3c; color:#fff; font-weight:700; font-size:11px; text-align:center; }
.mig-alert { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; padding:10px 12px;
  border:1px solid #e0912b; border-left-width:4px; border-radius:8px; background:rgba(224,145,43,.10); font-size:13px; line-height:1.4; }
.mig-alert .calico { flex:0 0 auto; }
.mig-alert a { font-weight:700; white-space:nowrap; }
#setting_files_migrate .fm-sec { padding:4px 0; border-bottom:1px solid rgba(127,127,127,.18); }
#setting_files_migrate .fm-total { font-size:14px; }
#setting_files_migrate details { margin:4px 0 2px; }
#setting_files_migrate summary { cursor:pointer; opacity:.75; }