:root{
	/* KZ Logistics — palette inspirée du logo */
	--background:#081827;
	--navy:#081827;
	--navy-2:#0b1d2c;
	--navy-3:#102536;
	--gold:#ffc400;
	--gold-light:#ffd34d;
	--gold-soft:rgba(255,196,0,.10);
	--surface:#102536;
	--accent:#ffc400;
	--text:#f7f9fb;
	--muted:#9aabba;
	--border:#294052;
	--green:#79dfb2;
	--yellow:#ffd34d;
	--red:#ff8f9f;
	font-family:Segoe UI,Arial,sans-serif;
	color:var(--text);
	background:var(--background);
	font-synthesis:none
}
*{
	box-sizing:border-box
}
body{
	margin:0
}
button,input,select,textarea{
	font:inherit
}
button,a,input,select,textarea{
	outline-offset:4px
}
button:focus-visible,a:focus-visible{
	outline:2px solid var(--accent)
}
button{
	cursor:pointer;
	border:1px solid var(--border);
	background:transparent;
	color:var(--text);
	padding:11px 17px;
	border-radius:7px;
	transition:background .15s,transform .15s
}
button:hover{
	background:#173247
}
button:active{
	transform:translateY(1px)
}
button.primary{
	background:var(--accent);
	color:#081827;
	border-color:var(--accent);
	font-weight:800;
	clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
	border-radius:0
}
button.primary:hover{
	filter:brightness(1.12)
}
button.small{
	padding:6px 10px;
	font-size:12px
}
button.danger{
	border-color:#8f465d;
	color:#ffb7c3
}
button:disabled{
	opacity:.45;
	cursor:not-allowed
}
a{
	color:var(--text)
}
h1,h2,h3,p{
	margin-top:0
}
h1,h2,h3{
	letter-spacing:-.035em
}
h1{
	font-size:36px;
	font-weight:850;
	line-height:1.12;
	margin-bottom:9px
}
h2{
	font-size:23px;
	font-weight:800
}
h3{
	font-size:17px
}
p{
	line-height:1.6;
	color:var(--muted)
}
.muted{
	color:var(--muted)
}
.micro{
	font-size:11px;
	letter-spacing:.13em;
	text-transform:uppercase;
	font-weight:700
}
.accent{
	color:#ffd34d
}
.row{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap
}
.between{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px
}
.stack{
	display:grid;
	gap:18px
}
.columns{
	display:grid;
	grid-template-columns:1.25fr 1fr;
	gap:20px
}
.grid3{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px
}
.grid2{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:16px
}
.panel{
	background:var(--surface);
	border:1px solid var(--border);
	border-radius:12px;
	padding:24px;
	min-width:0
}
.panel p:last-child{
	margin-bottom:0
}
.label{
	font-size:12px;
	color:var(--muted);
	font-weight:600
}
.pill{
	display:inline-flex;
	gap:6px;
	align-items:center;
	font-size:11px;
	padding:5px 9px;
	border:1px solid var(--border);
	border-radius:4px;
	background:#102536;
	white-space:nowrap
}
.pill.good{
	color:var(--green);
	border-color:#376d57
}
.pill.wait{
	color:var(--yellow);
	border-color:#806c24
}
.pill.bad{
	color:#ffb7c3;
	border-color:#874155
}
.pill.magenta{
	color:var(--gold-light);
	border-color:#806c24
}
.empty{
	padding:38px 18px;
	text-align:center;
	color:var(--muted);
	border:1px dashed var(--border);
	border-radius:9px
}
.empty strong{
	display:block;
	color:var(--text);
	font-size:17px;
	margin-bottom:9px
}
.notice{
	padding:14px 17px;
	border:1px solid #806c24;
	background:#242717;
	border-radius:8px;
	color:var(--yellow);
	font-size:13px;
	line-height:1.5
}
.note{
	font-size:12px;
	color:var(--muted);
	line-height:1.6;
	margin:12px 0 0
}
.boot{
	padding:70px;
	color:var(--muted)
}
.shell{
	display:grid;
	grid-template-columns:238px minmax(0,1fr);
	min-height:100vh
}
.sidebar{
	padding:32px 18px 20px;
	border-right:1px solid var(--border);
	background:#151218;
	position:sticky;
	top:0;
	height:100vh;
	display:flex;
	flex-direction:column
}
.brand{
	display:flex;
	gap:11px;
	align-items:center;
	margin:0 10px 32px
}
.brand img{
	width:38px;
	height:38px
}
.brand b{
	font-size:21px;
	letter-spacing:-.04em
}
.brand small{
	display:block;
	color:var(--muted);
	font-size:10px;
	letter-spacing:.09em;
	margin-top:3px
}
.navgroup{
	color:#71879a;
	font-size:10px;
	letter-spacing:.17em;
	padding:15px 14px 9px;
	font-weight:700
}
.nav{
	display:flex;
	align-items:center;
	gap:13px;
	width:100%;
	border:0;
	padding:12px 14px;
	margin:3px 0;
	text-align:left;
	color:var(--muted);
	font-size:13px
}
.nav svg{
	width:19px;
	height:19px;
	flex-shrink:0
}
.nav.active{
	background:#183247;
	color:#ff8bce;
	border-left:3px solid var(--accent);
	border-radius:4px
}
.nav .count{
	margin-left:auto;
	background:var(--accent);
	color:#081827;
	border-radius:3px;
	font-size:10px;
	min-width:18px;
	text-align:center;
	padding:2px 5px;
	font-weight:800
}
.sidebar-bottom{
	margin-top:auto;
	padding-top:25px
}
.userblock{
	border-top:1px solid var(--border);
	padding:18px 9px 0;
	display:flex;
	gap:10px;
	align-items:center
}
.avatar{
	width:38px;
	height:38px;
	background:#183247;
	color:#ff8bce;
	border:1px solid #806c24;
	display:grid;
	place-items:center;
	border-radius:7px;
	flex-shrink:0;
	font-weight:800
}
.userblock b{
	font-size:12px
}
.userblock small{
	display:block;
	color:var(--muted);
	font-size:10px;
	margin-top:4px
}
.main{
	min-width:0
}
.topbar{
	height:76px;
	border-bottom:1px solid var(--border);
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 38px;
	gap:15px
}
.topbar .breadcrumb{
	color:var(--muted);
	font-size:12px
}
.topbar b{
	color:var(--text);
	font-weight:600
}
.content{
	padding:35px 38px 55px;
	max-width:1680px;
	margin:auto
}
.pagehead{
	margin-bottom:28px
}
.pagehead p{
	margin:0;
	font-size:13px
}
.eyebrow{
	font-size:10px;
	font-weight:800;
	letter-spacing:.19em;
	color:#ff8bce;
	margin-bottom:12px
}
.hero{
	position:relative;
	overflow:hidden;
	background:linear-gradient(112deg,#173247 0%,#102536 58%,#102536 100%);
	padding:30px;
	border:1px solid #806c24;
	border-radius:12px;
	min-height:176px
}
.hero h2{
	font-size:29px;
	max-width:75%;
	margin-bottom:8px
}
.hero p{
	max-width:65%;
	font-size:13px
}
.hero:after{
	content:'';
	position:absolute;
	right:32px;
	top:-70px;
	width:140px;
	height:330px;
	border:1px solid #ffc40070;
	transform:rotate(35deg);
	box-shadow:30px 0 0 #ffc4000c,60px 0 0 #ffc40008;
	pointer-events:none
}
.metrics{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:15px;
	margin:20px 0
}
.metric{
	border:1px solid var(--border);
	background:var(--surface);
	padding:20px;
	border-radius:9px
}
.metric .value{
	font-size:31px;
	font-weight:800;
	font-variant-numeric:tabular-nums;
	margin:12px 0 8px;
	letter-spacing:-.04em
}
.metric .value span{
	font-size:13px;
	font-weight:500;
	color:var(--muted)
}
.metric .foot{
	font-size:11px;
	color:var(--muted)
}
.sectionhead{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin-bottom:18px
}
.sectionhead h2{
	font-size:18px;
	margin:0
}
.sectionhead p{
	font-size:12px;
	margin:0
}
.route{
	border-left:2px solid #40566a;
	padding-left:20px;
	margin:20px 0
}
.route .stop{
	position:relative;
	margin:0 0 23px;
	font-size:14px
}
.route .stop:last-child{
	margin:0
}
.route .stop:before{
	content:'';
	position:absolute;
	left:-26px;
	top:4px;
	width:10px;
	height:10px;
	border:2px solid var(--accent);
	background:var(--surface);
	border-radius:100%
}
.route small{
	display:block;
	color:var(--muted);
	font-size:11px;
	margin-top:6px
}
.progress{
	height:5px;
	background:#20394d;
	border-radius:9px;
	overflow:hidden;
	margin:16px 0
}
.progress span{
	display:block;
	height:100%;
	background:var(--accent)
}
.data{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	margin:22px 0
}
.data b{
	display:block;
	font-variant-numeric:tabular-nums;
	font-size:21px;
	margin:8px 0 0
}
.data b span{
	font-size:11px;
	color:var(--muted)
}
label{
	display:block;
	color:var(--muted);
	font-size:12px;
	margin-bottom:8px
}
input,select,textarea{
	width:100%;
	border:1px solid var(--border);
	border-radius:7px;
	background:#0b1d2c;
	color:var(--text);
	padding:12px 13px;
	min-width:0
}
textarea{
	resize:vertical;
	min-height:85px
}
input:focus,select:focus,textarea:focus{
	border-color:#ffd34d;
	outline:1px solid #ffd34d40
}
form{
	display:grid;
	gap:16px
}
form.inline{
	display:flex;
	gap:9px;
	align-items:end;
	flex-wrap:wrap
}
form.inline>div{
	flex:1;
	min-width:150px
}
.fieldgrid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:15px
}
.fieldgrid .full{
	grid-column:1/-1
}
.tablewrap{
	overflow:auto
}
table{
	width:100%;
	border-collapse:collapse;
	font-size:12px
}
th{
	text-align:left;
	color:var(--muted);
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.08em;
	padding:12px;
	border-bottom:1px solid var(--border);
	white-space:nowrap
}
td{
	padding:16px 12px;
	border-bottom:1px solid #263e51
}
td small{
	display:block;
	color:var(--muted);
	margin-top:4px
}
tr:last-child td{
	border:0
}
.numeric{
	font-variant-numeric:tabular-nums
}
button.link{
	border:0;
	padding:0;
	color:#ff8bce
}
.tourcard{
	padding:22px;
	border:1px solid var(--border);
	border-radius:10px;
	background:var(--surface);
	text-align:left
}
.tourcard:hover{
	border-color:#806c24
}
.tourcard h3{
	margin:15px 0 7px
}
.tourcard p{
	font-size:12px;
	margin:0
}
.tourcard .meta{
	margin-top:20px;
	font-size:11px
}
.stepeditor{
	padding:15px;
	border:1px solid var(--border);
	border-radius:8px;
	display:grid;
	grid-template-columns:30px 1fr 36px;
	gap:12px;
	align-items:center
}
.stepeditor select{
	font-size:12px
}
.stepno{
	font-weight:800;
	font-size:15px;
	color:#ff8bce
}
.checklist{
	list-style:none;
	padding:0;
	margin:0
}
.checklist li{
	padding:15px 0;
	display:flex;
	gap:15px;
	border-bottom:1px solid var(--border)
}
.checklist li:last-child{
	border:0
}
.checkicon{
	width:27px;
	height:27px;
	display:grid;
	place-items:center;
	border:1px solid #40566a;
	border-radius:50%;
	color:var(--muted);
	flex-shrink:0;
	font-size:12px
}
.checkicon.ok{
	background:#12382d;
	color:var(--green);
	border-color:#39765d
}
.checklist b{
	font-size:13px
}
.checklist p{
	font-size:12px;
	margin:4px 0 0
}
.mapbox{
	height:330px;
	position:relative;
	overflow:hidden;
	background:#091a29;
	border:1px solid var(--border);
	border-radius:9px
}
.mapbox.large{
	height:520px
}
canvas{
	width:100%;
	height:100%;
	display:block;
	touch-action:none
}
.mapcaption{
	position:absolute;
	bottom:12px;
	left:13px;
	font-size:10px;
	padding:7px;
	background:#081827d9;
	color:var(--muted);
	pointer-events:none
}
.mapnote{
	font-size:11px;
	color:var(--muted);
	margin:12px 0 0
}
.driverline{
	padding:15px 0;
	border-bottom:1px solid var(--border);
	display:flex;
	gap:12px;
	align-items:center
}
.driverline:last-child{
	border:0
}
.driverline b{
	font-size:13px
}
.driverline small{
	display:block;
	font-size:11px;
	color:var(--muted);
	margin-top:4px
}
.driverline .pill{
	margin-left:auto
}
.feedpost{
	margin-top:15px
}
.feedpost .posttext{
	color:var(--text);
	white-space:pre-wrap;
	margin:20px 0;
	font-size:14px
}
.comment{
	border-left:2px solid var(--border);
	padding:9px 13px;
	margin-top:10px;
	font-size:12px
}
.comment p{
	margin:7px 0 0;
	color:var(--text);
	white-space:pre-wrap
}
.feedpost form{
	display:flex;
	gap:10px;
	margin-top:14px
}
.feedpost form input{
	font-size:12px
}
.goalnumber{
	font-size:26px;
	font-weight:800;
	margin:15px 0
}
.goalnumber small{
	font-size:13px;
	font-weight:400;
	color:var(--muted)
}
.statusrow{
	display:grid;
	grid-template-columns:1fr auto;
	padding:15px 0;
	border-bottom:1px solid var(--border);
	gap:15px;
	font-size:13px
}
.statusrow small{
	grid-column:1/-1;
	color:var(--muted);
	font-size:11px;
	overflow-wrap:anywhere
}
.statusrow:last-child{
	border:0
}
.simbar{
	padding:10px 38px;
	background:#242717;
	color:var(--yellow);
	font-size:12px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px
}
.labactions{
	border:1px solid #806c24;
	background:#202417;
	padding:15px;
	border-radius:9px;
	margin:20px 0
}
.labactions p{
	color:var(--yellow);
	font-size:12px;
	margin:0 0 12px
}
.login{
	min-height:100vh;
	display:grid;
	grid-template-columns:1.1fr 1fr;
}
.login-art{
	position:relative;
	/*background:radial-gradient(ellipse at 35% 40%,#17364b 0%,#0d2334 45%,#081827 80%);*/
	
	padding:55px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:space-between
}
.login-art .brand {
    position: relative;
    margin: 0;
    width: fit-content;
    min-width: 220px;
    padding: 14px 20px;

    /* Verre fumé */
    background: rgba(8, 14, 24, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* Bordures */
    border: 1px solid rgba(100, 160, 255, 0.18);
    border-radius: 12px;

    /* Profondeur */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(30, 100, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* Positionnement */
    display: flex;
    align-items: center;
    gap: 12px;

    z-index: 2;

    /* Animation */
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.login-art .brand:hover {
	cursor: pointer;
    background: rgba(12, 22, 38, 0.90);
    border-color: rgba(70, 140, 255, 0.40);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.50),
        0 0 25px rgba(30, 100, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.login-art h1{
	font-size:clamp(40px,4.5vw,78px);
	letter-spacing:-.06em;
	line-height:1.04;
	max-width:540px
}
.login-art h1 span{
	color:#ffc400
}
.login-art .lead{
	max-width:400px;
	font-size:15px;
	line-height:1.8
}
.roadart{
	position:absolute;
	right:-40px;
	bottom:80px;
	width:250px;
	height:360px;
	border:1px solid #ffc4003a;
	transform:skewY(-22deg) rotate(-15deg);
	border-radius:30px;
	pointer-events:none
}
.roadart:before,.roadart:after{
	content:'';
	position:absolute;
	inset:40px 35px;
	border:1px solid #ffc40060;
	border-radius:20px
}
.roadart:after{
	inset:80px 70px;
	border-color:#ffc400
}
.login-form{
	padding:55px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	max-width:570px;
	width:100%;
	margin:auto
}
.login-form h2{
	font-size:32px;
	margin:14px 0
}
.login-form .intro{
	font-size:13px;
	margin-bottom:30px
}
.login-form .primary{
	width:100%;
	margin-top:7px
}
/* Footer du formulaire de connexion */
.login-footer {
    margin-top: 28px;
    padding-top: 18px;

    border-top: 1px solid rgba(130, 160, 200, 0.10);

    color: rgba(170, 190, 215, 0.55);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.015em;
    transition: color 0.25s ease;
}


.login-footer p {
    margin: 0 0 12px;
}

.login-discord {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: rgba(170, 190, 215, 0.65);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;

    transition: color 0.2s ease;
}

.discord-icon {
    width: 17px;
    height: 17px;
    object-fit: contain;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.discord-arrow {
    font-size: 13px;
    opacity: 0.45;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.login-discord:hover {
    color: #a5b4fc;
}

.login-discord:hover .discord-icon {
    opacity: 1;
}

.login-discord:hover .discord-arrow {
    opacity: 1;
    transform: translate(2px, -2px);
}


/* Footer sur l'image du camion */
.login-art footer {
    position: relative;
    z-index: 2;

    width: fit-content;

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.6;

    color: rgba(190, 205, 225, 0.65);

    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);

    transition: color 0.25s ease;
}

.login-art footer:hover {
    color: rgba(220, 230, 245, 0.90);
}

.login-art .login-version {
    position: relative;
    z-index: 2;
    width: fit-content;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.login-art .version-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-art .version-name {
    color: #d8e3f2;
    font-weight: 600;
}

.login-art .version-separator {
    color: #526278;
}

.login-art .version-number {
    color: #91a6c2;
    font-variant-numeric: tabular-nums;
}

.login-art .version-badge {
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(45, 119, 229, 0.12);
    border: 1px solid rgba(75, 145, 245, 0.24);
    color: #79adff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.login-art .version-credit {
    margin-top: 5px;
    color: #73849b;
    font-size: 10px;
}

.login-art .version-credit strong {
    color: #b2c5df;
    font-weight: 500;
}

#toast{
	position:fixed;
	bottom:24px;
	right:24px;
	max-width:470px;
	padding:15px 20px;
	border:1px solid #40566a;
	background:#102536;
	color:var(--text);
	border-radius:9px;
	box-shadow:0 12px 40px #0008;
	z-index:100;
	display:none;
	font-size:13px;
	line-height:1.5
}
#toast.show{
	display:block
}
#toast.error{
	border-color:#b45672
}
dialog{
	background:var(--surface);
	color:var(--text);
	border:1px solid var(--border);
	border-radius:12px;
	max-width:620px;
	width:calc(100% - 40px);
	padding:26px
}
dialog::backdrop{
	background:#030b12c9;
	backdrop-filter:blur(4px)
}
dialog h2{
	font-size:23px
}
dialog p{
	font-size:13px
}
.dialogclose{
	float:right;
	border:0;
	padding:2px 8px;
	font-size:22px
}
.code{
	font-family:Consolas,monospace;
	overflow-wrap:anywhere;
	background:#081827;
	padding:16px;
	border-radius:7px;
	font-size:12px
}
.audit{
	font-family:Consolas,monospace;
	font-size:11px
}
.formerror{
	color:#ffb7c3;
	font-size:12px;
	line-height:1.5
}
.hidden{
	display:none!important
}
.notification{
	border-left:3px solid var(--accent);
	padding:12px 16px;
	background:#142c3e;
	border-radius:5px;
	font-size:12px;
	margin-bottom:18px
}
.tabs{
	margin:18px 0;
	display:flex;
	gap:8px;
	flex-wrap:wrap
}
.tabs button{
	font-size:12px;
	padding:7px 13px
}
.tabs .selected{
	border-color:#ffc400;
	color:#ff8bce
}
.membercard .avatar{
	width:44px;
	height:44px
}
.membercard h3{
	margin:0 0 5px
}
.membercard .bio{
	font-size:12px;
	margin-top:18px
}
.actionbar{
	display:flex;
	gap:9px;
	flex-wrap:wrap;
	margin-top:22px
}
.actionbar button{
	font-size:12px
}
.nowrap{
	white-space:nowrap
}
@media(max-width:1200px){
	.shell{
		grid-template-columns:205px 1fr
}
	.content{
		padding:28px 25px
}
	.topbar{
		padding:0 25px
}
	.columns{
		grid-template-columns:1fr
}
	.grid3{
		grid-template-columns:repeat(2,1fr)
}
	.sidebar{
		padding-left:10px;
		padding-right:10px
}
	.metrics{
		grid-template-columns:repeat(2,1fr)
}
	.login-art,.login-form{
		padding:35px
}
	.hero h2{
		max-width:80%
}
}
@media(max-width:760px){
	.shell{
		display:block
}
	.sidebar{
		position:static;
		height:auto;
		padding:18px;
		display:block
}
	.sidebar nav{
		display:flex;
		overflow:auto
}
	.navgroup,.sidebar-bottom{
		display:none
}
	.nav{
		white-space:nowrap;
		width:auto
}
	.brand{
		margin:0 0 10px
}
	.content{
		padding:22px 16px
}
	.topbar{
		height:auto;
		min-height:65px;
		padding:14px 16px;
		flex-wrap:wrap
}
	.grid2,.grid3,.fieldgrid{
		grid-template-columns:1fr
}
	.fieldgrid .full{
		grid-column:auto
}
	.pagehead h1{
		font-size:29px
}
	.login{
		grid-template-columns:1fr
}
	.login-art{
		min-height:330px;
		gap:35px
}
	.login-art h1{
		font-size:43px;
		max-width:360px
}
	.login-art .lead,.login-art footer{
		display:none
}
	.login-form{
		padding:30px 24px
}
	.hero{
		padding:24px
}
	.hero p{
		max-width:85%
}
	.simbar{
		padding:10px 16px
}
	.mapbox.large{
		height:400px
}
	.data{
		grid-template-columns:repeat(2,1fr)
}
}
@media(prefers-reduced-motion:reduce){
	*{
		transition:none!important;
		scroll-behavior:auto!important
}
}
.sidebar nav{
	min-height:0;
	overflow-y:auto;
	flex:1
}
.sidebar-bottom{
	flex-shrink:0
}
.stepeditor{
	grid-template-columns:36px minmax(0,1fr) auto auto auto
}
.notice{
	overflow-wrap:anywhere
}
#dispatch-form input[type=checkbox]{
	width:auto;
	margin-right:8px
}
@media(max-width:760px){
	.stepeditor{
		grid-template-columns:28px minmax(0,1fr) auto
}
	.stepeditor>button{
		grid-row:2
}
}
.dispatch-wizard{
	margin-bottom:24px
}
.dispatch-wizard>.between{
	flex-wrap:wrap
}
.dispatch-wizard h2{
	margin-bottom:0
}
.dispatch-progress{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	padding:0;
	list-style:none;
	margin:28px 0;
	gap:10px
}
.dispatch-progress li{
	display:flex;
	align-items:center;
	gap:9px;
	color:var(--muted);
	font-size:13px;
	border-bottom:2px solid var(--border);
	padding:0 0 14px
}
.dispatch-progress li>span{
	display:grid;
	place-items:center;
	width:27px;
	height:27px;
	border:1px solid var(--border);
	border-radius:50%;
	flex-shrink:0
}
.dispatch-progress .current{
	color:var(--text);
	border-color:var(--accent);
	font-weight:700
}
.dispatch-progress .current>span{
	background:var(--accent);
	border-color:var(--accent);
	color:#081827
}
.dispatch-progress .done>span{
	border-color:#376d57;
	color:var(--green)
}
.dispatch-body{
	max-width:860px;
	padding:6px 0 24px;
	display:grid;
	gap:16px
}
.dispatch-body h3,.dispatch-body p{
	margin:0
}
.dispatch-body h3{
	font-size:21px
}
.dispatch-body .between{
	flex-wrap:wrap
}
.dispatch-summary{
	padding:20px;
	background:#0b1d2c;
	border:1px solid var(--border);
	border-radius:9px;
	overflow-wrap:anywhere
}
.dispatch-summary p{
	margin:8px 0 12px
}
.dispatch-summary .route{
	margin-top:0
}
.dispatch-fields{
	display:grid;
	gap:22px
}
.dispatch-fields label{
	font-size:14px;
	color:var(--text)
}
.dispatch-actions{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin-top:8px
}
.dispatch-actions .primary{
	padding:15px 24px
}
.dispatch-details{
	border-top:1px solid var(--border);
	padding:16px 0;
	color:var(--muted);
	font-size:13px;
	overflow-wrap:anywhere
}
.dispatch-details summary,.dispatch-map summary{
	cursor:pointer;
	color:var(--muted)
}
.dispatch-details[open]>summary{
	margin-bottom:18px
}
.dispatch-details p{
	margin:12px 0
}
.dispatch-check{
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:14px;
	color:var(--text);
	line-height:1.5
}
.dispatch-check input{
	flex-shrink:0;
	margin-top:5px
}
.dispatch-success{
	border-color:#376d57
}
.dispatch-success strong{
	display:block;
	font-size:27px;
	color:var(--green);
	margin:12px 0
}
.dispatch-instructions{
	padding-left:24px;
	line-height:1.7;
	margin:0
}
.dispatch-instructions li{
	padding:5px 0 10px
}
.dispatch-working{
	color:#ffd34d
}
.dispatch-map[open]>summary{
	margin-bottom:18px
}
@media(max-width:760px){
	.dispatch-wizard{
		padding:20px 16px
}
	.dispatch-progress{
		gap:5px
}
	.dispatch-progress li{
		flex-direction:column;
		align-items:flex-start;
		font-size:11px;
		gap:8px
}
	.dispatch-body h3{
		font-size:19px
}
	.dispatch-actions>button{
		width:100%
}
	.dispatch-success strong{
		font-size:23px
}
	.dispatch-wizard select{
		font-size:13px
}
	.dispatch-body{
		padding-bottom:18px
}
}
fieldset.dispatch-body{
	border:0;
	margin:0;
	min-width:0;
	padding:6px 0 24px
}
fieldset.dispatch-body:disabled{
	opacity:.7
}
.dispatch-check input[type=checkbox]{
	width:auto
}
.dispatch-tracking p{
	color:inherit
}
.dispatch-tracking .note{
	color:var(--muted)
}
.dispatch-tracking{
	margin-bottom:18px
}
.dispatch-tracking .dispatch-check{
	font-size:13px
}
.dispatch-open-mode{
	border-color:#806c24;
	margin-bottom:18px
}
.dispatch-open-mode .eyebrow{
	color:#ffd34d;
	margin-bottom:12px
}
.dispatch-open-mode h3{
	font-size:21px;
	margin-bottom:18px
}
.dispatch-open-mode .dispatch-check{
	margin:20px 0
}
.dispatch-open-mode>.primary{
	padding:14px 20px
}
.dispatch-open-mode .dispatch-details{
	margin-top:18px
}
@media(max-width:760px){
	.dispatch-open-mode{
		padding:18px
}
	.dispatch-open-mode>.primary{
		width:100%
}
}
.dispatch-is-busy{
	filter:blur(2px);
	opacity:.4;
	pointer-events:none
}
.dispatch-loading-overlay{
	position:fixed;
	inset:0;
	z-index:1200;
	display:grid;
	place-items:center;
	padding:24px;
	background:rgba(4,14,23,.78);
	overflow:auto;
	cursor:wait
}
.dispatch-loading-card{
	width:min(100%,500px);
	padding:38px 32px;
	background:#1c1725;
	border:1px solid #ffc400;
	border-radius:16px;
	box-shadow:0 24px 90px #08050bcc,0 0 42px #ffc40020;
	text-align:center;
	outline:none;
	overflow-wrap:anywhere
}
.dispatch-loading-card .eyebrow{
	margin:20px 0 12px;
	color:#ffd34d
}
.dispatch-loading-card h2{
	font-size:25px;
	margin-bottom:14px
}
.dispatch-loading-card p{
	margin-bottom:20px
}
.dispatch-loading-card strong{
	font-size:16px;
	color:var(--text)
}
.dispatch-loading-card .note{
	margin:14px 0 0
}
.dispatch-loading-spinner{
	width:54px;
	height:54px;
	margin:0 auto;
	border:4px solid #334b5e;
	border-top-color:#ffd34d;
	border-right-color:#ffc400;
	border-radius:50%;
	animation:dispatch-spin 1s linear infinite
}
.dispatch-loading-track{
	height:5px;
	margin:26px 0 22px;
	background:#263e51;
	border-radius:8px;
	overflow:hidden
}
.dispatch-loading-track span{
	display:block;
	width:40%;
	height:100%;
	background:linear-gradient(90deg,#ffc400,#ffd34d);
	border-radius:8px;
	animation:dispatch-loading-slide 1.6s ease-in-out infinite alternate
}
@keyframes dispatch-spin{
	to{
		transform:rotate(360deg)
}
}
@keyframes dispatch-loading-slide{
	from{
		transform:translateX(-100%)
}
	to{
		transform:translateX(250%)
}
}
@media(prefers-reduced-motion:reduce){
	.dispatch-loading-spinner,.dispatch-loading-track span{
		animation:none
}
	.dispatch-loading-track span{
		width:100%;
		background:#ffc400
}
}
@media(max-width:760px){
	.dispatch-loading-overlay{
		padding:16px
}
	.dispatch-loading-card{
		padding:30px 20px
}
	.dispatch-loading-card h2{
		font-size:22px
}
}
.tour-filters{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	margin:20px 0
}
.tour-distance{
	display:grid;
	gap:6px;
	margin:14px 0;
	padding:14px 18px;
	border-left:3px solid var(--accent);
	background:rgba(255,196,0,.07)
}
.tour-distance small{
	color:var(--muted);
	line-height:1.6
}
.dispatch-help{
	margin:24px 0
}
.dispatch-check{
	display:flex;
	align-items:flex-start;
	gap:12px;
	line-height:1.7;
	margin:16px 0
}
.dispatch-check input{
	flex:0 0 auto;
	margin-top:6px
}
.dispatch-instructions li{
	padding:6px 0;
	line-height:1.7
}
.dispatch-summary{
	margin-top:18px;
	margin-bottom:18px
}
.dispatch-details>summary{
	padding:12px 0;
	cursor:pointer
}
.tourcard{
	text-align:left
}
.tourcard p{
	line-height:1.6
}


/* ==========================================================
   KZ LOGISTICS — FINAL THEME OVERRIDES
   Decorative accents = gold. Success/error keep their status colors.
   ========================================================== */

.accent,
.eyebrow,
button.link,
.stepno,
.dispatch-working,
.dispatch-open-mode .eyebrow,
.dispatch-loading-card .eyebrow,
.login-art h1 span,
.nav.active {
    color: var(--accent);
}

.nav.active {
    background: rgba(255, 196, 0, .10);
    border-left-color: var(--accent);
}

.avatar {
    background: rgba(255, 196, 0, .10);
    color: var(--accent);
    border-color: rgba(255, 196, 0, .38);
}

.pill.magenta {
    color: var(--accent);
    border-color: rgba(255, 196, 0, .40);
    background: rgba(255, 196, 0, .06);
}

.tabs .selected {
    border-color: var(--accent);
    color: var(--accent);
}

.notification {
    background: rgba(255, 196, 0, .07);
}

.hero {
    background: linear-gradient(
        112deg,
        #143247 0%,
        #10283a 58%,
        var(--surface) 100%
    );
    border-color: rgba(255, 196, 0, .30);
}

.hero::after {
    border-color: rgba(255, 196, 0, .45);
    box-shadow:
        30px 0 0 rgba(255, 196, 0, .06),
        60px 0 0 rgba(255, 196, 0, .035);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    outline-color: rgba(255, 196, 0, .25);
}

.tourcard:hover {
    border-color: rgba(255, 196, 0, .50);
}

.dispatch-open-mode {
    border-color: rgba(255, 196, 0, .40);
}

.dispatch-loading-card {
    border-color: rgba(255, 196, 0, .60);
    box-shadow:
        0 24px 90px rgba(0, 0, 0, .55),
        0 0 42px rgba(255, 196, 0, .12);
}

.dispatch-loading-spinner {
    border-color: #334b5e;
    border-top-color: var(--gold-light);
    border-right-color: var(--accent);
}

.dispatch-loading-track {
    background: #263e51;
}

.dispatch-loading-track span {
    background: linear-gradient(90deg, var(--accent), var(--gold-light));
}

.tour-distance {
    background: rgba(255, 196, 0, .07);
}

/* Selection and scrollbar, so browser UI inside the app matches the theme */
::selection {
    background: rgba(255, 196, 0, .35);
    color: var(--text);
}

* {
    scrollbar-color: #40566a #0b1d2c;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #0b1d2c;
}

::-webkit-scrollbar-thumb {
    background: #40566a;
    border: 2px solid #0b1d2c;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #587086;
}


/* ==========================================================
   KZ LOGISTICS V3 — SIDEBAR REWORK
   Sidebar intégrée au thème bleu nuit / jaune du logo.
   ========================================================== */

.sidebar {
    background: #071521;
    border-right: 1px solid #1d3547;
}

.sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: #29485e transparent;
}

.sidebar nav::-webkit-scrollbar {
    width: 5px;
}

.sidebar nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: #29485e;
    border: 0;
    border-radius: 10px;
}

.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: #3a6079;
}

.navgroup {
    color: #688297;
}

.nav {
    position: relative;
    color: #9eb0bf;
    background: transparent;
    border-left: 3px solid transparent;
    border-radius: 5px;
    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.nav:hover {
    background: #0c2334;
    color: #f7f9fb;
}

.nav.active {
    background: #102d42;
    color: #ffc400;
    border-left-color: #ffc400;
}

.nav.active:hover {
    background: #13354d;
    color: #ffd34d;
}

.nav svg {
    color: currentColor;
    opacity: .9;
}

.nav.active svg {
    color: #ffc400;
    opacity: 1;
}

.nav .count {
    background: #ffc400;
    color: #071521;
    box-shadow: none;
}

.sidebar-bottom {
    background: #071521;
}

.userblock {
    border-top: 1px solid #1d3547;
}

.userblock .avatar,
.sidebar .avatar {
    background: #102d42;
    color: #ffc400;
    border-color: #806c24;
}

.userblock b {
    color: #f7f9fb;
}

.userblock small {
    color: #7f96a8;
}

/* Boutons secondaires situés dans la zone basse de la sidebar */
.sidebar-bottom button:not(.primary),
.sidebar-bottom a {
    color: #9eb0bf;
}

.sidebar-bottom button:not(.primary):hover,
.sidebar-bottom a:hover {
    color: #f7f9fb;
}

/* Badge/version : discret, sans effet violet */
.sidebar-bottom .pill {
    background: #0b1d2c;
    border-color: #294052;
    color: #b9c7d1;
}

/* Légère séparation visuelle entre navigation et contenu */
.sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255,196,0,.10),
        rgba(29,53,71,.85) 18%,
        rgba(29,53,71,.85) 82%,
        rgba(255,196,0,.06)
    );
    pointer-events: none;
}



/* ==========================================================
   KZ EXPORT — VTC REDESIGN V4
   Direction: cockpit / transport premium, plus compact et lisible.
   Palette: graphite + bleu pétrole + ambre signalétique.
   ========================================================== */
:root {
    --background: #071117;
    --surface: #0d1b23;
    --accent: #f4b942;
    --text: #f3f7f9;
    --muted: #8ea2ad;
    --border: #20343e;

    --navy: #071117;
    --navy-2: #091820;
    --navy-3: #0d1b23;
    --gold: #f4b942;
    --gold-light: #ffd477;
    --gold-soft: rgba(244,185,66,.10);

    --vtc-panel: #0d1b23;
    --vtc-panel-2: #10232d;
    --vtc-line: #20343e;
    --vtc-cyan: #5cc8d7;
    --vtc-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* Global density */
body {
    background:
        radial-gradient(circle at 76% -10%, rgba(92,200,215,.055), transparent 30%),
        var(--background);
}

.shell {
    grid-template-columns: 220px minmax(0,1fr);
}

.main {
    background:
        linear-gradient(
            rgba(8, 11, 16, 0.85),
            rgba(8, 11, 16, 0.85)
        ),
        url('/body.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Correction largeur du contenu principal */
.main {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

/* Suppression de la limite de largeur */
.main .content {
    width: 100%;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 24px;
    box-sizing: border-box;
}

.topbar {
    height: 66px;
    padding: 0 32px;
    background: rgba(7,17,23,.72);
    backdrop-filter: blur(12px);
}

.pagehead {
    margin-bottom: 22px;
}

.pagehead h1,
h1 {
    font-size: 31px;
    line-height: 1.08;
    margin-bottom: 7px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 15px;
}

p {
    line-height: 1.5;
}

.eyebrow {
    color: var(--accent);
    margin-bottom: 9px;
    letter-spacing: .16em;
}

/* Sidebar: compact cockpit navigation */
.sidebar {
    width: auto;
    padding: 24px 12px 16px;
    background: #060e13;
    border-right: 1px solid #1b2d36;
}

.brand {
    margin: 0 10px 24px;
}

.brand img {
    width: 34px;
    height: 34px;
}

.brand b {
    font-size: 18px;
}

.navgroup {
    padding: 13px 12px 7px;
    color: #607b88;
    font-size: 9px;
}

.nav {
    min-height: 40px;
    padding: 9px 11px;
    margin: 2px 0;
    gap: 11px;
    font-size: 12px;
    border-left: 2px solid transparent;
    border-radius: 6px;
}

.nav:hover {
    background: #0c1d25;
}

.nav.active {
    background: linear-gradient(90deg, rgba(244,185,66,.13), rgba(244,185,66,.035));
    color: #ffd477;
    border-left-color: var(--accent);
}

.nav svg {
    width: 17px;
    height: 17px;
}

.sidebar-bottom {
    padding-top: 16px;
    background: transparent;
}

.userblock {
    padding: 14px 8px 0;
}

.avatar,
.userblock .avatar,
.sidebar .avatar {
    width: 34px;
    height: 34px;
    background: #13242c;
    color: var(--accent);
    border-color: #4b4932;
}

/* Panels/cards */
.panel,
.metric,
.tourcard {
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 45%),
        var(--vtc-panel);
    border: 1px solid var(--vtc-line);
    box-shadow: var(--vtc-shadow);
}

.panel {
    border-radius: 9px;
    padding: 20px;
}

.metric {
    padding: 16px 17px;
    border-radius: 8px;
}

.metric .value {
    font-size: 25px;
    margin: 8px 0 5px;
}

.metric .foot {
    font-size: 10px;
}

.metrics {
    gap: 11px;
    margin: 14px 0 16px;
}

.columns {
    gap: 16px;
}

.grid2,
.grid3 {
    gap: 12px;
}

.sectionhead {
    margin-bottom: 14px;
}

.sectionhead h2 {
    font-size: 17px;
}

/* Main hero: no longer a huge banner */
.hero {
    min-height: 0;
    padding: 22px 24px;
    border-radius: 9px;
    background:
        linear-gradient(105deg, #102631 0%, #0e2029 62%, #0b1a21 100%);
    border: 1px solid #3b3c2b;
    box-shadow: var(--vtc-shadow);
}

.hero h2 {
    font-size: 24px;
    line-height: 1.18;
    max-width: 620px;
    margin-bottom: 6px;
}

.hero p {
    max-width: 720px;
    margin-bottom: 14px;
}

.hero::after {
    right: 45px;
    top: -105px;
    width: 95px;
    height: 310px;
    border-color: rgba(244,185,66,.32);
    box-shadow:
        24px 0 0 rgba(92,200,215,.035),
        48px 0 0 rgba(244,185,66,.025);
}

/* Buttons: transport/control-panel feel */
button {
    padding: 9px 13px;
    border-radius: 6px;
    border-color: #29414d;
}

button:hover {
    background: #132833;
}

button.primary {
    background: var(--accent);
    color: #101417;
    border-color: var(--accent);
    padding: 10px 15px;
    clip-path: polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}

button.link {
    color: var(--gold-light);
}

/* Inputs */
input,
select,
textarea {
    background: #08151c;
    border-color: #233944;
    padding: 10px 11px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--vtc-cyan);
    outline-color: rgba(92,200,215,.18);
}

/* Data presentation */
.data {
    gap: 14px;
    margin: 16px 0;
}

.data b {
    font-size: 18px;
    margin-top: 5px;
}

.route {
    border-left-color: #34505c;
    padding-left: 17px;
    margin: 15px 0;
}

.route .stop {
    margin-bottom: 18px;
}

.route .stop:before {
    border-color: var(--accent);
}

.progress {
    background: #162a34;
    margin: 12px 0;
}

.progress span {
    background: linear-gradient(90deg, var(--accent), #d99a2e);
}

/* Notification strip */
.notification {
    padding: 10px 13px;
    margin-bottom: 16px;
    background: #0f252c;
    border-left-color: var(--accent);
}

/* Tables */
th {
    padding: 10px;
    color: #78909b;
}

td {
    padding: 13px 10px;
    border-bottom-color: #1b303a;
}

tr:hover td {
    background: rgba(92,200,215,.025);
}

/* Map / telemetry areas */
.mapbox {
    background:
        linear-gradient(rgba(92,200,215,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92,200,215,.025) 1px, transparent 1px),
        #08151c;
    background-size: 32px 32px;
    border-color: #29414d;
}

.mapbox.large {
    height: 460px;
}

/* Pills / statuses */
.pill {
    background: #0a1820;
    border-color: #29414d;
}

.pill.magenta {
    color: var(--accent);
    border-color: rgba(244,185,66,.35);
    background: rgba(244,185,66,.06);
}

/* Dispatch */
.dispatch-wizard {
    margin-bottom: 18px;
}

.dispatch-progress {
    margin: 20px 0;
}

.dispatch-body {
    padding-bottom: 18px;
}

.dispatch-summary {
    background: #091820;
}

.dispatch-loading-card {
    background: #0d1b23;
    border-color: rgba(244,185,66,.5);
}

/* Toast / modal */
#toast,
dialog {
    background: #0d1b23;
    border-color: #29414d;
}

/* Less bulky desktop layout */
@media (min-width: 1201px) {
    .metrics {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .columns {
        grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
    }
}

@media (max-width: 1200px) {
    .shell {
        grid-template-columns: 205px 1fr;
    }

    .content {
        padding: 24px;
    }
}

@media (max-width: 760px) {
    .content {
        padding: 20px 15px 34px;
    }

    .hero {
        padding: 19px;
    }

    .hero h2 {
        font-size: 22px;
    }
}


/* ==========================================================
   KZ EXPORT — V5 / GRAPHITE + ELECTRIC BLUE
   Professional VTC / fleet-management identity.
   Keeps the compact V4 layout; replaces the visual palette.
   ========================================================== */

:root {
    --background: #080b10;
    --surface: #11161d;
    --accent: #2684ff;
    --text: #f3f6fa;
    --muted: #8b98a8;
    --border: #252d38;

    --navy: #080b10;
    --navy-2: #0c1118;
    --navy-3: #11161d;

    /* Legacy aliases kept so all existing components follow V5 */
    --gold: #2684ff;
    --gold-light: #63a8ff;
    --gold-soft: rgba(38,132,255,.10);

    --vtc-panel: #11161d;
    --vtc-panel-2: #151b23;
    --vtc-line: #252d38;
    --vtc-cyan: #2684ff;
    --vtc-shadow: 0 12px 30px rgba(0,0,0,.22);
}

body {
    background:
        radial-gradient(circle at 78% -15%, rgba(38,132,255,.065), transparent 31%),
        #080b10;
}

/* Header */
.topbar {
    background: rgba(8,11,16,.82);
    border-bottom-color: #202833;
}

/* Sidebar */
.sidebar {
    background: #070a0e;
    border-right-color: #202833;
}

.sidebar::after {
    background: linear-gradient(
        to bottom,
        rgba(38,132,255,.16),
        rgba(32,40,51,.85) 18%,
        rgba(32,40,51,.85) 82%,
        rgba(38,132,255,.08)
    );
}

.navgroup {
    color: #596777;
}

.nav {
    color: #929eac;
}

.nav:hover {
    background: #101720;
    color: #f3f6fa;
}

.nav.active {
    background: linear-gradient(
        90deg,
        rgba(38,132,255,.16),
        rgba(38,132,255,.045)
    );
    color: #63a8ff;
    border-left-color: #2684ff;
}

.nav.active:hover {
    background: linear-gradient(
        90deg,
        rgba(38,132,255,.21),
        rgba(38,132,255,.065)
    );
    color: #85baff;
}

.nav.active svg {
    color: #2684ff;
}

.nav .count {
    background: #2684ff;
    color: #ffffff;
}

.sidebar nav {
    scrollbar-color: #293442 transparent;
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: #293442;
}

.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: #39495c;
}

.userblock {
    border-top-color: #202833;
}

.avatar,
.userblock .avatar,
.sidebar .avatar {
    background: #111a25;
    color: #63a8ff;
    border-color: #294f7d;
}

/* Cards */
.panel,
.metric,
.tourcard {
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 46%),
        #11161d;
    border-color: #252d38;
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
}

.metric:hover,
.tourcard:hover {
    border-color: #34475c;
}

.tourcard:hover {
    box-shadow: 0 14px 34px rgba(0,0,0,.25);
}

/* Accent typography */
.accent,
.eyebrow,
button.link,
.stepno,
.dispatch-working,
.dispatch-open-mode .eyebrow,
.dispatch-loading-card .eyebrow,
.login-art h1 span {
    color: #63a8ff;
}

/* Hero */
.hero {
    background:
        linear-gradient(105deg, #131d29 0%, #101820 62%, #0e141b 100%);
    border-color: #293a4d;
    box-shadow:
        0 14px 34px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.018);
}

.hero::after {
    border-color: rgba(38,132,255,.32);
    box-shadow:
        24px 0 0 rgba(38,132,255,.035),
        48px 0 0 rgba(38,132,255,.018);
}

/* Buttons */
button {
    border-color: #2b3542;
}

button:hover {
    background: #171e27;
}

button.primary {
    background: #2684ff;
    border-color: #2684ff;
    color: #ffffff;
}

button.primary:hover {
    background: #4596ff;
    border-color: #4596ff;
    filter: none;
}

button.link {
    color: #63a8ff;
}

button.link:hover {
    color: #8fc1ff;
    background: transparent;
}

/* Inputs */
input,
select,
textarea {
    background: #0b1016;
    border-color: #27313d;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #2684ff;
    outline-color: rgba(38,132,255,.20);
}

/* Progress / routes */
.route {
    border-left-color: #334151;
}

.route .stop::before {
    border-color: #2684ff;
}

.progress {
    background: #1c2530;
}

.progress span {
    background: linear-gradient(90deg, #2684ff, #63a8ff);
}

/* Pills */
.pill {
    background: #0d131a;
    border-color: #2a3440;
}

.pill.magenta {
    color: #63a8ff;
    border-color: rgba(38,132,255,.38);
    background: rgba(38,132,255,.07);
}

/* Functional states deliberately remain green / amber / red */
.pill.good {
    color: var(--green);
}

.pill.wait {
    color: #ffd477;
}

.pill.bad,
.formerror {
    color: #ff9fac;
}

/* Notification */
.notification {
    background: rgba(38,132,255,.07);
    border-left-color: #2684ff;
}

/* Tables */
th {
    color: #758394;
}

td {
    border-bottom-color: #202833;
}

tr:hover td {
    background: rgba(38,132,255,.025);
}

/* Map / telemetry */
.mapbox {
    background:
        linear-gradient(rgba(38,132,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(38,132,255,.022) 1px, transparent 1px),
        #0a0f15;
    background-size: 32px 32px;
    border-color: #293442;
}

.maptools {position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:2}
.maptools button {background:#142231;min-width:32px}
.mapbox canvas {touch-action:none}
.mapcaption {
    background: rgba(8,11,16,.88);
}

/* Dispatch */
.dispatch-progress .current {
    border-color: #2684ff;
}

.dispatch-progress .current > span {
    background: #2684ff;
    border-color: #2684ff;
    color: #fff;
}

.dispatch-summary {
    background: #0c1118;
}

.dispatch-open-mode {
    border-color: rgba(38,132,255,.34);
}

.dispatch-loading-overlay {
    background: rgba(4,6,9,.80);
}

.dispatch-loading-card {
    background: #11161d;
    border-color: rgba(38,132,255,.52);
    box-shadow:
        0 24px 90px rgba(0,0,0,.62),
        0 0 42px rgba(38,132,255,.10);
}

.dispatch-loading-spinner {
    border-color: #293442;
    border-top-color: #63a8ff;
    border-right-color: #2684ff;
}

.dispatch-loading-track {
    background: #202a36;
}

.dispatch-loading-track span {
    background: linear-gradient(90deg, #2684ff, #63a8ff);
}

.tour-distance {
    border-left-color: #2684ff;
    background: rgba(38,132,255,.055);
}

/* Tabs */
.tabs .selected {
    border-color: #2684ff;
    color: #63a8ff;
}

/* Login */
/*.login-art {
    background-image: url('/body.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    min-height: 400px;
}*/
.login-art {
    position: relative;
    background-image: url('/body.png') !important;
    background-size: cover !important;
    background-position: 30% center !important;
    background-repeat: no-repeat;
    overflow: hidden;
}

.login-art::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 75%,
            rgba(8, 11, 16, 0.35) 90%,
            #080b10 100%
        ),
        linear-gradient(
            to bottom,
            transparent 70%,
            rgba(8, 11, 16, 0.30) 90%,
            #080b10 100%
        );

    pointer-events: none;
}
.roadart {
    border-color: rgba(38,132,255,.22);
}

.roadart::before,
.roadart::after {
    border-color: rgba(38,132,255,.34);
}

.roadart::after {
    border-color: #2684ff;
}

/* Dialog / toast */
#toast,
dialog {
    background: #11161d;
    border-color: #2b3542;
}

dialog::backdrop {
    background: rgba(3,5,8,.82);
}

/* Selection + scrollbar */
::selection {
    background: rgba(38,132,255,.38);
    color: #fff;
}

* {
    scrollbar-color: #344151 #0b1016;
}

::-webkit-scrollbar-track {
    background: #0b1016;
}

::-webkit-scrollbar-thumb {
    background: #344151;
    border-color: #0b1016;
}

::-webkit-scrollbar-thumb:hover {
    background: #46576a;
}

/* Remove old yellow styling from generic sidebar/footer pills */
.sidebar-bottom .pill {
    background: #0c1118;
    border-color: #252f3b;
    color: #a2adba;
}

/* Keep warning/simulation areas clearly semantic rather than brand-colored */
.notice {
    background: #272215;
    border-color: #665527;
    color: #e9c96e;
}

.simbar {
    background: #272215;
    color: #e9c96e;
}

.labactions {
    background: #211e15;
    border-color: #5b4d29;
}

.labactions p {
    color: #e9c96e;
}


/* ==========================================================
   KZ EXPORT — DESIGN V6
   Dashboard plus dense, plus lisible, orienté gestion VTC.
   ========================================================== */

:root{
  --v6-bg:#090d12;
  --v6-sidebar:#070a0e;
  --v6-panel:#121922;
  --v6-panel-raised:#161f29;
  --v6-line:#263443;
  --v6-blue:#2f8cff;
  --v6-blue-soft:rgba(47,140,255,.10);
  --v6-text:#f4f7fa;
  --v6-muted:#8d9baa;
}

body{background:var(--v6-bg)}
.content{max-width:1380px;padding:24px 28px 40px}
.pagehead{margin-bottom:16px}
.pagehead h1{font-size:28px}
.notification{margin-bottom:12px;border-radius:7px}

/* V6 command banner */
.v6-command{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr);
  gap:14px;
  margin-bottom:14px;
}
.v6-command-main{
  position:relative;
  overflow:hidden;
  min-height:154px;
  padding:22px 24px;
  border:1px solid var(--v6-line);
  border-radius:9px;
  background:
    radial-gradient(circle at 88% 18%,rgba(47,140,255,.11),transparent 30%),
    linear-gradient(115deg,#151e28,#101720 70%);
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}
.v6-command-main:after{
  content:"";
  position:absolute;
  right:-50px;bottom:-88px;
  width:260px;height:190px;
  border:1px solid rgba(47,140,255,.16);
  transform:rotate(-18deg);
  pointer-events:none;
}
.v6-command-main h2{
  font-size:22px;
  line-height:1.2;
  margin:5px 0 7px;
  max-width:560px;
}
.v6-command-main p{
  max-width:650px;
  margin:0 0 14px;
  color:var(--v6-muted);
}
.v6-command-side{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  overflow:hidden;
  border:1px solid var(--v6-line);
  border-radius:9px;
  background:var(--v6-line);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.v6-fleet-stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:76px;
  padding:15px 17px;
  background:var(--v6-panel);
}
.v6-fleet-stat:first-child{
  grid-column:1/-1;
  background:linear-gradient(135deg,#172332,#121922);
}
.v6-fleet-stat .v6-kicker{
  color:#758697;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.v6-fleet-stat strong{
  display:block;
  margin-top:5px;
  font-size:21px;
  color:var(--v6-text);
}
.v6-fleet-stat strong span{
  color:var(--v6-blue);
}
.v6-fleet-stat small{margin-top:3px;color:var(--v6-muted)}

/* Actual KPI cards instead of loose text */
.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 14px;
}
.metrics > div{
  min-width:0;
  padding:13px 14px 12px;
  background:var(--v6-panel);
  border:1px solid var(--v6-line);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.metrics > div:hover{
  background:var(--v6-panel-raised);
  border-color:#33475b;
}
.metrics .label{
  color:#7f91a2;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.metrics b{
  display:block;
  margin:6px 0 3px;
  font-size:21px;
  line-height:1;
  color:var(--v6-text);
}
.metrics b span{font-size:12px;color:#a8b4bf}
.metrics .foot{
  color:#71808e;
  font-size:10px;
  line-height:1.35;
}

/* Main information cards */
.columns{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px}
.panel{
  padding:17px 18px;
  border-radius:8px;
  background:var(--v6-panel);
  border-color:var(--v6-line);
  box-shadow:0 9px 24px rgba(0,0,0,.15);
}
.sectionhead{margin-bottom:11px}
.sectionhead h2,.panel>h2{font-size:15px}
.mapbox{min-height:220px;height:220px;border-radius:6px}
.mapbox div[style]{padding:88px 20px!important}
.route{margin:10px 0 12px}
.route .stop{margin-bottom:13px}
.grid2{gap:12px}
.grid2[style]{margin-top:12px!important}
.driverline{padding:11px 0}

/* Cleaner top status */
.topbar{height:60px;padding:0 28px}
.topbar .pill{padding:6px 9px}
.sidebar{padding-top:22px}

/* Preview label */
.previewbar{
  background:#0d131b!important;
  border-color:#293747!important;
  border-radius:6px!important;
}
.previewbar b{color:var(--v6-blue)!important}

@media(max-width:1100px){
  .v6-command{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .v6-command-side,.metrics{grid-template-columns:1fr}
  .v6-fleet-stat:first-child{grid-column:auto}
  .columns{grid-template-columns:1fr}
}

/* Adaptations du template V6 aux composants vivants de KZ. */
.metrics .value{display:block;margin:6px 0 3px;font-size:21px;line-height:1.2;font-weight:800;color:var(--v6-text)}
.metrics .value span{font-size:12px;color:var(--muted)}
.v6-command-main:after{pointer-events:none}
.v6-fleet-stat strong{overflow-wrap:anywhere}
.tour-filters{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.dispatch-help{margin:24px 0}
.sidebar nav{min-height:0;flex:1;overflow-y:auto}
.sidebar-bottom{flex-shrink:0}
.panel,.v6-command-main,.v6-command-side,.metric,.dispatch-body{min-width:0}
input,select,textarea{max-width:100%;min-width:0}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mapbox.large{height:460px}
@media(max-width:760px){
 .content{padding:22px 16px}
 .topbar{height:auto;min-height:60px;padding:14px 16px}
 .sidebar{height:auto;position:static;padding:18px;display:block}
 .sidebar nav{flex-direction:row;overflow-x:auto;overflow-y:hidden}
 .navgroup,.sidebar-bottom{display:none}
 .pagehead{align-items:flex-start;flex-wrap:wrap}
 .v6-command{grid-template-columns:minmax(0,1fr)}
 .v6-command-main{padding:20px}
 .columns,.grid2,.grid3,.fieldgrid{grid-template-columns:minmax(0,1fr)}
 .mapbox.large{height:360px}
}
@media(max-width:760px){.sidebar::after{display:none}}

/* KZ dashboard: shared visual system for Windows and web. */
:root {
  --background:#0b111a;
  --navy:#0b111a;
  --navy-2:#0e1722;
  --navy-3:#14202d;
  --surface:#121c28;
  --surface-raised:#172331;
  --accent:#388dff;
  --accent-hover:#62a5ff;
  --accent-soft:rgba(56,141,255,.12);
  --text:#edf3fa;
  --muted:#a6b5c5;
  --border:#2a3a4c;
  --green:#83dfb4;
  --yellow:#f3d383;
  --red:#ff9eaa;
  --radius-sm:8px;
  --radius:12px;
  --space-1:6px;
  --space-2:10px;
  --space-3:14px;
  --space-4:20px;
  --space-5:28px;
  --shadow-card:0 8px 28px rgba(2,8,16,.16);
  --v6-bg:var(--background);
  --v6-sidebar:#0a1119;
  --v6-panel:var(--surface);
  --v6-panel-raised:var(--surface-raised);
  --v6-line:var(--border);
  --v6-blue:var(--accent);
  --v6-text:var(--text);
  --v6-muted:var(--muted);
  --vtc-panel:var(--surface);
  --vtc-panel-2:var(--surface-raised);
  --vtc-line:var(--border);
  --vtc-cyan:var(--accent);
  color-scheme:dark;
}
body {background:radial-gradient(circle at 80% -20%,rgba(56,141,255,.075),transparent 32%),var(--background);font-size:14px;line-height:1.5}
h1,h2,h3 {color:var(--text)}
h1 {font-size:clamp(26px,2.5vw,32px);line-height:1.18}
h2 {font-size:19px;line-height:1.25}
h3 {font-size:16px;line-height:1.3}
p {color:var(--muted);line-height:1.55}
.note,.pagehead p,.sectionhead p,.login-form .intro {font-size:13px;line-height:1.55}
.label,.route small,.driverline small,td small {font-size:12px}
.eyebrow,.micro,.v6-fleet-stat .v6-kicker {font-size:11px;letter-spacing:.11em;color:var(--accent-hover)}
.shell {grid-template-columns:228px minmax(0,1fr)}
.sidebar {background:#0a121c;border-right:1px solid var(--border);padding:18px 12px 14px}
.sidebar::after {display:none}
.brand {margin:0 9px 19px;min-height:42px}
.brand img {width:38px;height:38px}
.brand b {font-size:17px;letter-spacing:-.025em}
.brand small {font-size:11px;letter-spacing:.015em;line-height:1.25}
.navgroup {padding:13px 11px 5px;font-size:10px;letter-spacing:.1em;color:#92a6ba}
.nav {min-height:39px;padding:8px 11px;margin:1px 0;gap:11px;font-size:13px;font-weight:550;border:1px solid transparent;border-left:3px solid transparent;border-radius:var(--radius-sm);color:#b3c2d1}
.nav svg {width:17px;height:17px}
.nav:hover {background:#172638;border-color:#263b51;color:var(--text)}
.nav.active,.nav.active:hover {background:var(--accent-soft);border-color:#34567e;border-left-color:var(--accent);color:#dcecff}
.nav.active svg {color:var(--accent-hover)}
.nav .count {font-size:11px;border-radius:6px;background:var(--accent);color:white}
.sidebar-bottom {padding-top:10px}
.sidebar-bottom .pill {font-size:10px;letter-spacing:.045em}
.userblock {padding:12px 8px 0;gap:10px}
.userblock b {font-size:13px}
.userblock small {font-size:11px}
.sidebar .avatar {border-radius:10px;width:35px;height:35px}
.topbar {min-height:60px;height:auto;padding:10px 26px;background:rgba(12,19,28,.88);border-bottom:1px solid var(--border)}
.topbar .breadcrumb {font-size:13px}
.topbar .row {gap:8px}
.content {width:min(100%,1400px);max-width:1400px;padding:26px 28px 44px}
.pagehead {align-items:flex-end;gap:16px;margin-bottom:20px}
.pagehead h1 {margin:4px 0 7px}
.pagehead p {max-width:66ch;margin:0}
.sectionhead {margin-bottom:14px}
.sectionhead h2,.panel>h2 {font-size:17px}
.panel,.metric,.tourcard,.v6-command-main,.v6-command-side {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.panel {padding:20px 22px}
.panel>h2,.panel>h3 {margin-bottom:12px}
.grid2,.grid3,.columns {gap:14px}
.stack {gap:14px}
.metrics {gap:12px;margin:0 0 16px}
.metrics>div,.metric {padding:16px 18px;border-radius:var(--radius)}
.metrics .label {font-size:11px;color:#a9bbcc;letter-spacing:.055em}
.metrics .value,.metric .value {font-size:26px;line-height:1.15;margin:8px 0 5px}
.metrics .foot,.metric .foot {font-size:12px;line-height:1.4;color:var(--muted)}
.v6-command {gap:12px;margin-bottom:16px}
.v6-command-main {min-height:150px;padding:22px 24px;background:linear-gradient(110deg,#192d43,#122130 70%)}
.v6-command-main h2 {font-size:23px}
.v6-command-main p {color:#c0cfdd}
.v6-command-side {background:var(--border)}
.v6-fleet-stat {background:var(--surface);padding:13px 16px}
.v6-fleet-stat:first-child {background:#1a2b3e}
.v6-fleet-stat strong {font-size:20px}
.v6-fleet-stat small {font-size:12px;color:var(--muted)}
button {min-height:38px;padding:8px 13px;border:1px solid #3a4e63;border-radius:var(--radius-sm);background:#192635;color:var(--text);font-size:13px;font-weight:600;transition:background .16s,border-color .16s,transform .16s}
button:hover {background:#24374a;border-color:#58718b}
button.primary {padding:9px 16px;background:var(--accent);border-color:var(--accent);border-radius:var(--radius-sm);clip-path:none;color:#fff;font-weight:700}
button.primary:hover {background:var(--accent-hover);border-color:var(--accent-hover)}
button.small {min-height:32px;padding:5px 10px;font-size:12px}
button.link {background:transparent;border-color:transparent;color:#89bdff}
button.danger {background:rgba(172,64,78,.10);border-color:#8b5260;color:#ffc6cb}
button.danger:hover {background:rgba(172,64,78,.20);border-color:#b96b78}
button:disabled {opacity:.53;cursor:not-allowed;transform:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {outline:2px solid #8cc2ff;outline-offset:2px}
label {font-size:13px;font-weight:600;color:#d5e1ec;margin-bottom:7px}
input,select,textarea {min-height:39px;padding:9px 11px;border:1px solid #35495e;border-radius:var(--radius-sm);background:#0d1722;color:var(--text);font-size:13px}
input:hover,select:hover,textarea:hover {border-color:#58718b}
input:focus,select:focus,textarea:focus {border-color:var(--accent);outline:2px solid rgba(56,141,255,.18);outline-offset:0}
input:disabled,select:disabled,textarea:disabled {opacity:.6;cursor:not-allowed}
input[type=checkbox],input[type=radio] {min-height:0;accent-color:var(--accent)}
form {gap:14px}
.fieldgrid {gap:14px}
.pill {padding:5px 9px;border-radius:999px;background:#182433;border-color:#39506a;font-size:12px;font-weight:600;line-height:1.2}
.pill.good {background:rgba(68,161,117,.12);border-color:#39775a;color:var(--green)}
.pill.wait {background:rgba(190,147,53,.12);border-color:#806c3c;color:var(--yellow)}
.pill.bad {background:rgba(179,71,88,.12);border-color:#8c4d5b;color:var(--red)}
.pill.magenta {background:var(--accent-soft);border-color:#416998;color:#a9d0ff}
.empty {padding:32px 22px;border:1px dashed #4b6177;border-radius:var(--radius);background:rgba(20,34,49,.56);color:var(--muted);font-size:13px;line-height:1.6}
.empty strong {font-size:16px;margin-bottom:5px}
.notice {padding:13px 15px;border:1px solid #806a3e;border-radius:var(--radius-sm);background:#2b251b;color:#f3d893;font-size:13px;line-height:1.5}
.notification {padding:11px 14px;border:1px solid #365a7e;border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:#16263a;font-size:13px}
.tablewrap {overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
table {font-size:13px;font-variant-numeric:tabular-nums}
th {padding:10px 12px;background:#182636;color:#adc0d2;font-size:11px;letter-spacing:.065em;border-bottom-color:var(--border)}
td {padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:hover td {background:rgba(56,141,255,.06)}
.tourcard {padding:18px;transition:border-color .16s,background .16s,transform .16s}
.tourcard:hover {background:#192839;border-color:#4b6990;transform:translateY(-2px)}
.tourcard h3 {font-size:16px}
.route {margin:12px 0;border-left-color:#4d6682}
.route small {font-size:12px}
.progress {height:6px;background:#24364b}
.progress span {background:linear-gradient(90deg,var(--accent),#7eb8ff)}
.mapbox {border:1px solid var(--border);border-radius:var(--radius-sm)}
.tabs {gap:7px;flex-wrap:wrap}
.tabs button {border-radius:var(--radius-sm)}
.tabs .selected {background:var(--accent-soft);border-color:var(--accent);color:#c0dcff}
.dispatch-wizard {padding:23px 25px;margin-bottom:18px}
.dispatch-wizard>.between {align-items:flex-start}
.dispatch-wizard h2 {font-size:21px}
.dispatch-progress {gap:8px;margin:19px 0 22px}
.dispatch-progress li {min-height:48px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#0f1925;color:#adbdcc;font-size:12px;font-weight:600}
.dispatch-progress li>span {width:27px;height:27px;border-color:#58718b;background:#1b2a3a;color:#d9e8f6;font-size:12px;font-weight:700}
.dispatch-progress .current {background:var(--accent-soft);border-color:var(--accent);color:#e8f3ff}
.dispatch-progress .current>span {background:var(--accent);border-color:var(--accent);color:white}
.dispatch-progress .done {border-color:#3a6e5c;color:#b5e8ce}
.dispatch-progress .done>span {background:rgba(83,175,132,.15);border-color:#4f9871;color:#bbefda}
.dispatch-body {max-width:900px;gap:14px}
.dispatch-body h3 {font-size:19px}
.dispatch-fields {gap:15px}
.dispatch-summary {max-width:900px;padding:17px 18px;background:#152231;border:1px solid #33485f;border-radius:var(--radius-sm)}
.dispatch-open-mode {border-color:#3e6088;background:#16283b}
.dispatch-open-mode h3 {font-size:18px;margin-bottom:12px}
.dispatch-instructions {list-style:none;counter-reset:dispatch-step;padding:0;margin:0;display:grid;gap:9px}
.dispatch-instructions li {counter-increment:dispatch-step;position:relative;min-height:36px;padding:7px 8px 7px 47px;border:1px solid #30465c;border-radius:var(--radius-sm);background:#101e2e;color:#d8e5f1;line-height:1.45}
.dispatch-instructions li::before {content:counter(dispatch-step);position:absolute;left:10px;top:7px;display:grid;place-items:center;width:23px;height:23px;border:1px solid #4a81be;border-radius:7px;background:var(--accent-soft);color:#afd4ff;font-size:12px;font-weight:800}
.dispatch-check {gap:10px;font-size:13px;line-height:1.5}
.dispatch-check input {margin-top:3px}
.dispatch-actions {gap:9px;margin-top:11px}
.dispatch-actions .primary {padding:10px 17px}
.dispatch-details {max-width:950px;padding:14px 0;font-size:13px}
.dispatch-details summary,.dispatch-map summary {font-size:13px;font-weight:600;color:#bed1e4}
.dispatch-details[open]>summary {margin-bottom:11px}
.dispatch-loading-card {background:var(--surface);border-color:#5489c5;border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.dispatch-loading-card p {font-size:13px}
.login-art {background:radial-gradient(circle at 30% 35%,#1b385a,#101e30 53%,#0b111a 85%)}
.login-form {max-width:520px;padding:clamp(24px,4vw,56px)}
.login-form h2 {font-size:30px}
.login-footer,.login-art footer {font-size:12px}
dialog {border-radius:var(--radius);background:var(--surface);border-color:var(--border)}
dialog p {font-size:13px}
#toast {border-radius:var(--radius-sm);background:#1a2a3b;border-color:#4a6684}
.code {background:#0e1824;border:1px solid #2d4258;font-size:12px}
@media(max-width:1100px) {
  .shell {grid-template-columns:205px minmax(0,1fr)}
  .content {padding:22px}
  .metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .columns {grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px) {
  .shell {display:block}
  .sidebar {position:static;height:auto;padding:12px 14px 8px}
  .brand {margin:0 0 8px}
  .sidebar nav {display:flex;flex-direction:row;gap:5px;overflow-x:auto;overflow-y:hidden;padding:3px 0 8px}
  .nav {flex:0 0 auto;width:auto;min-height:36px;padding:6px 9px;white-space:nowrap}
  .navgroup,.sidebar-bottom {display:none}
  .topbar {padding:10px 15px;align-items:flex-start;flex-wrap:wrap;gap:8px}
  .topbar .row {gap:6px}
  .content {padding:18px 15px 34px}
  .pagehead {align-items:flex-start;flex-wrap:wrap}
  .pagehead h1 {font-size:25px}
  .panel {padding:17px}
  .grid2,.grid3,.columns,.fieldgrid {grid-template-columns:minmax(0,1fr)}
  .v6-command-main {padding:19px}
  .v6-command-side {grid-template-columns:repeat(2,minmax(0,1fr))}
  .v6-fleet-stat:first-child {grid-column:1/-1}
  .dispatch-wizard {padding:18px 15px}
  .dispatch-progress {grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .dispatch-progress li {display:grid;justify-items:center;align-content:center;gap:5px;padding:7px 2px;font-size:10px;text-align:center;line-height:1.2}
  .dispatch-progress li>span {width:25px;height:25px}
  .dispatch-actions>button {width:100%}
  .login {grid-template-columns:1fr}
  .login-art {min-height:130px;padding:22px}
  .login-form {padding:27px 20px}
  #toast {left:14px;right:14px;bottom:14px}
}
@media(max-width:430px) {
  .metrics,.v6-command-side {grid-template-columns:minmax(0,1fr)}
  .v6-fleet-stat:first-child {grid-column:auto}
  .dispatch-progress li {font-size:9px}
  .topbar .pill {white-space:normal}
}
@media(prefers-reduced-motion:reduce) {
  button,.tourcard {transition:none}
  .tourcard:hover {transform:none}
}

/* Adaptation des ressources du modèle à la navigation dynamique. */
.nav-icon {
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:grid;
  place-items:center;
}
.nav-icon img {
  display:block;
  width:25px;
  height:25px;
  object-fit:contain;
}

/* Photo de profil : même rendu dans la sidebar, le compte et les fiches chauffeur. */
img.avatar {
  display:block;
  object-fit:cover;
}
.profile-identity {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}
.profile-identity h3 {
  margin:0 0 4px;
}
.avatar.profile-avatar {
  width:78px;
  height:78px;
  flex:0 0 78px;
  border-radius:18px;
  font-size:22px;
}
.profile-photo-field {
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.018);
}
.profile-photo-field input[type="file"] {
  width:100%;
}
.profile-photo-field .note {
  margin:8px 0 11px;
}
.settings-toggle {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.018);
  cursor:pointer;
}
.settings-toggle input {
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:var(--accent);
}
.settings-toggle span {
  display:grid;
  gap:4px;
}
.settings-toggle small {
  color:var(--muted);
  line-height:1.45;
}

/* Chaque carte conserve la hauteur nécessaire à son propre contenu. */
.columns,
.grid2,
.grid3 {
  align-items:start;
}

/* Optional light palette. Without an explicit choice, the existing dark theme is unchanged. */
:root[data-theme="light"] {
  color-scheme:light;
  --background:#f1f5fa!important;
  --surface:#ffffff!important;
  --text:#172b42!important;
  --muted:#52677e!important;
  --border:#cbd7e4!important;
  --accent:#1765cf!important;
  --accent-hover:#1458b4;
  --accent-soft:rgba(23,101,207,.09);
  --surface-raised:#eaf1f9;
  --navy:#f1f5fa;--navy-2:#ffffff;--navy-3:#eaf1f9;
  --gold:var(--accent);--gold-light:var(--accent-hover);--gold-soft:var(--accent-soft);
  --green:#176b46;--yellow:#805600;--red:#b62b43;
  --v6-sidebar:#ffffff;--v6-blue-soft:var(--accent-soft);
  --shadow-card:0 6px 22px rgba(35,65,100,.07);
  --vtc-shadow:var(--shadow-card);
}
[data-theme="light"] body,[data-theme="light"] .main {background:var(--background)}
[data-theme="light"] .sidebar,[data-theme="light"] .topbar {background:var(--surface)}
[data-theme="light"] .userblock b {color:var(--text)}
[data-theme="light"] .avatar:not(img) {background:var(--surface-raised);border-color:var(--border);color:var(--accent)}
[data-theme="light"] .mapcaption {color:#a6b5c5}
[data-theme="light"] .nav,[data-theme="light"] .navgroup,[data-theme="light"] .metrics .label {color:var(--muted)}
[data-theme="light"] .nav.active,[data-theme="light"] .nav.active:hover {background:var(--accent-soft);border-color:#a3bee2;border-left-color:var(--accent);color:var(--accent)}
[data-theme="light"] .nav:not(.active):hover {background:var(--surface-raised);border-color:var(--border);color:var(--text)}
[data-theme="light"] .v6-command-main {background:linear-gradient(110deg,#e0edff,#f5f9ff)}
[data-theme="light"] .v6-command-main p {color:var(--muted)}
[data-theme="light"] .v6-fleet-stat:first-child {background:var(--surface-raised)}
[data-theme="light"] button:not(.primary):not(.nav):not(.link):not(.danger) {background:var(--surface-raised);border-color:var(--border);color:var(--text)}
[data-theme="light"] button:not(.primary):not(.nav):not(.link):not(.danger):hover {background:#dce8f7;border-color:#8faed1}
[data-theme="light"] button.link,[data-theme="light"] a {color:var(--accent)}
[data-theme="light"] button.danger {color:var(--red);background:#fff0f2;border-color:#e5a1ad}
[data-theme="light"] label {color:var(--text)}
[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea {background:var(--surface);border-color:var(--border);color:var(--text)}
[data-theme="light"] .pill {background:var(--surface-raised);border-color:var(--border);color:var(--muted)}
[data-theme="light"] .pill.good {background:#e9f6ef;border-color:#8cc3a5;color:var(--green)}
[data-theme="light"] .pill.wait {background:#fff7df;border-color:#d9bc71;color:var(--yellow)}
[data-theme="light"] .pill.bad {background:#fff0f2;border-color:#e5a1ad;color:var(--red)}
[data-theme="light"] .pill.magenta {background:var(--accent-soft);border-color:#a3bee2;color:var(--accent)}
[data-theme="light"] .empty {background:#f5f8fc;border-color:#a5b8cd;color:var(--muted)}
[data-theme="light"] .empty strong {color:var(--text)}
[data-theme="light"] .notice {background:#fff7df;border-color:#d9bc71;color:var(--yellow)}
[data-theme="light"] .notification {background:#eaf2ff;border-color:#a3bee2;border-left-color:var(--accent);color:var(--text)}
[data-theme="light"] th {background:var(--surface-raised);color:var(--muted)}
[data-theme="light"] .tourcard:hover {background:#f5f9ff;border-color:#8faed1}
[data-theme="light"] .progress {background:#dce6f2}
[data-theme="light"] .tabs .selected {color:var(--accent)}
[data-theme="light"] .dispatch-progress li,[data-theme="light"] .dispatch-progress li>span {background:var(--surface-raised);color:var(--muted);border-color:var(--border)}
[data-theme="light"] .dispatch-progress .current {background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
[data-theme="light"] .dispatch-progress .current>span {background:var(--accent);color:white}
[data-theme="light"] .dispatch-progress .done,[data-theme="light"] .dispatch-progress .done>span {background:#e9f6ef;color:var(--green);border-color:#8cc3a5}
[data-theme="light"] .dispatch-summary,[data-theme="light"] .dispatch-open-mode,[data-theme="light"] .dispatch-instructions li,[data-theme="light"] .code {background:var(--surface-raised);border-color:var(--border);color:var(--text)}
[data-theme="light"] .dispatch-instructions li::before,[data-theme="light"] .dispatch-details summary,[data-theme="light"] .dispatch-map summary {color:var(--accent)}
[data-theme="light"] #toast {background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="light"] .login-art {background-image:linear-gradient(rgba(241,245,250,.75),rgba(241,245,250,.85)),url('/body.png')!important}
[data-theme="light"] .login-art::after {background:linear-gradient(to right,transparent 75%,var(--background))}
[data-theme="light"] .topbar>.row {flex-wrap:wrap;justify-content:flex-end}