/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
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;
}


@font-face{
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	font-display: block;
	src: url('/fonts/MaterialSymbolsOutlined.woff2?v=3') format('woff2');
}

.material-symbols-outlined{
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: 20px;

	/* KLUCZOWE */
	color: currentColor;

	/* required for ligatures */
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;

	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}



/* UI scope – nowy wygląd działa tylko wewnątrz .ui */
.ui{
	--bg: #f6f8fc;
	--surface: #ffffff;
	--text: #314461;
	--muted: #697994;
	--border: rgb(61 79 110 / 13%);

	--primary: #314461;
	--primary-600: #101a2d;
	--primary-100: rgba(47,111,185,.12);

	--radius: 8px;
	--shadow: 0 10px 30px rgba(15,23,42,.08);
	--button-shadow: 0 4px 16px rgba(15, 23, 42, .08);

	--sidebar-w: 260px;

	min-height: 100dvh;
	background: var(--bg);
	color: var(--text);
	font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* fallback gdyby dvh nie działało */
@supports not (height: 100dvh){
	.ui{ min-height: 100vh; }
}

.ui h1,
.ui h2,
.ui h3,
.ui .card-title,
.ui .job-title{
	font-weight: 600;
}

.ui *{ box-sizing:border-box; }

.ui .app{
	min-height:100dvh;
	display:flex;
}

@supports not (height: 100dvh){
	.ui .app{ min-height: 100vh; }
}

.ui .sidebar{
	width: var(--sidebar-w);
	background: #0E1A2D;
	color: #e5e7eb;
	display:flex;
	flex-direction:column;
	padding:16px;
	padding: 15px 0px;
}

.ui .brand{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	justify-content: center;
	flex-wrap: wrap;
}

.ui .brand .logo{
	width: 32px;
}

.ui .brand-name{
	font-weight: 600;
	letter-spacing: .7px;
	font-size: 21px;
	width: 100%;
	text-align: center;
	font-family: "Google Sans Flex", sans-serif;
}

.ui .brand-name span{
	letter-spacing: .3px;
	display: block;
	font-weight: 300;
	font-size: 12px;
	margin-top: 2px;
	color: #ffffff6e;
	white-space: nowrap;
}

.ui .brand .logo img{
	width: 100%;
	height: auto;
	display: block;
}

.ui .nav{
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.ui .nav-item{
	display: flex;
	align-items: center;
	padding: 16px 12px;
	color: #cccccc;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 0px;
	position: relative;
}

.ui .nav-item span{
	margin-right: 12px;
	margin-left: 6px;
	opacity: 0.3;
	width: 20px;
}

.ui .nav-item:hover{ 
	background-image: linear-gradient(90deg, rgb(62 81 112 / 32%) 0%, rgb(41 53 86 / 35%) 100%);
}

.ui .nav-item.is-active{
	color: #fff;
	background-image: linear-gradient(90deg, rgba(62, 81, 112, 1) 0%, rgb(41 53 86 / 35%) 100%);
}

.ui .nav-item.is-active span{
	opacity: 0.7;
}

.ui .nav-item.is-active:after{
	content: "";
	display: block;
	position: absolute;
	width: 5px;
	height: 100%;
	background: #d90000;
	right: 0;
}

.ui #center_container{
	padding: 25px;
}

.ui .main{
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
}

.ui .topbar{
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgb(255 255 255 / 85%);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 25px;
}

.ui .topbar-left{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:0;
	width: 50%;
}

.ui .icon-btn{
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 12px;
	padding:10px 12px;
	cursor:pointer;
	color: #3d4f6e;
}

.ui .search{
	width: 100%;
}

.ui .search-input{
	width:100%;
	padding:12px 14px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface);
	outline:none;
}

.ui form.search{
	position: relative;
	display: flex;
	align-items: center;
}

.ui .search-input{
	padding-right: 44px; /* miejsce na przycisk */
}

.ui .search-btn{
	position: relative;
	width: 41px;
	height: 41px;
	min-width: 41px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: #101a2d;
	background: #3d4f6e;
	margin-left: 10px;
	border: none;
	cursor: pointer;
}

.ui .search-btn:hover{
	background: #101a2d;
}


.ui .topbar-right{
	display:flex;
	align-items:center;
	gap:10px;
}

.ui .user-chip{
	color: var(--muted);
	font-size: 14px;
	margin-right: 15px;
}

.ui .btn{
	border: none;
	border-radius: 30px;
	padding: 10px 15px 10px 10px;
	background: var(--surface);
	cursor:pointer;
	font-weight:500;
	font-size: 14px;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	box-shadow: var(--button-shadow);
	white-space: nowrap;
	height: 40px;
}

.ui .btn span{
	margin-right: 7px;
	opacity: 0.3;
}

.ui .btn-primary{
	background: #3d4f6e;
	border-color: rgba(0, 0, 0, 0);
	color: #fff;
}

.ui .btn:hover{ 
	background: #e5e8ed;
	border-color: #e5e8ed;
}
.ui .btn-primary:hover{ 
	background: var(--primary-600); 
	border-color: var(--primary-600); 
}

.ui .btn-primary-table-size{
	font-weight: 500;
	font-size: 12px;
	padding: 10px 15px;
	height: 34px;
}

.ui .btn-logout{
	background: #e5e8ed;
	border-color: #e5e8ed;
	color: #3d4f6e;
	font-weight: 500;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ui .btn-logout:hover{
	background: #d90001;
	color: #ffffff;
}

.ui .job-mileage-container{
	width: 100%;
}

.ui .job-mileage-container-form{
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: flex-end;
}

.ui .job-mileage-container-form input{
	margin-right: 15px;
}

.ui .job-notes-list-container{

}

.ui .job-notes-list-element{
	border-top: 1px solid #e7e9ed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	flex-wrap: wrap;
	position: relative;
}

.ui .job-notes-list-element:first-child{
	border-top: none;
	margin-top: -10px;
}

.ui .job-notes-list-element-left{
	width: calc(100% - 100px);
}

.ui .job-notes-list-element-right{
	min-width: 100px;
	text-align: right;
}

.ui .job-notes-list-element-bottom{
	width: 100%;
}

.ui .job-notes-list-element-date{
	color: var(--muted);
	font-size: 13px;
	display: flex;
	align-items: center;
}

.ui .job-notes-list-element-date span.material-symbols-outlined{
	margin-right: 10px;
	opacity: 0.3;
}

.ui .job-notes-list-element-title{
	font-size: 15px;
	font-weight: 900;
	margin-top: 10px;
	margin-left: 30px;
	width: calc(100% - 50px);
}

.ui .job-notes-list-element-prices{
	width: calc(100% - 30px);
	margin-left: 30px;
	margin-top: 10px;
	color: var(--muted);
	font-size: 13px;
	display: flex;
	justify-content: flex-end;
}

.ui .job-type{
	color: var(--muted);
	font-size: 13px;
	display: flex;
	align-items: center;
}

.ui .job-type span.material-symbols-outlined{
	margin-right: 5px;
	margin-left: 30px;
}

.ui .job-type-work{
	color: #0067a6;
}

.ui .job-type-note{
	color: #be7f00;
}

.ui .job-type-diagnosis{
	color: #009728;
}

.ui .job-notes-list-element-description{
	margin-left: 30px;
	margin-top: 10px;
	font-size: 13px;
	background-image: linear-gradient(90deg, rgb(62 81 112 / 9%) 0%, rgb(41 53 86 / 2%) 100%);
	padding: 10px;
	border-radius: 5px;
	width: calc(100% - 30px);
}

.ui .element-job-type-note:before{
	content: "";
	position: absolute;
	width: 4px;
	top: 5px;
	height: 100%;
	background: #be7f00;
	left: 0px;
	opacity: 0.3;
}

.ui .element-job-type-diagnosis:before{
	content: "";
	position: absolute;
	width: 4px;
	top: 5px;
	height: 100%;
	background: #009728;
	left: 0px;
	opacity: 0.3;
}

.ui .space-30{
 	margin-top: 30px;
}

.ui .job-new-note-container{
	background: #d0d8e7;
	padding: 5px 20px 20px 20px;
	border-radius: 10px;
	margin-top: 30px;
}

.has-tooltip{
	position:relative;
}

.has-tooltip::after{
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	width: 300px;
	max-width: min(300px, calc(100vw - 32px));
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1.3;
	background: #111;
	color: #ffffffc4;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
	white-space: normal;
	z-index: 1000;
}

/* Tylko urządzenia z prawdziwym hoverem — na dotyku tap zostawiałby
   „lepki" dymek zasłaniający treść po zamknięciu okna notatek */
@media (hover: hover){
	.has-tooltip:hover::after{
		opacity: 1;
		transform: translateY(0);
	}
}








/* ===== JOBS LIST (karty) ===== */

.ui .content{
	/*padding: 18px;*/
}

.ui .page-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	margin-bottom: 15px;
}

.ui .page-head h1{
	margin:0;
	font-size: 28px;
	font-family: "Google Sans Flex", sans-serif;
	display: flex;
	align-items: center;
}

.ui .subtle{
	color: var(--muted);
	margin-top:6px;
	font-size:14px;
	line-height: 1.3em;
}

.ui h2.small-head{
	margin: 15px 0 0 0;
	font-size: 22px;
	font-family: "Google Sans Flex", sans-serif;
}

.ui h2.small-head span{
	font-weight: 400;
}

.ui .small-subtle{
	margin-bottom: 15px;
}

.ui .filters{
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
	margin: 15px 0 15px 0;
	background: #eaedf4;
	padding: 5px 5px;
	margin-left: -25px;
	margin-right: -25px;
	padding: 10px 25px 10px 25px;
}

.ui .filters-right{
	margin-left:auto;
	display:flex;
	gap:10px;
	align-items:center;
}

.ui .chip{
	border-radius: 999px;
	padding: 0px 12px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	color: var(--text);
	text-decoration: none !important;
	height: 36px;
}

.ui .chip:hover{
	background: #dee1e7;
}

.ui .chip.is-active{
	background: rgb(255 255 255);
	color: var(--primary);
	box-shadow: var(--button-shadow);
}

.ui .select{
	border: none;
	background: var(--surface);
	border-radius: 30px;
	padding: 0px 12px;
	font-weight: 600;
	color: var(--text);
	font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	height: 36px;
	cursor: pointer;
	box-shadow: var(--button-shadow);
}

.ui .cards{
	display:grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:15px;
	margin-bottom: 15px;
}

.ui strong{
	font-weight: 700;
}

.ui .job-card{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding:14px;
	display:flex;
	flex-direction:column;
	gap:10px;
	position: relative;
}

.ui .job-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.ui .job-user-comment{
	color: var(--muted);
	font-size: 13px;
	display: flex;
	gap: 5px;
	align-items: center;
}

.ui .job-user-comment a{
	color: var(--muted);
}

.ui .job-user-comment .entity_note_link{
	display: flex;
	align-items: center;
	background: #e5e8ed;
	padding: 4px 9px;
	border-radius: 999px;
	text-decoration: none !important;
	height: 28px;
}

.ui .job-summary-container{
	gap: 10px;
	display: flex;
	flex-direction: column;
	background-image: linear-gradient(90deg, rgb(62 81 112 / 9%) 0%, rgb(41 53 86 / 2%) 100%);
	padding: 10px;
	border-radius: 5px;
}

.ui .job-close-container{
	height: 100%;
	display: flex;
	align-items: flex-end;
	width: 100%;
}

.ui .job-summary{
	display: flex;
	justify-content: space-between;
}

.ui .job-summary span{
	width: 80px;
	display: inline-flex;
	font-size: 14px;
}

.ui .job-user-comment span.material-symbols-outlined{
	opacity: 0.4;
}

.ui .job-user-comment .comment-count{
	margin-left: 5px;
	display: flex;
	align-items: center;
	width: 20px;
	height: 20px;
	background: #ffffff;
	justify-content: center;
	border-radius: 50px;
	color: #314461;
	font-size: 12px;
	font-weight: 900;
	margin-right: -4px;
}

.ui .job-id{
	font-weight:700;
	color: var(--muted);
	font-family: "Google Sans Flex", sans-serif;
	font-size: 19px;
}

.ui .job-create-form{
	width: 50%;
}

.ui .job-card .job-top span.material-symbols-outlined{
	position: absolute;
	right: 7px;
	top: 7px;
	font-size: 43px;
	color: #e5e8ed;
	width: auto;
	font-weight: 300;
}

.ui .badge{
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .3px;
	padding: 6px 10px;
	border-radius: 999px;
	font-family: "Google Sans Flex", sans-serif;
	display: inline-flex;
}

.ui #page-show .badge{
	margin-left: 15px;
}

.ui .badge-open{
	background: rgba(34,197,94,.10);
	color: #15803d;
}

.ui .badge-closed{
	background: rgba(100,116,139,.10);
	color: #334155;
}

.ui .job-title{
	font-size:18px;
	font-weight:900;
}

.ui .job-link{
	color: var(--text);
	text-decoration:none;
}

.ui .job-link:hover{
	text-decoration:underline;
}

.ui .job-meta{
	color: var(--muted);
	font-size: 14px;
	display:flex;
	gap:8px;
	align-items:center;
	flex-wrap:wrap;
}

.ui .dot{
	opacity:.6;
}

.ui .job-desc{
	color: var(--text);
	opacity: .92;
	line-height: 1.35;
	/* background: #eaedf4; */
	padding: 10px;
	border-radius: 5px;
	font-size: 14px;
	background-image: linear-gradient(90deg, rgb(62 81 112 / 9%) 0%, rgb(41 53 86 / 2%) 100%);
	margin-top: 5px;
	position: relative;
}

.ui .job-desc .intake-description-icon{
	opacity: 0.3;
	margin-right: 10px;
}

.ui .job-footer{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin-top:6px;
}

.ui .job-cost{
	display:flex;
	flex-direction:column;
	gap:2px;
}

.ui .cost-label{
	font-size:12px;
	color: var(--muted);
	font-weight:800;
}

.ui .cost-value{
	font-size:16px;
	font-weight:900;
}

.ui .btn-sm{
	padding:9px 12px;
	border-radius: 12px;
	font-size:13px;
}




/* ===== BRIDGE: stare widoki w nowym layoucie ===== */

.ui a{
	color: var(--primary);
	text-decoration:none;
}

.ui h1, .ui h2, .ui h3{
	color: var(--text);
}

.ui .alert{
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 12px 14px;
	background: var(--surface);
	box-shadow: var(--shadow);
}

.ui .alert-success{
	border-color: rgba(34,197,94,.25);
	background: rgba(34,197,94,.08);
}

.ui .alert-danger{
	border-color: rgba(239,68,68,.25);
	background: rgba(239,68,68,.08);
}

.ui .table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	background: var(--surface);
	border: 1px solid rgb(255 255 255);
	border-radius: var(--radius);
	overflow:hidden;
	box-shadow: var(--shadow);
}

.ui .table th{
	text-align: left;
	padding: 16px 12px;
	color: var(--muted);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .2px;
	border-bottom: 1px solid var(--border);
	background: rgba(15, 23, 42, .02);
	background-image: linear-gradient(179deg, rgb(62 81 112 / 6%) 0%, rgb(246 248 252) 100%);
}

.ui .table td{
	padding:12px;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	line-height: 1.3em;
}

.ui .button-table{
	border-radius: 30px;
	padding: 10px 15px;
	background: #e5e8ed63;
	cursor: pointer;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	border: 1px solid #e7e9ed;
	color: #3d4f6e;
	white-space: nowrap;
}

.ui .flex-container{
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: end;
}

/* sztywne kolumny */
th.col-id,
td.col-id{
	width: 60px;
}

th.col-phone,
td.col-phone{
	width: 140px;
}

th.col-brand, 
td.col-brand,
th.col-model, 
td.col-model  {
	width: 200px;
}

th.col-actions,
td.col-actions{
	width: 260px;
	text-align: center;
	white-space: nowrap;
}

/* elastyczna kolumna */
th.col-email,
td.col-email{
	width: auto;
}

.ui .button-table:hover{
	background: #e5e8ed;
}

.ui .button-table span{
	opacity: 0.3;
	height: 14px;
	margin-right: 1px;
	margin-left: -2px;
	font-weight: 300;
}

.ui .table tr:last-child td{ border-bottom:none; }

.ui input[type="text"],
.ui input[type="email"],
.ui input[type="number"],
.ui input[type="password"],
.ui input[type="month"],
.ui input[type="date"],
.ui select,
.ui textarea{
	border: 1px solid rgb(228 233 242);
	border-radius: 30px;
	padding: 0px 15px;
	background: #f6f8fc;
	color: var(--text);
	outline: none;
	width: 100%;
	font-family: "Google Sans Flex", sans-serif;
	font-size: 14px;
	height: 42px;
}

.ui input[type="search"]{
	border: 1px solid rgb(228 233 242);
	border-radius: 30px;
	padding: 12px 15px;
	background: #f6f8fc;
	color: var(--text);
	outline: none;
	font-family: "Google Sans Flex", sans-serif;
}

.ui label{
	margin: 15px 0 10px 0;
	font-size: 15px;
	font-family: "Google Sans Flex", sans-serif;
	color: var(--text);
	font-weight: 600;
	display: block;
}

.ui .form-row-container{
	display: flex;
	align-items: center;
}

.ui .form-row-container .or{
	margin: 0 20px;
	font-size: 15px;
	font-family: "Google Sans Flex", sans-serif;
	color: var(--text);
	font-weight: 600;
}

.ui .new-job-button{
	min-width: 133px;
}

.ui .new-job-create-button{
	margin-top: 15px;
	width: 100%;
	text-align: center;
	justify-content: center;
	padding: 15px;
	font-size: 15px;
}

.ui #addClientBox,
.ui #addCarBox{
	margin: 15px 0;
	padding: 5px 15px 15px 15px;
	border-radius: 10px;
	border: 2px solid #e7e9ed;
	background: #f6f8fc;
}

.ui #addClientBox > div > input{
	background: #fff;
}

.ui #addClientBox #client_first_name,
.ui #addClientBox #client_last_name,
.ui #addClientBox #client_phone,
.ui #addClientBox #client_email,
.ui #addCarBox #car_brand,
.ui #addCarBox #car_model{
	width: 49%;
	margin-bottom: 10px;
}

.ui #addClientBox #client_company_name,
.ui #addCarBox #car_vin{
	width: 100%;
	margin-bottom: 10px;
}

.ui #addClientBox .new-client-invoice-data-container{
	margin-top: 1px;
}

.ui #addClientBox .new-client-invoice-data-container .form-grid{
	margin-top: 15px;
}

.ui #addClientBox .new-client-invoice-data-container .form-row input{
	width: 49% !important;
	margin-bottom: 10px;
}

/*
.ui .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	text-decoration: none !important;
}
*/



/* ===== Paginacja Laravel ===== */

.ui nav[role="navigation"]{
	margin-top:16px;
}

.ui nav[role="navigation"] .flex{
	gap:10px;
}

.ui nav[role="navigation"] a,
.ui nav[role="navigation"] span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:8px 12px;
	border-radius:12px;
	border:1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	text-decoration:none;
	font-weight:800;
}

.ui nav[role="navigation"] span[aria-current="page"]{
	background: var(--primary-100);
	border-color: rgba(47,111,185,.35);
	color: var(--primary);
}



.ui .chip{ text-decoration:none; display:inline-flex; align-items:center; }




/* sidebar się nie przewija */
.ui .sidebar{
	height:100dvh;
	overflow:hidden;
	position:sticky;
	top:0;
}

@supports not (height: 100dvh){
	.ui .sidebar{ min-height: 100vh; }
}

/* główna kolumna: header + scrollowalny content */
.ui .main{
	height:100dvh;
	min-width:0;
	display:flex;
	flex-direction:column;
}

@supports not (height: 100dvh){
	.ui .main{ min-height: 100vh; }
}

.ui .topbar{
	flex:0 0 auto;
}

/* tu ma być scroll */
.ui .main > main{
	flex:1 1 auto;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}




.ui .icon-btn{
	display: none;
}


.ui form.search{
	position: relative;
}

.ui .search-suggest{
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0,0,0,.12);
	overflow: hidden;
	z-index: 2000;
}

.ui .ss-sec{
	padding: 10px 10px 6px;
}

.ui .ss-title{
	font-size: 11px;
	color: var(--muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ui .ss-items{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ui .ss-item{
	display: block;
	padding: 10px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--text);
	background: rgba(15,23,42,.02);
}

.ui .ss-item:hover{
	background: rgba(15,23,42,.06);
}

.ui .ss-label{
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
}

.ui .ss-meta{
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}


/* Dashboard KPI: zawsze 3 w rzędzie na desktopie */
.ui .cards.cards-kpi{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
}

/* Anchor wrapper niech nie psuje layoutu */
.ui .cards.cards-kpi > a{
	display: block;
}

/* Dashboard: obrót na pełną szerokość */
.ui .cards.cards-revenue{
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px;
}

.ui .clients-datas-container{
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.ui .clients-datas-table{
	width: 50%;
}

.ui .clients-cars-table{
	width: 50%;
}

.ui .clients-datas-rows{
	background-image: linear-gradient(90deg, rgb(62 81 112 / 9%) 0%, rgb(41 53 86 / 2%) 100%);
	padding: 10px;
	border-radius: 5px;
}

.ui .clients-datas-row{
	display: flex;
	align-items: center;
	margin: 9px 0;
}

.ui .clients-datas-label{
	font-size: 15px;
	font-weight: 700;
	display: block;
	width: 110px;
}

.ui .clients-datas-value{
	font-size: 15px;
	font-family: "Google Sans Flex", sans-serif;
}

.ui .alt-font{
	font-family: "Google Sans Flex", sans-serif;
}

.ui .clients-cars-table .clients-datas-rows{
	display: flex;
	justify-content: space-between;
}

.ui .clients-datas-row-left{
	
}

.ui .clients-datas-row-right{
	width: 100px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: end;
}

.ui .table-jobs{
	width: 100%;
	table-layout: fixed;
}

/* ID wąskie */
.ui .table-jobs .col-id{
	width: 60px;
	white-space: nowrap;
}

/* AKCJE – zawsze skrajnie po prawej */
.ui .table-jobs .col-actions{
	width: 98px;
	text-align: center;
	white-space: nowrap;
}

/* żeby przycisk był przyklejony do prawej */
.ui .table-jobs .col-actions a{
	display: inline-block;
}

.ui .reports-filers-element{
	display: flex;
	align-items: center;
}

.ui .reports-filers-element label{
	margin: 0 8px 0 15px;
}

.ui .reports-filers-form{
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.ui .reports-filers-form-left{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.ui .reports-filers-form-right{
	display: flex;
	align-items: center;
	margin-right: 5px;
}

.ui .report-filters-arrow-left{
	background: #fff;
	width: 39px;
	height: 39px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	font-size: 19px;
	text-decoration: none !important;
	z-index: 2;
}

.ui .report-filters-arrow-today{
	text-decoration: none !important;
	margin: 0 -15px 0 -15px;
	background: #3d4f6e1f;
	height: 39px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px;
	z-index: 1;
	font-size: 14px;
	font-weight: 600;
}

.ui .report-filters-arrow-right{
	background: #fff;
	width: 39px;
	height: 39px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 999px;
	font-size: 19px;
	text-decoration: none !important;
	z-index: 2;
}

.ui .reports-selected-range{
	margin-bottom: 15px;
}

.ui .reports-result{
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.ui .reports-result > div{
	
}

.ui .reports-filers-element input,
.ui .reports-filers-element select{
	background-color: #fff;
	padding: 9px 15px;
}

.ui .reports-filers-form-left .btn{
	height: 39px;
}

.ui .ss-item.is-active{
	background: rgba(15,23,42,.06);
}

.ui .brand{
	text-decoration:none;
	color:inherit;
	cursor:pointer;
}

/* Placeholder – mniej widoczny */
.ui input::placeholder,
.ui textarea::placeholder{
	color: rgba(15, 23, 42, 0.35); /* delikatny */
	font-weight: 400;
}

/* Safari / starszy Chrome */
.ui input::-webkit-input-placeholder,
.ui textarea::-webkit-input-placeholder{
	color: rgba(15, 23, 42, 0.35);
}

/* Firefox */
.ui input::-moz-placeholder,
.ui textarea::-moz-placeholder{
	color: rgba(15, 23, 42, 0.35);
	opacity: 1; /* FF lubi własną przezroczystość */
}

/* Edge / IE (jeśli kiedyś...) */
.ui input:-ms-input-placeholder,
.ui textarea:-ms-input-placeholder{
	color: rgba(15, 23, 42, 0.35);
}

.ui textarea{
	resize: vertical;
	padding: 15px;
	min-height: 100px;
}
/* ===== Drawer notatek: slide in/out (bez display:none) ===== */

#entityNoteOverlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.35);
	z-index: 9998;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity .20s ease, visibility 0s linear .20s;
}

.ui .btn-delete{
	border-color: rgba(239, 68, 68, .25);
	background: rgba(239, 68, 68, .08);
	color: #b91c1c;
}

.ui .btn-delete:hover{
	border-color: rgba(239, 68, 68, .25);
	background: rgb(239 68 68 / 21%);
	color: #b91c1c;
}

#entityNoteDrawer{
	position: fixed;
	top: 0;
	right: 0;
	height: 100dvh;
	width: 420px;
	max-width: 95vw;
	background: #fff;
	z-index: 9999;
	border-left: 1px solid #ddd;
	box-shadow: -4px 0 14px rgba(0,0,0,.10);

	/* START: schowany poza ekranem */
	transform: translateX(100%);
	visibility: hidden;
	pointer-events: none;


	transition: transform .26s ease, visibility 0s linear .26s;

	padding-top: env(safe-area-inset-top);
}

@supports not (height: 100dvh){
	#entityNoteDrawer{ min-height: 100vh; }
}

/* stan otwarty */
body.entity-note-open #entityNoteOverlay{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition: opacity .20s ease;
}

body.entity-note-open #entityNoteDrawer{
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;

	transition: transform .26s ease;
}

/* blokada scrolla tła podczas otwarcia i zamykania */
body.entity-note-open,
body.entity-note-closing{
	overflow: hidden;
}

/* podczas zamykania nie klikamy w nic w drawerze/overlay */
body.entity-note-closing #entityNoteOverlay,
body.entity-note-closing #entityNoteDrawer{
	pointer-events: none;
}


.ui .notes-header{
	background-color: #f6f8fc;
	border-bottom: 1px solid #e5e8ed;
	height: 74px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui .notes-title{
	font-size: 23px;
	font-family: "Google Sans Flex", sans-serif;
	font-weight: 600;
}

.ui #entityNoteCloseBtn{
	border: none;
	background: #3d4f6e;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	position: absolute;
	right: 15px;
	top: 18px;
	cursor: pointer;
}

.ui #entityNoteList{
	padding-top: 10px;
	border-bottom: 1px solid #e8e9ed;
	padding-bottom: 8px;
}

.ui #entityNoteManageLink{
	font-size: 14px;
	margin-top: 0;
	display: inline-block;
	padding: 10px;
	margin-bottom: -7px;
}

.ui .notes-add-container > div{
	text-align: right;
}

.ui #entityNoteInput{
	border-radius: 12px;
}

.ui #entityNoteAddBtn{
	width: 100%;
	justify-content: center;
	margin: 10px 0;
}

.ui .notes-container{
	overflow-y: auto;
	overflow-x: hidden;

	/* klucz: nie height, tylko max-height + min-height:0 */
	max-height: calc(100dvh - 56px);
	min-height: 0;

	-webkit-overflow-scrolling: touch;

	/* żeby nie podchodziło pod home-indicator */
	padding-bottom: env(safe-area-inset-bottom);
}

@supports not (height: 100dvh){
	.ui .notes-container{
		max-height: calc(100vh - 56px);
	}
}

.ui .notes-add-container{
	background: #d0d8e7;
	padding: 5px 15px 20px 15px;
	border-radius: 10px;
	margin: 10px;
}

.ui .dashboard-bottom-columns{
	display:flex; 
	gap:15px; 
	flex-wrap:wrap; 
	align-items:flex-start;
}

.ui .logout-mobile{
	display: none;
}


/* =========================
   Modale (Zmień klienta / Zmień auto) – desktop + mobile
   Wklej NA KONIEC CSS
========================= */

/* wspólne dla obu modalów */
#modal_change_client,
#modal_change_car{
	position: fixed;
	inset: 0;
	z-index: 20010; /* ponad drawer notatek (20001) */
	display: none;

	background: rgba(0,0,0,.45);

	/* centrowanie dialogu */
	padding: 24px;
	overflow: hidden; /* niech nie scrolluje tło */
}

/* dialog (kontener) */
#modal_change_client .modal-dialog,
#modal_change_car .modal-dialog{
	margin: 0 auto;
	max-width: 920px;
	display: flex;
	border-radius: 10px;
}

/* “karta” modala */
#modal_change_client .modal-content,
#modal_change_car .modal-content{
	width: 100%;
	height: auto;
	max-height: 100%;

	display: flex;
	flex-direction: column;

	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(0,0,0,.18);
	border: 1px solid rgba(0,0,0,.06);

	overflow: hidden;
}

/* header */
#modal_change_client .modal-header,
#modal_change_car .modal-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	padding: 14px 16px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	background: #f6f8fc;
}

#modal_change_client .modal-title,
#modal_change_car .modal-title{
	margin: 0;
	font-weight: 800;
	letter-spacing: .01em;
	font-size: 20px;
	font-family: "Google Sans Flex", sans-serif;
}

#modal_change_client #client_list_wrap,
#modal_change_car #car_list_wrap{
	margin-top: 15px;
}

#modal_change_client .close,
#modal_change_car .close{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: #3d4f6e;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	right: 15px;
	top: 18px;
	cursor: pointer;
}

#modal_change_client .client_list_table,
#modal_change_car .car_list_table{
	width: 100%;
}

#modal_change_car .car-client-name{
	margin-left: 5px;
	font-size: 13px;
	opacity: 0.7;
}

#modal_change_car .car-vin{
	opacity: 0.7;
	margin-top: 5px;
	font-size: 13px;
}

#modal_change_client .client_list_table .client-row,
#modal_change_car .car_list_table .car-row{
	padding: 10px;
	display: block;
	margin-bottom: 5px;
	border-radius: 5px;
	background-image: linear-gradient(90deg, rgb(62 81 112 / 9%) 0%, rgb(41 53 86 / 2%) 100%);
	font-size: 14px;
}

#modal_change_client .client_list_table .client-row:hover,
#modal_change_car .car_list_table .car-row:hover{
	background-image: linear-gradient(90deg, rgb(62 81 112 / 20%) 0%, rgb(41 53 86 / 2%) 100%);
}

/* body scrolluje (a nie cały modal) */
#modal_change_client .modal-body,
#modal_change_car .modal-body{
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;

	padding: 14px 16px;
}

/* stopka */
#modal_change_client .modal-footer,
#modal_change_car .modal-footer{
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	justify-content: flex-end;

	padding: 12px 16px;
	border-top: 1px solid rgba(0,0,0,.08);
	background: #fff;
}

/* klikane wiersze w tabeli (lista wyboru) */
#modal_change_client .table tbody tr,
#modal_change_car .table tbody tr{
	transition: background .12s ease;
}

#modal_change_client .table tbody tr:hover,
#modal_change_car .table tbody tr:hover{
	background: rgba(0,0,0,.03);
}

/* delikatniejsze komórki w modalu (żeby nie było “tabelowo”) */
#modal_change_client .table td,
#modal_change_car .table td{
	border-bottom: 1px solid rgba(0,0,0,.06);
}

/* input wyszukiwarki */
#modal_change_client #client_search{
	height: 44px;
	border-radius: 12px;
}

.ui .pdf-options-tables .job-id{
	margin-bottom: 5px;
}

input[type="checkbox"],
input[type="radio"]{
	transform: scale(1.25);
	transform-origin: left center;
	margin-right:6px;
}


.ui .pdf-options-tables label{
	margin: 0;
	font-weight: 400;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ui .pdf-options-tables .btn{
	width: 100%;
	justify-content: center;
	margin-top: 15px;
}

.ui .pdf-options-tables .button-table{
	margin-top: 10px;
	padding: 0 30px;
}


/* =========================
   AUTH (login / reset etc.)
========================= */

.auth-page{
	min-height: calc(100vh - 70px); /* jeśli topbar istnieje */
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px 14px;
}

.auth-page .brand{
	cursor: default;
	margin-top: 2px;
}

.auth-page .brand .logo{
	width: 68px;
}

.auth-page .brand .logo img{
	width: 100%;
	display: block;
}

.auth-page .brand-name {
	/* nowa ikona (04.08) jest pełnokadrowa — stare ujemne wcięcie -10px
	   wciągało nazwę pod poprzedni logotyp z wewnętrznym marginesem
	   i nachodziło na kafel */
	margin-top: 10px;
}

.ui .auth-page .brand-name{
	font-weight: 600;
	letter-spacing: .7px;
	font-size: 25px;
	width: 100%;
	text-align: center;
	color: #101a2d;
}

.auth-page .brand-name span{
	color: #101a2d85;
	font-size: 14px;
	margin-top: 4px;
}

.auth-card{
	width:100%;
	max-width:420px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.auth-brand{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}

.auth-logo{
	width:54px;
	height:54px;
	border-radius:12px;
	object-fit:contain;
	background:#fff;
	border:1px solid #e6e8ee;
	padding:6px;
}

.auth-title .auth-app{
	font-weight:700;
	font-size:18px;
	line-height:1.15;
}

.auth-title .auth-sub{
	opacity:.75;
	font-size:13px;
	margin-top:2px;
}

.auth-alert{
	background:#fff3f3;
	border:1px solid #ffd1d1;
	color:#8a1f1f;
	border-radius:12px;
	padding:10px 12px;
	margin:10px 0 14px 0;
	font-size:13px;
}

.auth-form{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.auth-field input,
.auth-field select{
	width:100%;
	height:42px;
	border:1px solid #dfe3ea;
	border-radius:12px;
	padding:0 12px;
	outline:none;
	background:#fff;
}

.auth-field input:focus,
.auth-field select:focus{
	border-color:#b8c7ff;
	box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.auth-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-top:2px;
}

.auth-remember{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	opacity:.9;
	cursor:pointer;
	user-select:none;
}

.auth-remember input{
	transform: scale(1.2);
	transform-origin:left center;
}

.auth-link{
	font-size:13px;
	text-decoration:none;
	color:#2563eb;
}

.auth-link:hover{
	text-decoration:underline;
}

.auth-btn{
	height:44px;
	border-radius:12px;
	border:1px solid #2563eb;
	background:#2563eb;
	color:#fff;
	font-weight:600;
	cursor:pointer;
	margin-top:4px;
}

.auth-btn:hover{
	filter:brightness(.97);
}

.auth-footer{
	margin-top:14px;
	font-size:12px;
	opacity:.7;
	text-align:center;
}

/* tło (subtelne, bez kłótni z UI) */
.auth-page{
	background:#f6f8fc;
}

.auth-page label.job-id{
	margin-left: 10px;
}

.auth-alert--success{
	background: #e7f7ec;
	border: 1px solid #9fd8b0;
	color: #1e6b36;
}

.auth-alert--success div{
	color: inherit;
}







.car-catalog-panel{
	margin-top:10px;
	padding:12px;
	border:1px solid #e5e5e5;
	border-radius:10px;
}

.car-catalog-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
}

.car-manual-toggle{
	display:flex;
	align-items:center;
	gap:8px;
	cursor:pointer;
}

.car-catalog-box{
	margin-top:12px;
}

.car-manual-box{
	margin-top:12px;
}

.suggest-box{
margin-top: 6px;
	border: 1px solid #ddd;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	position: absolute;
	width: 100%;
	z-index: 5;
}

.suggest-item{
	padding:14px 12px;
	cursor:pointer;
	border-top:1px solid #eee;
}

.suggest-item:first-child{
	border-top:none;
}

.suggest-item:hover{
	background: #f6f8fc;
}

.suggest-item.is-active{
	background: #f6f8fc;
}

.ui .car-mode-buttons{
	display: flex;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 20px;
}

.ui .car-mode-btn{
	background: #3d4f6e;
	border-color: rgba(0, 0, 0, 0);
	color: #fff;
	width: 50%;
	justify-content: center;
}

.ui .car-mode-btn:hover,
.ui .car-mode-btn.btn-primary{
	background: var(--primary-600); 
	border-color: var(--primary-600); 
}

.ui #btn_mode_catalog{
	margin-right: 10px;
}

.ui #btn_mode_manual{
	margin-left: 10px;
}

.ui .form-group .subtle{
	margin-top: -5px;
	margin-bottom: 10px;
}

.ui #mode_catalog,
.ui #mode_manual{
	margin-top: -5px;
}

.ui .auth-field{
	position: relative;
}

.ui #mode_catalog .auth-field select:disabled{
	background: #d0d8e7;
}

.ui .car-details-tables-top-container{
	display: flex;
	flex-wrap: wrap;
}

.ui .car-details-tables-top-container .table{
	width: auto;
	margin-right: 15px;
	margin-bottom: 15px;
	min-width: 100px;
}

.ui .car-specs-head{
	background: #d0d8e7 !important;
}

/* Custom */
@media (min-width: 1401px){
	.ui .dashboard-bottom-column-old-jobs,
	.ui .dashboard-bottom-column-last-notes{
		min-width:320px;
		flex:1; 
	}
}

/* Custom */
@media (max-width: 1400px){
	.ui .job-create-form{
		width: 75%;
	}
	.ui .dashboard-bottom-column-old-jobs,
	.ui .dashboard-bottom-column-last-notes{
		width: 100%;
	}
}

.flash{
	margin: 12px 0 18px 0;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
}

.flash-success{
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.flash-warning{
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}

.flash-info{
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1e3a8a;
}

/* Baner trybu tylko do odczytu (wygasła subskrypcja) */
.az-readonly-banner{
	margin: 12px 0 18px 0;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
}

.az-readonly-banner .material-symbols-outlined{
	font-size: 20px;
	flex-shrink: 0;
}

.az-readonly-banner a{
	color: #92400e;
	text-decoration: underline;
	font-weight: 600;
}

.alert {
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 16px;
	font-size: 14px;
}

.alert-danger {
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #842029;
}

.alert-list {
	margin: 0;
	padding-left: 18px;
}

.alert-list li {
	line-height: 1.4;
}

.ui .content.cars-index th.col-brand{
	width: auto;
}

.ui .job-details .page-head .page-actions{
	display: flex;
}

.ui .job-details .page-head .page-actions .form_delete_restore_job{
	margin-left: 15px;
}

.ui .job-details .page-head .page-actions .form_delete_restore_job .restore-job-button,
.ui .job-details .page-head .page-actions .form_delete_restore_job .delete-job-button{
	background: #e5e8ed;
	outline: 1px solid #d2d4d9;
}

.ui .job-details .page-head .page-actions .form_delete_restore_job .restore-job-button:hover,
.ui .job-details .page-head .page-actions .form_delete_restore_job .delete-job-button:hover{
	background: #be2525;
	outline: 1px solid #720908;
	color: #fff;
}

.ui .job-notes-empty{
	padding: 15px;
}

/* Tablet */
@media (max-width: 1100px){
	.ui .cards{
		grid-template-columns: 1fr;
	}
	.ui .job-create-form{
		width: 100%;
	}
}

@media (min-width: 961px){
	.ui .sidebar-close{
		display: none;
	}
}

@media (max-width: 960px){
	.ui .nav-item{
		padding: 18px 12px;
		font-size: 17px;
	}
	.ui{
		--sidebar-w: 0px;
	}
	.ui .search{ min-width: 0; }
	.ui .icon-btn{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
	}
	.ui .search-btn{
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
	.ui input[type="search"]{
		font-size: 18px;
	}

	.ui .logout-mobile{
		margin-top: auto;
	}

	/* Sidebar istnieje zawsze, tylko jest poza ekranem */
	.ui .sidebar{
		position: fixed;
		top: 0;
		left: 0;
		/* iOS / mobilne viewporty – lepiej niż 100vh */
		height: 100dvh;

		width: 280px;
		z-index: 1200;

		transform: translateX(-102%);
		transition: transform .22s ease;

		/* jeśli miałeś scroll w sidebarze */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		display: flex;
		flex-direction: column;
	}

	/* Jeśli przeglądarka nie wspiera dvh, fallback */
	@supports not (height: 100dvh){
		.ui .sidebar{ height: 100vh; }
	}

	/* Tylko menu ma scroll, nie cały sidebar */
	.ui .nav{
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.sidebar_open .ui .sidebar{
		transform: translateX(0);
	}

	/* Żeby topbar był nad treścią, ale pod sidebar jeśli trzeba */
	.ui .topbar{
		z-index: 900;
	}

	/* półprzezroczyste tło */
	.ui .sidebar-overlay{
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.35);
		z-index: 1100;
	}

	body.sidebar_open .ui .sidebar-overlay{
		display: block;
	}
	.ui .sidebar-close{
		position: absolute;
		top: 12px;
		right: 12px;

		width: 36px;
		height: 36px;
		border-radius: 10px;

		border: 1px solid var(--border);
		background: #ffffff2b;

		font-size: 22px;
		line-height: 1;
		cursor: pointer;

		display: flex;
		align-items: center;
		justify-content: center;
		color: #101a2d;
	}
	.ui .cards.cards-kpi{
		grid-template-columns: 1fr;
	}
	.ui .filters .chip {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 14px;
		border-radius: 999px;
		font-size: 14px;
		line-height: 1.1;
		text-align: center;
		white-space: normal;
	}
	.ui .jobs-index .filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px;
		border-radius: 0;
		margin-left: -25px;
		margin-right: -25px;
		padding: 10px 25px 10px 25px;
	}
	.ui .jobs-index .filters .filters-right {
		grid-column: 1 / -1;
		margin-left: 0;
	}
	.ui .jobs-index .filters .filters-right form {
		width: 100%;
	}
	.ui .jobs-index .filters .filters-right .select {
		width: 100%;
		height: 44px;
		border-radius: 999px;
	}
	.ui .reports-filers-element input, .ui .reports-filers-element select{
		width: auto;
	}
	.ui .reports-result {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Mobile */
@media (max-width: 720px){
	.ui .topbar-right .user-chip{
		display: none
	}

	.ui .page-head{
		flex-direction:column;
		align-items:stretch;
	}
	.ui .job-meta{
		font-size: 15px;
	}
	.ui .job-id {
		font-size: 18px;
	}
	.ui .job-title {
		font-size: 19px;
	}
	.ui .page-actions .btn{
		width:100%;
		justify-content: center;
		padding: 10px 25px 10px 10px;
	}

	.ui .job-create-form{
		width: 100%;
	}
	.ui .form-row-container{
		flex-wrap: wrap;
	}
	.ui .form-row-container .or{
		display: none;
	}

	/* wspólne: tabele jako lista kart */
	.ui .dashboard-bottom-column-old-jobs .table,
	.ui .dashboard-bottom-column-last-notes .table{
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.ui .dashboard-bottom-column-old-jobs .table thead,
	.ui .dashboard-bottom-column-last-notes .table thead{
		display: none;
	}

	.ui .dashboard-bottom-column-old-jobs .table tbody,
	.ui .dashboard-bottom-column-last-notes .table tbody{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	/* karta = TR */
	.ui .dashboard-bottom-column-old-jobs .table tr,
	.ui .dashboard-bottom-column-last-notes .table tr{
		display: block;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 12px;
	}

	/* TD jako bloki (bez linii tabeli) */
	.ui .dashboard-bottom-column-old-jobs .table td,
	.ui .dashboard-bottom-column-last-notes .table td{
		display: block;
		border: none !important;
		padding: 0;
	}

	/* =========================
	   ZALEGŁE (old jobs)
	   HTML: # | Klient | Auto | Akcja
	========================= */

	/* układ treści karty */
	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(1),
	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(2),
	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(3),
	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(4){
		font-size: 15px;
		color: var(--text);
		margin-bottom: 8px;
	}

	/* akcja na dole po prawej */
	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(5){
		display: flex;
		justify-content: flex-end;
	}

	/* =========================
	   OSTATNIA AKTYWNOŚĆ (last notes)
	   HTML: Data | Zlecenie | Co dodano | Akcja
	========================= */

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(1){
		font-size: 15px;
		margin-bottom: 8px;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(2){
		margin-bottom: 8px;
		display: flex;
		flex-wrap: wrap;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(2) span.dot{
		display: none;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(3){
		font-size: 15px;
		margin-bottom: 10px;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(4){
		display: flex;
		justify-content: flex-end;
	}

	/* przycisk w karcie: trochę większy na dotyk */
	.ui .dashboard-bottom-column-old-jobs .button-table,
	.ui .dashboard-bottom-column-last-notes .button-table{
		padding: 10px 16px;
		width: 100%;
		justify-content: center;
		margin-top: 5px;
	}

	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(1)::before{
		content: "Zlecenie";
		width: 70px;
	}

	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(2)::before{
		content: "Data";
		width: 70px;
	}

	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(3)::before{
		content: "Klient";
		width: 70px;
	}

	.ui .dashboard-bottom-column-old-jobs .table td:nth-child(4)::before{
		content: "Auto";
		width: 70px;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(1)::before{
		content: "Data";
		width: 70px;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(2)::before{
		content: "Zlecenie";
		width: 70px;
	}

	.ui .dashboard-bottom-column-last-notes .table td:nth-child(3)::before{
		content: "Wpis";
		width: 70px;
	}

	.ui .dashboard-bottom-column-old-jobs .table td::before,
	.ui .dashboard-bottom-column-last-notes .table td::before{
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--muted);
	}

	/* label + value w jednej linii */
	.ui .dashboard-bottom-column-old-jobs .table td,
	.ui .dashboard-bottom-column-last-notes .table td{
		display: grid;
		grid-template-columns: 70px 1fr;
		column-gap: 10px;
		align-items: start;
	}
	.ui .topbar-left{
			width: 100%;
	}
	.ui .logout-mobile{
		display: flex;
		position: relative;
		width: calc(100% - 30px);
		margin-left: 15px;
	}

	/* Logout zawsze na dole i NIE ucina go safe-area */
	.ui .logout-mobile{
		flex: 0 0 auto;
		margin-top: 0;
	}
	.ui .topbar-right .btn-logout{
		display: none;
	}
	.ui .logout-mobile .btn-logout{
		width: 100%;
		justify-content: center;
		background: #3b4453;
		color: #fff;
	}

	.ui #toggleAddClient,
	.ui #toggleAddCar{
		width: 100%;
		justify-content: center;
		margin-top: 7px;
		background: #808fab;
	}
	.ui #addClientBox #client_first_name, 
	.ui #addClientBox #client_last_name, 
	.ui #addClientBox #client_phone, 
	.ui #addClientBox #client_email, 
	.ui #addCarBox #car_brand, 
	.ui #addCarBox #car_model{
		width: 100%;
	}
	.ui .filters{
		border-radius: 24px;
	}
	/* cały box filtrów jako siatka */
	.ui .filters{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 12px;
		border-radius: 18px;
	}

	/* chipy: równa wysokość i centrowanie */
	.ui .filters .chip{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 0 14px;
		border-radius: 999px;
		font-size: 14px;
		line-height: 1.1;
		text-align: center;
		white-space: normal; /* pozwól łamać */
	}

	/* prawy blok (sortowanie) na pełną szerokość na dole */
	.ui .filters .filters-right{
		grid-column: 1 / -1;
		margin-left: 0;
	}

	.ui .filters .filters-right form{
		width: 100%;
	}

	.ui .filters .filters-right .select{
		width: 100%;
		height: 44px;
		border-radius: 999px;
	}
	.ui .job-notes-list-element{
		padding: 10px 0;
	}
	.ui #entityNoteList .job-notes-list-element{
		padding: 10px;
	}
	.ui .job-notes-list-element-right{
		position: absolute;
		top: 10px;
		right: 0;	
	}
	.ui .element-job-type-note:before,
	.ui .element-job-type-diagnosis:before{
		left: -14px;
	}
	.ui .job-notes-list-element-date .job-type{
		display: none;
	}
	.ui .job-notes-list-element-title,
	.ui .job-notes-list-element-prices,
	.ui .job-notes-list-element-description{
		margin-left: 4px;
		width: calc(100% - 4px);
		text-align: left;
		line-height: 1.4em;
		font-size: 15px;
	}
	.ui .job-summary {
		justify-content: space-between;
		display: flex;
	}

	/* Strona klienta: 2 kolumny -> 1 kolumna */
	.ui .clients-datas-container{
		flex-direction: column;
		gap: 15px;
	}

	.ui .clients-datas-table,
	.ui .clients-cars-table{
		width: 100%;
	}

	/* Nagłówki kart: przycisk pod tytułem (na wąsko) */
	.ui .clients-datas-table .job-top,
	.ui .clients-cars-table .job-top{
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ui .clients-datas-table .job-top-right .button-table,
	.ui .clients-cars-table .job-top-right .button-table{
		width: 100%;
		justify-content: center;
	}

	/* Pojedyncze auto: układ pionowy */
	.ui .clients-cars-table .clients-datas-rows{
		flex-direction: column;
		gap: 10px;
	}

	.ui .clients-cars-table .clients-datas-row-right{
		width: 100%;
		flex-direction: column;
		gap: 8px;
		align-items: stretch;
	}

	.ui .clients-cars-table .clients-datas-row-right .button-table{
		width: 100%;
		justify-content: center;
	}
	/* Historia zleceń: tabela jako lista kart */
	.ui .content.client-data > .table.table-jobs{
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.ui .content.client-data > .table.table-jobs thead{
		display: none;
	}

	.ui .content.client-data > .table.table-jobs tbody{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ui .content.client-data > .table.table-jobs tr{
		display: block;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 12px;
		position: relative;
	}

	/* label + value w jednej linii */
	.ui .content.client-data > .table.table-jobs td{
		border: none !important;
		padding: 0;
		display: grid;
		grid-template-columns: 70px 1fr;
		column-gap: 10px;
		align-items: start;
		margin-bottom: 8px;
		font-size: 15px;
		color: var(--text);
	}

	/* wspólny styl labeli */
	.ui .content.client-data > .table.table-jobs td::before{
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--muted);
	}

	/* Etykiety */
	.ui .content.client-data > .table.table-jobs td:nth-child(1)::before{ content:"Zlec."; }
	.ui .content.client-data > .table.table-jobs td:nth-child(2)::before{ content:"Data"; }
	.ui .content.client-data > .table.table-jobs td:nth-child(3)::before{ content:"Auto"; }
	.ui .content.client-data > .table.table-jobs td:nth-child(5)::before{ content:"Opis"; }
	.ui .content.client-data > .table.table-jobs td:nth-child(6)::before{ content:"Części"; }
	.ui .content.client-data > .table.table-jobs td:nth-child(7)::before{ content:"Roboc."; }
	.ui .content.client-data > .table.table-jobs td:nth-child(8)::before{ content:"Razem"; }

	.ui .content.client-data > .table.table-jobs td:nth-child(4){
		margin: 0;
	}

	/* Akcje: pełna szerokość, bez labela */
	.ui .content.client-data > .table.table-jobs td:nth-child(9){
		grid-template-columns: 1fr;
		margin-top: 8px;
		margin-bottom: 0;
		width: 100%;
	}

	.ui .content.client-data > .table.table-jobs td:nth-child(9)::before{
		content: "";
	}

	.ui .content.client-data > .table.table-jobs td:nth-child(9) .button-table{
		width: 100%;
		justify-content: center;
		height: 38px;
		padding: 10px 16px;
	}

	/* Status badge: niech nie wygląda jak „przyklejony do lewej” */
	.ui .content.client-data > .table.table-jobs td:nth-child(4) .badge{
		position: absolute;
		top: 10px;
		right: 10px;
	}

	/* =========================
	   KLIENCI (index): tabela -> karty
	   .content.client-index > table.table
	   Kolumny: # | Nazwa | Firma | Telefon | Email | Akcje
	========================= */

	.ui .content.client-index > .table{
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.ui .content.client-index > .table thead{
		display: none;
	}

	.ui .content.client-index > .table tbody{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ui .content.client-index > .table tr{
		display: block;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 12px;
	}

	/* pola jako label | value */
	.ui .content.client-index > .table td{
		border: none !important;
		padding: 0;
		display: grid;
		grid-template-columns: 65px 1fr;
		column-gap: 10px;
		align-items: start;
		margin-bottom: 8px;
		font-size: 15px;
		color: var(--text);
	}

	.ui .content.client-index > .table td::before{
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--muted);
	}

	/* etykiety */
	.ui .content.client-index > .table td:nth-child(1)::before{ content:"ID"; }
	.ui .content.client-index > .table td:nth-child(2)::before{ content:"Nazwa"; }
	.ui .content.client-index > .table td:nth-child(3)::before{ content:"Firma"; }
	.ui .content.client-index > .table td:nth-child(4)::before{ content:"Tel."; }
	.ui .content.client-index > .table td:nth-child(5)::before{ content:"Email"; }

	/* Akcje: full width, bez labela */
	.ui .content.client-index > .table td:nth-child(6){
		grid-template-columns: 1fr;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.ui .content.client-index > .table td:nth-child(6)::before{
		content: "";
	}

	/* Akcje w pionie + pełna szerokość */
	.ui .content.client-index > .table td:nth-child(6) .flex-container{
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
		justify-content: flex-start;
	}

	.ui .content.client-index > .table td:nth-child(6) .flex-container > *{
		width: 100%;
	}

	.ui .content.client-index > .table td:nth-child(6) .btn,
	.ui .content.client-index > .table td:nth-child(6) .button-table{
		justify-content: center;
	}

	/* Przycisk usuń – żeby wyglądał jak reszta */
	.ui .content.client-index > .table td:nth-child(6) .btn-danger{
		width: 100%;
	}


	/* =========================
	   AUTA (index): tabela -> karty
	   .content.cars-index > table.table
	   Kolumny: # | Marka / model | VIN | Akcje
	========================= */

	.ui .content.cars-index > .table{
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.ui .content.cars-index > .table thead{
		display: none;
	}

	.ui .content.cars-index > .table tbody{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	/* karta */
	.ui .content.cars-index > .table tr{
		display: block;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 12px;
	}

	/* label | value */
	.ui .content.cars-index > .table td{
		border: none !important;
		padding: 0;
		display: grid;
		grid-template-columns: 70px 1fr;
		column-gap: 10px;
		align-items: start;
		margin-bottom: 8px;
		font-size: 15px;
		color: var(--text);
	}

	/* wspólny styl labeli */
	.ui .content.cars-index > .table td::before{
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--muted);
	}

	/* etykiety */
	.ui .content.cars-index > .table td:nth-child(1)::before{ content:"ID"; }
	.ui .content.cars-index > .table td:nth-child(2)::before{ content:"Auto"; }
	.ui .content.cars-index > .table td:nth-child(3)::before{ content:"Wersja"; }
	.ui .content.cars-index > .table td:nth-child(4)::before{ content:"Silnik"; }
	.ui .content.cars-index > .table td:nth-child(5)::before{ content:"Rok"; }
	.ui .content.cars-index > .table td:nth-child(6)::before{ content:"VIN"; }


	/* Akcje: full width */
	.ui .content.cars-index > .table td:nth-child(7){
		grid-template-columns: 1fr;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.ui .content.cars-index > .table td:nth-child(7)::before{
		content: "";
	}

	/* przyciski w pionie */
	.ui .content.cars-index > .table td:nth-child(7) .flex-container{
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.ui .content.cars-index > .table td:nth-child(7) .flex-container > *{
		width: 100%;
	}

	.ui .content.cars-index > .table td:nth-child(7) .btn,
	.ui .content.cars-index > .table td:nth-child(7) .button-table{
		justify-content: center;
	}

	/* delete: wizualnie ostrzegawcze, ale spójne */
	.ui .content.cars-index > .table td:nth-child(7) .btn-delete{
		width: 100%;
	}


	/* =========================
	   AUTO (show): Historia serwisowa
	   .content.car-details > table.table-jobs
	   Kolumny: # | Data | Status | Przebieg | Opis | Części | Robocizna | Razem | Akcje
	========================= */

	.ui .content.car-details .table.table-jobs{
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.ui .content.car-details .table.table-jobs thead{
		display: none;
	}

	.ui .content.car-details .table.table-jobs tbody{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ui .content.car-details .table.table-jobs tr{
		display: block;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 12px;
		position: relative;
	}

	/* label | value */
	.ui .content.car-details .table.table-jobs td{
		border: none !important;
		padding: 0;
		display: grid;
		grid-template-columns: 70px 1fr;
		column-gap: 10px;
		align-items: start;
		margin-bottom: 8px;
		font-size: 15px;
		color: var(--text);
	}

	.ui .content.car-details .table.table-jobs td::before{
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--muted);
	}

	/* etykiety */
	.ui .content.car-details .table.table-jobs td:nth-child(1)::before{ content:"Zlec."; }
	.ui .content.car-details .table.table-jobs td:nth-child(2)::before{ content:"Data"; }
	.ui .content.car-details .table.table-jobs td:nth-child(4)::before{ content:"KM"; }
	.ui .content.car-details .table.table-jobs td:nth-child(5)::before{ content:"Opis"; }
	.ui .content.car-details .table.table-jobs td:nth-child(6)::before{ content:"Części"; }
	.ui .content.car-details .table.table-jobs td:nth-child(7)::before{ content:"Roboc."; }
	.ui .content.car-details .table.table-jobs td:nth-child(8)::before{ content:"Razem"; }

	.ui .content.car-details .table.table-jobs td:nth-child(3){
		margin: 0;
	}

	.ui .content.car-details .table.table-jobs td:nth-child(3) .badge{
		position: absolute;
		top: 10px;
		right: 10px;
	}

	/* Akcje: full width */
	.ui .content.car-details .table.table-jobs td:nth-child(9){
		grid-template-columns: 1fr;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.ui .content.car-details .table.table-jobs td:nth-child(9)::before{
		content: "";
	}

	.ui .content.car-details .table.table-jobs td:nth-child(9) .button-table{
		width: 100%;
		justify-content: center;
		height: 38px;
		padding: 10px 16px;
	}

	/* badge niech się nie rozciąga */
	.ui .content.car-details .table.table-jobs td:nth-child(3) .badge{
		justify-self: start;
	}

	/* długie opisy / VIN / cokolwiek: niech się łamie */
	.ui .content.car-details .table.table-jobs td:nth-child(5){
		overflow-wrap: anywhere;
	}

	/* =========================
	   RAPORTY: filtry – mobile
	========================= */

	.ui .content.reports-index .filters{
		padding: 12px;
		display: flex;
	}

	.ui .content.reports-index .reports-filers-form{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.ui .content.reports-index .reports-filers-form-left{
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.ui .content.reports-index .reports-filers-element{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.ui .content.reports-index .reports-filers-element label{
		margin: 5px 0 8px 12px;
		font-size: 18px;
	}

	/* inputy / selecty na pełną */
	.ui .content.reports-index .reports-filers-element input,
	.ui .content.reports-index .reports-filers-element select{
		width: auto;
		box-sizing: border-box;
	}

	/* box tygodnia (year + week) też na pełną */
	.ui .content.reports-index #weekBox > div{
		width: 100%;
		gap: 8px;
	}

	.ui .content.reports-index #weekBox input[name="week_year"]{
		width: 100% !important;
		margin-right: 0 !important;
	}

	/* przycisk Pokaż na pełną */
	.ui .content.reports-index .reports-filers-form-left > div[style*="margin-left"]{
		margin-left: 0 !important;
	}

	.ui .content.reports-index .reports-filers-form-left .btn{
		width: 100%;
		justify-content: center;
	}

	/* prawa sekcja (strzałki) pod spodem i na pełną */
	.ui .content.reports-index .reports-filers-form-right{
		width: 100%;
		justify-content: space-between;
		margin-right: 0;
	}

	.ui .content.reports-index .report-filters-arrow-left,
	.ui .content.reports-index .report-filters-arrow-right{
		width: 50px;
		height: 50px;
	}

	.ui .content.reports-index .report-filters-arrow-today{
		flex: 1;
		height: 50px;
	}

	/* =========================
	   RAPORTY: KPI – mobile
	========================= */
	.ui .reports-result{
		grid-template-columns: 1fr !important;
	}

	/* =========================
	   RAPORTY: tabela wyników -> karty
	   Kolumny: ID | Zamknięte | Klient | Auto | Robocizna | Części | Razem
	========================= */

	.ui .content.reports-index table.table{
		border: none;
		box-shadow: none;
		background: transparent;
		overflow: visible;
	}

	.ui .content.reports-index table.table thead{
		display: none;
	}

	.ui .content.reports-index table.table tbody{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.ui .content.reports-index table.table tr{
		display: block;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 12px;
	}

	.ui .content.reports-index table.table td{
		border: none !important;
		padding: 0;
		display: grid;
		grid-template-columns: 65px 1fr;
		column-gap: 10px;
		align-items: start;
		margin-bottom: 8px;
		font-size: 15px;
		color: var(--text);
		display: flex;
	}

	.ui .content.reports-index table.table td::before{
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0;
		color: var(--muted);
		width: 65px;
	}

	.ui .content.reports-index table.table td:nth-child(1)::before{ content:"Zlec."; }
	.ui .content.reports-index table.table td:nth-child(2)::before{ content:"Data"; }
	.ui .content.reports-index table.table td:nth-child(3)::before{ content:"Klient"; }
	.ui .content.reports-index table.table td:nth-child(4)::before{ content:"Auto"; }
	.ui .content.reports-index table.table td:nth-child(5)::before{ content:"Roboc."; }
	.ui .content.reports-index table.table td:nth-child(6)::before{ content:"Części"; }
	.ui .content.reports-index table.table td:nth-child(7)::before{ content:"Razem"; }

	/* długie teksty (VIN w nawiasie, firma, itp.) */
	.ui .content.reports-index table.table td:nth-child(3),
	.ui .content.reports-index table.table td:nth-child(4){
		overflow-wrap: anywhere;
	}

	.ui .content.reports-index h2.small-head span,
	.ui .content.reports-index h2.small-head,
	.ui .content.reports-index .reports-selected-range .subtle {
		display: block;
		text-align: center;
	}

	.ui .btn-primary-table-size{
		font-size: 15px;
	}

	#entityNoteOverlay{
		z-index: 20000;
	}

	#entityNoteDrawer{
		z-index: 20001;
	}

	/* Nagłówek zawsze widoczny */
	.ui #entityNoteDrawer .notes-header{
		flex: 0 0 auto;
		position: relative;
		z-index: 9999;

		border-bottom: 1px solid var(--border);

		/* notch + trochę powietrza */
		padding-top: env(safe-area-inset-top);
	}

	/* Scroll tylko w środku */
	.ui #entityNoteDrawer .notes-container{
		flex: 1 1 auto;
		min-height: 0; /* krytyczne w flexie! */

		overflow-y: auto;
		-webkit-overflow-scrolling: touch;

		/* żeby dół nie wpadał pod home-indicator */
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
	}

	/* Stopka dodawania notatki: niech nie zabija miejsca */
	.ui #entityNoteDrawer .notes-add-container{
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
	}

	/* Overlay też na dvh */
	.ui #entityNoteOverlay{
		height: 100dvh;
	}
	@supports not (height: 100dvh){
		.ui #entityNoteOverlay{ height: 100vh; }
	}

	.ui #entityNoteInput{
		font-size: 16px;
	}
	.auth-page{
		min-height: 100px;
	}
	.auth-field input,
	.auth-field select,
	.auth-field textarea{
		font-size:16px !important;
	}
	@supports (-webkit-touch-callout: none){
		.auth-field input,
		.auth-field select,
		.auth-field textarea{
			font-size:16px !important;
		}
	}
	.ui .auth-page.brand-name{
		font-size: 24px;
	}
	.ui .auth-page .brand-name span{
		font-size: 14px;
	}
	.ui .btn{
		font-size: 17px;
		height: 50px;
		max-height: 50px;
	}
	.ui input[type="text"], .ui input[type="email"], .ui input[type="number"], .ui input[type="password"], .ui input[type="month"], .ui input[type="date"], .ui select, .ui textarea{
		height: 50px;
		border-radius: 25px;
		font-size: 16px;
	}
	.ui h2.small-head{
		font-size: 23px;
	}
	.ui .subtle{
		font-size: 15px;
	}
	.ui .button-table{
		height: 45px;
		font-size: 17px;
	}
	.ui .page-head h1{
		font-size: 28px;
	}
	.ui .badge{
		font-size: 15px;
	}
	.ui .cost-label {
		font-size: 15px;
	}
	.ui .cost-value {
		font-size: 19px;
	}
	.ui .job-desc{
		font-size: 16px;
	}
	.ui .btn-delete{
		padding-right: 36px;
	}
	.ui .reports-filers-form-left .btn {
		height: 50px;
	}
	.ui .job-user-comment .entity_note_link{
		height: 40px;
	}
	.ui .job-user-comment .entity_note_link span{
		font-size: 17px;
	}
	.ui .job-user-comment .comment-count{
		width: 30px;
		height: 30px;
		font-size: 17px;
	}
	.ui .job-summary,
	.ui .job-summary span{
		font-size: 16px;
	}
	.ui .job-notes-list-element-right .btn-delete{
		padding-right: 20px;
	}
	.ui .job-notes-list-element-date{
		font-size: 15px;
	}
	.ui .job-notes-list-element-title, .ui .job-notes-list-element-prices, .ui .job-notes-list-element-description{
		font-size: 17px;
	}
	.ui .job-notes-list-element-prices{
		flex-wrap: wrap;
	}
	.ui .job-notes-list-element-prices .notes-dot{
		display: none;
	}
	.ui .job-notes-list-element-prices .notes-element{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-right: 5px;
	}
	#modal_change_client #client_search{
		height: 50px;
	}
	#modal_change_client .client_list_table .client-row, #modal_change_car .car_list_table .car-row{
		font-size: 16px;
	}
	#modal_change_car .car-client-name,
	#modal_change_car .car-vin{
		font-size: 15px;
	}
	.ui .jobs-index .page-head h1 {
		display: flex;
		justify-content: space-between;
	}
	.ui label{
		font-size: 18px;
	}
	.ui .clients-datas-label,
	.ui .clients-datas-value{
		font-size: 15px;
	}
	.ui .car-mode-buttons{
		flex-wrap: wrap;
	}
	.ui #btn_mode_catalog{
		margin-bottom: 10px;
	}
	.ui #btn_mode_catalog,
	.ui #btn_mode_manual{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		margin-
	}
	.ui .car-details-tables-top-container .table-generation{
		min-width: 100%;
	}
	.ui .car-details-tables-top-container .table-variant{
		min-width: 100%;
	}
	.ui .car-details-tables-top-container .table-year{
		min-width: calc(50% - 10px);
	}
	.ui .car-details-tables-top-container .table-vin{
		min-width: calc(50% - 10px);
	}
	.ui .car-details-tables-top-container{
		justify-content: space-between;
	}
	.ui .car-details-tables-top-container .table{
		margin-right: 0;
	}
	.ui #addClientBox .new-client-invoice-data-container .form-row input{
		width: 100% !important;
	}

}

#az-consent{
	position: fixed;
	left: 15px;
	bottom: 15px;
	z-index: 9999;
	background: rgb(49 68 97 / 78%);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 14px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 30px;
	padding: 10px;
	display: none;
	font-family: inherit;
	max-width: calc(100% - 50px);
	line-height: 1em;
}

#az-consent .az-consent-container{
	display: flex;
	align-items: center;
}

#az-consent > span{
	position: absolute;
	color: #fff;
	font-size: 34px;
	left: 16px;
	opacity: 0.4;
	top: calc(50% - 17px);
}

#az-consent .az-consent-info{
	margin-left: 40px;
	color: #ffffffbf;
	font-family: 'Open Sans';
	font-size: 13px;
	font-weight: 400;
}

#az-consent .az-consent-link{
	color: #ffffffbf;
	text-decoration: underline;
}

#az-consent .az-consent-buttons{
	margin-left: 20px;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

#az-consent .az-consent-buttons button{
	border: none;
	border-radius: 30px;
	padding: 4px 15px 4px 10px;
	background: #fff;
	cursor: pointer;
	font-weight: 500;
	font-size: 13px;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	white-space: nowrap;
	height: 30px;
}

#az-consent .az-consent-buttons button#cookie-no{
	background: #a7b2c3;
}

.ui .auth-form .btn{
	height: 50px;
	margin-top: 15px;
}

.ui .register-abo-form{

}

.ui .register-abo-form-label{

}

.ui .register-abo-form-selection-container{
	background: #f6f8fc;
	padding: 5px;
	border-radius: 24px;
	border: 1px solid rgb(228 233 242);
}

.ui .register-abo-form-selection-element{
	margin: 10px 0;
}

.ui .register-abo-form-selection-element span{
	font-weight: 400;
}

.ui .register-abo-form-info{
	font-size: 13px;
	margin-top: 15px;
	opacity: 0.6;
}

@media (max-width: 720px){
	.ui .register-abo-form-selection-element span{
		font-size: 15px;
	}
}

.trial-info{
	margin-top: 24px;
	padding: 16px 18px;
	display: flex;
	gap: 12px;
	align-items: center;
	background: rgb(230 248 234);
	border: 1px dashed rgba(49, 68, 97, .25);
	border-radius: 14px;
	color: #314461;
	font-size: 15px;
}

.trial-info .material-symbols-outlined{
	font-size: 46px;
	line-height: 1;
	margin-top: 2px;
	opacity: 0.4;
	width: auto;
	color: #008e20;
}

.trial-info strong{
	font-weight: 600;
	font-size: 23px;
	font-family: "Google Sans Flex", sans-serif;
	display: block;
	margin-bottom: 5px;
}

@media (max-width:600px){
	.trial-info{
		flex-direction:row;
		align-items:flex-start;
		font-size: 14px;
	}
	.trial-info strong{
		font-size: 17px;
	}
	.trial-info .material-symbols-outlined{
		font-size: 34px;
		margin-top: 8px;
	}
}

.ui .page-profile-subscription-container{
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
	margin: 15px 0 15px 0;
	background: #eff2df;
	padding: 5px 5px;
	margin-left: -25px;
	margin-right: -25px;
	padding: 20px 25px 20px 25px;
	border: none;
	box-shadow: none;
}

.ui .page-profile-subscription-container .card{
	padding: 15px 0;
	font-size: 15px;
	display: flex;
}

.ui .page-profile-subscription-container .card > div{
	margin-bottom: 10px;
	margin-right: 30px;
}

.ui .page-profile-subscription-container .card .subscription-label{

}

.ui .page-profile-subscription-container .page-profile-subscription-container-second{
	
}

.ui .page-profile-subscription-container .page-profile-subscription-container-buttons{
	display: flex;
	gap: 10px;
}

@media (max-width: 720px){
	.ui .page-profile-subscription-container .card{
		flex-wrap: wrap;
	}
	.ui .page-profile-subscription-container .card > div{
		margin-right: 0;
		width: 100%;
	}
}

.flash.flash-error{
	background: #ff000036;
	border: 1px solid #b70000;
}

input:disabled,
select:disabled{
	background: #d0d8e7;
}

#discount-feedback{
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
}

/* ===========================================================
   Paginacja AutoZeszyt (resources/views/vendor/pagination/autozeszyt.blade.php)
   =========================================================== */
.az-pagination{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0;
	font-size: 14px;
	color: #4b5563;
}
.az-pagination-info{
	font-size: 13px;
	color: #6b7280;
}
.az-pagination-info strong{
	color: #1f2937;
	font-weight: 600;
}

.az-pagination-list{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.az-pagination .az-pg-item > a,
.az-pagination .az-pg-item > span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e5e7eb;
	color: #374151;
	text-decoration: none;
	font-weight: 500;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.az-pagination .az-pg-item > a:hover{
	background: #cbd5e1;
	color: #111827;
}
.az-pagination .az-pg-item.is-active > span{
	background: #fff;
	color: #314461;
	font-weight: 700;
	box-shadow: inset 0 0 0 2px #314461;
	cursor: default;
}
.az-pagination .az-pg-item.is-disabled > span{
	background: #f3f4f6;
	color: #cbd5e1;
	cursor: not-allowed;
}

/* Wewnętrzny span z ikoną Material Symbols – reset, żeby globalne reguły go nie psuły */
.az-pagination .az-pg-item .material-symbols-outlined{
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
	font-size: 20px;
	line-height: 1;
	font-weight: 400;
	color: inherit;
}

@media (max-width: 640px){
	.az-pagination{
		flex-direction: column;
		align-items: flex-start;
	}
	.az-pagination .az-pg-item > a,
	.az-pagination .az-pg-item > span{
		width: 34px;
		height: 34px;
		font-size: 13px;
	}
	/* Telefon: zostają strzałki i „bieżąca / ostatnia"; numery i wielokropki
	   nie mieszczą się w jednej linii nawet w oknie z jednym sąsiadem */
	.az-pagination .az-pg-num:not(.is-active),
	.az-pagination .az-pg-dots{ display: none; }
	.az-pagination .az-pg-num.is-active > span{ width: auto; min-width: 34px; padding: 0 14px; border-radius: 999px; }
	.az-pagination .az-pg-num.is-active > span::after{ content: "/ " attr(data-last); margin-left: 5px; font-weight: 500; opacity: 0.7; }
}

/* ===========================================================
   Sortowalne nagłówki tabel (komponent <x-sortable-th>)
   =========================================================== */
.sortable-th {
	cursor: pointer;
	user-select: none;
}
.sortable-th .sortable-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
}
.sortable-th .sortable-link:hover {
	color: #1f2937;
}
.sortable-th .sort-icon {
	font-size: 16px;
	line-height: 1;
}
.sortable-th .sort-icon.is-muted {
	color: #6b7280;
	opacity: 1;
}
.sortable-th .sortable-link:hover .sort-icon.is-muted {
	color: #314461;
}
.sortable-th.is-sorted .sort-icon {
	color: #314461;
	opacity: 1;
}
.sortable-th.is-sorted .sortable-link {
	color: #314461;
	font-weight: 700;
}

/* ===========================================================
   Przycisk z wersją w stopce sidebara
   =========================================================== */
.ui .sidebar-version {
	margin-top: auto;
	align-self: center;
	background: transparent;
	border: 1px solid rgba(229, 231, 235, 0.15);
	color: rgba(229, 231, 235, 0.55);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
	font-family: inherit;
}
.ui .sidebar-version:hover {
	color: #fff;
	border-color: rgba(229, 231, 235, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

/* Na mobile (gdy logout-mobile jest widoczny i ma margin-top:auto)
   zostawiamy małą przerwę między "Wyloguj" a numerem wersji. */
@media (max-width: 960px) {
	.ui .sidebar-version {
		margin-top: 12px;
	}
}

/* ===========================================================
   Modal changeloga
   =========================================================== */
.az-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.az-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 26, 45, 0.65);
	backdrop-filter: blur(2px);
}
.az-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
}
.az-modal-content {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow: hidden;
}
.az-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
.az-modal-title {
	margin: 0;
	font-family: 'Google Sans Flex', 'Open Sans', system-ui, -apple-system, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #1f2937;
	letter-spacing: 0.01em;
}
.az-modal-close {
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: background-color .15s ease, color .15s ease;
}
.az-modal-close:hover {
	background: #f3f4f6;
	color: #1f2937;
}
.az-modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.az-modal-footer {
	padding: 20px 20px 28px;
	border-top: 1px solid #e5e7eb;
	display: flex;
	justify-content: center;
	gap: 8px;
	background: #fafafa;
}

/* Główny przycisk CTA w modalu — pasujący do palety AutoZeszyt */
.az-modal-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 10px 24px !important;
	background: #314461 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: 'Google Sans Flex', 'Open Sans', system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(49, 68, 97, 0.18);
	transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.az-modal-cta:hover {
	background: #243349 !important;
	box-shadow: 0 4px 10px rgba(49, 68, 97, 0.25);
}
.az-modal-cta:active {
	transform: translateY(1px);
	box-shadow: 0 1px 3px rgba(49, 68, 97, 0.2);
}

/* Pojedynczy wpis wersji — oś czasu: szyna po lewej + kropka przy każdej wersji */
.az-changelog-entry {
	position: relative;
	padding: 0 0 28px 26px;
	border-left: 2px solid #e9edf4;
}
.az-changelog-entry:last-child {
	border-left-color: transparent;
	padding-bottom: 2px;
}
.az-changelog-entry::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #cbd5e1;
}
.az-changelog-entry-new::before {
	border-color: #314461;
	box-shadow: 0 0 0 4px rgba(49, 68, 97, 0.10);
}

.az-changelog-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.az-changelog-version {
	font-weight: 700;
	font-size: 14px;
	color: #475569;
	background: #eef2f7;
	padding: 3px 11px;
	border-radius: 999px;
}
.az-changelog-entry-new .az-changelog-version {
	color: #fff;
	background: #314461;
}
.az-changelog-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #0B9E6C;
	background: rgba(11, 158, 108, 0.10);
	border: 1px solid rgba(11, 158, 108, 0.22);
	padding: 3px 8px;
	border-radius: 6px;
}
.az-changelog-date {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 500;
	color: #94a3b8;
}

.az-changelog-body {
	color: #374151;
	font-family: 'Google Sans Flex', 'Open Sans', system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.65;
	letter-spacing: 0.01em;
}
.az-changelog-body p {
	margin: 0 0 10px;
}
.az-changelog-body p:last-child { margin-bottom: 0; }

/* Nagłówek sekcji — paragraf złożony z samego <strong> (tak renderuje markdown).
   Wersalikowa etykietka, ta sama maniera co nagłówki sekcji na stronie. */
.az-changelog-body p > strong:only-child {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #314461;
	margin: 20px 0 2px;
}
.az-changelog-body > p:first-child > strong:only-child { margin-top: 0; }
.az-changelog-body ul {
	margin: 4px 0 12px;
	padding-left: 20px;
	list-style: disc; /* przywracamy kropki – CSS reset na górze pliku je zdejmuje */
}
.az-changelog-body ul:last-child { margin-bottom: 0; }
.az-changelog-body li {
	margin: 7px 0;
	list-style: disc;
}
.az-changelog-body li::marker {
	color: #b6c0cf;
}
.az-changelog-body strong { color: #1f2937; font-weight: 600; }
.az-changelog-body code {
	background: #f3f4f6;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 13px;
	font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
	color: #be185d;
}
.az-changelog-body img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin: 8px 0;
	border: 1px solid #e5e7eb;
}
.az-changelog-body a {
	color: #314461;
	text-decoration: underline;
}

@media (max-width: 640px) {
	.az-modal { padding: 0; align-items: stretch; }
	.az-modal-dialog { max-width: none; max-height: 100vh; }
	.az-modal-content { border-radius: 0; }
}

/* =========================================================
   Abonament – wybór planu (checkout) + status płatności
   ========================================================= */
.ui .sub-checkout{
	display:flex;
	flex-direction:column;
	gap:18px;
	width:100%;
	max-width:560px;
}

.ui .sub-plans{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}

.ui .sub-plan{
	position:relative;
	display:flex;
	flex-direction:column;
	gap:2px;
	padding:18px 16px 16px;
	background:var(--surface);
	border:1.5px solid var(--border);
	border-radius:16px;
	cursor:pointer;
	transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.ui .sub-plan input{
	position:absolute;
	opacity:0;
	pointer-events:none;
}
.ui .sub-plan:hover{
	transform:translateY(-2px);
	border-color:rgba(61,79,110,.30);
	box-shadow:0 14px 28px rgba(15,23,42,.10);
}
.ui .sub-plan:has(input:checked){
	border-color:var(--primary);
	background:linear-gradient(180deg,#ffffff,#f3f6ff);
	box-shadow:0 0 0 3px rgba(49,68,97,.12), 0 14px 28px rgba(15,23,42,.10);
}

.ui .sub-plan__check{
	position:absolute;
	top:16px;
	right:16px;
	width:20px;
	height:20px;
	border-radius:50%;
	border:2px solid rgba(61,79,110,.35);
	background:var(--surface);
	transition:border-color .16s ease, background .16s ease;
}
.ui .sub-plan:has(input:checked) .sub-plan__check{
	border-color:var(--primary);
	background:var(--primary);
}
.ui .sub-plan:has(input:checked) .sub-plan__check::after{
	content:"";
	position:absolute;
	left:5px;
	top:2px;
	width:5px;
	height:9px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}

.ui .sub-plan__name{
	font-size:16px;
	font-weight:700;
	color:var(--text);
}
.ui .sub-plan__cycle{
	font-size:12px;
	color:var(--muted);
}
.ui .sub-plan__price{
	display:flex;
	align-items:baseline;
	gap:6px;
	margin-top:10px;
}
.ui .sub-plan__net{
	font-size:28px;
	font-weight:800;
	letter-spacing:-.6px;
	color:var(--primary);
	line-height:1;
}
.ui .sub-plan__unit{
	font-size:12px;
	color:var(--muted);
}
.ui .sub-plan__gross{
	font-size:12px;
	color:var(--muted);
	margin-top:4px;
}

.ui .sub-plan__badge{
	position:absolute;
	top:-11px;
	left:16px;
	background:var(--primary);
	color:#fff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.2px;
	padding:4px 10px;
	border-radius:999px;
	box-shadow:0 6px 14px rgba(49,68,97,.30);
}

/* Pole kodu rabatowego */
.ui .sub-promo{
	display:flex;
	flex-direction:column;
	gap:7px;
}
.ui .sub-promo__label{
	font-size:13px;
	font-weight:600;
	color:var(--text);
}
.ui .sub-promo__input{
	width:100%;
	padding:13px 15px;
	border:1.5px solid var(--border);
	border-radius:12px;
	background:var(--surface);
	font-size:14px;
	font-weight:600;
	letter-spacing:.4px;
	color:var(--text);
	transition:border-color .16s ease, box-shadow .16s ease;
}
.ui .sub-promo__input:focus{
	outline:none;
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(49,68,97,.12);
}
.ui .sub-promo__input::placeholder{
	color:#9aa6b8;
	font-weight:500;
	letter-spacing:normal;
}

/* Przycisk płatności */
.ui .sub-pay{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	height:52px;
	border:none;
	border-radius:14px;
	cursor:pointer;
	background:linear-gradient(180deg,#3d4f6e,#314461);
	color:#fff;
	font-size:15px;
	font-weight:700;
	font-family:inherit;
	box-shadow:0 10px 24px rgba(49,68,97,.28);
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ui .sub-pay:hover{
	transform:translateY(-2px);
	background:linear-gradient(180deg,#34456e,#1b2740);
	box-shadow:0 14px 30px rgba(49,68,97,.34);
	color:#fff;
}
.ui .sub-pay svg{
	width:18px;
	height:18px;
	transition:transform .16s ease;
}
.ui .sub-pay:hover svg{
	transform:translateX(3px);
}
.ui .sub-pay--inline{
	width:auto;
	padding:0 22px;
	text-decoration:none;
}

/* Metody płatności */
.ui .sub-methods{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	font-size:12px;
	color:var(--muted);
}
.ui .sub-method{
	padding:4px 10px;
	border-radius:999px;
	background:rgba(49,68,97,.07);
	border:1px solid var(--border);
	font-weight:600;
	color:var(--text);
}

/* Strona statusu płatności */
.ui .sub-result{
	max-width:480px;
	margin:40px auto;
	padding:34px 28px;
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:20px;
	box-shadow:var(--shadow);
	text-align:center;
}
.ui .sub-result__icon{
	width:72px;
	height:72px;
	margin:0 auto 18px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
}
.ui .sub-result__icon .material-symbols-outlined{
	font-size:40px;
}
.ui .sub-result--ok .sub-result__icon{
	background:rgba(34,197,94,.12);
	color:#16a34a;
}
.ui .sub-result--wait .sub-result__icon{
	background:rgba(234,179,8,.14);
	color:#b8860b;
}
.ui .sub-result--error .sub-result__icon{
	background:rgba(239,68,68,.12);
	color:#dc2626;
}
.ui .sub-result__title{
	font-size:21px;
	font-weight:800;
	color:var(--text);
	margin-bottom:8px;
}
.ui .sub-result__text{
	font-size:14px;
	line-height:1.6;
	color:var(--muted);
	margin-bottom:22px;
}
.ui .sub-result__summary{
	text-align:left;
	background:#f6f8fc;
	border:1px solid var(--border);
	border-radius:14px;
	padding:14px 16px;
	margin-bottom:22px;
}
.ui .sub-result__summary > div{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:6px 0;
	font-size:14px;
	color:var(--text);
}
.ui .sub-result__summary > div span{
	color:var(--muted);
}
.ui .sub-result__total{
	margin-top:4px;
	padding-top:12px !important;
	border-top:1px solid var(--border);
}
.ui .sub-result__total strong{
	color:var(--primary);
	font-size:16px;
}
.ui .sub-result__link{
	display:inline-block;
	color:var(--primary);
	font-weight:600;
	font-size:14px;
	text-decoration:underline;
}

@media (max-width:560px){
	.ui .sub-plans{
		grid-template-columns:1fr;
	}
	.ui .sub-plan--featured{
		order:-1;
	}
}

/* === Akceptacje prawne przy rejestracji konta ============================ */
.auth-consents{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0;
}
.auth-consents .consent-row{
	display:flex;
	gap:10px;
	align-items:flex-start;
	font-size:13px;
	line-height:1.5;
	cursor:pointer;
	margin:0;
}
.auth-consents .consent-row input[type="checkbox"]{
	margin:3px 0 0 0;
	flex-shrink:0;
	width:16px;
	height:16px;
	cursor:pointer;
	accent-color:#314461;
}
.auth-consents .consent-row a{
	text-decoration:underline;
	color:inherit;
}
.auth-consents .consent-row a:hover{
	color:#314461;
}
.auth-consents .consent-error{
	color:#b00020;
	font-size:13px;
	margin:0 0 0 26px;
}

/* Wycentrowany submit w formularzu auth (rejestracja, logowanie) */
.auth-form .auth-submit{
	justify-content:center;
}

/* Logo + nazwa marki w layoutach auth jako link do strony głównej */
.auth-card a.brand,
.auth-card a.brand:hover,
.auth-card a.brand:visited{
	color:inherit;
	text-decoration:none;
	cursor:pointer;
}
.auth-card a.brand *{
	cursor:pointer;
}

/* ============================================================
   RODO — eksport danych + "zapomnij klienta"
   ============================================================ */

/* czerwony wariant przycisku tabelowego (operacje nieodwracalne) */
.ui .button-table-danger{
	background: #fdecec;
	border-color: #f3c2c2;
	color: #a33030;
}
.ui .button-table-danger:hover{
	background: #f9dcdc;
}

/* formularz "zapomnij klienta" — nie psuje układu przycisków w job-top-right */
.ui .gdpr-forget-form{
	display: inline-flex;
	margin: 0;
}

/* przyciski w nagłówku karty klienta: równe odstępy także przy zawijaniu */
.ui .clients-datas-table .job-top-right{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

/* baner na karcie zanonimizowanego klienta */
.ui .gdpr-anonymized-banner{
	background: #fff7e6;
	border: 1px solid #f0dcb0;
	color: #7a5b14;
	border-radius: 8px;
	padding: 12px 15px;
	margin: 15px 0;
	font-size: 14px;
}

/* sekcja "Twoje dane (RODO)" w profilu */
.ui .gdpr-export-info{
	margin: 10px 0;
	font-size: 13px;
}
.ui .gdpr-export-actions{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 700px){
	/* mobil: przyciski jeden pod drugim, na pełną szerokość, z odstępem */
	.ui .clients-datas-table .job-top-right{
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.ui .clients-datas-table .job-top-right .gdpr-forget-form,
	.ui .clients-datas-table .job-top-right .gdpr-forget-form .button-table{
		width: 100%;
		justify-content: center;
	}
}

/* notka pod tabelą zgód (/profile/consents) */
.ui .gdpr-consents-note{
	margin-top: 15px;
	font-size: 13px;
}

/* baner akceptacji dokumentów prawnych (dół ekranu) */
.ui .az-docbar{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px 20px;
	background: #1a2b46;
	color: #e8edf5;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 -4px 16px rgba(0,0,0,.18);
}
.ui .az-docbar a{
	color: #9fc3ee;
	text-decoration: underline;
}
.ui .az-docbar-text{
	max-width: 720px;
}
.ui .az-docbar-actions{
	display: flex;
	align-items: center;
	gap: 12px;
}
.ui .az-docbar-actions form{
	margin: 0;
}
.ui .az-docbar-later{
	background: none;
	border: none;
	color: #b9c4d6;
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
	padding: 6px 8px;
}
.ui .az-docbar-later:hover{
	color: #fff;
}

@media (max-width: 700px){
	.ui .az-docbar{
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.ui .az-docbar-actions{
		justify-content: center;
	}
}

/* karta brakujących zgód na /profile/consents */
.ui .gdpr-missing-consents{
	margin-bottom: 20px;
}
.ui .gdpr-missing-consents ul{
	margin: 10px 0 15px;
	padding-left: 22px;
}
.ui .gdpr-missing-consents form{
	margin: 0;
}

/* Select pelnej szerokosci w formularzach panelu (profil: rodzaj dzialalnosci) */
.az-select-full{
	width:100%;
}

/* === Zdjecia zlecenia === */
.az-photos-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
	gap:12px;
}
.az-photo{
	position:relative;
	border-radius:12px;
	overflow:hidden;
	background:#f1f3f7;
	aspect-ratio:4/3;
}
.az-photo img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.az-photo-tag{
	position:absolute;
	left:8px;
	top:8px;
	padding:2px 8px;
	border-radius:8px;
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
	color:#fff;
	background:#64748b;
}
.az-photo-tag-before{ background:#b45309; }
.az-photo-tag-after{ background:#15803d; }
.az-photo-delete{
	position:absolute;
	right:6px;
	top:6px;
	margin:0;
}
.az-photo-delete-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border:none;
	border-radius:8px;
	background:rgba(15,23,42,.55);
	color:#fff;
	cursor:pointer;
}
.az-photo-delete-btn .material-symbols-outlined{ font-size:16px; }
.az-photo-delete-btn:hover{ background:rgba(185,28,28,.85); }
.az-photos-upload-row{
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
}
.az-photos-tag-select{ width:auto; }
.az-photos-hint{ margin-top:8px; }

/* === Etap zlecenia + link dla klienta === */
.az-substatus-card{
	margin-top: 15px;
}
.az-substatus-row,
.az-share-row{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.az-share-row{
	margin-top:16px;
	padding-top:16px;
	border-top:1px solid #eef1f6;
}
.az-substatus-chips{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}
.az-substatus-chips form{ margin:0; }
.az-chip{
	border:1px solid #dfe3ea;
	background:#fff;
	color:#475569;
	border-radius:999px;
	padding:7px 14px;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
}
.az-chip:hover:not(:disabled){ border-color:#b8c7ff; }
.az-chip:disabled{ opacity:.5; cursor:default; }
.az-chip.is-active{ color:#fff; border-color:transparent; }
.az-chip-accepted.is-active{ background:#64748b; }
.az-chip-in_progress.is-active{ background:#2563eb; }
.az-chip-waiting.is-active{ background:#b45309; }
.az-chip-ready.is-active{ background:#15803d; }

.az-share-controls{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	align-items:center;
}
.az-share-controls input[type=text]{
	flex:1;
	min-width:220px;
	border:1px solid #dfe3ea;
	border-radius:10px;
	padding:8px 10px;
	font-size:13px;
	color:#475569;
	background:#f8fafc;
}
.az-share-controls form{ margin:0; }

.badge.az-badge-sub{ color:#fff; }
.az-badge-accepted{ background:#64748b; }
.az-badge-in_progress{ background:#2563eb; }
.az-badge-waiting{ background:#b45309; }
.az-badge-ready{ background:#15803d; }

/* === Uklad strony zlecenia: tresc + kolumna sterowania === */
.ui .az-job-layout{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	grid-template-areas:
		"parties side"
		"main side";
	gap: 0 20px;
	align-items: start;
}
.ui .az-job-parties{
	grid-area: parties;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ui .az-job-main{
	grid-area: main;
	min-width: 0;
}
.ui .az-job-side{
	grid-area: side;
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Etapy w kolumnie: pionowy stepper */
.ui .az-job-side .az-substatus-chips{
	flex-direction: column;
	gap: 6px;
}
.ui .az-job-side .az-substatus-chips form{
	width: 100%;
}
.ui .az-job-side .az-chip{
	width: 100%;
	text-align: left;
	padding: 10px 14px;
}

/* Karta linku: bez odziedziczonej gornej kreski (kiedys wspolna karta z etapami) */
.ui .az-share-card .az-share-row{
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Link dla klienta: elementy pod soba */
.ui .az-job-side .az-share-controls input[type=text]{
	min-width: 0;
	width: 100%;
	flex: 1 1 100%;
}

@media (max-width: 1150px){
	.ui .az-job-layout{
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"parties"
			"side"
			"main";
	}
	.ui .az-job-side{
		position: static;
		margin-bottom: 15px;
	}
}
@media (max-width: 700px){
	.ui .az-job-parties{
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   SKALA INTERFEJSU NA DESKTOPIE (04.08) — TYLKO ekrany logowania
   i rejestracji (layouts/auth NIE ładuje redesign.css, gdzie mieszka
   bliźniacza warstwa dla aplikacji). Klasę rd-zoom-90/120 na <html>
   ustawia skrypt w <head> layoutu auth z localStorage 'az_zoom' —
   ta sama preferencja co w aplikacji, wartości muszą być zgodne
   z redesign.css. ZAKRES: selektory zakotwiczone w body.auth-body,
   bo ten arkusz ładuje też landing (public_html/index.html), blog
   i archiwum dokumentów prawnych, których nie skalujemy.
   Jednostki okna nie skalują się razem z zoom — stąd dzielenie.
   ============================================================ */
@media (min-width: 1181px){
	html.rd-zoom-90 body.auth-body{ --rd-zoom: 0.9; }
	html.rd-zoom-120 body.auth-body{ --rd-zoom: 1.2; }
	body.auth-body{ zoom: var(--rd-zoom, 1); }
	body.auth-body.ui{ min-height: calc(100dvh / var(--rd-zoom, 1)); }
	body.auth-body .auth-page{ min-height: calc(100dvh / var(--rd-zoom, 1) - 70px); }
}