body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f7;
  color: #111827;
}
header {
  background: #111827;
  color: #f9fafb;
  padding: 1rem 1.5rem;
}
header.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.header-left{
  display:flex;
  align-items:center;
  gap: .75rem;
  min-width: 0;
}
.app-logo{
  /* Keep the header compact even if the logo file is very large */
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  display: block;
}
.app-title{
  margin: 0;
  font-size: 1.3rem;
  white-space: nowrap;
}
.header-nav{
  display:flex;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.header-nav a{ margin-right: 0; }
header h1 {
  margin: 0 0 .25rem 0;
  font-size: 1.3rem;
}
header nav a {
  color: #e5e7eb;
  text-decoration: none;
  margin-right: .75rem;
  font-size: .95rem;
}
header nav a:hover {
  text-decoration: underline;
}
main {
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 0 1rem 2rem;
}
section {
  background: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: .75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: .95rem;
}
table th, table td {
  border: 1px solid #e5e7eb;
  padding: .4rem .5rem;
}
table th {
  background: #f3f4f6;
}
form label {
  display: inline-flex;
  flex-direction: column;
  margin-right: 1rem;
  margin-bottom: .5rem;
  font-size: .9rem;
}
input[type="text"],
input[type="number"],
input[type="file"] {
  margin-top: .25rem;
  padding: .35rem .4rem;
  border-radius: .4rem;
  border: 1px solid #d1d5db;
  font-size: .9rem;
}
button {
  border-radius: .5rem;
  border: none;
  padding: .45rem .9rem;
  font-size: .9rem;
  cursor: pointer;
  background: #2563eb;
  color: white;
}
button:hover {
  background: #1d4ed8;
}

/* --- Route UI --- */
.card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1rem;
  margin-top: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: .75rem;
}

button.secondary {
  background: #374151;
}
button.secondary:hover {
  background: #1f2937;
}

.muted {
  color: #6b7280;
  font-size: .9rem;
  margin-top: .75rem;
}

.result {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed #d1d5db;
}

.map {
  width: 100%;
  height: 420px;
  border-radius: .75rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
}
footer {
  text-align: center;
  padding: 1rem;
  font-size: .8rem;
  color: #6b7280;
}


/* --- Table type Excel --- */
.table-wrap{
  /* On veut que tout tienne dans la colonne (2/3) sans barre horizontale */
  overflow-x:hidden;
  margin-top: .75rem;
}

/* Table Frais KM: forcer un rendu compact qui tient dans 2/3 écran */
#kmTable{
  table-layout: fixed;
  width: 100%;
}
#kmTable th, #kmTable td{
  padding: .3rem .35rem;
  font-size: .9rem;
}
/* Répartition des colonnes (100%) */
/* Répartition des colonnes (100%)
   -> on redonne un peu d'air à la colonne Actions pour voir "Suppr." */
#kmTable th:nth-child(1), #kmTable td:nth-child(1){ width: 12%; }
#kmTable th:nth-child(2), #kmTable td:nth-child(2){ width: 14%; }
#kmTable th:nth-child(3), #kmTable td:nth-child(3){ width: 18%; }
#kmTable th:nth-child(4), #kmTable td:nth-child(4){ width: 18%; }
#kmTable th:nth-child(5), #kmTable td:nth-child(5){ width: 5%; }
#kmTable th:nth-child(6), #kmTable td:nth-child(6){ width: 10%; }
#kmTable th:nth-child(7), #kmTable td:nth-child(7){ width: 9%; }
#kmTable th:nth-child(8), #kmTable td:nth-child(8){ width: 14%; }

/* Evite que le contenu pousse la colonne */
#kmTable th, #kmTable td{ overflow: hidden; }
#kmTable td:nth-child(8){ overflow: visible; word-break: normal; } /* actions */
#kmTable th, #kmTable td{ word-break: break-word; }
#kmTable td input, #kmTable td select{ min-width: 0; }

/* Actions compactes (et visibles même si la colonne est étroite) */
.row-actions{
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  justify-content: flex-start;
}
.row-actions button{
  padding: .35rem .55rem;
  font-size: .85rem;
  white-space: nowrap; /* évite l'écriture verticale lettre par lettre */
  word-break: normal;
}

/* Champs calculés non éditables: look "lecture seule" */
.km-table input[readonly]{
  background: #f3f4f6;
  color: #111827;
}

/* Champs identité non éditables sur /route */
.page-route-full input:disabled{
  background: #f3f4f6;
  color: #111827;
  opacity: 1; /* évite le gris trop clair des navigateurs */
}
.km-table input[type="text"],
.km-table input[type="number"],
.km-table input[type="date"],
.km-table select{
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.km-table th, .km-table td{
  vertical-align: top;
}
.km-table tfoot td{
  background:#f3f4f6;
}
a.button{
  display:inline-block;
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:.6rem;
  background:#111827;
  color:#fff;
}
a.button.secondary{ background:#374151; }
a.button:hover{ opacity:.92; }

.grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.grid-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
.error{ color:#b91c1c; }

/* --- Fullscreen route page --- */
.page-route-full header{ position: sticky; top:0; z-index: 50; }
.page-route-full main{
  max-width: none;
  margin: 0;
  padding: 0;
}
.page-route-full section{
  border-radius: 0;
  box-shadow: none;
  min-height: calc(100vh - 130px); /* header+footer approx */
}
.page-route-full .route-shell{
  display: grid;
  /* 2/3 formulaire, 1/3 carte (PC) */
  /* minmax(0, ..) empêche le contenu (table) de forcer une colonne trop large */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.page-route-full .route-shell > *{ min-width: 0; }
.page-route-full .route-shell .card{ margin-top: 0; }
.page-route-full .route-shell .card.map-card{
  height: auto;
  /* La carte "suit" le scroll : elle reste visible pendant la saisie */
  position: sticky;
  top: 92px; /* juste sous le header sticky */
}
/* Carte : plus compacte (sinon elle prend trop de place en hauteur sur PC) */
.page-route-full #map{
  width: 100%;
  /* s'adapte au viewport sans prendre tout l'écran */
  height: clamp(320px, calc(100vh - 520px), 460px);
}

@media (max-width: 1024px){
  .page-route-full .route-shell{ grid-template-columns: 1fr; }
  .page-route-full .route-shell .card.map-card{ position: static; top: auto; }
  .page-route-full #map{ height: 420px; }
}


.addr-field select { width: 100%; }
.addr-field input { width: 100%; }

/* --- Modal (Nom/Prénom) --- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal{
  width: min(520px, calc(100vw - 24px));
  background: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.modal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.modal-error{
  margin-top: 8px;
  color: #b91c1c;
  font-size: 13px;
}
@media (max-width: 640px){
  .modal-grid{ grid-template-columns: 1fr; }
}