/* ================================================================
   MT Gestion — App CSS  v3
   Designer critique : hiérarchie, micro-interactions, cohérence
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* Palette */
  --gold:     #C69C6D;
  --gold-d:   #A07840;
  --gold-l:   rgba(198,156,109,.10);
  --gold-b:   rgba(198,156,109,.22);
  --gold-g:   linear-gradient(135deg, #C69C6D 0%, #D4AA7D 100%);

  /* Surfaces */
  --bg:       #EEECEA;
  --surface:  #FFFFFF;
  --surface2: #F8F7F5;

  /* Sidebar */
  --sidebar:  #111111;
  --sidebar2: #1A1A1A;

  /* Texte */
  --t:        #18181B;
  --tm:       #52525B;
  --tl:       #A1A1AA;
  --t-inv:    rgba(255,255,255,.9);

  /* Bordures & ombres */
  --border:   rgba(0,0,0,.08);
  --border-m: rgba(0,0,0,.13);
  --sh:       0 1px 3px rgba(0,0,0,.05), 0 6px 24px rgba(0,0,0,.07);
  --sh2:      0 1px 2px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.05);
  --sh-lift:  0 4px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  --sh-gold:  0 4px 20px rgba(198,156,109,.30);

  /* Rayons */
  --r:        8px;
  --rl:       12px;
  --rxl:      16px;

  /* Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --tr:       .18s var(--ease);
  --tr-fast:  .12s var(--ease);

  /* Typo */
  --font:     'Inter', -apple-system, system-ui, sans-serif;

  /* Layout */
  --sidebar-w: 224px;
  --topbar-h:  58px;

  /* Statuts */
  --s-pending:   #F59E0B;
  --s-confirmed: #3B82F6;
  --s-ongoing:   #8B5CF6;
  --s-done:      #10B981;
  --s-cancelled: #EF4444;
  --s-partial:   #F97316;
  --s-paid:      #10B981;
  --s-off:       #9A9A9A;
}

body.mt-app {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--t);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Scrollbars globaux */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* ================================================================
   AUTH SCREEN
   ================================================================ */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #1E1714 0%, #0D0D0D 55%, #0A0A0A 100%);
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.auth::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(198,156,109,.08) 0%, transparent 70%);
  pointer-events: none;
}

.auth__card {
  background: linear-gradient(160deg, #1E1E1E 0%, #181818 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 32px 80px rgba(0,0,0,.6);
  position: relative;
}
.auth__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(198,156,109,.04) 0%, transparent 50%);
  pointer-events: none;
}

.auth__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.5rem;
}
.auth__logo svg { width: 36px; height: 36px; }
.auth__logo span {
  color: var(--gold);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .03em;
}
.auth__title {
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: .01em;
}

/* ── Formulaire de connexion ── */
.auth__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.auth__field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.auth__field label {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.auth__field input {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  color: rgba(255,255,255,.9);
  font-family: var(--font);
  font-size: .92rem;
  padding: .7rem .9rem;
  transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
  outline: none;
  width: 100%;
}
.auth__field input::placeholder { color: rgba(255,255,255,.22); }
.auth__field input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(198,156,109,.12);
}
.auth__field input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #1E1E1E inset;
  -webkit-text-fill-color: rgba(255,255,255,.9);
}

/* Champ mot de passe avec bouton œil */
.auth__pwd-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth__pwd-wrap input { padding-right: 2.6rem; }
.auth__eye {
  position: absolute;
  right: .7rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.3);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--tr-fast);
}
.auth__eye:hover { color: rgba(255,255,255,.65); }

.auth__error {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: #FCA5A5;
  font-size: .8rem;
  padding: 9px 14px;
  border-radius: var(--r);
}

.auth__submit {
  margin-top: .4rem;
  width: 100%;
  padding: .82rem;
  background: var(--gold);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 2px 16px rgba(198,156,109,.35);
  transition: background var(--tr), box-shadow var(--tr), transform var(--tr-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.auth__submit:hover  { background: var(--gold-d); box-shadow: var(--sh-gold); }
.auth__submit:active { transform: scale(.97); }
.auth__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-7px); }
  40%,80% { transform: translateX(7px); }
}

/* ================================================================
   APP LAYOUT
   ================================================================ */
.app {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform .28s var(--ease);
  border-right: 1px solid rgba(255,255,255,.04);
}

/* Scrollbar sidebar */
.sidebar__nav::-webkit-scrollbar { width: 3px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

.sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.1rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar__logo svg  { width: 28px; height: 28px; flex-shrink: 0; }
.sidebar__logo span { color: rgba(255,255,255,.92); font-weight: 600; font-size: .88rem; letter-spacing: .01em; }
.sidebar__close {
  display: none;
  background: none;
  border: none;
  color: var(--tl);
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.sidebar__close:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.sidebar__nav {
  flex: 1;
  padding: .75rem .65rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r);
  color: rgba(255,255,255,.44);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  transition: all var(--tr-fast);
  position: relative;
  letter-spacing: .01em;
}
.nav-item svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  transition: color var(--tr-fast);
}
.nav-item:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}
.nav-item.is-active {
  background: rgba(198,156,109,.12);
  color: var(--gold);
  font-weight: 600;
}
.nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
  margin-left: -5px; /* hors padding */
}

.nav-badge {
  margin-left: auto;
  background: var(--s-pending);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.sidebar__foot {
  padding: .65rem;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  color: rgba(255,255,255,.35);
  font-size: .77rem;
  border-radius: var(--r);
}
.user-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.user-dot.role-admin    { background: var(--gold); box-shadow: 0 0 5px rgba(198,156,109,.5); }
.user-dot.role-owner    { background: var(--gold); box-shadow: 0 0 5px rgba(198,156,109,.5); } /* rétrocompat */
.user-dot.role-employee { background: var(--s-confirmed); }
.user-dot.role-dispatch { background: var(--s-confirmed); } /* rétrocompat */
.user-dot.role-driver   { background: var(--s-pending); }
.user-dot.role-b2b      { background: #6366f1; }
#user-role-label { flex: 1; }
#btn-logout {
  background: none; border: none;
  color: rgba(255,255,255,.25);
  cursor: pointer; padding: 4px;
  border-radius: 5px;
  transition: color var(--tr-fast), background var(--tr-fast);
}
#btn-logout:hover { color: var(--s-cancelled); background: rgba(239,68,68,.08); }
#btn-logout svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Overlay mobile ---- */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 99;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ---- Main ---- */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Topbar ---- */
.topbar {
  height: var(--topbar-h);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__menu {
  display: none;
  background: none; border: none;
  color: var(--tm); cursor: pointer;
  padding: 6px;
  border-radius: var(--r);
  transition: background var(--tr-fast);
  -webkit-tap-highlight-color: transparent;
}
.topbar__menu:hover { background: var(--bg); }
.topbar__menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }
.topbar__title { font-size: .98rem; font-weight: 700; flex: 1; color: var(--t); letter-spacing: -.01em; }
.topbar__actions { display: flex; gap: 8px; align-items: center; }

/* ---- Content ---- */
.content { flex: 1; padding: 1.5rem; }

/* ================================================================
   COMPONENTS
   ================================================================ */

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--sh2);
  transition: box-shadow var(--tr), transform var(--tr);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.kpi::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity var(--tr);
}
.kpi:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }
.kpi__label {
  font-size: .7rem;
  color: var(--tl);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.kpi__val {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--t);
  line-height: 1;
  margin-bottom: .3rem;
  letter-spacing: -.02em;
}
.kpi__sub { font-size: .73rem; color: var(--tl); }
.kpi__val.gold   { color: var(--gold); }
.kpi__val.green  { color: var(--s-done); }
.kpi__val.red    { color: var(--s-cancelled); }
.kpi__val.amber  { color: var(--s-pending); }

/* EUR — ligne secondaire dans KPI et tableau */
.kpi__val .rev-eur,
.rev-eur {
  color: #3B82F6;
  font-size: .8em;
  opacity: .85;
}
.kpi__val br + .rev-eur,
.kpi__val .rev-eur { display: block; margin-top: .15em; }
.td-amount.rev-eur { color: #3B82F6; }

/* Section card */
.card-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  box-shadow: var(--sh2);
  overflow: clip;
}
.card-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.card-box__head h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--t);
  letter-spacing: -.01em;
}
.card-box__body { padding: 1.25rem; }

/* Grid layout */
.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--tr);
  text-decoration: none;
  font-family: var(--font);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.btn--primary {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 1px 3px rgba(198,156,109,.25);
}
.btn--primary:hover {
  background: var(--gold-d);
  border-color: var(--gold-d);
  box-shadow: var(--sh-gold);
  transform: translateY(-1px);
}

.btn--outline { background: transparent; color: var(--gold); border-color: var(--gold-b); }
.btn--outline:hover { background: var(--gold-l); border-color: var(--gold); }

.btn--ghost { background: transparent; color: var(--tm); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg); border-color: var(--border-m); color: var(--t); }

.btn--danger { background: transparent; color: var(--s-cancelled); border-color: rgba(239,68,68,.25); }
.btn--danger:hover { background: rgba(239,68,68,.06); border-color: var(--s-cancelled); }

.btn--sm { padding: 6px 12px; font-size: .72rem; }
.btn--icon { padding: 7px; border-radius: 7px; }

/* ---- Badges statut ---- */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .71rem; font-weight: 600;
  white-space: nowrap;
  letter-spacing: .02em;
}
.badge--pending   { background: rgba(245,158,11,.11);  color: #B45309; }
.badge--confirmed { background: rgba(59,130,246,.11);  color: #1D4ED8; }
.badge--ongoing   { background: rgba(139,92,246,.11);  color: #6D28D9; }
.badge--done      { background: rgba(16,185,129,.11);  color: #065F46; }
.badge--cancelled { background: rgba(239,68,68,.10);   color: #B91C1C; }
.badge--partial   { background: rgba(249,115,22,.11);  color: #C2410C; }
.badge--paid      { background: rgba(16,185,129,.11);  color: #065F46; }
.badge--available { background: rgba(16,185,129,.11);  color: #065F46; }
.badge--on_trip   { background: rgba(139,92,246,.11);  color: #6D28D9; }
.badge--off       { background: rgba(154,154,154,.10); color: var(--s-off); }
.badge--maintenance { background: rgba(249,115,22,.11); color: #C2410C; }
.badge--in_service  { background: rgba(139,92,246,.11); color: #6D28D9; }

/* ---- Table ---- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
thead tr { background: var(--surface2); }
thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tl);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--tm);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background var(--tr-fast); }
tbody tr:hover td { background: rgba(198,156,109,.04); }
td.name { color: var(--t); font-weight: 600; }
td.mono { font-family: 'SFMono-Regular', 'Consolas', monospace; font-size: .78rem; color: var(--tl); }
.tbl-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ---- Colonnes triables ---- */
.th-sort {
  cursor: pointer;
  user-select: none;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.th-sort:hover { color: var(--t); background: rgba(198,156,109,.08); }
.th-sort.is-sorted { color: var(--gold); }
.th-sort .th-sort-idle { opacity: .3; font-size: .65em; margin-left: 3px; }
.th-sort:not(.is-sorted)::after { content: ''; }
/* Indicateur actif : l'icône ↑ ou ↓ est inliné dans le texte du th */
.th-sort { gap: 4px; }

/* ---- Form ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .76rem; font-weight: 600; color: var(--tm); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  padding: 9px 12px;
  border: 1.5px solid var(--border-m);
  border-radius: var(--r);
  font-size: .85rem;
  font-family: var(--font);
  color: var(--t);
  background: var(--surface);
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
  line-height: 1.5;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,156,109,.13);
}
.field input:hover:not(:focus), .field select:hover:not(:focus), .field textarea:hover:not(:focus) {
  border-color: rgba(0,0,0,.18);
}
.field textarea { resize: vertical; min-height: 80px; }
.field-hint { font-size: .72rem; color: var(--tl); }

/* ---- Language tags ---- */
.lang-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 8px;
}
.lang-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  background: rgba(198,156,109,.12);
  border: 1px solid rgba(198,156,109,.3);
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--gold);
  white-space: nowrap;
}
.lang-tag__rm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: var(--gold);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  opacity: .6;
  transition: opacity var(--tr-fast), background var(--tr-fast);
}
.lang-tag__rm:hover { opacity: 1; background: rgba(198,156,109,.2); }
.lang-empty { font-size: .76rem; color: var(--tl); font-style: italic; }
.lang-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lang-add-row input {
  flex: 1;
  padding: 7px 10px;
  font-size: .82rem;
  border: 1.5px solid var(--border-m);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--td);
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.lang-add-row input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,156,109,.13);
}

/* ---- Toggle checkbox (bon reçu) ---- */
.toggle-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: .84rem;
  color: var(--td);
  user-select: none;
}
.toggle-check input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

/* ---- Section title dans les modals ---- */
.form-section-title {
  grid-column: 1 / -1;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tl);
  padding: .6rem 0 .2rem;
  border-bottom: 1px solid var(--border);
  margin-top: .25rem;
}

/* ---- Indicateur bon de dépense ---- */
.receipt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  cursor: default;
  padding: 0;
}
button.receipt-btn { cursor: pointer; }
.receipt-btn--file  { background: rgba(198,156,109,.12); color: var(--gold); }
.receipt-btn--file:hover { background: rgba(198,156,109,.25); }
.receipt-btn--ok    { background: rgba(34,197,94,.1);   color: var(--s-done); }
.receipt-btn--none  { background: rgba(0,0,0,.04);      color: var(--tl);     opacity: .5; }

/* ---- Filters bar ---- */
.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filters input, .filters select {
  padding: 7px 12px;
  border: 1.5px solid var(--border-m);
  border-radius: var(--r);
  font-size: .82rem;
  font-family: var(--font);
  background: var(--surface);
  color: var(--t);
  outline: none;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.filters input:focus, .filters select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,156,109,.13);
}
.filters input[type=search] { min-width: 200px; }

.filter-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px;
}
.filter-tab {
  padding: 5px 12px;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--tl); font-size: .77rem; font-weight: 500;
  cursor: pointer; transition: all var(--tr-fast); font-family: var(--font);
  white-space: nowrap;
}
.filter-tab.is-active {
  background: var(--surface);
  color: var(--t);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ---- Stats bar ---- */
.stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 1.5rem; }

/* ---- Empty state ---- */
.empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--tl);
}
.empty svg { width: 44px; height: 44px; opacity: .25; margin-bottom: 1rem; }
.empty p { font-size: .87rem; }

/* ================================================================
   FORM SECTIONS (driver form + toute autre form structurée)
   ================================================================ */
.form-section {
  border: 1.5px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
  margin-bottom: .75rem;
}
.form-section:last-child { margin-bottom: 0; }
.form-section__head {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2);
  padding: .5rem 1rem;
  font-size: .7rem; font-weight: 700;
  color: var(--tm);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--border);
}
.form-section__head svg { color: var(--gold); flex-shrink: 0; }
.form-section__body { padding: 1rem; }

/* Avertissement inline sous un champ (expiry) */
.field-warn {
  display: inline-block; margin-top: 4px;
  font-size: .72rem; font-weight: 600;
  color: #d97706; background: rgba(245,158,11,.1);
  padding: 2px 8px; border-radius: 8px;
}

/* Badge contract type */
.badge--contract { background: rgba(139,92,246,.1); color: #7c3aed; }

/* ================================================================
   DRIVER CARDS — vue RH
   ================================================================ */
.driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

.driver-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rxl);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--tr), border-color var(--tr);
}
.driver-card:hover { box-shadow: var(--sh-lift); }

/* ── Header ── */
.driver-card__head {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 1rem 1rem .75rem;
}
.driver-card__identity { flex: 1; min-width: 0; }
.driver-card__name {
  font-weight: 700; font-size: .92rem; color: var(--t);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.driver-card__sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: 5px;
}
.driver-card__anc { font-size: .71rem; color: var(--tl); }

/* Avatar avec indicateur de statut */
.driver-avatar {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .88rem;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
.driver-avatar--available { background: rgba(34,197,94,.15);  color: #16a34a; }
.driver-avatar--on_trip   { background: rgba(59,130,246,.15);  color: #2563eb; }
.driver-avatar--off       { background: rgba(245,158,11,.15);  color: #d97706; }
.driver-avatar--inactive  { background: rgba(100,116,139,.1);  color: var(--tl); }

.driver-avatar__dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2.5px solid var(--surface);
}
.driver-dot--available { background: #22c55e; }
.driver-dot--on_trip   { background: #3b82f6; }
.driver-dot--off       { background: #f59e0b; }
.driver-dot--inactive  { background: #9ca3af; }

/* ── Info rows ── */
.driver-card__info {
  flex: 1;
  padding: .6rem 1rem .75rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.driver-info-row {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; color: var(--tm);
  text-decoration: none; min-width: 0;
}
.driver-info-row svg { color: var(--tl); flex-shrink: 0; }
a.driver-info-row:hover { color: var(--gold); }
a.driver-info-row:hover svg { color: var(--gold); }
.driver-info-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-langs { display: flex; flex-wrap: wrap; gap: 4px; }
.driver-plate { font-family: monospace; font-size: .75rem; color: var(--tl); }

/* Langue chips (dans les cards) */
.lang-chip {
  display: inline-block;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 1px 7px;
  font-size: .71rem; color: var(--tm);
}

/* ── Stats bar ── */
.driver-card__stats {
  display: flex; border-top: 1px solid var(--border);
  background: var(--surface2);
}
.driver-stat {
  flex: 1;
  text-align: center;
  padding: .55rem .4rem;
  border-right: 1px solid var(--border);
}
.driver-stat:last-child { border-right: none; }
.driver-stat__val { font-size: .88rem; font-weight: 700; color: var(--t); line-height: 1.1; }
.driver-stat__lbl { font-size: .62rem; color: var(--tl); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Alerte documents */
.driver-stat--alerts {
  flex: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 3px;
  padding: .45rem .75rem; text-align: left;
}
.doc-badge {
  font-size: .71rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.doc-badge--expired { background: rgba(239,68,68,.13); color: #dc2626; }
.doc-badge--soon    { background: rgba(239,68,68,.09); color: #ef4444; }
.doc-badge--warn    { background: rgba(245,158,11,.12); color: #d97706; }
.doc-badge--missing { background: rgba(100,116,139,.10); color: #64748b; }

/* ── Status buttons ── */
.driver-card__foot {
  display: flex;
  border-top: 1px solid var(--border);
}
.driver-card__foot .rc-status-btn {
  flex: 1; border: none; border-radius: 0;
  border-right: 1px solid var(--border);
  padding: .55rem .2rem; font-size: .68rem;
}
.driver-card__foot .rc-status-btn:last-child { border-right: none; }

/* ── Avatar photo (dans les cards) ── */
.driver-avatar__img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Section photo (formulaire chauffeur) ── */
.driver-photo-section {
  display: flex;
  justify-content: center;
  padding: 1rem 0 .5rem;
  margin-bottom: .5rem;
}
.driver-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}
.driver-photo-ring {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.driver-photo-preview {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.driver-photo-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Ligne upload document (formulaire chauffeur) ── */
.doc-file-row { margin-top: .1rem; }
.doc-file-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: 5px;
}
.doc-upload-lbl {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.doc-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.doc-remove-btn {
  color: var(--tm);
  font-size: .74rem;
  transition: color var(--tr-fast);
}
.doc-remove-btn:hover { color: #dc2626; }
.doc-removed-label {
  font-size: .74rem;
  color: #d97706;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.doc-undo-btn {
  background: none; border: none; padding: 0;
  cursor: pointer;
  color: var(--gold);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: underline;
  font-style: normal;
}
.doc-undo-btn:hover { color: var(--gold-d); }
.doc-filename {
  font-size: .76rem;
  color: var(--tm);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* ---- Resource cards (chauffeurs / flotte) ---- */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.resource-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 1.25rem;
  box-shadow: var(--sh2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--tr), transform var(--tr);
}
.resource-card:hover { box-shadow: var(--sh-lift); transform: translateY(-2px); }
.resource-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resource-card__name { font-weight: 700; font-size: .95rem; color: var(--t); }
.resource-card__meta { font-size: .77rem; color: var(--tl); display: flex; flex-direction: column; gap: 3px; }
.resource-card__actions { display: flex; gap: 6px; }

/* ---- Calendar ---- */
.cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.cal-nav h3 { flex: 1; text-align: center; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-day-label {
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  color: var(--tl);
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.cal-cell {
  min-height: 82px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px;
  cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}
.cal-cell:hover { border-color: var(--gold-b); background: var(--gold-l); }
.cal-cell.is-today {
  border-color: var(--gold);
  background: rgba(198,156,109,.07);
}
.cal-cell.is-other { background: rgba(0,0,0,.02); }
.cal-cell.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-b);
}
.cal-day-num { font-size: .77rem; font-weight: 700; color: var(--tm); margin-bottom: 4px; height: 22px; display: flex; align-items: center; }
.cal-cell.is-today .cal-day-num {
  color: var(--gold);
  background: var(--gold-l);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
}
.cal-chip {
  font-size: .63rem;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.cal-chip.pending   { background: rgba(245,158,11,.13);  color: #92400E; }
.cal-chip.confirmed { background: rgba(59,130,246,.11);  color: #1D4ED8; }
.cal-chip.ongoing   { background: rgba(139,92,246,.11);  color: #5B21B6; }
.cal-chip.done      { background: rgba(16,185,129,.11);  color: #065F46; }
.cal-more { background: transparent; color: var(--tl); font-style: italic; padding-left: 2px; }

/* ---- Multi-day event bars ---- */
/*
 * Stratégie : chaque chip remplit sa cellule bord-à-bord (margin: 0 -6px).
 * Le gap de 3px entre cellules est comblé par box-shadow (pas d'overflow à gérer).
 * box-shadow rend au z-level du chip → passe au-dessus du gap sans clipping.
 */
.cal-cell { overflow: visible; position: relative; z-index: 0; }
.cal-cell:hover { z-index: 3; }

.cal-chip--md {
  display: block;
  font-weight: 700;
  font-size: .63rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;
  height: 18px;
  line-height: 14px;
  padding: 2px 9px;
  margin: 0 -7px 2px -7px;   /* bord-à-bord + couvre la bordure 1px de la cellule */
  border-radius: 0;
}

/* Couleurs + variable pour le box-shadow */
.cal-chip--md.pending   { background: #F59E0B; color: #fff; --md-c: #F59E0B; }
.cal-chip--md.confirmed { background: #3B82F6; color: #fff; --md-c: #3B82F6; }
.cal-chip--md.ongoing   { background: #8B5CF6; color: #fff; --md-c: #8B5CF6; }
.cal-chip--md.done      { background: #10B981; color: #fff; --md-c: #10B981; }
.cal-chip--md.cancelled { background: #94A3B8; color: #fff; --md-c: #94A3B8; }

/* Arrondi uniquement sur les extrémités extérieures */
.cal-chip--md-start { border-radius: 4px 0 0 4px; }
.cal-chip--md-end   { border-radius: 0 4px 4px 0; }

/* box-shadow comble le gap de 3px entre cellules — aucun débordement layout */
.cal-chip--md-start { box-shadow:  3px 0 0 0 var(--md-c); }
.cal-chip--md-mid   { box-shadow: -3px 0 0 0 var(--md-c), 3px 0 0 0 var(--md-c); }
.cal-chip--md-end   { box-shadow: -3px 0 0 0 var(--md-c); }

/* ---- Calendrier : cartes de réservation détaillées ---- */
.cal-booking-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .75rem .9rem;
  border-radius: var(--r);
  border-left: 3px solid var(--border-m);
  background: var(--surface2);
  margin-bottom: .5rem;
  transition: box-shadow var(--tr-fast);
}
.cal-booking-card:last-child { margin-bottom: 0; }
.cal-booking-card:hover { box-shadow: var(--sh2); }
.cal-booking-card--pending   { border-left-color: #f59e0b; }
.cal-booking-card--confirmed { border-left-color: #3b82f6; }
.cal-booking-card--ongoing   { border-left-color: #8b5cf6; }
.cal-booking-card--done      { border-left-color: #10b981; }
.cal-booking-card--cancelled { border-left-color: var(--border-m); opacity: .55; }

.cal-booking-card__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  flex-shrink: 0;
  gap: 4px;
}
.cal-booking-time {
  font-size: .9rem;
  font-weight: 800;
  color: var(--t);
  letter-spacing: -.01em;
}
.cal-booking-price {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}

.cal-booking-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-booking-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cal-booking-name {
  font-weight: 700;
  font-size: .84rem;
  color: var(--t);
}
.cal-booking-service {
  font-size: .72rem;
  color: var(--tm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}

.cal-detail-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: var(--tm);
  flex-wrap: wrap;
}
.cal-detail-row svg { flex-shrink: 0; color: var(--tl); }

.cal-route {
  color: var(--t);
  font-size: .78rem;
  flex-wrap: nowrap;
  overflow: hidden;
}
.cal-route__from, .cal-route__to {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  font-weight: 500;
}
.cal-route__arrow { flex-shrink: 0; color: var(--gold); font-weight: 700; }
.cal-plate {
  display: inline-block;
  font-size: .68rem;
  background: var(--surface);
  border: 1px solid var(--border-m);
  border-radius: 3px;
  padding: 0 5px;
  font-family: monospace;
  color: var(--tm);
  margin-left: 2px;
}

.cal-booking-card__actions {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}

/* ---- Chart container ---- */
.chart-wrap { position: relative; height: 240px; }

/* ---- Expense category badges (legacy .cat-* — toujours utilisés par fmt.catBadge) ---- */
.cat-fuel        { background: rgba(239,68,68,.09);    color: #B91C1C; }
.cat-maintenance { background: rgba(249,115,22,.09);   color: #C2410C; }
.cat-insurance   { background: rgba(59,130,246,.09);   color: #1D4ED8; }
.cat-vignette    { background: rgba(139,92,246,.09);   color: #6D28D9; }
.cat-visite_tech { background: rgba(6,182,212,.09);    color: #0e7490; }
.cat-toll        { background: rgba(245,158,11,.09);   color: #B45309; }
.cat-parking     { background: rgba(14,165,233,.09);   color: #0369a1; }
.cat-salary      { background: rgba(16,185,129,.09);   color: #065F46; }
.cat-cnss        { background: rgba(34,197,94,.09);    color: #15803d; }
.cat-commission  { background: rgba(168,85,247,.09);   color: #7e22ce; }
.cat-phone       { background: rgba(99,102,241,.09);   color: #4338ca; }
.cat-rent        { background: rgba(120,113,108,.09);  color: #57534e; }
.cat-bank_fees   { background: rgba(220,38,38,.09);    color: #991b1b; }
.cat-taxes       { background: rgba(225,29,72,.09);    color: #9f1239; }
.cat-marketing   { background: rgba(124,58,237,.09);   color: #5b21b6; }
.cat-other       { background: rgba(148,163,184,.09);  color: #64748b; }

/* ── Dépenses — toolbar & filtres ── */
.exp-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 1rem;
}
.exp-filters-group {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1;
}
.exp-filter-input {
  height: 36px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--t);
  font-size: .82rem; font-family: var(--font);
}
.exp-search-wrap {
  position: relative; display: flex; align-items: center; flex: 1; min-width: 180px;
}
.exp-search-wrap svg { position: absolute; left: 10px; color: var(--tl); pointer-events: none; }
.exp-search-inp {
  width: 100%; padding: 0 10px 0 34px; height: 36px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--t); font-size: .82rem;
  font-family: var(--font);
}
.exp-search-inp:focus { outline: none; border-color: var(--primary); }

/* ── Dépenses — bandeau carburant ── */
.exp-fuel-banner {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15);
  border-radius: 10px; padding: .6rem 1rem; margin-bottom: .9rem;
  font-size: .8rem; color: #b91c1c;
}
.exp-fuel-item { display: inline-flex; align-items: center; gap: 5px; }
.exp-fuel-sep  { color: rgba(185,28,28,.4); font-size: 1.1rem; line-height: 1; }

/* ── Dépenses — répartition par catégorie ── */
.exp-breakdown-box { margin-bottom: .9rem; }
.exp-breakdown-body { padding: .6rem 1rem .8rem; }
.exp-bar-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 7px; cursor: pointer;
  transition: background var(--tr-fast); margin-bottom: 3px;
}
.exp-bar-row:hover { background: var(--bg); }
.exp-bar-row.is-active { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--border-m); }
.exp-bar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
}
.exp-bar-label { font-size: .78rem; color: var(--t); flex-shrink: 0; min-width: 140px; }
.exp-bar-track { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; min-width: 60px; }
.exp-bar-fill  { height: 100%; border-radius: 3px; transition: width .4s ease; }
.exp-bar-amt   { font-size: .78rem; font-weight: 600; color: var(--t); white-space: nowrap; min-width: 90px; text-align: right; }
.exp-bar-pct   { font-size: .72rem; color: var(--tl); min-width: 30px; text-align: right; }
.exp-active-filter {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px; color: var(--tm);
}
.exp-active-filter button { background:none;border:none;cursor:pointer;color:var(--tl);padding:0;line-height:1; }

/* ── Dépenses — tableau enrichi ── */
.exp-table .exp-date-cell { white-space: nowrap; font-size: .8rem; color: var(--tm); }
.exp-cat-cell { display: flex; align-items: center; gap: 6px; }
.exp-cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
}
.exp-cat-lbl { font-size: .75rem; white-space: nowrap; color: var(--tm); }
.exp-desc-main { font-size: .82rem; color: var(--t); }
.exp-desc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.exp-supplier, .exp-ref {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; color: var(--tl);
}
.exp-fuel-tag {
  display: inline-flex; align-items: center;
  font-size: .67rem; font-weight: 600; padding: 1px 6px; border-radius: 4px;
  background: rgba(239,68,68,.08); color: #b91c1c;
}
.exp-veh-cell { font-size: .78rem; color: var(--tl); }
.exp-amt-cell { font-size: .9rem; font-weight: 700; }
.exp-pm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 500; white-space: nowrap;
}

/* ── Dépenses — formulaire enrichi ── */
.exp-form-section-label {
  grid-column: 1/-1; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tl); padding-top: .4rem;
  border-top: 1px solid var(--border); margin-top: .2rem;
}
.exp-form-section-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.exp-amount-wrap { display: flex; gap: 6px; }
.exp-amount-wrap input { flex: 1; }
.exp-currency-sel { width: 72px; padding: 0 6px; }
.exp-fuel-section { background: rgba(239,68,68,.04); border: 1px dashed rgba(239,68,68,.25); border-radius: 8px; padding: .75rem 1rem; }
.exp-fuel-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.exp-fuel-total { height: 36px; display: flex; align-items: center; font-weight: 700; color: #b91c1c; font-size: .9rem; }

@media (max-width: 540px) {
  .exp-fuel-fields { grid-template-columns: 1fr 1fr; }
  .exp-bar-label { min-width: 100px; }
  .exp-bar-amt   { min-width: 70px; font-size: .72rem; }
  .exp-filter-input { width: 100%; }
}

/* ---- Toast ---- */
#toast-container {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 9999;
  display: flex; flex-direction: column;
  gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,20,20,.97);
  color: #fff;
  padding: 12px 16px;
  border-radius: 11px;
  font-size: .82rem;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.22);
  border-left: 3px solid var(--gold);
  animation: slideUp .22s var(--ease);
  max-width: 320px;
  backdrop-filter: blur(4px);
}
.toast.success { border-color: var(--s-done); }
.toast.error   { border-color: var(--s-cancelled); }
.toast.warning { border-color: var(--s-pending); }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: overlayIn .2s var(--ease);
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border-radius: var(--rxl);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 16px rgba(0,0,0,.08), 0 32px 80px rgba(0,0,0,.2);
  animation: modalIn .22s var(--ease);
  border: 1px solid var(--border);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  border-radius: var(--rxl) var(--rxl) 0 0;
}
.modal__title { font-size: .97rem; font-weight: 700; color: var(--t); letter-spacing: -.01em; }
.modal__close {
  background: none; border: none;
  color: var(--tl); cursor: pointer; padding: 5px;
  border-radius: var(--r); transition: all var(--tr-fast);
}
.modal__close:hover { background: var(--bg); color: var(--t); }
.modal__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }
.modal__body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.modal__foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface2);
  border-radius: 0 0 var(--rxl) var(--rxl);
}

/* ================================================================
   LOCATION COMBOBOX — champ de saisie de lieu avec dropdown custom
   ================================================================ */
.loc-combobox { position: relative; }

.loc-combobox__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.loc-combobox__pin {
  position: absolute;
  left: 10px;
  width: 15px; height: 15px;
  color: var(--tl);
  pointer-events: none;
  flex-shrink: 0;
  transition: color var(--tr-fast);
}
.loc-combobox__input:focus ~ .loc-combobox__pin,
.loc-combobox__wrap:focus-within .loc-combobox__pin { color: var(--gold); }

.loc-combobox__input {
  width: 100%;
  padding-left: 32px !important;
  padding-right: 30px !important;
}

.loc-combobox__clear {
  position: absolute;
  right: 8px;
  background: none; border: none;
  color: var(--tl); cursor: pointer;
  padding: 4px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.loc-combobox__clear:hover { background: var(--bg); color: var(--t); }

/* ── Dropdown ── */
.loc-combobox__dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-m);
  border-radius: var(--rl);
  box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.14);
  z-index: 300;
  max-height: 288px;
  overflow-y: auto;
  overflow-x: hidden;
  animation: ddIn .14s var(--ease);
}
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Catégorie header */
.loc-dd-cat {
  padding: 8px 12px 4px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tl);
  user-select: none;
  /* Sticky header dans le scroll */
  position: sticky; top: 0;
  background: var(--surface);
  z-index: 1;
}
.loc-dd-cat:not(:first-child) { border-top: 1px solid var(--border); margin-top: 2px; }

/* Option */
.loc-dd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background var(--tr-fast);
  border-radius: 0;
  user-select: none;
}
.loc-dd-opt:hover,
.loc-dd-opt.is-focused { background: var(--gold-l); }

.loc-dd-opt__body { flex: 1; min-width: 0; }
.loc-dd-opt__name {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-dd-opt__addr {
  display: block;
  font-size: .74rem;
  color: var(--tl);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.loc-dd-opt__count {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  color: var(--tl);
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 6px;
}

/* Highlight de correspondance */
.loc-hl {
  background: rgba(198,156,109,.22);
  color: var(--gold-d);
  border-radius: 2px;
  font-style: normal;
}

/* Message vide */
.loc-dd-empty {
  padding: 14px 16px;
  font-size: .82rem;
  color: var(--tl);
  text-align: center;
  font-style: italic;
}

/* Footer du dropdown (texte libre + sauvegarder) */
.loc-dd-footer {
  border-top: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 0 0 var(--rl) var(--rl);
  overflow: hidden;
}
.loc-dd-opt--freetext {
  font-size: .82rem;
  color: var(--tm);
  gap: 6px;
}
.loc-dd-opt--freetext strong { color: var(--t); font-weight: 600; }
.loc-dd-opt--save {
  font-size: .82rem;
  color: var(--gold-d);
  gap: 6px;
  border-top: 1px solid var(--border);
}
.loc-dd-opt--save strong { font-weight: 700; }
.loc-dd-opt--save:hover,
.loc-dd-opt--save.is-focused { background: rgba(198,156,109,.12); }

/* ================================================================
   ENTITY COMBOBOX (chauffeur / véhicule / partenaire)
   ================================================================ */

.ent-combobox { position: relative; }

/* Le wrapper porte la bordure — l'input est transparent à l'intérieur */
.ent-combobox__wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px 0 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  cursor: text;
}
.ent-combobox__wrap:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,156,109,.13);
}

/* Icône loupe — flex child, pas de position absolute */
.ent-combobox__icon {
  flex-shrink: 0;
  color: var(--tl);
  pointer-events: none;
  display: block;
  transition: color var(--tr-fast);
}
.ent-combobox__wrap:focus-within .ent-combobox__icon { color: var(--gold); }

/* Input sans bordure propre — transparent, hérite du wrapper.
   Spécificité (0,2,0) > .field input (0,1,1) → override garanti. */
.ent-combobox__wrap .ent-combobox__input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  font-size: .85rem;
  font-family: inherit;
  color: var(--t);
}
.ent-combobox__wrap .ent-combobox__input:focus,
.ent-combobox__wrap .ent-combobox__input:hover:not(:focus) {
  border: none;
  box-shadow: none;
}
.ent-combobox__wrap .ent-combobox__input::placeholder { color: var(--tl); }

/* Bouton effacer */
.ent-combobox__clear {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--tl);
  transition: all var(--tr-fast);
}
.ent-combobox__clear:hover { background: var(--surface2); color: var(--t); }

/* ── Dropdown ── */
.ent-combobox__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rl);
  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  animation: dropIn .14s var(--ease);
}

/* Option row */
.ent-dd-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: .84rem;
  color: var(--t);
  transition: background var(--tr-fast);
}
.ent-dd-opt:hover,
.ent-dd-opt.is-focused { background: var(--surface2); }

.ent-dd-opt__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ent-dd-opt__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-dd-opt__sub {
  font-size: .74rem;
  color: var(--tl);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status dot */
.ent-dd-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ent-dd-status--available   { background: #22c55e; }
.ent-dd-status--on_trip     { background: #3b82f6; }
.ent-dd-status--off         { background: #f59e0b; }
.ent-dd-status--in_service  { background: #3b82f6; }
.ent-dd-status--maintenance { background: #f59e0b; }

/* "Create new" footer option */
.ent-dd-footer {
  border-top: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 0 0 var(--rl) var(--rl);
  overflow: hidden;
}
.ent-dd-opt--create {
  font-size: .82rem;
  color: var(--gold-d);
  font-weight: 600;
  letter-spacing: .01em;
}
.ent-dd-opt--create:hover,
.ent-dd-opt--create.is-focused { background: rgba(198,156,109,.12); }

/* ---- Sub-modal (création inline au-dessus du modal principal) ---- */
.submodal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 700; /* > modal z-index 500 */
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: overlayIn .18s var(--ease);
}
.submodal {
  background: var(--surface);
  border-radius: var(--rxl);
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 20px rgba(0,0,0,.12), 0 32px 80px rgba(0,0,0,.28);
  animation: modalIn .2s var(--ease);
  border: 1px solid var(--border);
}
.submodal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  border-radius: var(--rxl) var(--rxl) 0 0;
}
.submodal__title { font-size: .92rem; font-weight: 700; color: var(--t); }
.submodal__close {
  background: none; border: none;
  color: var(--tl); cursor: pointer; padding: 5px;
  border-radius: var(--r); transition: all var(--tr-fast);
}
.submodal__close:hover { background: var(--bg); color: var(--t); }
.submodal__close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }
.submodal__body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.submodal__foot {
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--surface2);
  border-radius: 0 0 var(--rxl) var(--rxl);
}

/* ---- Field with inline add button ---- */
.field-with-add {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.field-with-add input,
.field-with-add select {
  flex: 1;
  min-width: 0;
}
.btn-add-inline {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--gold);
  background: var(--gold-l);
  color: var(--gold);
  border-radius: var(--r);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
  line-height: 1;
}
.btn-add-inline:hover {
  background: var(--gold);
  color: #fff;
}

/* ================================================================
   LOCATIONS — Vue gestion des lieux favoris
   ================================================================ */

/* Badges catégorie */
.loc-cat { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.loc-cat--airport { background: rgba(59,130,246,.10);  color: #2563EB; }
.loc-cat--hotel   { background: rgba(198,156,109,.12); color: var(--gold-d); }
.loc-cat--station { background: rgba(139,92,246,.10);  color: #7C3AED; }
.loc-cat--city    { background: rgba(16,185,129,.10);  color: #059669; }
.loc-cat--other   { background: rgba(0,0,0,.05);       color: var(--tl); }

/* Lignes du tableau */
.loc-row--unused  { opacity: .6; }
.loc-row--dupe    { background: rgba(245,158,11,.04); }
.loc-name         { font-weight: 600; font-size: .88rem; color: var(--t); }
.loc-notes        { font-size: .75rem; color: var(--tl); margin-top: 2px; }
.loc-address      { font-size: .8rem; color: var(--tm); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-zero         { color: var(--tl); font-size: .8rem; }
.loc-dupe-warn    { font-size: .72rem; color: #D97706; margin-top: 3px; }

/* Avertissement similaire dans les formulaires */
.loc-similar-warn {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 6px;
  font-size: .76rem;
  color: #92400E;
}

/* Info usage dans le formulaire d'édition */
.loc-usage-info {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 8px;
  font-size: .8rem; color: var(--tm);
}
.loc-usage-info svg { flex-shrink: 0; color: #3B82F6; }

/* Sélecteur de lieu existant (quick-add doublon) */
.loc-existing-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast);
  font-size: .86rem; color: var(--t);
}
.loc-existing-btn:hover { border-color: var(--gold); background: var(--gold-l); }
.loc-existing-btn strong { flex: 1; }

/* Dialogue de fusion */
.loc-merge-wrap { padding: 0; }
.loc-merge-intro { font-size: .84rem; color: var(--tm); margin-bottom: 1rem; }
.loc-merge-opts { display: grid; gap: 10px; }
.loc-merge-opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.loc-merge-opt input[type="radio"] { margin-top: 3px; accent-color: var(--gold); }
.loc-merge-card {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--tr-fast);
}
.loc-merge-opt input:checked ~ .loc-merge-card { border-color: var(--gold); background: var(--gold-l); }
.loc-merge-card__name { font-weight: 700; font-size: .9rem; color: var(--t); }
.loc-merge-card__meta { font-size: .75rem; color: var(--tl); margin-top: 3px; }
.loc-merge-card__addr { font-size: .75rem; color: var(--tm); margin-top: 3px; }

/* ---- Loading ---- */
.loading-spinner {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem;
}
.spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Booking detail row ---- */
.detail-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
  font-size: .7rem; color: var(--tl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  width: 120px; flex-shrink: 0; padding-top: 2px;
}
.detail-value { font-size: .85rem; color: var(--t); flex: 1; line-height: 1.5; }

/* ---- Upcoming bookings ---- */
.upcoming-date-sep {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tl);
  padding: 8px 0 4px; margin-top: 4px;
  border-top: 1px solid var(--border);
}
.upcoming-date-sep:first-child { border-top: none; margin-top: 0; }
.upcoming-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-time {
  font-size: .73rem; font-weight: 800; color: var(--gold);
  width: 48px; flex-shrink: 0; text-align: center;
  background: var(--gold-l);
  border: 1px solid var(--gold-b);
  border-radius: 7px; padding: 4px 6px;
  letter-spacing: .02em;
}
.upcoming-info { flex: 1; }
.upcoming-name { font-weight: 600; font-size: .87rem; color: var(--t); }
.upcoming-meta { font-size: .75rem; color: var(--tl); margin-top: 2px; }

/* ---- Settings sections ---- */
.settings-section { margin-bottom: 2rem; }
.settings-section h3 {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tl); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* ---- Report table ---- */
.report-tbl { font-size: .82rem; }
.report-tbl tfoot td {
  font-weight: 700; border-top: 2px solid var(--border-m);
  color: var(--t); background: var(--surface2);
}

/* ---- Page header ---- */
.page-head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem; gap: 12px;
}
.page-head h2 {
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--t);
}

/* ---- Source badges ---- */
.badge--direct { background: rgba(16,185,129,.10);  color: #065F46; }
.badge--b2b    { background: rgba(59,130,246,.11);  color: #1D4ED8; }
.badge--driver { background: rgba(139,92,246,.11);  color: #6D28D9; }

/* ---- Payment method badges ---- */
.badge--cash     { background: rgba(16,185,129,.10); color: #065F46; }
.badge--transfer { background: rgba(59,130,246,.10); color: #1D4ED8; }
.badge--website  { background: rgba(139,92,246,.10); color: #6D28D9; }

/* ---- Luggage badge (carte booking) ---- */
.bk-luggage-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(120,113,108,.10);
  color: #57534e;
  font-size: .72rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
}
.bk-pax-row {
  display: flex;
  align-items: center;
  color: var(--tm);
  font-size: .78rem;
}

/* ---- Dynamic list (passagers, dossiers) ---- */
.dynamic-list { display: flex; flex-direction: column; gap: 6px; }
.dynamic-item { display: flex; gap: 6px; align-items: center; }
.dynamic-item input { flex: 1; }
.dynamic-item .btn-remove {
  background: none; border: none;
  color: var(--s-cancelled); cursor: pointer;
  font-size: 1rem; padding: 2px 6px; line-height: 1;
  border-radius: 5px; flex-shrink: 0;
  transition: background var(--tr-fast);
}
.dynamic-item .btn-remove:hover { background: rgba(239,68,68,.08); }
.btn-add-item {
  background: none; border: none;
  color: var(--gold); font-size: .8rem; font-weight: 600;
  cursor: pointer; padding: 4px 0; text-align: left;
  font-family: var(--font);
  transition: color var(--tr-fast);
}
.btn-add-item:hover { color: var(--gold-d); }

/* ---- B2B section ---- */
.b2b-fields {
  grid-column: 1 / -1;
  background: rgba(59,130,246,.03);
  border: 1px solid rgba(59,130,246,.13);
  border-radius: var(--rl);
  padding: 1.1rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.b2b-fields .field.full { grid-column: 1/-1; }

/* ---- Setup time ---- */
.setup-time-badge {
  font-size: .7rem; font-weight: 700;
  background: rgba(245,158,11,.09); color: #B45309;
  padding: 2px 8px; border-radius: 4px;
  margin-left: 6px;
  border: 1px solid rgba(245,158,11,.2);
}

/* ---- Invoice status badges ---- */
.inv-status-draft     { background: rgba(154,154,154,.09); color: #71717A; }
.inv-status-sent      { background: rgba(59,130,246,.10);  color: #1D4ED8; }
.inv-status-paid      { background: rgba(16,185,129,.10);  color: #065F46; }
.inv-status-cancelled { background: rgba(239,68,68,.10);   color: #B91C1C; }

/* ---- Print ---- */
@media print {
  body * { visibility: hidden; }
  #print-zone, #print-zone * { visibility: visible; }
  #print-zone {
    position: fixed; inset: 0;
    background: white; padding: 2.5cm;
    font-family: 'Inter', sans-serif; font-size: 12pt; color: #000;
  }
  /* Feuille de route */
  #route-sheet-content, #route-sheet-content * { visibility: visible; }
  #modal-overlay { visibility: visible !important; background: white !important; }
  #modal-overlay .modal { box-shadow: none; border: none; width: 100%; max-width: 100%; }
  #modal-overlay .modal-foot { display: none; }
  .no-print { display: none !important; }
}

/* ================================================================
   HISTORIQUE D'AUDIT (formulaire réservation)
   ================================================================ */
.bk-history-details { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.bk-history-summary {
  padding: .55rem .85rem; font-size: .78rem; font-weight: 600; cursor: pointer;
  background: var(--bg2); color: var(--tl); user-select: none; list-style: none;
}
.bk-history-summary::-webkit-details-marker { display: none; }
.bk-history-summary::before { content: '▶ '; font-size: .65rem; }
details[open] .bk-history-summary::before { content: '▼ '; }
.bk-history-body { padding: .5rem .85rem; max-height: 260px; overflow-y: auto; }
.bk-history-loading, .bk-history-empty { font-size: .78rem; color: var(--tl); padding: .5rem 0; }
.bk-hist-entry {
  padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .76rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.bk-hist-entry:last-child { border-bottom: none; }
.bk-hist-action { font-weight: 700; padding: 1px 6px; border-radius: 3px; font-size: .68rem; }
.bk-hist-action--create  { background: rgba(16,185,129,.15); color: #059669; }
.bk-hist-action--update  { background: rgba(59,130,246,.12); color: #2563EB; }
.bk-hist-action--delete  { background: rgba(239,68,68,.12);  color: #DC2626; }
.bk-hist-action--restore { background: rgba(245,158,11,.15); color: #D97706; }
.bk-hist-user { font-weight: 600; color: var(--t); }
.bk-hist-date { color: var(--tl); margin-left: auto; font-size: .7rem; }
.bk-hist-detail { width: 100%; color: var(--t); font-size: .72rem; line-height: 1.5; padding-left: 4px; }
.bk-hist-field  { font-weight: 600; }
.bk-hist-detail s { color: var(--tl); }
.bk-hist-detail b { color: var(--t); }

/* ================================================================
   CORBEILLE (trash modal)
   ================================================================ */

/* ================================================================
   VUE SEMAINE CALENDRIER
   ================================================================ */
.cal-view-toggle {
  display: flex; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-left: 6px; flex-shrink: 0;
}
.cal-vtog {
  padding: 4px 10px; font-size: .73rem; font-weight: 600; background: none;
  border: none; cursor: pointer; color: var(--tl); transition: background var(--tr-fast);
}
.cal-vtog:hover   { background: var(--bg2); }
.cal-vtog--active { background: var(--gold); color: #fff; }

.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--border);
  min-height: 400px;
}
.cal-week-col {
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.cal-week-col--today  { background: rgba(198,156,109,.05); }
.cal-week-col--wkd .cal-week-col__head { background: rgba(0,0,0,.025); }

.cal-week-col__head {
  padding: 6px 8px; text-align: center; cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg2);
}
.cal-week-col__head:hover { background: var(--gold-l); }
.cal-week-day { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--tl); letter-spacing: .05em; }
.cal-week-num { font-size: .88rem; font-weight: 800; color: var(--t); }
.cal-week-num.is-today { background: var(--gold); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.cal-week-badge { font-size: .6rem; font-weight: 700; background: var(--gold); color: #fff; border-radius: 10px; padding: 0 5px; }

.cal-week-col__body { flex: 1; padding: 4px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.cal-week-empty { font-size: .7rem; color: var(--border); text-align: center; padding: 8px 0; }

.cal-week-item {
  padding: 4px 6px; border-radius: 4px; cursor: pointer;
  border-left: 3px solid currentColor; background: rgba(0,0,0,.04);
  font-size: .7rem; transition: opacity var(--tr-fast);
}
.cal-week-item:hover { opacity: .8; }
.cal-week-item__time { font-weight: 800; display: block; font-size: .65rem; color: var(--gold); }
.cal-week-item__name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--t); }
.cal-week-item__drv  { display: block; font-size: .62rem; color: var(--tl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Couleurs statut dans vue semaine */
.cal-week-item.pending    { border-color: var(--s-pending);   }
.cal-week-item.confirmed  { border-color: var(--s-confirmed); }
.cal-week-item.done       { border-color: var(--s-done);      }
.cal-week-item.cancelled  { border-color: var(--s-cancelled); opacity: .55; }

@media (max-width: 700px) {
  .cal-week-grid { grid-template-columns: repeat(7, minmax(80px,1fr)); overflow-x: auto; }
  .cal-week-item__drv { display: none; }
}

/* ================================================================
   FEUILLE DE ROUTE
   ================================================================ */
.route-sheet { font-size: .85rem; }
.rs-header {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: 1rem;
}
.rs-header__date { font-size: 1.1rem; font-weight: 800; }
.rs-header__count { font-size: .78rem; color: var(--tl); }

.rs-driver-block {
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.rs-driver-name {
  background: var(--bg2); padding: .45rem .75rem;
  font-size: .78rem; font-weight: 700; color: var(--t);
  border-bottom: 1px solid var(--border);
}

.rs-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
}
.rs-item:last-child { border-bottom: none; }
.rs-item__time {
  font-size: .82rem; font-weight: 800; color: var(--gold);
  width: 46px; flex-shrink: 0; text-align: center;
  background: var(--gold-l); border-radius: 5px; padding: 3px 0;
}
.rs-item__body { flex: 1; min-width: 0; }
.rs-item__client { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.rs-item__client strong { font-size: .87rem; }
.rs-phone, .rs-pax { font-size: .74rem; color: var(--tl); }
.rs-item__route { font-size: .78rem; color: var(--t); margin-bottom: 2px; }
.rs-item__flight, .rs-item__mep, .rs-item__notes {
  font-size: .72rem; color: var(--tl); margin-top: 2px;
}
.rs-item__status { flex-shrink: 0; }

@media print {
  .rs-driver-block { break-inside: avoid; border: 1px solid #ccc; }
  .rs-driver-name  { background: #f5f5f5 !important; color: #000 !important; }
  .rs-item__time   { background: #fff3cd !important; color: #000 !important; }
  .rs-header       { border-color: #000; }
}

/* ================================================================
   LAYOUT HELPERS
   ================================================================ */
.mb-lg { margin-bottom: 1.5rem; }
.cbody--upcoming { padding: 0 1.25rem; }
.settings-wrap { max-width: 580px; }

/* ================================================================
   DASHBOARD
   ================================================================ */
/* KPI grilles */
.kpi-grid--7 { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); margin-bottom: 1rem; }
.kpi-grid--4 { grid-template-columns: repeat(4,1fr); margin-bottom: 1rem; }
.kpi-grid--3 { grid-template-columns: repeat(3,1fr); margin-bottom: 1rem; }

.kpi__header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: .45rem;
}
.kpi__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi__icon svg { display: block; }
.kpi__icon--gold   { background: rgba(198,156,109,.12); color: var(--gold); }
.kpi__icon--red    { background: rgba(239,68,68,.10);   color: var(--s-cancelled); }
.kpi__icon--green  { background: rgba(16,185,129,.10);  color: var(--s-done); }
.kpi__icon--amber  { background: rgba(245,158,11,.10);  color: var(--s-pending); }

/* Grille dashboard 2 colonnes */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  margin-top: 1rem;
}

/* ================================================================
   RESOURCE CARDS — nouvelle structure
   ================================================================ */

/* Barre de statut en haut de la carte */
.rc-status--available  { border-top: 3px solid var(--s-done); }
.rc-status--on_trip    { border-top: 3px solid var(--s-ongoing); }
.rc-status--off        { border-top: 3px solid var(--s-off); }
.rc-status--maintenance{ border-top: 3px solid var(--s-partial); }
.rc-status--in_service { border-top: 3px solid var(--s-confirmed); }
.rc-status--inactive   { border-top: 3px solid rgba(0,0,0,.1); opacity: .5; filter: grayscale(.4); }
.rc-status--partner    { border-top: 3px solid var(--gold); }

/* Avatar initiales */
.rc-avatar {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.rc-avatar--available   { background: rgba(16,185,129,.12);  color: var(--s-done); }
.rc-avatar--on_trip     { background: rgba(139,92,246,.12);  color: var(--s-ongoing); }
.rc-avatar--off         { background: rgba(154,154,154,.12); color: var(--s-off); }
.rc-avatar--maintenance { background: rgba(249,115,22,.12);  color: var(--s-partial); }
.rc-avatar--in_service  { background: rgba(59,130,246,.12);  color: var(--s-confirmed); }
.rc-avatar--inactive    { background: rgba(0,0,0,.05);       color: var(--tl); }
.rc-avatar--vehicle     { background: var(--bg); }
.rc-avatar--partner     { background: rgba(198,156,109,.12); color: var(--gold); }

.resource-card__head { align-items: flex-start; }

/* Zone info principale (chauffeurs / partenaires) */
.rc-info { flex: 1; min-width: 0; }
.resource-card__name { margin-bottom: 3px; }

/* Ligne méta */
.rc-meta-line {
  display: flex; align-items: center; gap: 5px;
  font-size: .75rem; color: var(--tl);
  margin-top: 2px;
}
.rc-meta-line svg { flex-shrink: 0; opacity: .7; }
.rc-meta-line--mono { font-family: monospace; font-size: .77rem; color: var(--tm); }

/* ── Carte véhicule (layout amélioré) ── */
.rc-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rc-card-body {
  flex: 1;
  min-width: 0;
}
.rc-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.rc-card-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Chips de méta-info (immatriculation, places, type, année) */
.rc-chips-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.rc-chip {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--tm);
  white-space: nowrap;
}
.rc-chip--plate {
  font-family: monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--t);
  border-color: var(--border-m);
}
.rc-chip--year { color: var(--tl); }
/* Boutons d'action (icônes seulement) en coin haut droit */
.rc-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.rc-card-btn-gps { color: #22c55e !important; }

/* Boutons de statut rapide */
.rc-status-row {
  display: flex; gap: 5px;
  padding-top: .75rem;
  margin-top: .5rem;
  border-top: 1px solid var(--border);
}
.rc-status-btn {
  flex: 1;
  padding: 5px 4px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--tl);
  font-size: .7rem; font-weight: 600;
  cursor: pointer; transition: all var(--tr-fast);
  font-family: var(--font); text-align: center;
  white-space: nowrap;
}
.rc-status-btn:hover { border-color: var(--border-m); color: var(--tm); background: var(--bg); }
.rc-status-btn.is-active { color: #fff; border-color: transparent; }
.rc-status-btn.is-active--available  { background: var(--s-done); }
.rc-status-btn.is-active--on_trip    { background: var(--s-ongoing); }
.rc-status-btn.is-active--off        { background: var(--s-off); }
.rc-status-btn.is-active--in_service { background: var(--s-confirmed); }
.rc-status-btn.is-active--maintenance{ background: var(--s-partial); }

/* Partenaires — KPIs inline */
.rc-kpi-row {
  display: flex; gap: 10px;
  margin-top: 4px;
}
.rc-kpi { display: flex; flex-direction: column; }
.rc-kpi__n { font-size: .82rem; font-weight: 700; color: var(--t); line-height: 1.2; }
.rc-kpi__l { font-size: .66rem; color: var(--tl); text-transform: uppercase; letter-spacing: .05em; }

/* Partenaires — coordonnées */
.rc-contact-row {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: .65rem;
  margin-top: .5rem;
  border-top: 1px solid var(--border);
}

/* ================================================================
   TABLE HELPERS
   ================================================================ */
.td-amount      { font-weight: 700; color: var(--s-done); white-space: nowrap; }
.td-amount--neg { color: var(--s-cancelled); }
.td-amount--cum { color: var(--s-confirmed); }
.td-ref         { font-weight: 700; font-family: monospace; font-size: .8rem; }
.td-sub         { font-size: .72rem; color: var(--tl); display: block; margin-top: 1px; }
.td-empty       { color: var(--tl); }
.td-month       { font-weight: 600; }

/* ================================================================
   BOOKING CARDS (vue mobile)
   ================================================================ */
.bk-cards { display: flex; flex-direction: column; gap: 10px; }
.bk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  box-shadow: var(--sh2);
  overflow: hidden;
  transition: box-shadow var(--tr);
}
.bk-card:active { box-shadow: none; }

.bk-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: .85rem 1rem .6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.bk-card__name    { font-weight: 700; font-size: .92rem; color: var(--t); }
.bk-card__phone   { font-size: .74rem; color: var(--tl); margin-top: 2px; }
.bk-card__partner { font-size: .72rem; color: #1D4ED8; margin-top: 2px; font-weight: 500; }
.bk-card__badges  { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

.bk-card__body {
  padding: .65rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bk-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: .81rem;
  color: var(--tm);
}
.bk-card__svc   { font-weight: 600; color: var(--t); font-size: .83rem; }
.bk-card__price { font-weight: 800; color: var(--s-done); white-space: nowrap; font-size: .83rem; }
.bk-card__date  { color: var(--tm); }
.bk-card__lbl   { font-size: .68rem; color: var(--tl); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.bk-card__foot {
  display: flex;
  gap: 6px;
  padding: .6rem 1rem .8rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.bk-card__foot .btn { flex: 1; justify-content: center; font-size: .73rem; }

/* ---- Multi-day badges (cards + table) ---- */
.bk-days-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 5px;
  letter-spacing: .02em;
}
.bk-date-arrow {
  color: #7C3AED;
  font-weight: 700;
  margin: 0 3px;
  font-size: .9em;
}
.bk-ppd-row {
  color: #6D28D9;
  font-size: .78rem;
  font-weight: 500;
  gap: 4px;
  background: rgba(124,58,237,.06);
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 1px;
}
.bk-ppd-row svg { vertical-align: middle; opacity: .7; }

/* ---- Multi-day form section ---- */
.bk-multiday-box {
  background: linear-gradient(135deg, rgba(124,58,237,.06) 0%, rgba(167,139,250,.04) 100%);
  border: 1.5px solid rgba(124,58,237,.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 2px;
}
.bk-multiday-head {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #7C3AED;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bk-multiday-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bk-multiday-fields .field { margin: 0; }
.bk-multiday-fields label { font-size: .72rem; margin-bottom: 4px; }
.bk-multiday-result {
  margin-top: 12px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bk-multiday-total {
  background: #7C3AED;
  color: #fff;
  border-radius: 8px;
  padding: 7px 18px;
  font-weight: 700;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn .2s ease;
}
.bk-multiday-total .bk-calc-detail {
  font-size: .74rem;
  font-weight: 400;
  opacity: .82;
}
.bk-multiday-hint {
  color: var(--tl);
  font-size: .77rem;
  font-style: italic;
}

/* ================================================================
   INVOICE FORM — 3-section layout
   ================================================================ */
.modal:has(#invoice-form) { max-width: 820px; }
.modal:has(.import-modal)  { max-width: min(1480px, 97vw); }

/* ── Section labels ── */
.inv-s1, .inv-s2, .inv-s3 { margin-bottom: 1.2rem; }
.inv-s1__label, .inv-s2__label, .inv-s3__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tl);
  margin-bottom: .55rem;
}

/* ── Section 1 : barre de recherche ── */
.inv-s1 {
  background: rgba(198,156,109,.07);
  border: 1px solid var(--gold-b);
  border-radius: var(--rl);
  padding: .9rem 1rem;
}
.inv-s1__label { color: #8B6914; }
.inv-s1__row {
  display: flex; gap: .5rem;
  align-items: flex-end; flex-wrap: wrap;
}
.inv-s1__group { display: flex; flex-direction: column; }
.inv-s1__group--grow { flex: 1; min-width: 160px; }
.inv-s1__group label { font-size: .7rem; font-weight: 600; color: var(--tm); margin-bottom: 3px; }
.inv-s1__group input,
.inv-s1__group select {
  padding: 7px 10px;
  border: 1px solid rgba(198,156,109,.35);
  border-radius: var(--r);
  font-size: .85rem;
  background: white;
  height: 36px;
  transition: border-color var(--tr);
  outline: none;
  font-family: var(--font);
}
.inv-s1__group input:focus, .inv-s1__group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,156,109,.13);
}
.inv-s1__group--btn label { pointer-events: none; visibility: hidden; }

/* ── Picker results ── */
.pk-results-wrap {
  margin-top: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--rl);
  background: white;
  overflow: hidden;
  box-shadow: var(--sh2);
}
.pk-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pk-tbl thead tr { background: var(--surface2); border-bottom: 1px solid var(--border); }
.pk-tbl thead th { padding: 7px 8px; text-align: left; font-size: .68rem; font-weight: 700; color: var(--tl); text-transform: uppercase; letter-spacing: .05em; }
.pk-tbl thead th:first-child { width: 32px; }
.pk-row { cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--tr-fast); }
.pk-row:last-child { border-bottom: none; }
.pk-row:hover { background: var(--gold-l); }
.pk-row:has(.pk-check:checked) { background: rgba(59,130,246,.06); }
.pk-row td { padding: 7px 8px; vertical-align: middle; }
.pk-date { white-space: nowrap; font-weight: 600; }
.pk-date span { font-size: .73rem; color: var(--tl); display: block; font-weight: 400; }
.pk-pax { font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-pax span { font-size: .72rem; color: var(--tl); font-weight: 400; }
.pk-ref { font-size: .76rem; font-family: monospace; }
.pk-doss { display: block; color: #1D4ED8; font-weight: 600; }
.pk-resa { display: block; color: var(--tl); }
.pk-route { font-size: .76rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tm); }
.pk-price { font-weight: 700; color: var(--s-done); white-space: nowrap; text-align: right; }
.pk-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: var(--surface2);
  border-top: 1px solid var(--border); font-size: .81rem; color: var(--tm);
}
.pk-empty { padding: .9rem 1rem; font-size: .84rem; color: var(--tl); text-align: center; }
.pk-imported { padding: .7rem 1rem; font-size: .84rem; color: var(--s-done); background: rgba(16,185,129,.06); border-radius: var(--r); margin-top: .5rem; }
.btn-link { background: none; border: none; color: #1D4ED8; font-size: .84rem; cursor: pointer; text-decoration: underline; padding: 0; font-family: var(--font); }

/* ── Section 2 : lignes ── */
.inv-s2 {
  border: 1px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
  padding: .9rem 1rem;
}
.inv-s2__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: .6rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.inv-tbl { width: 100%; border-collapse: collapse; }
.inv-tbl thead th {
  padding: 5px 6px;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tl); border-bottom: 1px solid var(--border);
}
.inv-th-qty, .inv-th-price, .inv-th-total { width: 90px; text-align: right; }
.inv-th-qty { width: 55px; text-align: center; }

/* ── Ligne type booking ── */
.inv-item-row td { border-bottom: 1px solid var(--border); padding: 5px 4px; vertical-align: top; }
.inv-item-row:last-child td { border-bottom: none; }
.inv-ib-cell { width: 100%; }
.inv-ib-top { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 4px; }
.inv-ib-svc { font-weight: 700; font-size: .81rem; color: var(--t); background: var(--gold-l); border-radius: 4px; padding: 2px 8px; }
.inv-ib-date { font-size: .77rem; color: var(--tl); }
.inv-ib-tag { font-size: .72rem; padding: 1px 7px; border-radius: 4px; font-weight: 600; }
.inv-ib-doss { background: rgba(59,130,246,.08); color: #1D4ED8; }
.inv-ib-resa { background: rgba(0,0,0,.04); color: var(--tl); }
.inv-ib-bot { display: flex; flex-wrap: wrap; gap: 8px; font-size: .77rem; color: var(--tm); }
.inv-qty-cell { width: 55px; text-align: center; vertical-align: middle; }
.inv-qty-badge { font-size: .77rem; color: var(--tl); }
.inv-qty-cell input { width: 50px; padding: 4px 6px; text-align: center; border: 1px solid var(--border); border-radius: 5px; font-family: var(--font); transition: border-color var(--tr); }
.inv-qty-cell input:focus { outline: none; border-color: var(--gold); }
.inv-price-cell { width: 110px; vertical-align: top; }
.inv-price-cell input { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; text-align: right; font-family: var(--font); transition: border-color var(--tr); }
.inv-price-cell input:focus { outline: none; border-color: var(--gold); }
.inv-line-total { font-weight: 700; padding: 6px 4px; text-align: right; white-space: nowrap; font-size: .85rem; width: 90px; color: var(--t); }
.inv-del-cell { width: 32px; text-align: center; }

/* ── Ligne type manuel ── */
.inv-item-row--manual .inv-ib-cell textarea.inv-desc {
  width: 100%; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 5px;
  font-family: inherit; font-size: .82rem; line-height: 1.5;
  resize: vertical; min-height: 44px; transition: border-color var(--tr);
}
.inv-item-row--manual .inv-desc:focus { outline: none; border-color: var(--gold); }

.inv-add-line {
  margin-top: .6rem;
  background: none; border: 1.5px dashed var(--border);
  border-radius: var(--r); padding: 6px 12px;
  font-size: .81rem; color: var(--tl);
  cursor: pointer; width: 100%; transition: all var(--tr);
  font-family: var(--font);
}
.inv-add-line:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-l); }

/* ── Section 3 : détails ── */
.inv-s3 {
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: .9rem 1rem;
  background: var(--surface2);
}
.inv-s3__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem 1rem;
}
.inv-s3__grid .field { margin: 0; }
.inv-s3__grid .field label { font-size: .71rem; }
.inv-s3__grid .field small { font-weight: 400; color: var(--tl); }
.field--full { grid-column: 1 / -1; }

/* Séparateur thématique dans section ③ */
.inv-s3__sep {
  grid-column: 1 / -1;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tl);
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  margin-top: .25rem;
}
.inv-s3__sep small { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ── Totaux dynamiques dans section ② ── */
.inv-totals-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  min-width: 200px;
}
.inv-tot-row {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  padding: 2px 0;
}
.inv-tot-label { font-size: .73rem; color: var(--tm); }
.inv-tot-val   { font-size: .8rem; font-weight: 600; color: var(--t); white-space: nowrap; }
.inv-tot-row--bold .inv-tot-label { font-size: .76rem; font-weight: 700; color: var(--t); }
.inv-tot-row--bold .inv-tot-val   { font-size: .92rem; font-weight: 800; }

/* ── Invoice list table ── */
.inv-list-table {
  width: 100%;
  border-collapse: collapse;
}
.inv-list-table thead th {
  padding: 8px 12px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tl);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.inv-list-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--tr-fast); }
.inv-list-table tbody tr:last-child { border-bottom: none; }
.inv-list-table tbody tr:hover { background: var(--surface2); }
.inv-list-table td { padding: 9px 12px; font-size: .84rem; }

.inv-num-cell  { font-family: monospace; font-size: .82rem; color: var(--tm); white-space: nowrap; }
.inv-client-name { font-weight: 600; font-size: .85rem; color: var(--t); }
.inv-partner-sub { font-size: .75rem; color: var(--tl); margin-top: 1px; }
.inv-total-cell  { font-weight: 700; white-space: nowrap; }

/* ── Overdue indicators ── */
.inv-overdue-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .66rem;
  font-weight: 700;
  background: rgba(220,38,38,.1);
  color: #dc2626;
  letter-spacing: .04em;
  vertical-align: middle;
}
.inv-overdue-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  margin-left: 5px;
  vertical-align: middle;
  cursor: default;
}
.inv-row--overdue td { background: rgba(220,38,38,.025); }
.inv-row--overdue:hover td { background: rgba(220,38,38,.05) !important; }

/* ── Invoice toolbar ── */
.inv-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ── Mono input (ICE / RIB / IF) ── */
.mono-input {
  font-family: 'Courier New', Courier, monospace;
  font-size: .85rem;
  letter-spacing: .05em;
}

/* ── Settings : groupe label ── */
.settings-group-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tl);
  border-bottom: 1px solid var(--border);
  padding-bottom: .4rem;
  margin-bottom: .2rem;
  grid-column: 1 / -1;
}

/* ── Sélecteur de mode TVA (tax-mode-picker) ── */
.tax-mode-picker {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.tax-mode-opt {
  flex: 1;
  min-width: 140px;
  cursor: pointer;
}
.tax-mode-opt input[type="radio"] { display: none; }
.tax-mode-chip {
  display: flex;
  flex-direction: column;
  padding: .55rem .75rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
  transition: border-color var(--tr), background var(--tr);
  cursor: pointer;
  gap: .15rem;
}
.tax-mode-chip strong { font-size: .82rem; color: var(--t); }
.tax-mode-chip small  { font-size: .7rem; color: var(--tl); font-weight: 400; line-height: 1.35; }
.tax-mode-opt input:checked + .tax-mode-chip {
  border-color: var(--gold);
  background: var(--gold-l);
}
.tax-mode-opt input:checked + .tax-mode-chip strong { color: var(--gold-d); }

/* ── Invoice preview ── */
.invoice-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 2rem;
  max-width: 760px;
  overflow-x: auto;
}
.invoice-preview table { min-width: 420px; }

/* ================================================================
   PARTNERS MODULE — Cards, Stats, Detail
   ================================================================ */

/* ── Toolbar ── */
.pt-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── Grille de cartes ── */
.pt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

/* ── Carte partenaire ── */
.pt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border-m);
  border-radius: var(--rl);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: box-shadow var(--tr), border-color var(--tr);
  box-shadow: var(--sh2);
}
.pt-card:hover { box-shadow: var(--sh3); }

/* Type-specific top border */
.pt-card--agence    { border-top-color: #C69C6D; }
.pt-card--ota       { border-top-color: #3B82F6; }
.pt-card--hotel     { border-top-color: #10B981; }
.pt-card--corporate { border-top-color: #8B5CF6; }
.pt-card--freelance { border-top-color: #F97316; }
.pt-card--other     { border-top-color: rgba(0,0,0,.12); }

/* ── Header de carte ── */
.pt-head {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  justify-content: space-between;
}
.pt-head__identity {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex: 1;
  min-width: 0;
}
.pt-head__info { flex: 1; min-width: 0; }
.pt-head__name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* ── Type badge ── */
.pt-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pt-color, #94A3B8) 12%, transparent);
  color: var(--pt-color, #94A3B8);
  border: 1px solid color-mix(in srgb, var(--pt-color, #94A3B8) 25%, transparent);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pt-type-badge { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.25); }
}

/* ── Stats inline ── */
.pt-stats-row {
  display: flex;
  gap: .5rem;
  padding: .55rem .7rem;
  background: var(--surface2);
  border-radius: var(--r);
  border: 1px solid var(--border);
}
.pt-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 .3rem;
  border-right: 1px solid var(--border);
}
.pt-stat:last-child { border-right: none; }
.pt-stat__n {
  font-size: .82rem;
  font-weight: 800;
  color: var(--t);
  white-space: nowrap;
  line-height: 1.2;
}
.pt-stat__l {
  font-size: .62rem;
  color: var(--tl);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
}

/* ── Contact ── */
.pt-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-contact-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: var(--tm);
  min-width: 0;
}
.pt-contact-item svg { flex-shrink: 0; opacity: .6; }
.pt-contact-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-contact-link {
  color: var(--tm);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  transition: color var(--tr-fast);
}
.pt-contact-link:hover { color: var(--gold); }

/* ── Conditions de paiement ── */
.pt-terms {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--tl);
  font-style: italic;
  padding: .3rem .5rem;
  background: var(--bg);
  border-radius: 5px;
  border: 1px solid var(--border);
}
.pt-terms svg { opacity: .5; flex-shrink: 0; }

/* ── Pied de carte ── */
.pt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* ── Top partenaires ── */
.pt-top-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .4rem;
  border-radius: 6px;
  transition: background var(--tr-fast);
}
.pt-top-row:hover { background: var(--surface2); }
.pt-top-rank {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .68rem; font-weight: 800;
  color: var(--tl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pt-top-row:nth-child(1) .pt-top-rank { background: rgba(198,156,109,.15); border-color: var(--gold-b); color: var(--gold); }
.pt-top-row:nth-child(2) .pt-top-rank { background: rgba(154,154,154,.1); border-color: rgba(154,154,154,.3); color: var(--tm); }
.pt-top-row:nth-child(3) .pt-top-rank { background: rgba(180,113,48,.1); border-color: rgba(180,113,48,.25); color: #92400e; }
.pt-top-icon { font-size: .88rem; flex-shrink: 0; }
.pt-top-info { flex: 1; min-width: 0; }
.pt-top-name { font-size: .81rem; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.pt-top-bar-wrap { height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.pt-top-bar { height: 100%; border-radius: 3px; transition: width .4s ease; min-width: 3px; }
.pt-top-revenue { font-size: .75rem; font-weight: 700; color: var(--t); white-space: nowrap; flex-shrink: 0; }

/* ── Répartition par type ── */
.pt-bytype-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 3px 0;
}
.pt-bytype-icon { font-size: .85rem; flex-shrink: 0; width: 20px; text-align: center; }
.pt-bytype-label { font-size: .75rem; color: var(--tm); width: 130px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-bytype-bar-wrap { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.pt-bytype-bar { height: 100%; border-radius: 3px; transition: width .4s ease; min-width: 4px; }
.pt-bytype-count { font-size: .72rem; font-weight: 700; color: var(--tl); width: 20px; text-align: right; flex-shrink: 0; }

/* ── Détail partenaire (modal) ── */
.pt-detail {}
.pt-detail__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .9rem;
}
.pt-detail__info { flex: 1; }
.pt-detail__name { font-size: 1.05rem; font-weight: 800; color: var(--t); margin-bottom: 5px; }
.pt-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-bottom: .75rem;
}
.pt-detail__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  color: var(--tm);
}
.pt-detail__item svg { opacity: .6; flex-shrink: 0; }
.pt-detail__notes {
  font-size: .78rem;
  color: var(--tl);
  font-style: italic;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  line-height: 1.5;
}
.pt-detail__summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: .78rem;
  color: var(--tm);
  background: var(--gold-l);
  border: 1px solid var(--gold-b);
  border-radius: var(--r);
  padding: .4rem .75rem;
  margin-bottom: .75rem;
}
.pt-detail__summary svg { opacity: .7; }
.pt-detail__summary strong { color: var(--t); }
.pt-detail__bookings-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tl);
  margin-bottom: .5rem;
}
.pt-detail__bookings-head svg { opacity: .6; }
.pt-detail__count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; font-size: .68rem; font-weight: 700;
  color: var(--tl); padding: 1px 7px; margin-left: 4px;
}
.pt-detail__empty { font-size: .8rem; color: var(--tl); padding: .75rem 0; }
.pt-detail__table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pt-detail__table thead th {
  padding: 6px 10px;
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tl); border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.pt-detail__table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--tr-fast); }
.pt-detail__table tbody tr:last-child { border-bottom: none; }
.pt-detail__table tbody tr:hover { background: var(--surface2); }
.pt-detail__table td { padding: 7px 10px; }

/* ================================================================
   LOCATIONS MODULE — Cards, Groups, KPIs, Stats
   ================================================================ */

/* ── Toolbar de filtres ── */
.loc-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── Grille principale ── */
.loc-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Groupe de catégorie ── */
.loc-group {}
.loc-group-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  padding-bottom: .4rem;
  border-bottom: 1.5px solid var(--border);
}
.loc-group-icon { font-size: 1rem; line-height: 1; }
.loc-group-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tm);
}
.loc-group-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .68rem; font-weight: 700;
  color: var(--tl);
  padding: 1px 7px;
  margin-left: 4px;
}

/* ── Rangée de cartes ── */
.loc-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* ── Carte individuelle ── */
.loc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: box-shadow var(--tr), border-color var(--tr);
  box-shadow: var(--sh2);
}
.loc-card:hover { box-shadow: var(--sh3); border-color: var(--border-m); }
.loc-card--dupe  { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.025); }
.loc-card--unused { opacity: .72; }

/* ── En-tête de carte ── */
.loc-card__head {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}
.loc-card__info { flex: 1; min-width: 0; }
.loc-card__name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loc-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Usage badge */
.loc-card__usage {
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 800;
  color: var(--tl);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
  line-height: 1.6;
}
.loc-usage--zero { color: var(--tl); opacity: .6; }
.loc-usage--hot  { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.25); color: #065F46; }

/* ── Adresse ── */
.loc-card__addr {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: .76rem;
  color: var(--tm);
  line-height: 1.4;
}
.loc-card__addr svg { flex-shrink: 0; margin-top: 1px; opacity: .6; }

/* ── Chips (localisation, zone, doublons) ── */
.loc-chip {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--tm);
  white-space: nowrap;
}
.loc-chip--mk   { background: rgba(198,156,109,.1); border-color: rgba(198,156,109,.3); color: var(--gold-d); }
.loc-chip--zone { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); color: #1D4ED8; }
.loc-chip--warn { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.3); color: #B45309; }

/* ── Chips d'action (tel, maps) et stat (durée) ── */
.loc-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.loc-chip-action {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--tm);
  text-decoration: none;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.loc-chip-action:hover { border-color: var(--gold); color: var(--gold-d); background: var(--gold-l); }
.loc-chip-action svg { flex-shrink: 0; opacity: .75; }

.loc-chip-stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--tl);
}
.loc-chip-stat svg { opacity: .6; }

/* ── Instructions de prise en charge ── */
.loc-card__instruct {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: .74rem;
  color: var(--tm);
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.1);
  border-radius: 6px;
  padding: .35rem .6rem;
  line-height: 1.45;
}
.loc-card__instruct svg { flex-shrink: 0; margin-top: 1px; color: #3B82F6; opacity: .8; }

/* ── Pied de carte ── */
.loc-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}
.loc-card__notes {
  font-size: .72rem;
  color: var(--tl);
  font-style: italic;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loc-card__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* ── Top lieux ── */
.loc-top-list { display: flex; flex-direction: column; gap: 2px; }
.loc-top-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .5rem;
  border-radius: 7px;
  transition: background var(--tr-fast);
}
.loc-top-item:hover { background: var(--surface2); }
.loc-top-rank {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .68rem; font-weight: 800;
  color: var(--tl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.loc-top-item:nth-child(1) .loc-top-rank { background: rgba(198,156,109,.15); border-color: var(--gold-b); color: var(--gold); }
.loc-top-item:nth-child(2) .loc-top-rank { background: rgba(154,154,154,.1); border-color: rgba(154,154,154,.3); color: var(--tm); }
.loc-top-item:nth-child(3) .loc-top-rank { background: rgba(180,113,48,.1); border-color: rgba(180,113,48,.25); color: #92400e; }
.loc-top-icon { font-size: .9rem; flex-shrink: 0; }
.loc-top-info { flex: 1; min-width: 0; }
.loc-top-name { font-size: .82rem; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-top-city { font-size: .7rem; color: var(--tl); margin-top: 1px; }
.loc-top-usage { font-size: .75rem; font-weight: 700; color: var(--gold-d); white-space: nowrap; }

/* ── Répartition par catégorie ── */
.loc-byCat { display: flex; flex-direction: column; gap: 8px; }
.loc-byCat-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.loc-byCat-icon { font-size: .85rem; flex-shrink: 0; width: 20px; text-align: center; }
.loc-byCat-label { font-size: .75rem; color: var(--tm); width: 120px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-byCat-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.loc-byCat-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width .4s ease;
  min-width: 4px;
}
.loc-byCat-count { font-size: .72rem; font-weight: 700; color: var(--tl); width: 24px; text-align: right; flex-shrink: 0; }

/* ── Formulaire — séparateur de section ── */
.loc-form-sep {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tl);
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  margin-top: .25rem;
}
.loc-form-sep svg { opacity: .6; }

/* ── GPS preview link ── */
.loc-gps-row { display: flex; align-items: center; min-height: 18px; }
.loc-gps-preview {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 600; color: var(--gold-d);
  text-decoration: none;
  transition: color var(--tr-fast);
}
.loc-gps-preview:hover { color: var(--gold); }
.loc-gps-preview svg { opacity: .8; }

/* ── Catégories — badges étendus ── */
.loc-cat--riad       { background: rgba(16,185,129,.10); color: #065F46; }
.loc-cat--restaurant { background: rgba(239,68,68,.09);  color: #B91C1C; }
.loc-cat--medina     { background: rgba(139,92,246,.10); color: #6D28D9; }
.loc-cat--golf       { background: rgba(16,185,129,.10); color: #047857; }
.loc-cat--site       { background: rgba(245,158,11,.10); color: #B45309; }
.loc-cat--private    { background: rgba(0,0,0,.06);      color: var(--tm); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* ── 900px : sidebar off-canvas, layout principal ── */
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .sidebar { transform: translateX(-224px); width: 224px; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__close { display: flex; }
  .sidebar-overlay.is-active { display: block; }
  .topbar__menu { display: flex; }
  .main { margin-left: 0; }
  .two-col, .dash-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid--7 { grid-template-columns: repeat(4, 1fr); }
  .loc-cards-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .pt-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .pt-bytype-label { width: 100px; }
  .kpi-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid--3 { grid-template-columns: repeat(3,1fr); }
  .page-head { flex-wrap: wrap; gap: 8px; }
  .modal:has(#invoice-form) { max-width: 100%; }
  .b2b-fields { grid-template-columns: 1fr; }
  .inv-s3__grid { grid-template-columns: 1fr; }
  .inv-s1__row { flex-direction: column; align-items: stretch; }
  .inv-s1__group--grow { min-width: 0; }
  .inv-s1__group--btn label { visibility: hidden; height: 0; margin: 0; overflow: hidden; }
  .inv-s1__group input, .inv-s1__group select { width: 100%; }
  .rc-status-row { flex-wrap: wrap; }
  .settings-wrap { max-width: 100%; }
}

/* ── 768px : tablette portrait ── */
@media (max-width: 768px) {
  .topbar__actions { flex-wrap: wrap; gap: 6px; }
  .topbar__actions .btn { font-size: .72rem; padding: 7px 12px; }
  .content { padding: 1rem; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .tbl-actions { gap: 6px; }
  .tbl-actions .btn--icon { padding: 8px; }
  .pk-results-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pk-tbl { min-width: 580px; }
  .inv-s2 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inv-tbl { min-width: 500px; }
  .inv-s1__row { flex-direction: column; align-items: stretch; }
  .detail-label { width: 100px; }
  .chart-wrap { height: 200px; }
  .stats-row { gap: 8px; }
}

/* ── 600px : mobile ── */
@media (max-width: 600px) {
  .content { padding: .85rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .loc-cards-row { grid-template-columns: 1fr; }
  .loc-toolbar { flex-direction: column; align-items: stretch; }
  .loc-byCat-label { width: 90px; }
  .pt-grid { grid-template-columns: 1fr; }
  .pt-toolbar { flex-direction: column; align-items: stretch; }
  .pt-bytype-label { width: 80px; }
  .kpi { padding: .9rem 1rem; }
  .kpi__val { font-size: 1.4rem; }
  .form-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .b2b-fields { grid-template-columns: 1fr; }
  .inv-s3__grid { grid-template-columns: 1fr; }
  .kpi-grid--7 { grid-template-columns: repeat(2,1fr); }
  .kpi-grid--4 { grid-template-columns: repeat(2,1fr); }
  .kpi-grid--3 { grid-template-columns: repeat(2,1fr); }
  .rc-kpi-row { gap: 8px; }
  .dash-grid { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters input[type=search] { min-width: 0; width: 100%; }
  .filters input, .filters select { width: 100%; }
  .filter-tabs { width: 100%; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    align-self: flex-end;
  }
  .modal__head { padding: 1rem 1.2rem; border-radius: 20px 20px 0 0; }
  .modal__body { padding: 1rem 1.2rem; }
  .modal__foot { padding: .85rem 1.2rem; flex-wrap: wrap; gap: 8px; border-radius: 0; }
  .modal__foot .btn { flex: 1; justify-content: center; min-width: 120px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 1rem; }
  .page-head h2 { font-size: 1.1rem; }
  .page-head .btn { align-self: flex-start; }
  .topbar { padding: 0 1rem; gap: 8px; }
  .topbar__title { font-size: .9rem; }
  .topbar__actions .btn { padding: 7px 12px; font-size: .75rem; }
  .topbar__actions { max-width: 55vw; overflow: hidden; flex-wrap: wrap; justify-content: flex-end; }
  table { font-size: .77rem; }
  thead th, tbody td { padding: 8px 8px; }
  thead th { font-size: .67rem; }
  .tbl-actions { gap: 4px; }
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-label { width: auto; }
  .cal-cell { min-height: 48px; padding: 4px; }
  .cal-day-num { font-size: .72rem; }
  .cal-chip { display: none; }
  /* Mobile : barres colorées sans texte — padding 4px + border 1px → margin -5px */
  .cal-chip--md { display: block; font-size: 0; height: 5px; line-height: 5px; padding: 0; margin: 0 -5px 2px -5px; }
  .cal-chip--md-start { border-radius: 3px 0 0 3px; box-shadow:  3px 0 0 0 var(--md-c); }
  .cal-chip--md-mid   { border-radius: 0;            box-shadow: -3px 0 0 0 var(--md-c), 3px 0 0 0 var(--md-c); }
  .cal-chip--md-end   { border-radius: 0 3px 3px 0;  box-shadow: -3px 0 0 0 var(--md-c); }
  .cal-cell.has-booking:not(:has(.cal-chip--md))::after { content: '•'; color: var(--gold); font-size: 1rem; display: block; text-align: center; line-height: 1; }
  .cal-day-label { font-size: .64rem; padding: 4px 0; letter-spacing: 0; }
  .chart-wrap { height: 170px; }
  .upcoming-item { flex-wrap: wrap; gap: 8px; }
  .card-box__body { padding: .85rem; }
  .card-box__head { padding: .85rem 1rem; }
  .topbar__actions { gap: 4px; }
  .resource-card { padding: 1rem; }
  #toast-container { left: .75rem; right: .75rem; bottom: 1rem; align-items: stretch; }
  .toast { max-width: 100%; }
  .pk-results-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pk-tbl { min-width: 520px; }
  .pk-bar { flex-direction: column; gap: 6px; align-items: flex-start; }
  .inv-s1 { padding: .75rem .85rem; }
  .inv-s1__row { flex-direction: column; gap: .5rem; }
  .inv-s1__group input, .inv-s1__group select { width: 100%; }
  .inv-s1__group--btn label { display: none; }
  .inv-s1__group--btn .btn { width: 100%; justify-content: center; }
  .inv-s2 { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .75rem .85rem; }
  .inv-tbl { min-width: 460px; }
  .inv-s3 { padding: .75rem .85rem; }
  .settings-section { margin-bottom: 1.5rem; }
  .auth__card { padding: 2rem 1.5rem; }
  .numpad-key { padding: 14px; font-size: 1rem; }
  .invoice-preview { padding: 1rem; border-radius: var(--r); }
  .modal:has(#invoice-form) { max-width: 100%; }
  .inv-grand-total { font-size: 1rem; }
}

/* ── 480px : petits téléphones ── */
@media (max-width: 480px) {
  body.mt-app { font-size: 13px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: .75rem .85rem; }
  .kpi__val { font-size: 1.2rem; }
  .kpi__label { font-size: .68rem; }
  .topbar { height: 50px; padding: 0 .75rem; }
  .topbar__title { font-size: .85rem; }
  .topbar__actions .btn { padding: 6px 10px; font-size: .72rem; }
  .sidebar { width: 240px; transform: translateX(-240px); }
  .sidebar.is-open { transform: translateX(0); }
  .content { padding: .6rem; }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .filter-tab { white-space: nowrap; padding: 5px 10px; font-size: .73rem; }
  .filters input[type=date] { width: 100% !important; }
  .page-head { margin-bottom: .75rem; }
  .modal__body { padding: .75rem .9rem; }
  .modal__head { padding: .8rem .9rem; }
  .modal__foot { padding: .65rem .9rem; }
  .modal__title { font-size: .88rem; }
  .bk-cards { gap: 8px; }
  .bk-card__top { padding: .65rem .85rem .5rem; gap: 8px; }
  .bk-card__name { font-size: .85rem; }
  .bk-card__phone { font-size: .72rem; }
  .bk-card__body { padding: .45rem .85rem; gap: 4px; }
  .bk-card__row { font-size: .78rem; }
  .bk-card__svc, .bk-card__price { font-size: .8rem; }
  .bk-card__foot { padding: .45rem .85rem .65rem; gap: 5px; }
  .bk-card__foot .btn { font-size: .72rem; padding: 6px 8px; }
  .badge { font-size: .67rem; padding: 2px 7px; }
  .btn { padding: 7px 14px; font-size: .76rem; }
  .btn--sm { padding: 5px 10px; font-size: .7rem; }
  .col-hide-xs { display: none; }
  .inv-tbl { min-width: 400px; }
  .pk-tbl { min-width: 460px; }
  .chart-wrap { height: 150px; }
  .card-box__head { padding: .75rem .9rem; }
  .card-box__body { padding: .75rem .9rem; }
}

/* ── 400px : S25 / très petits écrans ── */
@media (max-width: 400px) {
  body.mt-app { font-size: 12.5px; }
  .content { padding: .5rem; }
  .topbar { height: 48px; padding: 0 .6rem; }
  .topbar__title { font-size: .8rem; }
  .kpi-grid { grid-template-columns: 1fr; gap: 7px; }
  .bk-card__top { padding: .6rem .75rem .45rem; }
  .bk-card__body { padding: .4rem .75rem; }
  .bk-card__foot { padding: .4rem .75rem .6rem; gap: 4px; }
  .bk-card__foot .btn { padding: 5px 7px; font-size: .68rem; }
  .modal__body { padding: .65rem .8rem; }
  .modal__head { padding: .7rem .8rem; }
  .modal__foot { padding: .6rem .8rem; }
  .badge { font-size: .64rem; padding: 2px 6px; }
  .numpad-key { padding: 11px 6px; font-size: .95rem; }
  .auth__card { padding: 1.5rem 1rem; }
  .auth__pin-display { gap: 8px; }
  .pin-dot { width: 12px; height: 12px; }
  .filter-tab { padding: 4px 8px; font-size: .7rem; }
}

/* ================================================================
   GPS — Liaison flotte
   ================================================================ */

/* Badge GPS sur les cartes véhicule */
.ve-gps-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--tl);
}
.ve-gps-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ve-gps-dot--loading  { background: var(--border); }
.ve-gps-dot--moving   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: gps-pulse 1.6s infinite; }
.ve-gps-dot--stopped  { background: #f59e0b; }
.ve-gps-dot--offline  { background: #94a3b8; }
@keyframes gps-pulse { 0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.2); } 50%{ box-shadow:0 0 0 6px rgba(34,197,94,.05); } }

/* Sélecteur GPS dans le formulaire véhicule */
.ve-gps-select { font-family: inherit; }

/* Ligne km sur la carte véhicule */
.ve-km-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  min-height: 1.25rem;
}
.ve-km-row--empty { min-height: 0; }
.ve-km-val { font-weight: 600; color: var(--t); font-size: .82rem; }
.ve-km-loading { font-weight: 400; color: var(--tl); font-size: .73rem; }
.ve-km-src {
  font-size: .63rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .02em;
}
.ve-km-src--gps    { background: rgba(34,197,94,.12); color: #16a34a; }
.ve-km-src--manual { background: rgba(100,116,139,.1); color: #64748b; }
.ve-km-spd { font-size: .7rem; color: var(--tl); }

/* Badge alerte entretien sur la carte véhicule */
.ve-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .69rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  margin-top: .3rem;
}
.ve-svc-badge--ok    { background: rgba(34,197,94,.08);  color: #16a34a; }
.ve-svc-badge--warn  { background: rgba(245,158,11,.12); color: #d97706; }
.ve-svc-badge--alert { background: rgba(239,68,68,.1);   color: #dc2626; }

/* Alerte entretien dans le modal GPS */
.vgps-svc-alert {
  padding: .6rem .85rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
}
.vgps-svc-alert--ok    { background: rgba(34,197,94,.08);  color: #16a34a; }
.vgps-svc-alert--warn  { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.vgps-svc-alert--alert { background: rgba(239,68,68,.08);  color: #dc2626; border: 1px solid rgba(239,68,68,.25); }

/* Ligne note dans le modal GPS */
.vgps-row--hint span { font-size: .72rem; color: var(--tl); font-style: italic; font-weight: 400; }

/* ── Modal GPS live véhicule ── */
.vgps-wrap { display: flex; flex-direction: column; gap: 1rem; }

/* Héros statut */
.vgps-hero {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.vgps-hero .vgps-dot { width: 14px; height: 14px; flex-shrink: 0; }
.vgps-status { font-size: 1rem; font-weight: 700; color: var(--text); }
.vgps-device-name { font-size: .74rem; color: var(--tl); margin-top: 2px; }
.vgps-ts { margin-left: auto; font-size: .7rem; color: var(--tl); text-align: right; line-height: 1.4; }

/* KPIs */
.vgps-kpis {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .6rem;
}
.vgps-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .75rem;
  text-align: center;
}
.vgps-kpi__val { font-size: .95rem; font-weight: 700; color: var(--text); }
.vgps-kpi__lbl { font-size: .67rem; color: var(--tl); margin-top: 2px; }

/* Lignes de détail */
.vgps-rows { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.vgps-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .85rem;
  font-size: .8rem;
  border-bottom: 1px solid var(--border);
}
.vgps-row:last-child { border-bottom: none; }
.vgps-row span:first-child { color: var(--tl); flex-shrink: 0; }
.vgps-row span:last-child  { color: var(--text); font-weight: 500; text-align: right; }
.vgps-addr { font-size: .74rem; max-width: 200px; }

/* Boutons d'action */
.vgps-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Panneau GPS — infos flotte dans la liste */
.gps-veh-sub { display: flex; align-items: center; gap: .35rem; margin-top: 1px; }
.gps-fleet-tag {
  font-size: .67rem;
  background: rgba(198,156,109,.12);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
}

/* Popup Leaflet — plaque + lien détail */
.gps-popup-plate { font-size: .72rem; color: var(--tl); margin-bottom: .35rem; font-family: monospace; }
.gps-popup-link { margin-top: .4rem; }

/* ================================================================
   GPS MODULE
   ================================================================ */

/* Layout principal : panneau latéral + carte plein écran */
.gps-layout {
  display: flex;
  height: calc(100vh - var(--topbar-h));
  margin: -1.5rem;
  overflow: hidden;
}

/* Panneau latéral liste véhicules */
.gps-panel {
  width: 280px;
  min-width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.gps-panel__head {
  padding: .75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gps-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.gps-search-input:focus { border-color: var(--accent); }

/* Légende */
.gps-legend {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.gps-leg {
  font-size: .7rem;
  color: var(--tl);
  display: flex;
  align-items: center;
  gap: 4px;
}
.gps-leg::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.gps-leg--moving::before  { background: #22c55e; }
.gps-leg--stopped::before { background: #f59e0b; }
.gps-leg--offline::before { background: #94a3b8; }

/* Liste véhicules */
.gps-vehicle-list {
  flex: 1;
  overflow-y: auto;
}
.gps-loading {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: .82rem;
  color: var(--tl);
}
.gps-not-cfg { display: flex; flex-direction: column; align-items: center; gap: .75rem; }

.gps-veh-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  gap: .5rem;
}
.gps-veh-item:hover { background: var(--hover); }
.gps-veh-item--active { background: rgba(198,156,109,.08); }
.gps-veh-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.gps-veh-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gps-veh-dot--moving  { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.gps-veh-dot--stopped { background: #f59e0b; }
.gps-veh-dot--offline { background: #94a3b8; }

.gps-veh-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gps-veh-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gps-veh-right {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.gps-veh-speed {
  font-size: .72rem;
  color: var(--tl);
  white-space: nowrap;
}
.gps-ts {
  font-size: .68rem;
  color: var(--tl);
}

/* Bouton historique */
.gps-hist-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--tl);
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: background .12s, color .12s;
}
.gps-hist-btn:hover { background: var(--hover); color: var(--accent); }
.gps-hist-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Wrapper carte */
.gps-map-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
#gps-map {
  width: 100%;
  height: 100%;
  background: #e8e4e0;
  z-index: 0;
}

/* Barre historique flottante */
.gps-history-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 500;
  flex-wrap: wrap;
}
.gps-history-bar input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: .78rem;
  background: var(--bg);
  color: var(--text);
}

/* Marqueur GPS (Leaflet divIcon) */
.gps-marker {
  background: transparent !important;
  border: none !important;
}

/* Popup Traccar personnalisé */
.gps-popup { padding: 2px 4px; min-width: 180px; }
.gps-popup-name {
  font-weight: 700;
  font-size: .88rem;
  margin-bottom: .4rem;
  color: var(--text);
}
.gps-popup-rows { display: flex; flex-direction: column; gap: .25rem; }
.gps-popup-row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .76rem;
}
.gps-popup-row span:first-child { color: var(--tl); }
.gps-popup-state--online  { color: #22c55e; font-weight: 600; }
.gps-popup-state--offline { color: #94a3b8; }
.gps-popup-state--unknown { color: #f59e0b; }

/* ── Éléments mobiles cachés sur desktop ── */
.gps-sheet-handle { display: none; }
.gps-fab          { display: none; }

/* ── Éléments desktop cachés sur mobile ── */
.gps-sheet-toprow  { display: none; }
.gps-sheet-summary { display: none; }
.gps-sum-dot       { display: none; }

/* ── Mobile GPS — bottom sheet + FAB ── */
@media (max-width: 640px) {

  /* Layout : carte plein écran, sheet positionné en fixed */
  .gps-layout {
    position: relative;
    flex-direction: row;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h)); /* dvh = tient compte du clavier */
  }

  /* Carte = absolu, remplit tout */
  .gps-map-wrap {
    position: absolute;
    inset: 0;
    min-width: 0;
  }
  #gps-map { height: 100%; }

  /* ── FAB pill — flottant au-dessus de la carte ── */
  .gps-fab {
    display: flex;
    align-items: center;
    gap: .45rem;
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: .55rem 1.1rem .55rem .85rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    z-index: 600;
    cursor: pointer;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    transition: opacity .22s, transform .22s;
  }
  .gps-fab svg {
    width: 18px; height: 18px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.8;
    flex-shrink: 0;
  }
  .gps-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px);
  }

  /* ── Bottom sheet — entièrement caché au départ ── */
  .gps-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 72vh;
    max-height: 72dvh;
    border-radius: 20px 20px 0 0;
    border-right: none;
    border-top: none;
    box-shadow: 0 -6px 30px rgba(0,0,0,.18);
    z-index: 700;
    transform: translateY(100%);   /* totalement hors écran */
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .gps-panel.is-open { transform: translateY(0); }

  /* ── En-tête du sheet ── */
  .gps-sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    padding: .55rem .75rem .4rem;
    border-bottom: 1px solid var(--border);
    cursor: default;
  }
  .gps-sheet-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 0 auto .5rem;
  }
  .gps-sheet-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  .gps-sheet-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
  }
  .gps-sheet-summary {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: var(--tl);
    flex: 1;
    margin-left: .5rem;
  }
  .gps-sum-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .gps-sum-dot--moving  { background: #22c55e; }
  .gps-sum-dot--stopped { background: #f59e0b; }
  .gps-sum-dot--offline { background: #94a3b8; }
  .gps-sum-sep { color: var(--border); font-size: .65rem; }
  .gps-sheet-close {
    background: var(--hover);
    border: none;
    border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    color: var(--tl);
    flex-shrink: 0;
    line-height: 1;
  }
  .gps-sheet-close:hover { background: var(--border); color: var(--text); }

  /* ── Head : search, légende cachée ── */
  .gps-panel__head { padding: .5rem .75rem .4rem; }
  .gps-legend { display: none; }

  /* ── Liste : scroll vertical dans le sheet ── */
  .gps-vehicle-list {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    overscroll-behavior: contain;
  }

  /* Items normaux, pleine largeur */
  .gps-veh-item {
    padding: .65rem .75rem;
    min-width: 0;
    border-right: none;
  }
  .gps-veh-name {
    max-width: calc(100vw - 140px);
  }

  /* Barre historique : en haut de la carte, pleine largeur */
  .gps-history-bar {
    bottom: auto;
    top: 10px;
    left: 10px;
    right: 10px;
    transform: none;
    padding: .45rem .65rem;
    gap: .4rem;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .gps-history-bar input[type="date"] { font-size: .72rem; padding: 3px 6px; min-width: 110px; }
  .gps-history-bar .btn { font-size: .7rem; padding: 4px 8px; white-space: nowrap; }
}

/* ================================================================
   FLIGHT BADGE
   ================================================================ */
.bk-flight-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(59,130,246,.10);
  color: #2563EB;
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ================================================================
   FLIGHT FORM BOX
   ================================================================ */

/* ── Alerte conflit chauffeur / véhicule dans le formulaire ── */
.form-conflict-alert {
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.3);
  border-left: 3px solid #EF4444;
  border-radius: var(--r);
  padding: .55rem .85rem;
  font-size: .78rem;
  color: #B91C1C;
  line-height: 1.45;
}
.form-conflict-alert b { font-weight: 700; color: #991B1B; }

.bk-flight-box {
  background: rgba(59,130,246,.05);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: var(--r);
  padding: .85rem 1rem;
}
.bk-flight-head {
  font-size: .78rem;
  font-weight: 700;
  color: #2563EB;
  margin-bottom: .6rem;
  letter-spacing: .01em;
}
.bk-flight-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
@media (max-width: 500px) { .bk-flight-fields { grid-template-columns: 1fr; } }

/* ================================================================
   IMPORT MODAL
   ================================================================ */
.import-modal { display: flex; flex-direction: column; gap: 1rem; }
.import-hint { font-size: .83rem; color: var(--tm); margin-bottom: .25rem; }

/* ── Barre partenaire import ── */
.imp-partner-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .75rem;
  background: var(--bg2);
  border: 1px solid var(--border-l);
  border-radius: var(--r);
  margin-bottom: .75rem;
}
.imp-partner-lbl {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tm);
  white-space: nowrap;
}
.imp-partner-sel {
  flex: 1;
  max-width: 280px;
  padding: .3rem .5rem;
  font-size: .82rem;
  border: 1px solid var(--border-m);
  border-radius: calc(var(--r) - 2px);
  background: var(--bg1);
  color: var(--ts);
}
.imp-partner-hint {
  font-size: .71rem;
  color: var(--tl);
  margin-left: auto;
  white-space: nowrap;
}

.import-dropzone {
  border: 2px dashed var(--border-m);
  border-radius: var(--r);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--tr), background var(--tr);
  background: var(--surface2);
  user-select: none;
}
.import-dropzone:hover,
.import-dropzone.is-over {
  border-color: var(--gold);
  background: var(--gold-l);
}
.import-dropzone__icon { font-size: 2rem; margin-bottom: .4rem; }
.import-dropzone__txt  { font-size: .83rem; color: var(--tm); }

.import-error {
  font-size: .8rem;
  color: var(--s-cancelled);
  background: rgba(239,68,68,.07);
  border-radius: 6px;
  padding: .4rem .75rem;
  margin-top: .4rem;
}

/* ── Step 2 : vue côte à côte ── */
.imp-sidebyside {
  display: grid;
  grid-template-columns: 380px 1fr;  /* colonne image fixe, table prend le reste */
  gap: 14px;
  min-height: 0;
}

/* Panneau image (gauche) */
.imp-imgpanel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.imp-imgpanel__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tm);
}
.imp-imgpanel__nav span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Barre de zoom */
.imp-zoom-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0 4px;
}
.imp-zoom-bar input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
  cursor: pointer;
}
.imp-zoom-bar span {
  font-size: .72rem;
  color: var(--tm);
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.imp-zoom-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border-m);
  background: var(--surface2);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm);
  flex-shrink: 0;
  padding: 0;
}
.imp-zoom-btn:hover { background: var(--gold-l); border-color: var(--gold); color: var(--t); }

.imp-imgpanel__view {
  flex: 1;
  overflow: auto;          /* scroll X et Y quand image agrandie */
  border: 1px solid var(--border-m);
  border-radius: var(--r);
  background: var(--surface2);
  max-height: 420px;
  cursor: default;
}
.imp-imgpanel__view img {
  display: block;
  /* width contrôlé par setZoom() — transition douce */
  transition: width .12s ease;
}
.imp-imgpanel__date {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px;
}

/* Panneau tableau (droite) */
.imp-tablepanel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.imp-tbl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.imp-tbl-scroll {
  flex: 1;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: auto;   /* scroll horizontal si tableau trop large (2 colonnes lieu) */
}

/* Onglets filtre par image */
.imp-filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.imp-filter-tab {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border-m);
  background: var(--surface2);
  color: var(--tm);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imp-filter-tab:hover { background: var(--gold-l); color: var(--t); }
.imp-filter-tab.is-active { background: var(--gold); color: #fff; border-color: var(--gold); }

/* Ligne surlignée (image affichée dans le viewer) */
#imp-tbody tr { cursor: pointer; transition: background var(--tr-fast); }
#imp-tbody tr.imp-row--active { background: rgba(198,156,109,.10); }
#imp-tbody tr:hover { background: var(--gold-l); }

/* ── Doublon détecté à l'import ── */
#imp-tbody tr.imp-row--dup { background: rgba(245,158,11,.07); }
#imp-tbody tr.imp-row--dup td:first-child { position: relative; }
.imp-dup-badge {
  display: inline-block; font-size: .68rem; font-weight: 800;
  color: #B45309; background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.4);
  border-radius: 3px; padding: 0 3px; margin-left: 2px;
  vertical-align: middle; cursor: help;
}

/* Responsive : empiler sur petit écran */
@media (max-width: 640px) {
  .imp-sidebyside { grid-template-columns: 1fr; }
  .imp-imgpanel__view { max-height: 200px; }
  .imp-tbl-scroll { max-height: 260px; }
}

.import-results-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-size: .83rem;
  color: var(--tm);
  font-weight: 600;
}
.import-results-head span { flex: 1; font-size: .85rem; color: var(--t); }

/* Grille de miniatures */
.import-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 0;
}
.imp-thumb {
  position: relative;
  width: 80px;
  flex-shrink: 0;
}
.imp-thumb img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-m);
  display: block;
}
.imp-thumb__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--s-cancelled);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: .6rem;
  line-height: 18px;
  text-align: center;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imp-thumb__name {
  font-size: .6rem;
  color: var(--tl);
  text-align: center;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}

/* Badge numéro de source dans le tableau */
.imp-src-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-l);
  color: var(--gold-d);
  font-size: .68rem;
  font-weight: 700;
  border: 1px solid var(--gold-b);
}

/* ── Lightbox plein écran ── */
.imp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.imp-lightbox__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0,0,0,.6);
  flex-shrink: 0;
  gap: 12px;
}
.imp-lightbox__name {
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imp-lightbox__close {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: .82rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.imp-lightbox__close:hover { background: rgba(255,255,255,.28); }
.imp-lightbox__scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
}
.imp-lightbox__img {
  display: block;
  max-width: none;   /* pleine résolution */
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0,0,0,.5);
  cursor: default;
}

/* ── Inputs éditables dans le tableau d'import ── */
.imp-edit-table {
  table-layout: fixed;
  min-width: 1050px;
  border-collapse: collapse;
  width: 100%;
}
.imp-edit-table th {
  font-size: .72rem;
  font-weight: 600;
  color: var(--tm);
  text-align: left;
  padding: 4px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 2px solid var(--border);
  background: var(--surface2);
}
.imp-edit-table td { padding: 2px 3px; vertical-align: middle; overflow: hidden; }
.imp-cell {
  font-size: .76rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  padding: 2px 4px;
  width: 100%;
  min-width: 0;
  font-family: inherit;
  color: var(--t);
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.imp-cell:hover  { border-color: var(--border-m); background: var(--surface2); }
.imp-cell:focus  { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 2px rgba(198,156,109,.18); }
.imp-cell.mono   { font-family: monospace; }
.imp-dir-sel {
  cursor: pointer;
  width: 100%;
  min-width: 66px;
  font-size: .74rem;
  padding: 2px 2px;
}

/* Cellule passager (nom + téléphone empilés) */
.imp-cell-pax {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 3px;
}
.imp-cell-pax .imp-cell { width: 100%; min-width: 0; }
.imp-cell--phone {
  font-size: .69rem !important;
  color: var(--tm) !important;
}
/* Colonne H. client/vol — verte si remplie */
.imp-cell--deptime { transition: background .15s; }
.imp-cell--deptime-ok { background: rgba(16,185,129,.09) !important; }
/* Colonne N° vol — opacité réduite pour P2P (géré par JS) */
.imp-cell--volno { transition: opacity .2s; }

/* Cellule lieu avec badge de matching (pickup / dropoff) */
.imp-cell-loc { padding: 0; }
.imp-loc-inner {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 3px;
  width: 100%;
  box-sizing: border-box;
}
.imp-loc-inner .imp-cell { flex: 1; min-width: 0; width: auto; }
.imp-loc-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 800;
  cursor: help;
}
.imp-loc-badge--ok  { background: rgba(16,185,129,.15); color: #059669; border: 1px solid rgba(16,185,129,.3); }
.imp-loc-badge--new { background: rgba(245,158,11,.15);  color: #D97706;  border: 1px solid rgba(245,158,11,.3); }

/* ── Colonne Hôtel client (client_location) dans le tableau import ── */
.imp-cell--cloc {
  font-size: .72rem;
  color: var(--tm);
  background: rgba(99,102,241,.04);
  border-color: rgba(99,102,241,.18) !important;
  width: 100%;
}
.imp-cell--cloc:focus { background: #fff; border-color: var(--primary) !important; }
.imp-cell--cloc::placeholder { opacity: .55; }

/* ── Badge hébergement client dans la liste des réservations ── */
.bk-cloc-badge {
  display: inline-block;
  font-size: .7rem;
  color: var(--tm);
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.6;
}

/* ── Barre d'actions groupées (réservations) ── */
.bk-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--gold-b);
  border-radius: var(--r);
  padding: 8px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(198,156,109,.12);
  animation: fadeIn .15s var(--ease);
}
.bk-bulk-sel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--t);
  cursor: pointer;
  user-select: none;
}
.bk-bulk-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.bk-bulk-sel-inp {
  font-size: .78rem;
  padding: 4px 8px;
  border: 1px solid var(--border-m);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--t);
  cursor: pointer;
}

/* ── Badge cliquable (statut / paiement inline) ── */
.bk-badge-click {
  cursor: pointer;
  transition: opacity var(--tr-fast), transform var(--tr-fast);
}
.bk-badge-click:hover { opacity: .8; transform: scale(1.04); }
.bk-badge-click:active { transform: scale(.97); }

/* Popover de sélection rapide */
.bk-status-picker {
  background: var(--surface);
  border: 1px solid var(--border-m);
  border-radius: var(--r);
  box-shadow: var(--sh-lift);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}
.bk-sp-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--tr-fast);
  /* hérite les couleurs du badge correspondant */
}
.bk-sp-opt.is-cur { outline: 2px solid var(--gold); outline-offset: -1px; }
.bk-sp-opt:hover  { opacity: .75; }

/* ── Tags direction transfert (DEP / ARR / P2P) ── */
.bk-dir-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.bk-dir-dep {
  background: rgba(234,88,12,.10);
  color: #C2410C;
  border: 1px solid rgba(234,88,12,.20);
}
.bk-dir-arr {
  background: rgba(37,99,235,.10);
  color: #1D4ED8;
  border: 1px solid rgba(37,99,235,.20);
}
.bk-dir-pp {
  background: rgba(124,58,237,.10);
  color: #6D28D9;
  border: 1px solid rgba(124,58,237,.20);
}

/* Route dans les cards mobile */
.bk-card__route {
  font-size: .72rem;
  color: var(--tm);
  gap: 4px;
  flex-wrap: wrap;
}
.bk-route-arrow { color: var(--gold); font-weight: 700; }

/* Direction badges in import table */
.bk-dir {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.bk-dir.dep { background: rgba(245,158,11,.12); color: #B45309; }
.bk-dir.arr { background: rgba(59,130,246,.12); color: #1D4ED8; }

/* ================================================================
   JOURNAL D'ACTIVITÉ
   ================================================================ */
.act-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
  align-items: center;
}
.act-filters .form-control {
  flex: 1;
  min-width: 130px;
  max-width: 200px;
}
.act-count {
  font-size: .8rem;
  color: var(--tl);
  margin-bottom: .5rem;
  text-align: right;
}
.act-table { font-size: .82rem; }
.act-table th { font-size: .72rem; }
.act-username {
  font-size: .84rem;
  color: var(--fg);
  background: var(--bg-card2);
  padding: 1px 6px;
  border-radius: 4px;
}
.act-changes-cell { max-width: 300px; }
.act-change {
  font-size: .74rem;
  line-height: 1.4;
  margin-bottom: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}
.act-field { font-weight: 600; color: var(--fg); min-width: 70px; }
.act-old { color: var(--red); text-decoration: line-through; opacity: .8; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-new { color: var(--green); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.act-page-info { font-size: .82rem; color: var(--tl); }

/* ================================================================
   GESTION DES UTILISATEURS
   ================================================================ */
#users-section .data-table { font-size: .84rem; }
.row--inactive { opacity: .5; }
.row--inactive td { font-style: italic; }

/* ================================================================
   BADGES RÔLES
   ================================================================ */
.badge--admin    { background: rgba(198,156,109,.15); color: #92612A; border: 1px solid rgba(198,156,109,.3); }
.badge--employee { background: rgba(16,185,129,.12);  color: #065F46; border: 1px solid rgba(16,185,129,.25); }
.badge--driver   { background: rgba(245,158,11,.12);  color: #92400E; border: 1px solid rgba(245,158,11,.25); }
.badge--b2b      { background: rgba(99,102,241,.12);  color: #3730A3; border: 1px solid rgba(99,102,241,.25); }

/* ================================================================
   PORTAIL CLIENT B2B
   ================================================================ */
.b2b-header .card-box__body { padding: 1rem 1.25rem; }
.b2b-logo { font-size: 2rem; line-height: 1; }
.b2b-kpis { margin-bottom: 0; }

.b2b-table-wrap { overflow-x: auto; }
.b2b-table { font-size: .82rem; }
.b2b-table th { font-size: .72rem; }
.b2b-loc { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.b2b-row--done      { opacity: .7; }
.b2b-row--cancelled { opacity: .45; text-decoration: line-through; }

.b2b-partner-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(99,102,241,.1);
  color: #3730A3;
  font-size: .75rem;
  font-weight: 500;
  border: 1px solid rgba(99,102,241,.2);
}

/* Chip B2B dans la liste des utilisateurs */
.mono-badge {
  font-family: monospace;
  font-size: .8rem;
  background: var(--bg-card2);
  padding: 1px 6px;
  border-radius: 4px;
}