/*
 * Espace client BTP : présentation modernisée, par-dessus stylesbtp.css (v1). Le HTML et le fonctionnement des écrans
 * sont ceux de la v1 ; seules les règles ci-dessous changent l'apparence (barre du haut, colonne de gauche en carte,
 * formulaires, onglets, tableaux, boutons, cartes Leaflet, paramétrage, connexion).
 */
:root {
  --mfb-red: #d71920;
  --mfb-red-dark: #b5141a;
  --mfb-red-soft: #fdecec;
  --mfb-ink: #1d2433;
  --mfb-muted: #6b7280;
  --mfb-line: #e7e9ee;
  --mfb-bg: #f3f4f7;
  --mfb-card: #ffffff;
  --mfb-radius: 14px;
  --mfb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .06);
  --mfb-top: 68px;
}

body {
  background: var(--mfb-bg);
  color: var(--mfb-ink);
  font-family: 'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--mfb-red); }
a:hover { color: var(--mfb-red-dark); }

/* ---------- Barre du haut ---------- */
header { background: #fff; box-shadow: 0 1px 0 var(--mfb-line), 0 4px 16px rgba(16, 24, 40, .05); }
header .mfb-topbar { background: transparent; min-height: var(--mfb-top); align-items: center; }
header .logo { width: 150px; height: auto; padding: 0; margin: 12px 0 12px 8px; display: inline-block; }
.menutop { padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; }
.menutop li { padding: 0; font-size: 14px; }
.menutop li a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: #374151; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.menutop li a .fa { color: #9ca3af; font-size: 15px; transition: color .15s; }
.menutop li a:hover { background: #f3f4f6; color: var(--mfb-ink); text-decoration: none; }
.menutop li a:hover .fa { color: var(--mfb-red); }
.menutop li.actiflink a { background: var(--mfb-red-soft); color: var(--mfb-red); text-decoration: none; }
.menutop li.actiflink a .fa { color: var(--mfb-red); }
.menutop li.mfb-actions { margin-left: 6px; }
.menutop li.mfb-actions + li.mfb-actions { margin-left: 0; }
.menutop .btn { border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: 13px !important; }
.menutop #parameters { background: #fff; color: #374151; border: 1px solid var(--mfb-line); }
.menutop #parameters:hover { border-color: #cfd3da; background: #f9fafb; }
.menutop #pastille { width: 18px !important; height: 18px; line-height: 18px; font-size: 11px; color: #fff; background: #f59e0b !important; right: -6px !important; top: -6px !important; text-align: center; font-weight: 700; }
.bgopen { width: 40px; height: 40px; margin: 14px 8px 0 0; border-radius: 10px; display: none; align-items: center; justify-content: center; padding: 0; color: var(--mfb-ink); }
.bgopen:hover { background: #f3f4f6; }
@media screen and (max-width: 960px) {
  .bgopen { display: inline-flex; float: right; }
  .menutop { display: none; flex-direction: column; align-items: stretch; padding: 8px 0 14px; }
  .menutop li { display: block; border: 0 !important; padding: 0 !important; }
  .menutop li a { display: flex; border-radius: 10px; }
  .menutop li.mfb-actions { margin: 6px 0 0; }
  .menutop .btn { width: 100%; }
}

/* ---------- Mise en page : colonne de gauche + contenu ---------- */
.container.padall { padding: calc(var(--mfb-top) + 20px) 20px 24px; }
.container.padall > .row { --bs-gutter-x: 20px; }
/* Colonne de gauche : carte blanche, collée sous la barre du haut */
.container.padall > .row > .col-sm-3 {
  background: var(--mfb-card);
  border-radius: var(--mfb-radius);
  box-shadow: var(--mfb-shadow) !important;
  border: 1px solid var(--mfb-line);
  padding: 14px 16px 16px;
  margin-bottom: 20px;
  align-self: flex-start;
}
@media (min-width: 576px) {
  .container.padall > .row > .col-sm-3 {
    position: sticky;
    top: calc(var(--mfb-top) + 20px);
    max-height: calc(100vh - var(--mfb-top) - 40px);
    overflow-y: auto;
  }
  .container.padall > .row > .col-sm-9 {
    flex: 0 0 auto;
    width: calc(75% - 10px);
    margin-left: 10px;
    padding: 0 10px;
  }
}
.container.padall > .row > .col-sm-3::-webkit-scrollbar { width: 6px; }
.container.padall > .row > .col-sm-3::-webkit-scrollbar-thumb { background: #d6d9df; border-radius: 6px; }
/* Titre de l'écran en haut de la colonne de gauche */
.container.padall .col-sm-3 > h4.btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; margin: 0 0 12px !important; padding: 4px 0 12px;
  background: none; border: 0; border-bottom: 1px solid var(--mfb-line); border-radius: 0;
  color: var(--mfb-ink); font-size: 16px; font-weight: 700; text-align: left; letter-spacing: -.01em;
  box-shadow: none; position: relative;
}
.container.padall .col-sm-3 > h4.btn::before { content: ''; width: 4px; height: 20px; border-radius: 4px; background: var(--mfb-red); flex: none; }
.container.padall .col-sm-3 > h4.btn .fa-refresh {
  position: static !important; order: 3; margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--mfb-muted); background: #f3f4f6;
}
.container.padall .col-sm-3 > h4.btn .fa-refresh:hover { color: var(--mfb-red); background: var(--mfb-red-soft); }
.container.padall .col-sm-3 > p { color: var(--mfb-muted); }
#datatxt .row > div, #datatxt.row > div { padding-top: 6px !important; padding-bottom: 6px !important; border-bottom: 1px dashed var(--mfb-line); }
#datatxt .col-4, #datatxt .col-6 + .col-6 { font-weight: 600; color: var(--mfb-ink); }

/* Temps réel : liste des véhicules */
.sm3real { min-height: calc(100vh - var(--mfb-top) - 40px) !important; max-height: calc(100vh - var(--mfb-top) - 40px) !important; }
.sm3real > div[id^="bal"] {
  border: 1px solid transparent !important; border-bottom: 1px solid var(--mfb-line) !important;
  border-radius: 10px; padding: 10px 8px 8px; margin-bottom: 4px !important; transition: background .15s, border-color .15s;
}
.sm3real > div[id^="bal"]:hover { background: #f9fafb; border-color: var(--mfb-line) !important; }
.sm3real > div[id^="bal"] b { font-weight: 600 !important; font-size: 13px !important; }
.sm3real > div[id^="bal"] .fa-chevron-down { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--mfb-muted); background: #f3f4f6; font-size: 11px; }
.sm3real > div[id^="bal"] .fa-chevron-down:hover { color: var(--mfb-red); background: var(--mfb-red-soft); }
.sm3real img[id^="img"] { width: 22px !important; }
.sm3real a.open-popup > div { border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 8px !important; }
.sm3real [id^="contentbal"] .container { padding: 8px 4px !important; font-size: 13px; }

/* ---------- Contenu ---------- */
.container.padall .col-sm-9 > .row:first-child,
.container.padall .col-sm-9 > form,
.container.padall .col-sm-9 > .user,
.container.padall .col-sm-9 > .tab-content { position: relative; }
.container.padall .col-sm-9 .user,
.container.padall .col-sm-9 .tab-content {
  background: var(--mfb-card); border: 1px solid var(--mfb-line); border-radius: var(--mfb-radius);
  box-shadow: var(--mfb-shadow); padding: 16px; margin-top: 14px;
}
.container.padall .col-sm-9 .user .tab-content { border: 0; box-shadow: none; padding: 0; margin-top: 12px; }

/* Sous-menu des rubriques (rapports, alertes) */
.ssmenurapports { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px !important; margin: 0 0 14px !important; background: #e9ebf0; border-radius: 12px; }
.ssmenurapports li { padding: 0 !important; }
.ssmenurapports li a { display: inline-block; padding: 7px 14px; border-radius: 9px; color: #4b5563; font-weight: 500; text-decoration: none !important; }
.ssmenurapports li a:hover { color: var(--mfb-ink); background: rgba(255, 255, 255, .6); }
.ssmenurapports li.actiflink a { background: #fff; color: var(--mfb-red); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }

/* Onglets */
.nav-tabs { border-bottom: 1px solid var(--mfb-line); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--mfb-muted); font-weight: 500; padding: 9px 14px; margin-bottom: -1px; background: none; }
.nav-tabs .nav-link:hover { color: var(--mfb-ink); border-bottom-color: #d1d5db; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--mfb-red); border-bottom-color: var(--mfb-red); background: none; }
.nav-pills .nav-link.active { background: var(--mfb-red); }
.nav-link { font-size: 14px; }

/* Formulaires */
.form-control, .form-select {
  border-radius: 10px; border-color: #dfe2e8; min-height: 40px; font-size: 14px; color: var(--mfb-ink); background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus { border-color: #f08a8d; box-shadow: 0 0 0 4px rgba(215, 25, 32, .12); }
.form-check-input:checked { background-color: var(--mfb-red); border-color: var(--mfb-red); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(215, 25, 32, .12); border-color: #f08a8d; }
label, .form-label { color: #4b5563; font-weight: 500; }

/* Boutons */
.btn { border-radius: 10px; font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn-danger, input.btn-danger { background: var(--mfb-red); border-color: var(--mfb-red); }
.btn-danger:hover, .btn-danger:focus { background: var(--mfb-red-dark); border-color: var(--mfb-red-dark); box-shadow: 0 4px 12px rgba(215, 25, 32, .25); }
.btn-outline-danger { color: var(--mfb-red); border-color: #f1b7b9; }
.btn-outline-danger:hover { background: var(--mfb-red); border-color: var(--mfb-red); }
.btn-outline-success { color: #15803d; border-color: #b7e0c4; }
.btn-outline-success:hover { background: #15803d; border-color: #15803d; }
.btn-outline-secondary { color: #4b5563; border-color: #dfe2e8; background: #fff; }
.btn-outline-secondary:hover { background: #f3f4f6; color: var(--mfb-ink); border-color: #cfd3da; }
.btn-secondary { background: #4b5563; border-color: #4b5563; }
.btn-sm { border-radius: 8px; }
.container.padall form input[type="submit"].btn { min-height: 40px; padding-left: 18px; padding-right: 18px; }

/* Tableaux */
.table { --bs-table-striped-bg: #fafbfc; color: var(--mfb-ink); font-size: 13.5px; margin-bottom: 0; }
.table > thead th, .table > thead td, .table tr.headtr td {
  background: #f6f7f9 !important; color: #4b5563; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--mfb-line); white-space: nowrap; vertical-align: middle;
}
.table > :not(caption) > * > * { padding: 10px 12px; border-bottom-color: #eef0f3; }
.table-striped > tbody > tr:hover > * { --bs-table-accent-bg: #f4f6fa; }
.table-responsive, div:has(> table.table) { border-radius: 12px; }

/* Cartes Leaflet */
#mapid, [id^="mapid"], .leaflet-container { border-radius: var(--mfb-radius); }
.container.padall .col-sm-9 > #mapid,
.container.padall .col-sm-9 #mapid { box-shadow: var(--mfb-shadow); border: 1px solid var(--mfb-line); }
.sm3real + .col-sm-9 #mapid { height: calc(100vh - var(--mfb-top) - 40px) !important; }
@media screen and (max-width: 960px) { .sm3real + .col-sm-9 #mapid { height: 70vh !important; } }
.leaflet-bar, .leaflet-control-layers { border: 0 !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(16, 24, 40, .15) !important; overflow: hidden; }
.leaflet-control-custom { border-radius: 10px !important; font-weight: 600 !important; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 24, 40, .2); }
.leaflet-popup-content { font-size: 13px; line-height: 1.5; }
.leaflet-tooltip.custom-label { border: 0; border-radius: 6px; box-shadow: 0 2px 8px rgba(16, 24, 40, .18); font-weight: 600; font-size: 11px; padding: 3px 7px; }
.leaflet-container .marker-cluster-small, .leaflet-container .marker-cluster-medium, .leaflet-container .marker-cluster-large { background-color: rgba(215, 25, 32, .18); }
.leaflet-container .marker-cluster-small div, .leaflet-container .marker-cluster-medium div, .leaflet-container .marker-cluster-large div { background-color: rgba(215, 25, 32, .85); color: #fff; font-weight: 700; }

/* Fenêtre de paramétrage (filtres) */
#parametersbox.fixed-container {
  top: 50% !important; transform: translate(-50%, -50%) !important; width: min(560px, calc(100vw - 32px)); max-width: none;
  height: auto !important; max-height: calc(100vh - 80px); padding: 0; border: 0; border-radius: 18px; background: #fff;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .28), 0 0 0 100vmax rgba(17, 24, 39, .35); z-index: 2000;
}
#parametersbox .scrollable-content { max-height: calc(100vh - 80px); }
#parametersbox .content { padding: 20px 24px 24px; }
#parametersbox h4 { font-size: 18px !important; font-weight: 700; color: var(--mfb-ink); }
#parametersbox #closeparameters { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: var(--mfb-muted); margin-top: -4px !important; font-size: 24px !important; }
#parametersbox #closeparameters:hover { background: var(--mfb-red-soft); color: var(--mfb-red); }
#parametersbox .dropdown-menu { border: 1px solid var(--mfb-line); border-radius: 12px; box-shadow: none; padding: 8px 0; max-height: 260px; overflow-y: auto; }
#parametersbox .dropdown-toggle { text-align: left; display: flex; justify-content: space-between; align-items: center; min-height: 42px; }
#parametersbox .form-check { padding-top: 3px; padding-bottom: 3px; }

/* Pop-up (suivi chauffeur, tableau de bord) */
.mfp-bg { background: #111827; opacity: .6; }
.mfp-iframe-holder .mfp-content { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }

/* Chargement de page */
.page_loader { background: var(--mfb-bg) !important; }
.loader2 { background: #fff !important; box-shadow: var(--mfb-shadow); }

/* ---------- Connexion ---------- */
body > .container.mt-5.shadow {
  margin-top: 12vh !important; padding: 28px 32px 20px; background: #fff; border: 1px solid var(--mfb-line) !important;
  border-radius: 20px; box-shadow: 0 20px 50px rgba(16, 24, 40, .12) !important;
}
body > .container.mt-5.shadow h2 { font-size: 17px !important; font-weight: 600; color: var(--mfb-ink); margin-bottom: 8px; }
body > .container.mt-5.shadow .form-control { min-height: 46px; }
body > .container.mt-5.shadow .valider { width: 100%; min-height: 46px; font-weight: 600; }

/* Boutons d'export (copier / Excel / PDF) : sur une ligne */
#btn .row > [class^="col-"] { flex: 0 0 auto; width: auto; }
#btn .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }

/* ---------- Temps réel : bulle d'un véhicule sur la carte ---------- */
.leaflet-popup-content:has(.mfb-pop) { margin: 14px 16px; min-width: 240px; }
.mfb-pop__title { font-size: 15px; font-weight: 700; color: var(--mfb-ink); line-height: 1.3; padding-right: 14px; margin-bottom: 10px; }
.mfb-pop__list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 12.5px; }
.mfb-pop__list dt { color: var(--mfb-muted); font-weight: 500; }
.mfb-pop__list dd { margin: 0; color: var(--mfb-ink); font-variant-numeric: tabular-nums; }
.mfb-pop__btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 6px; padding: 8px 10px;
  border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: filter .15s, box-shadow .15s;
}
.mfb-pop__btn--map { background: #eef4fe; color: #1a5fd0 !important; }
.mfb-pop__btn--driver { background: #e9f8ee; color: #15803d; }
.mfb-pop__btn:hover { filter: brightness(.96); box-shadow: 0 2px 8px rgba(16, 24, 40, .12); }
.leaflet-container a.leaflet-popup-close-button { top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px; color: var(--mfb-muted); }
.leaflet-container a.leaflet-popup-close-button:hover { background: #f3f4f6; color: var(--mfb-ink); }

/* ---------- Suivi chauffeur (fenêtre app/btpnew/truktracking.php) ---------- */
html body .tabledriver {
  width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--mfb-line);
  border-radius: var(--mfb-radius); overflow: hidden; box-shadow: var(--mfb-shadow); font-size: 14px;
}
html body .tabledriver tr td { border: 0; border-bottom: 1px solid #eef0f3; padding: 12px 14px; vertical-align: middle; }
html body .tabledriver tr:last-child td { border-bottom: 0; }
html body .tabledriver tr.headtr td {
  background: #f6f7f9; color: #4b5563; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; text-align: left;
}
html body .tabledriver tr:not(.headtr):hover td { background: #fafbfc; }
html body .tabledriver td > div[style*="border-radius:100%"] {
  width: 38px !important; height: 38px !important; line-height: 38px !important; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, #34d399, #0ea5a4) !important; box-shadow: 0 2px 6px rgba(14, 165, 164, .3);
}
html body .tabledriver td img[src*="tachograph"] { width: 30px !important; margin-right: 6px; opacity: .85; }
html body .tabledriver .btndriver1 { color: var(--mfb-red) !important; transition: transform .15s; }
html body .tabledriver .btndriver1:hover { transform: scale(1.1); }
body:has(.tabledriver) { background: var(--mfb-bg); }
body:has(.tabledriver) .logo { width: 140px; }
body:has(.tabledriver) h2[style*="color:red"] { color: var(--mfb-ink) !important; font-weight: 700; font-size: 20px !important; line-height: 40px; }
body:has(.tabledriver) #mapid { border-radius: var(--mfb-radius); box-shadow: var(--mfb-shadow); border: 1px solid var(--mfb-line); margin-top: 18px !important; }

/* Fiche des temps du conducteur */
html body .boxdriver {
  width: min(760px, calc(100vw - 32px)); top: 24px; height: auto; max-height: calc(100vh - 48px); overflow-y: auto;
  border-radius: 18px; border: 0; box-shadow: 0 24px 64px rgba(16, 24, 40, .28), 0 0 0 100vmax rgba(17, 24, 39, .35);
}
html body .boxdriver > div > div { padding: 24px 28px 28px !important; }
html body .boxdriver .closeparent {
  width: 34px; height: 34px; margin: 16px 16px 0 0 !important; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #f3f4f6; color: var(--mfb-muted); font-size: 26px !important; line-height: 1;
}
html body .boxdriver .closeparent:hover { background: var(--mfb-red-soft); color: var(--mfb-red); }
html body .boxdriver h2 { font-size: 20px !important; font-weight: 700; color: var(--mfb-ink) !important; margin-bottom: 18px; }
html body .boxdriver h2 .fa { color: #0ea5a4 !important; margin-right: 4px; }
html body .boxdriver h3 {
  font-size: 13px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mfb-muted);
  border-bottom: 0 !important; margin: 22px 0 10px !important; display: flex; align-items: center; gap: 8px;
}
html body .boxdriver h3 .fa { color: var(--mfb-red); font-size: 15px; }
html body .boxdriver p {
  background: #f8f9fb; border: 1px solid #eef0f3; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px;
  line-height: 1.9 !important; font-size: 14px; color: #374151;
}
html body .boxdriver p > .fa-check-square-o { color: #0ea5a4; margin-right: 2px; }
html body .boxdriver b[style*="#6dcfb9"], html body .boxdriver b[style*="orange"] {
  display: inline-block; padding: 0 8px; border-radius: 999px; font-variant-numeric: tabular-nums; line-height: 1.6;
}
html body .boxdriver b[style*="#6dcfb9"] { color: #047857 !important; background: #d1fae5; }
html body .boxdriver b[style*="orange"] { color: #b45309 !important; background: #fef3c7; }

/* ---------- i-beacons ---------- */
/* Recherche i-beacon : un coin par carte (nom, actions), ses détections à droite */
table.mfb-ib-head { margin: 0 0 8px !important; }
table.mfb-ib-head td { border: 0 !important; padding: 0 4px 4px !important; color: var(--mfb-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
table.mfb-ib {
  display: block; margin: 0 0 12px !important; background: #fff; border: 1px solid var(--mfb-line); border-radius: var(--mfb-radius);
  box-shadow: var(--mfb-shadow); overflow: hidden;
}
table.mfb-ib > tbody, table.mfb-ib > tbody > tr { display: block; }
table.mfb-ib > tbody > tr { display: flex; flex-wrap: wrap; }
table.mfb-ib > tbody > tr > td { border: 0 !important; padding: 14px 16px !important; text-align: left !important; vertical-align: top; }
table.mfb-ib > tbody > tr > td:first-child { flex: 0 0 260px; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; align-self: flex-start; gap: 8px; font-weight: 600; color: var(--mfb-ink); }
table.mfb-ib > tbody > tr > td:last-child { flex: 1 1 360px; min-width: 0; padding-top: 6px !important; }
table.mfb-ib > tbody > tr > td:last-child:not(:has(> div:not([style*="none"]))) { display: none; }
table.mfb-ib > tbody > tr > td:first-child img, table.mfb-ib > tbody > tr > td:first-child .fa-user { float: none !important; margin: 0 2px 0 0 !important; max-width: 18px; font-size: 16px !important; color: var(--mfb-muted); }
.mfb-ib-toggle, .mfb-ib-btn {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex !important; align-items: center; justify-content: center;
  background: #f3f4f6; border: 0; color: #4b5563; font-size: 16px !important; cursor: pointer; transition: background .15s, color .15s;
}
.mfb-ib-btn .fa { font-size: 16px !important; }
.mfb-ib-toggle:hover, .mfb-ib-btn:hover { background: var(--mfb-red-soft); color: var(--mfb-red); }
.mfb-ib-toggle::after { content: 'Dernières positions'; display: none; }
.mfb-ib-form { display: inline-flex; margin: 0; order: 1; }
.mfb-ib-toggle { order: 2; }
table.mfb-ib > tbody > tr > td:first-child > img, table.mfb-ib > tbody > tr > td:first-child > .fa-user { order: -1; }
/* Détections chargées (dernières positions du coin, une par balise) */
table.mfb-ib td > div > .container { padding: 0; }
table.mfb-ib td > div > .container > .row { margin: 10px 0 0; padding: 12px; border: 1px solid #eef0f3; border-radius: 12px; background: #fafbfc; align-items: stretch; }
table.mfb-ib td > div > .container > .row > .col-sm-4 p { margin: 0 0 6px; font-size: 13px; color: #374151; }
table.mfb-ib td > div > .container > .row > .col-sm-4 p:first-child { font-weight: 600; color: var(--mfb-ink); }
table.mfb-ib td > div > .container > .row > .col-sm-4 .fa { width: 16px; color: var(--mfb-red); }
table.mfb-ib td > div > .container > .row > .col-sm-8 { background: transparent !important; padding: 0; }
table.mfb-ib iframe { border-radius: 10px; display: block; }

/* i-beacons : détections d'un coin un jour donné, une carte par balise */
.mfb-ib-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mfb-muted); }
.mfb-ib-head > div { padding-top: 4px !important; padding-bottom: 4px !important; }
.mfb-ib-row {
  background: #fff !important; border: 1px solid var(--mfb-line); border-radius: var(--mfb-radius); box-shadow: var(--mfb-shadow);
  padding: 14px 6px !important; margin: 0 0 12px !important;
}
.mfb-ib-row > .col-sm-3 > b { font-weight: 700; color: var(--mfb-ink); }
.mfb-ib-row [id^="beacon-data"] { font-size: 13px; color: #374151; line-height: 1.9; }
.mfb-ib-row [id^="beacon-data"] .fa-bluetooth { color: #2563eb; }
.mfb-ib-row [id^="map"] { border-radius: 12px; border: 1px solid var(--mfb-line); }
.mfb-ib-wait {
  top: auto !important; left: auto !important; right: 24px; bottom: 24px; transform: none !important;
  width: auto !important; height: auto !important; min-width: 240px; padding: 14px 18px !important; border: 0 !important; font-size: 13px;
  border-radius: 14px; box-shadow: 0 16px 48px rgba(16, 24, 40, .22); font-weight: 600;
}
#nodata p { color: var(--mfb-muted); }

/* Boutons d'export (copier / Excel / PDF), sur tous les écrans : largeur du texte, sur une ligne */
[class^="col-"]:has(> .copy_buttonxls, > .export_buttonxls, > .export_buttonpdf) { flex: 0 0 auto; width: auto; padding-right: 0; }
.row:has(> [class^="col-"] > .export_buttonxls) { gap: 8px; margin-left: 0; margin-right: 0; }
.row:has(> [class^="col-"] > .export_buttonxls) > [class^="col-"] { padding-left: 0; }
.copy_buttonxls, .export_buttonxls, .export_buttonpdf {
  width: auto !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px !important; font-size: 13px !important; border-radius: 10px;
}
.copy_buttonxls .fa, .export_buttonxls .fa, .export_buttonpdf .fa { margin-right: 0 !important; }

/* ---------- Déplacements : boutons de la carte (direction, éco-conduite, ralentis) ---------- */
.leaflet-control.mfb-mapbtn {
  display: flex; align-items: center; gap: 8px; width: 220px; padding: 8px 14px 8px 12px !important; margin-top: 8px !important;
  background: #fff !important; color: var(--mfb-ink); font-size: 13px; font-weight: 600; line-height: 1.2; user-select: none;
  transition: background .15s, color .15s;
}
.leaflet-control.mfb-mapbtn .fa {
  width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: #f3f4f6; color: #4b5563; font-size: 13px;
}
.leaflet-control.mfb-mapbtn:hover { background: #f9fafb !important; }
.leaflet-control.mfb-mapbtn:hover .fa { background: var(--mfb-red-soft); color: var(--mfb-red); }
.leaflet-control.mfb-mapbtn .fa-leaf { color: #15803d; }
.leaflet-control.mfb-mapbtn .fa-hourglass-half { color: #b45309; }

/* ---------- Déplacements : tableau des trajets (trajet / arrêt) ---------- */
#geocoding { border-collapse: separate; border-spacing: 0; }
#geocoding > thead th { text-align: left !important; }
#geocoding > tbody > tr > td { text-align: left !important; vertical-align: middle; border-bottom: 1px solid #eef0f3; }
/* trajet : ligne blanche, repère vert, heure de départ en évidence */
#geocoding > tbody > tr[style*="e0fae0"] > td { background: #fff !important; color: var(--mfb-ink); }
#geocoding > tbody > tr[style*="e0fae0"] > td:first-child { box-shadow: inset 3px 0 0 #22c55e; font-weight: 600; white-space: nowrap; }
#geocoding > tbody > tr[style*="e0fae0"] > td:nth-child(2) { font-weight: 600; white-space: nowrap; }
#geocoding > tbody > tr[style*="e0fae0"] > td:nth-child(2)::before {
  content: 'Trajet'; display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
#geocoding > tbody > tr[style*="e0fae0"] > td:nth-child(4), #geocoding > tbody > tr[style*="e0fae0"] > td:nth-child(5) { font-variant-numeric: tabular-nums; white-space: nowrap; }
#geocoding > tbody > tr[style*="e0fae0"] > td:nth-child(6), #geocoding > tbody > tr[style*="e0fae0"] > td:nth-child(7) { font-size: 12.5px; color: #4b5563; min-width: 180px; }
/* arrêt : ligne grise plus discrète, repère orange */
#geocoding > tbody > tr[style*="ffe6ea"] > td { background: #f9fafb !important; color: var(--mfb-muted); font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }
#geocoding > tbody > tr[style*="ffe6ea"] > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
#geocoding > tbody > tr[style*="ffe6ea"] > td:nth-child(2) { white-space: nowrap; }
#geocoding > tbody > tr[style*="ffe6ea"] > td:nth-child(2)::before {
  content: 'Arrêt'; display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  background: #fef3c7; color: #b45309; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
#geocoding > tbody > tr:hover > td { background: #f4f6fa !important; }
#tablecontent { border-radius: 12px; border: 1px solid var(--mfb-line); }

/* Cadre de résultats vide (avant d'envoyer le formulaire) : masqué ; jamais de défilement horizontal de la page */
.container.padall .col-sm-9 .user:not(:has(> :not(style, script))) { display: none; }
.container.padall { overflow-x: clip; }

/* Raccourcis de période des rapports */
.mfb-periods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; width: 100%; }
.mfb-period {
  border: 1px solid var(--mfb-line); background: #fff; color: #4b5563; border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.mfb-period:hover { border-color: #f1b7b9; color: var(--mfb-red); }
.mfb-period.is-on { background: var(--mfb-red-soft); border-color: #f1b7b9; color: var(--mfb-red); }

/* Déplacements sur plusieurs jours : intertitre par jour */
#geocoding > tbody > tr.mfb-dayrow > td {
  background: #f1f5f9 !important; border-bottom: 1px solid var(--mfb-line); padding: 10px 14px !important;
  display: table-cell; font-size: 13px;
}
#geocoding > tbody > tr.mfb-dayrow:not(:first-child) > td { border-top: 10px solid #fff; }
.mfb-dayrow__date { font-weight: 700; color: var(--mfb-ink); text-transform: capitalize; margin-right: 12px; }
.mfb-dayrow__meta { color: var(--mfb-muted); font-weight: 500; }
#geocoding > tbody > tr.mfb-dayrow:hover > td { background: #f1f5f9 !important; }
/* la date est dans l'intertitre : colonne Date allégée */
#geocoding.mfb-grouped > tbody > tr[style*="e0fae0"] > td:first-child { color: #9ca3af; font-weight: 500; }

/* i-beacons : bulle d'attente unique (remplace celles de chaque balise) */
.mfb-ib-wait--one {
  position: fixed; right: 24px; bottom: 24px; z-index: 10000; background: #fff; color: var(--mfb-ink); text-align: center;
  min-width: 260px; padding: 14px 20px; border-radius: 14px; box-shadow: 0 16px 48px rgba(16, 24, 40, .22); font-size: 13px; font-weight: 600;
}
.mfb-ib-wait__count { color: var(--mfb-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Déplacements : épingles de la carte ---------- */
.mfb-pin { background: none; border: 0; }
.mfb-pin > span {
  position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mfb-pin, #374151);
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(16, 24, 40, .35);
}
.mfb-pin > span > .fa { transform: rotate(45deg); color: #fff; font-size: 13px; }
.mfb-pin--start { --mfb-pin: #16a34a; }
.mfb-pin--end { --mfb-pin: #111827; }
.mfb-pin--stop { --mfb-pin: #ef4444; }
.mfb-pin--eco { --mfb-pin: #f97316; }
.mfb-pin--slow { --mfb-pin: #eab308; }
.mfb-pin--ibeacon { --mfb-pin: #2563eb; }
.mfb-pin--start > span, .mfb-pin--end > span { width: 36px; height: 36px; }
.mfb-pin--start > span > .fa, .mfb-pin--end > span > .fa { font-size: 15px; }
.mfb-pin:hover > span { filter: brightness(1.1); }

/* ---------- Cartes : bulles des points (déplacements, i-beacons) ---------- */
.mfb-mpop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 150px; font-size: 13px; color: #374151; }
.mfb-mpop b { font-size: 15px; font-weight: 700; color: var(--mfb-ink); font-variant-numeric: tabular-nums; }
.mfb-mpop__tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: #f3f4f6; color: #374151;
}
.mfb-mpop__tag--start { background: #dcfce7; color: #15803d; }
.mfb-mpop__tag--end { background: #e5e7eb; color: #111827; }
.mfb-mpop__tag--stop { background: #fee2e2; color: #b91c1c; }
.mfb-mpop__tag--eco { background: #ffedd5; color: #c2410c; }
.mfb-mpop__tag--slow { background: #fef9c3; color: #a16207; }
.mfb-mpop__tag--ibeacon { background: #dbeafe; color: #1d4ed8; }
.leaflet-popup-content:has(.mfb-mpop) { margin: 12px 16px; }

/* ---------- Déplacements : légende des tracés dans la carte ---------- */
#mapid .mfb-maplegend {
  position: absolute; left: 10px; bottom: 24px; z-index: 800; display: flex; flex-direction: column; gap: 6px;
  background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(16, 24, 40, .15);
  font-size: 12.5px; font-weight: 600; color: #374151; text-align: left;
}
#mapid .mfb-maplegend > div { display: flex !important; align-items: center; gap: 8px; padding: 0 !important; }
#mapid .mfb-maplegend > div > div { float: none !important; width: 22px !important; height: 6px !important; margin: 0 !important; border-radius: 999px; }

/* Bulles des points : format compact (étiquette, jour et date, heure) */
.leaflet-popup-content:has(.mfb-mpop) { margin: 14px 30px 10px 14px; min-width: 0; width: auto !important; }
.mfb-mpop { min-width: 0; gap: 3px; font-size: 12px; white-space: nowrap; }
.mfb-mpop__tag { padding: 1px 7px; font-size: 10px; }
.mfb-mpop b { font-size: 13px; font-weight: 700; }
.mfb-mpop b small { display: block; font-size: 11.5px; font-weight: 500; color: var(--mfb-muted); }
.leaflet-popup:has(.mfb-mpop) .leaflet-popup-close-button { top: 4px !important; right: 4px !important; }

/* Déplacements : onglets et résultats alignés à gauche sur le formulaire (conteneur v1 sans marge) */
.container.padall .col-sm-9 > .container { max-width: 100%; padding-left: 0; padding-right: 0; }
.container.padall .col-sm-9 > .container > nav > .nav-tabs { padding-left: 0; }