/* MontaMobile TEST 9-8 — socle visuel commun Client / Chauffeur.
   Chargé après workspace.css et les styles spécialisés. Ne touche pas aux
   documents imprimés, aux montants, ni aux actions de réservation. */
:root {
  --mm-ink:#0a1a2d;
  --mm-navy:#061b31;
  --mm-blue:#0875ed;
  --mm-blue-active:#1687ff;
  --mm-muted:#52677d;
  --mm-paper:#f9fbfd;
  --mm-line:#d6e3ef;
  --mm-radius:14px;
}
.app,.shell {
  width:100%;
  max-width:440px!important;
  background:var(--mm-paper)!important;
  color:var(--mm-ink);
  min-height:100dvh;
  margin-left:auto;
  margin-right:auto;
}
.app .screen>.pageHead,
.shell>.topbar.pageHead {
  box-sizing:border-box;
  position:sticky;
  top:0;
  z-index:35;
  display:flex;
  align-items:center;
  gap:14px;
  min-height:62px;
  padding:10px 19px;
  margin:0;
  background:#fff;
  border-bottom:1px solid #dce7f2;
  box-shadow:0 3px 12px #001c3320;
}
.app .screen>.pageHead h1,
.shell>.topbar.pageHead h1 {
  flex:1;
  min-width:0;
  margin:0;
  font-size:19px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:-.03em;
  color:var(--mm-ink);
  overflow-wrap:anywhere;
}
.app .screen>.pageHead .back,
.shell>.topbar.pageHead .returnArrow {
  box-sizing:border-box;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:85px!important;
  min-height:44px!important;
  padding:7px 9px!important;
  border:0;
  border-radius:9px;
  background:#eff6ff;
  color:#0b3b68!important;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}
.app .screen>.pageHead .back:focus-visible,
.shell>.topbar.pageHead .returnArrow:focus-visible,
.nav button:focus-visible,.sharedNav a:focus-visible {
  outline:3px solid var(--mm-blue-active);
  outline-offset:2px;
}
.shell .workspaceBody {
  box-sizing:border-box;
  padding:16px 15px 30px;
}
.shell .workspaceBody h2 {
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.03em;
  font-weight:750;
  color:var(--mm-ink);
}
/* Les titres de l'aperçu de facture gardent leurs proportions comptables. */
.shell .invoice .parties h2 {
  font-size:.75rem;
  letter-spacing:.14em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--mm-muted);
}
.shell .invoice .route h2 {font-size:1.125rem;letter-spacing:normal;}
.shell .workspaceBody .card,
.shell .workspaceBody .periodForm,
.shell .workspaceBody .chartCard,
.shell .workspaceBody .metric {
  min-width:0;
  border:1px solid var(--mm-line);
  border-radius:var(--mm-radius);
  background:#fff;
}
.shell .workspaceBody .card,
.shell .workspaceBody .periodForm {padding:16px 14px;}
.shell .workspaceBody .chartCard {padding:16px 14px;}
.shell .workspaceBody .metric {padding:14px 12px;}
.shell .workspaceBody .field input,
.shell .workspaceBody .field select,
.app .field input,
.app .field select,
.app .field textarea {
  box-sizing:border-box;
  width:100%;
  min-height:45px;
  border:1px solid #c8d6e5;
  border-radius:10px;
  background:#fff;
  color:#132943;
}
.shell .workspaceBody .button,
.shell .workspaceBody button.button {
  min-height:45px;
  border-radius:10px;
}
.shell .metricGrid {grid-template-columns:repeat(2,minmax(0,1fr));}
.shell .periodFields {grid-template-columns:repeat(2,minmax(0,1fr));}
.shell .periodFields>.wide {grid-column:1 / -1;}
.shell .periodFields .field {min-width:0;}
/* Six raccourcis identiques, que la page soit intégrée ou autonome. */
.nav,.sharedNav {
  width:min(100%,440px)!important;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:1px!important;
  align-items:stretch!important;
  box-sizing:border-box;
  min-height:130px!important;
  padding:5px 6px max(9px,env(safe-area-inset-bottom))!important;
  background:var(--mm-navy)!important;
  border-top:1px solid #294660!important;
  color:#bdcce0!important;
  z-index:40!important;
}
.nav button,.sharedNav a {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  min-width:0!important;
  min-height:56px!important;
  padding:5px 2px!important;
  background:transparent!important;
  border:0;
  color:#bdcce0!important;
  font-size:11px!important;
  font-weight:400;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
}
.nav button span,.sharedNav a span {
  display:block;
  font-size:19px!important;
  line-height:1.2;
  color:inherit;
}
.nav button.active,.nav button[aria-current="page"],
.sharedNav a[aria-current="page"] {
  color:var(--mm-blue-active)!important;
  font-weight:700!important;
}
.app {padding-bottom:168px!important;}
.shell {padding-bottom:172px!important;}
@media(max-width:350px) {
  .app .screen>.pageHead,.shell>.topbar.pageHead {gap:8px;padding:9px;}
  .app .screen>.pageHead h1,.shell>.topbar.pageHead h1 {font-size:17px;}
  .shell .workspaceBody {padding-left:12px;padding-right:12px;}
  .nav button,.sharedNav a {font-size:10px!important;}
}
@media print {
  .nav,.sharedNav,.noPrint {display:none!important;}
  .shell {max-width:none!important;min-height:0;padding:0!important;box-shadow:none;background:#fff!important;}
  .shell .workspaceBody {padding:0;}
  .shell>.topbar.pageHead {display:none!important;}
}

/* TEST 9-12 : mêmes états visibles sur les sept pages métier,
   y compris quand le serveur répond lentement. */
.nav[hidden],.sharedNav[hidden] {display:none!important;}
.app .screen>.pageHead .back:hover,
.shell>.topbar.pageHead .returnArrow:hover {background:#e3f1ff;}
.shell .workspaceBody .empty,
.shell .workspaceBody .statsEmpty,
.shell .workspaceBody .notice,
.shell .workspaceBody .message {
  box-sizing:border-box;
  max-width:100%;
  overflow-wrap:anywhere;
}
.shell .workspaceBody .periodForm,
.shell .workspaceBody .chartCard,
.shell .workspaceBody .card,
.shell .workspaceBody .metric {
  box-shadow:0 3px 14px #102b4410;
}
.shell .workspaceBody .field input:focus-visible,
.shell .workspaceBody .field select:focus-visible,
.app .field input:focus-visible,
.app .field select:focus-visible {
  outline:3px solid #168bfa40;
  outline-offset:1px;
  border-color:var(--mm-blue);
}
.shell .workspaceBody .button.primary,
.app .blue {background:var(--mm-blue);color:#fff;}
.shell .workspaceBody .button.primary:hover,
.app .blue:hover {background:#075fc2;}
.shell .workspaceBody .periodFields,
.shell .workspaceBody .fields {min-width:0;max-width:100%;}
.shell .workspaceBody .periodFields>*,
.shell .workspaceBody .fields>* {min-width:0;}
@media print{
  .nav,.sharedNav{display:none!important;}
}

/* TEST 9-13 : flèche de retour seule, Client comme Chauffeur.
   Garder son nom accessible pour les lecteurs d'écran. */
.app .screen>.pageHead .back,
.shell>.topbar.pageHead .returnArrow{
  box-sizing:border-box;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  min-height:44px!important;
  padding:7px!important;
  gap:0!important;
  flex:0 0 44px;
}
.app .screen>.pageHead .back .backLabel,
.shell>.topbar.pageHead .returnArrow .backLabel{
  display:none!important;
}


/* Consolidated UX audit: compact Client services and Chauffeur controls.
   Keep the existing fixed six-tab navigation and accessible touch targets. */
.app .topline .mmBrandLogo{display:block;width:92px;height:60px;object-fit:contain;}
.app #booking .homeHero,.app #driverHome .homeHero{
  min-height:172px;padding-top:36px;padding-bottom:12px;
}
.app #booking .homeHero .space,.app #driverHome .homeHero .space{height:0;}
.app #booking .homeHero .welcome,.app #driverHome .homeHero .welcome{
  margin:9px 0 4px;font-size:19px;
}
.app #services .serviceList{padding:8px 14px 12px;gap:7px;}
.app #services .service{
  display:grid;grid-template-columns:58px minmax(0,1fr);
  min-height:62px;align-items:stretch;border-radius:12px;
}
.app #services .serviceArt{
  height:auto;min-height:62px;font-size:26px;
  background:linear-gradient(135deg,#174f86,#3977ae);color:#fff;
}
.app #services .serviceArt.paris{
  background:linear-gradient(135deg,#174f86,#3977ae);
}
.app #services .serviceText{min-width:0;padding:8px 11px;gap:8px;}
.app #services .serviceText strong{font-size:14px;line-height:1.2;}
.app #services .serviceText small{font-size:11px;line-height:1.25;margin-top:2px;}
.app #services .unavailable{margin-top:3px;padding:2px 6px;font-size:10px;}
.app #services .circle{flex:none;}
.app #menu .menuBrand{display:flex;align-items:center;gap:12px;padding:10px 14px;}
.app #menu .menuBrand img{width:88px;height:58px;object-fit:contain;}
.app #menu .menuBrand p{margin:0;}
.app #menu .menuExtraTitle{margin:10px 16px 5px;}
.app #menu .mainMenuRows{margin:5px 14px 9px;}
.app #menu .mainMenuRows button{padding:10px 13px;min-height:44px;}
.app #fares .section{padding-top:12px;}
.app #fareSettings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.app #fareSettings>.field{min-width:0;margin:0;font-size:12px;}
.app #fareSettings>.field input{margin-top:5px;}
.app #fareSettings>.blue,.app #fareSettings>#fareSettingsStatus{grid-column:1 / -1;}
.app #admin .section{padding-top:6px;padding-bottom:8px;}
.app #admin .section>.ghost{min-height:40px;}
.app #admin #adminList:empty{min-height:0;}
.app .addressSuggestions button{min-height:44px;font-size:14px;}
.app .companyResults small{font-size:13px;}
@media(max-width:330px){
  .app #fareSettings{grid-template-columns:1fr;}
  .app #fares .section{padding-left:12px;padding-right:12px;}
}

/* Consistent header mark without a second banner. */
.app .screen>.pageHead .mmHeaderLogo,.shell>.topbar.pageHead .mmHeaderLogo{
  display:block;width:65px;height:43px;object-fit:contain;margin-left:auto;flex:0 0 65px;
}
.app #menu .menuBrand .logo{display:none;}
.shell .workspaceBody .notice{padding:9px 12px;font-size:12px;line-height:1.45;}
.shell .workspaceBody .message{padding:9px 12px;font-size:12px;line-height:1.45;}
.shell .workspaceBody .card{margin:10px 0;padding:13px 12px;}
.shell .workspaceBody .card h2{margin:0 0 9px;}
.shell .workspaceBody .field small,.shell .workspaceBody small{font-size:12px;}
.shell .workspaceBody #companyMissing{line-height:1.45;}
.shell .workspaceBody .companyFold{border:1px solid #d6e3ef;border-radius:14px;background:#fff;margin:9px 0;}
.shell .workspaceBody .companyFold summary{padding:13px 12px;font-weight:750;cursor:pointer;}
.shell .workspaceBody .companyFold>section{margin:0;border:0;box-shadow:none;}
.shell .workspaceBody .companyFold .fields{gap:9px;}
.shell .workspaceBody .companyFold .fields .field{margin:0;}
.shell .workspaceBody .companyFold .field input,.shell .workspaceBody .companyFold .field select{margin-top:4px;}
@media(max-width:375px){
 .app .screen>.pageHead .mmHeaderLogo,.shell>.topbar.pageHead .mmHeaderLogo{width:48px;height:34px;flex-basis:48px;}
}

.app .mmHelpFold{background:#fff;border:1px solid #dae5ef;border-radius:12px;margin:8px 0;overflow:hidden}
.app .mmHelpFold summary{font-size:14px;font-weight:750;color:#153450;cursor:pointer;padding:13px 14px;min-height:44px}
.app .mmHelpFold p{margin:0!important;padding:0 14px 14px;line-height:1.55!important;font-size:13px!important}
.app .mmFavoriteActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.app .mmFavoriteActions button{margin:0!important;min-height:42px!important}
.app #favoriteSuggestions{position:relative;z-index:2;max-height:220px;overflow:auto}
.app .mmGpsConsent{padding:10px 12px;margin:8px 12px}
.app .mmGpsConsent .mmGpsHelp{margin-top:4px;font-size:11px}
.app .mmAlertSettings{padding:10px 12px;margin:8px 12px}
.app .mmAlertSettings p{font-size:11px;line-height:1.4;margin:5px 0}
.app .welcomeDriverText{padding:11px}
.app .welcomeDriverText>p{display:none}
.app .welcomeDriverText h2{font-size:15px;margin-bottom:6px}
.app .welcomeDriverText .blue{min-height:44px}
.app .statusLegend{gap:4px;margin:4px 13px 7px}
.app .statusLegend .bookingBadge{font-size:10px;padding:4px 7px}

.app .mmDriverOverview{margin:8px 13px 0;padding:10px 12px;border:1px solid #c8ddec;border-radius:10px;background:#eff6fd;color:#234b6e;font-size:13px;font-weight:650;line-height:1.35}
.app .mmDriverOverview[data-urgent="true"]{border-color:#d86e6e;background:#fff1f0;color:#a52c2c;font-weight:800}
.app #driverHome .section{padding-top:8px;padding-bottom:8px}
.app #driverHome .mmIdeasDriverShortcut{margin-top:7px}
.app .accountHeader{padding:15px 17px}
.app .accountHeader h1{margin:5px 0 10px}
.app .accountStats{padding:9px 15px;gap:8px}
.app .accountStats button{padding:10px}
.app .accountSection .profileRows{margin:9px 0}
.app .profileRows button{min-height:44px!important;padding:10px 12px}
.app #profile>.info{margin-top:10px}