:root{
	--red:#b71c1c;
	--red-dark:#7f0000;
	--blue:#263238;
	--bg:#f3f5f7;
	--card:#fff;
	--text:#172126;
	--muted:#607078;
	--border:#d7dee2;
	--success:#1b5e20;
	--warning:#8a4b00;
	--danger:#a51414;
	--shadow:0 2px 12px rgba(0,0,0,.09);
	font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--text)
}
*{
	box-sizing:border-box
}
body{
	margin:0;
	background:var(--bg);
	line-height:1.45
}
a{
	color:inherit
}
.topbar,.admin-header{
	background:var(--red);
	color:#fff;
	padding:14px max(16px,env(safe-area-inset-left));
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	position:sticky;
	top:0;
	z-index:20;
	box-shadow:var(--shadow)
}
.admin-header{
	background:var(--blue);
	position:static;
	flex-wrap:wrap
}
.brand{
	font-weight:800;
	text-decoration:none;
	font-size:1.1rem
}
.vehicle-badge{
	font-weight:700;
	text-align:right
}
.admin-header nav{
	display:flex;
	gap:8px;
	flex-wrap:wrap
}
.admin-header nav a{
	text-decoration:none;
	padding:7px 9px;
	border-radius:6px
}
.admin-header nav a:hover{
	background:rgba(255,255,255,.14)
}
.container{
	width:min(1100px,100%);
	margin:auto;
	padding:16px
}
.admin-container{
	width:min(1500px,100%);
	margin:auto;
	padding:20px
}
.card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
	padding:18px;
	margin-bottom:16px;
	box-shadow:var(--shadow)
}
.narrow-card{
	max-width:640px;
	margin:30px auto
}
h1,h2{
	line-height:1.2;
	margin-top:0
}
h1{
	font-size:clamp(1.5rem,4vw,2.1rem)
}
h2{
	font-size:1.2rem
}
.section-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap
}
.summary-grid,.metric-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
	gap:10px
}
.summary-grid>div,.metric{
	background:#f7f9fa;
	border:1px solid var(--border);
	padding:12px;
	border-radius:9px
}
.summary-grid span,.metric span{
	display:block;
	color:var(--muted);
	font-size:.85rem
}
.summary-grid strong,.metric strong{
	font-size:1.08rem
}
.metric strong{
	font-size:2rem
}
.metric-alert{
	border-color:#ef9a9a;
	background:#fff1f1
}
.info-box{
	background:#fff8e1;
	border-left:5px solid #f9a825;
	padding:12px;
	border-radius:5px
}
.stack-form,.trip-form{
	display:grid;
	gap:15px
}
.form-grid,.filter-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:14px
}
.filter-grid{
	grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	align-items:end
}
.compact-form{
	align-items:end
}
.form-action{
	display:flex;
	align-items:end
}
label{
	font-weight:700;
	display:grid;
	gap:6px
}
small{
	color:var(--muted);
	font-weight:400
}
input,select,textarea,button{
	font:inherit
}
input,select,textarea{
	width:100%;
	border:2px solid #b7c2c8;
	border-radius:8px;
	padding:12px;
	background:#fff;
	color:var(--text)
}
input:focus,select:focus,textarea:focus{
	outline:3px solid rgba(183,28,28,.18);
	border-color:var(--red)
}
input[readonly]{
	background:#edf1f3;
	color:#455a64
}
.tablet-body input,.tablet-body select{
	font-size:1.7rem;
	min-height:45px;
	padding:4px 8px;
	line-height:1.25
}
.tablet-body textarea{
	font-size:1.5rem;
	padding:5px 6px;
	line-height:1.4
}
.checkbox{
	display:flex;
	grid-template-columns:auto 1fr;
	align-items:center
}
.checkbox input{
	width:22px;
	height:22px
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	border:0;
	border-radius:8px;
	padding:11px 15px;
	text-decoration:none;
	font-weight:800;
	cursor:pointer;
	background:#e3e8eb;
	color:#172126
}
.btn:hover{
	filter:brightness(.96)
}
.btn-primary{
	background:var(--red);
	color:#fff
}
.btn-secondary{
	background:#455a64;
	color:#fff
}
.btn-danger{
	background:var(--danger);
	color:#fff
}
.btn-large{
	font-size:1.15rem;
	min-height:58px;
	width:100%
}
.btn-small{
	font-size:.85rem;
	padding:7px 10px
}
.button-row,.inline-form{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin-top:15px
}
.inline-form>*{
	flex:1 1 180px
}
.alert{
	border-radius:9px;
	padding:13px 15px;
	margin-bottom:14px;
	border:1px solid
}
.alert-success{
	background:#e8f5e9;
	border-color:#81c784;
	color:#174b1a
}
.alert-error{
	background:#ffebee;
	border-color:#e57373;
	color:#7f0000
}
.alert-warning{
	background:#fff8e1;
	border-color:#ffca28;
	color:#6d4300
}
.status{
	display:inline-block;
	border-radius:999px;
	padding:3px 8px;
	font-weight:800;
	font-size:.8rem;
	background:#e7ecef
}
.status.ok{
	background:#dff3e1;
	color:#16591b
}
.status.corrected{
	background:#fff0c7;
	color:#754600
}
.status.cancelled{
	background:#ffdfe2;
	color:#8f111a
}
.table-wrap{
	overflow:auto;
	-webkit-overflow-scrolling:touch
}
table{
	width:100%;
	border-collapse:collapse;
	min-width:760px
}
th,td{
	text-align:left;
	vertical-align:top;
	padding:10px;
	border-bottom:1px solid var(--border)
}
th{
	background:#edf1f3;
	position:sticky;
	top:0
}
tr.cancelled-row{
	opacity:.62;
	text-decoration:line-through
}
pre{
	max-width:390px;
	white-space:pre-wrap;
	font-size:.75rem
}
.big-code{
	font-size:1.4rem;
	letter-spacing:.08em
}
.footer{
	text-align:center;
	padding:20px;
	color:var(--muted);
	font-size:.85rem
}
.footer a{
	color:var(--muted)
}
hr{
	border:0;
	border-top:1px solid var(--border);
	margin:22px 0
}
code{
	word-break:break-all
}
 .vehicle-controls{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	min-width:0
}
.vehicle-badge{
	display:grid;
	gap:1px;
	text-align:right;
	min-width:0
}
.vehicle-badge strong{
	font-size:.98rem;
	white-space:nowrap
}
.vehicle-badge small{
	color:rgba(255,255,255,.82)
}
.foreign-marker{
	font-size:.75rem;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:#fff3bf
}
.vehicle-action-row{
	display:flex;
	align-items:center;
	gap:7px;
	flex-wrap:nowrap;
	justify-content:flex-end
}
.btn-topbar{
	background:rgba(255,255,255,.16);
	color:#fff;
	border:1px solid rgba(255,255,255,.38);
	font-size:.78rem;
	padding:7px 10px;
	white-space:nowrap
}
.vehicle-switch-short{
	display:none
}
.foreign-vehicle-alert{
	border-width:2px;
	display:flex;
	align-items:flex-start;
	gap:9px
}
.foreign-alert-icon{
	flex:0 0 auto;
	font-size:1.15rem;
	line-height:1.35
}
.foreign-alert-text{
	min-width:0
}
.vehicle-dialog{
	width:min(620px,calc(100% - 24px));
	border:0;
	border-radius:14px;
	padding:18px;
	box-shadow:0 12px 50px rgba(0,0,0,.28)
}
.vehicle-dialog::backdrop{
	background:rgba(0,0,0,.46)
}
.vehicle-choice-list{
	display:grid;
	gap:10px
}
.vehicle-choice{
	display:grid;
	grid-template-columns:1fr auto;
	gap:2px 12px;
	text-decoration:none;
	border:2px solid var(--border);
	border-radius:10px;
	padding:13px 15px;
	background:#fff
}
.vehicle-choice:hover,.vehicle-choice.selected{
	border-color:var(--red);
	background:#fff7f7
}
.vehicle-choice strong{
	font-size:1.08rem
}
.vehicle-choice span{
	text-align:right
}
.vehicle-choice small{
	grid-column:1/-1
}
.field-label-row{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px
}
.distance-preview{
	font-size:.82rem;
	white-space:nowrap;
	color:var(--muted)
}
.distance-preview.distance-warning{
	color:var(--danger);
	font-weight:800
}
.form-grid-span{
	grid-column:1/-1
}
.driver-suggestions{
	display:flex;
	align-items:center;
	gap:9px;
	flex-wrap:wrap;
	margin:-2px 0 2px
}
.driver-suggestions-label{
	font-size:.82rem;
	color:var(--muted);
	font-weight:700
}
.driver-chip-row{
	display:flex;
	gap:7px;
	flex-wrap:wrap
}
.driver-chip{
	display:inline-flex;
	align-items:center;
	min-height:38px;
	padding:7px 11px;
	border:1px solid #aab7bd;
	border-radius:999px;
	background:#f6f8f9;
	color:var(--text);
	font-weight:700;
	font-size:.92rem;
	cursor:pointer;
	user-select:none
}
.driver-chip:hover,.driver-chip:focus{
	border-color:var(--red);
	outline:2px solid rgba(183,28,28,.15);
	background:#fff
}
.driver-chip.selected,.driver-chip[aria-pressed="true"]{
	border-color:var(--red);
	background:#ffebee;
	color:var(--red-dark);
	box-shadow:inset 0 0 0 1px var(--red)
}
.driver-chip:active{
	transform:translateY(1px)
}
 .foreign-vehicle-mode a[href="/index.php?action=edit_last"]{
	display:none!important
}

.trip-form-heading{
	flex-wrap:nowrap
}
.trip-form-heading h1{
	margin-bottom:0
}
.trip-refresh-button{
	flex:0 0 auto;
	min-width:42px;
	height:42px;
	padding:4px 10px;
	font-size:1.35rem;
	line-height:1
}
.recent-trip-suggestion{
	margin:-5px 2px 10px;
	min-height:24px
}
.recent-trip-copy-link{
	border:0;
	background:transparent;
	padding:3px 2px;
	color:var(--red-dark);
	font:inherit;
	font-size:.9rem;
	font-weight:700;
	text-decoration:underline;
	text-underline-offset:2px;
	cursor:pointer
}
.recent-trip-copy-link:hover,.recent-trip-copy-link:focus{
	color:var(--red);
	outline:none;
	text-decoration-thickness:2px
}
 @media(max-width:700px){
	.form-grid{
		grid-template-columns:1fr
	}
	.form-grid-span{
		grid-column:1
	}
	.container{
		padding:10px
	}
	.card{
		padding:14px;
		border-radius:9px
	}
	.topbar{
		gap:8px;
		flex-wrap:nowrap
	}
	.brand{
		font-size:1rem
	}
	.vehicle-controls{
		width:auto;
		min-width:0;
		gap:7px
	}
	.vehicle-badge{
		text-align:right
	}
	.vehicle-badge strong{
		font-size:.9rem;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:42vw
	}
	.vehicle-badge small,.foreign-marker{
		font-size:.68rem
	}
	.vehicle-action-row{
		flex:0 0 auto
	}
	.vehicle-switch-long{
		display:none
	}
	.vehicle-switch-short{
		display:inline
	}
	.vehicle-home-link{
		display:none
	}
	.btn-topbar{
		padding:7px 9px
	}
	.foreign-vehicle-alert{
		padding:8px 10px;
		gap:7px;
		font-size:.86rem;
		line-height:1.35
	}
	.foreign-alert-title{
		display:none
	}
	.foreign-alert-icon{
		font-size:1rem
	}
	.button-row .btn{
		flex:1 1 100%
	}
	.admin-container{
		padding:10px
	}
	.admin-header nav{
		width:100%;
		overflow:auto;
		flex-wrap:nowrap
	}
	.admin-header nav a{
		white-space:nowrap
	}
	.tablet-body table{
		min-width:900px
	}
	.vehicle-choice{
		grid-template-columns:1fr
	}
	.vehicle-choice span{
		text-align:left
	}
	.driver-suggestions{
		align-items:flex-start
	}
	.driver-chip{
		min-height:42px;
		padding:8px 12px
	}
}
 @media print{
	.admin-header,.topbar,.footer,.btn,.filter-card,.vehicle-dialog,.driver-suggestions,.recent-trip-suggestion,.trip-refresh-button{
		display:none!important
	}
	.card{
		box-shadow:none;
		border:0
	}
	.admin-container,.container{
		width:100%;
		padding:0
	}
	table{
		min-width:0
	}
}
 
/* Smartphone portrait: keep large touch fields inside the card width. */
@media (max-width:700px) and (orientation:portrait){
	.trip-form,
	.trip-form .form-grid,
	.trip-form .form-grid > *,
	.trip-form > label{
		min-width:0;
		max-width:100%;
	}
	.trip-form .form-grid{
		grid-template-columns:minmax(0,1fr);
	}
	.tablet-body .trip-form input,
	.tablet-body .trip-form select,
	.tablet-body .trip-form textarea{
		width:100%;
		min-width:0;
		max-width:100%;
	}
}