/* MANAGER V2 — LES STYLES DES CONTROLES (JM, 09/10 : « sortir boutons du menu et ajouter une page Styles des contrôles » ;
   « deplace aussi les badges »). Les badges et les boutons de Manager V2, les memes sur toutes ses pages quel que soit le menu
   actif : ils se reglent dans Admin › Manager V2 › Styles des contrôles et arrivent en variables CSS
   (ManagerShellStyle.ControlCssVariables) ; ci-dessous, les valeurs par defaut. A charger apres mv2-tokens.css — dans Manager V2
   apres manager-shell.css ; l'Admin le charge seul pour son apercu. */
:root{
  --badge-h:19px;--badge-bg:#f1f1f3;--badge-imp-bg:#fdecec;--badge-radius:12px;
  --badge-bw:1px;--badge-border:rgba(110,110,118,.4);--badge-imp-border:rgba(166,25,46,.4);--badge-color:hsla(240,4%,25.5%,1);
  --badge-imp-color:rgba(166,25,46,1);--badge-fs:11px;--badge-fw:700;--badge-icon:12px;--badge-icon-opacity:1;
  --badge-good:#178a56;--badge-warn:#b4600a;--badge-bad:#d5271f;--badge-info:#3457a6;--badge-neutral:#6b6b73;
  --btn-bg:#ffffff;--btn-imp-bg:#fdf2f4;--btn-h:38px;--btn-icon:15px;--btn-icon-opacity:1;--btn-radius:10px;
  --btn-bw:1.5px;--btn-border:rgba(110,110,118,.3);--btn-imp-border:rgba(166,25,46,.3);--btn-color:hsla(240,4%,25.5%,1);
  --btn-imp-color:rgba(166,25,46,1);--btn-fs:13px;--btn-fw:700;
  --list-th-bg:#fbfbfc;--list-th-h:38px;--list-th-fs:10px;--list-th-fw:700;--list-th-color:hsla(240,4%,46.8%,1);--list-th-tt:uppercase;
  --list-td-py:12px;--list-td-px:13px;--list-td-fs:13px;--list-td-color:hsla(240,4%,34%,1);
  --list-line-w:1px;--list-line:rgba(110,110,118,.12);--list-hover:#fafafa;--list-stripe:#ffffff;
}

/* LES BOUTONS (JM, 08/10 : le style de « Filtres », « Colonnes », « + Ajouter un véhicule » — barre d'outils de la charte) :
   fond blanc, filet gris clair, angles arrondis, texte gras, icone au trait ; le bouton principal garde le fond blanc, filet
   rose et texte rouge. */
.mv2-btn{display:inline-flex;align-items:center;gap:8px;height:var(--btn-h);padding:0 14px;border:var(--btn-bw) solid var(--btn-border);border-radius:var(--btn-radius);background:var(--btn-bg);
  color:var(--btn-color);font:inherit;font-size:var(--btn-fs);font-weight:var(--btn-fw);text-decoration:none;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.mv2-btn svg{width:var(--btn-icon);height:var(--btn-icon);opacity:var(--btn-icon-opacity);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mv2-btn:hover{filter:brightness(.97)}
.mv2-btn-primary{background:var(--btn-imp-bg);border-color:var(--btn-imp-border);color:var(--btn-imp-color)}
/* LES BOUTONS D'ETAT (JM, 21/10 : « Badges et boutons d'état » ; « Application mobile » de la fiche conducteur en bouton d'etat « Bon ») :
   la forme des boutons, la couleur des badges d'etat — le texte de la couleur, le fond et le bord la meme eclaircie. Au pied de page,
   data-mv2-foot="good" (warn, bad, info, neutral). */
.mv2-btn-good{--st:var(--badge-good)}
.mv2-btn-warn{--st:var(--badge-warn)}
.mv2-btn-bad{--st:var(--badge-bad)}
.mv2-btn-info{--st:var(--badge-info)}
.mv2-btn-neutral{--st:var(--badge-neutral)}
.mv2-btn:is(.mv2-btn-good,.mv2-btn-warn,.mv2-btn-bad,.mv2-btn-info,.mv2-btn-neutral){color:var(--st);background:color-mix(in srgb,var(--st) 9%,#fff);border-color:color-mix(in srgb,var(--st) 32%,transparent)}
/* LES BADGES (JM, 08/10) : comme les boutons — un bord, un texte et des icones gris ; « imp » = important ; « lg » = a la taille d'un bouton. */
.mv2-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:var(--badge-h);height:var(--badge-h);padding:0 7px;
  border-radius:var(--badge-radius);background:var(--badge-bg);border:var(--badge-bw) solid var(--badge-border);color:var(--badge-color);
  font-size:var(--badge-fs);font-weight:var(--badge-fw);white-space:nowrap}
.mv2-badge.imp{background:var(--badge-imp-bg);border-color:var(--badge-imp-border);color:var(--badge-imp-color)}
.mv2-badge.lg{height:var(--btn-h);padding:0 14px}
.mv2-badge svg{width:var(--badge-icon);height:var(--badge-icon);opacity:var(--badge-icon-opacity);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* LES BADGES D'ETAT (JM, 11/10 : « harmonise les widgets avec les Styles des contrôles ») : la forme des badges, la couleur de
   l'etat — le texte de la couleur, le fond et le bord la meme eclaircie. « upcoming » et « action » restent des badges normaux. */
.mv2-badge.good{--st:var(--badge-good)}
.mv2-badge.warn{--st:var(--badge-warn)}
.mv2-badge.bad{--st:var(--badge-bad)}
.mv2-badge.progress{--st:var(--badge-info)}
.mv2-badge.neutral{--st:var(--badge-neutral)}
.mv2-badge.good,.mv2-badge.warn,.mv2-badge.bad,.mv2-badge.progress,.mv2-badge.neutral{color:var(--st);background:color-mix(in srgb,var(--st) 9%,#fff);
  border-color:color-mix(in srgb,var(--st) 32%,transparent)}

/* LES LISTES (JM, 11/10 : « rajoute les settings pour les listes V2 et modifie toutes les pages pour qu'elles les utilisent ») :
   tout tableau de donnees d'un widget (un tableau qui a des en-tetes de colonnes) — les listes de Manager V2 comme les pages de la V1
   recopiees — prend l'en-tete, les marges, le texte, les traits et les fonds des Styles des contrôles. Les tableaux de mise en page
   (sans en-tete) n'en prennent rien. Les regles propres a une page ne fixent plus que l'alignement et ce qui distingue un etat. */
.mv2-fw table:has(th):not(.w-list table) th,.vehicle-table th{height:var(--list-th-h);padding:0 var(--list-td-px);background:var(--list-th-bg);
  font-size:var(--list-th-fs);font-weight:var(--list-th-fw);color:var(--list-th-color);text-transform:var(--list-th-tt);
  letter-spacing:.06em;border-bottom:var(--list-line-w) solid var(--list-line)}
.mv2-fw table:has(th):not(.w-list table) td,.vehicle-table td{padding:var(--list-td-py) var(--list-td-px);font-size:var(--list-td-fs);color:var(--list-td-color);
  border-bottom:var(--list-line-w) solid var(--list-line)}
.mv2-fw table:has(th):not(.w-list table) tbody tr:nth-child(even),.vehicle-table tbody tr:nth-child(even){background:var(--list-stripe)}
.mv2-fw table:has(th):not(.w-list table) tbody tr:hover,.vehicle-table tbody tr:hover{background:var(--list-hover)}
.mv2-fw table:has(th):not(.w-list table) tbody tr:last-child td,.vehicle-table tbody tr:last-child td{border-bottom:0}
/* LA CASE A DEUX LIGNES (JM, 12/10 : maquettes VF_02 / VF_03 — « 6 sujets / À anticiper · Urgent » ; « interdiction d'augmenter la
   hauteur de la ligne ») : le texte et son sous-texte tenus dans la hauteur d'UNE ligne (1lh) — ils debordent dans la marge de la case,
   la ligne du tableau ne grandit pas. Le sous-texte a la taille de la ligne (la regle suivante), en gris. Un avatar (.cell2-av) se
   pose devant, dans la meme hauteur. */
.vehicle-table .cell2{height:1lh;display:flex;align-items:center;gap:9px;overflow:visible;white-space:nowrap;min-width:0}
.vehicle-table .cell2-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;height:1lh;overflow:visible}
.vehicle-table .cell2-txt > span{display:block;flex:none;line-height:1.12;overflow:hidden;text-overflow:ellipsis}
.vehicle-table .cell2-main{font-weight:700;color:#333}
.vehicle-table .cell2-sub{color:#929298}
.vehicle-table .cell2.none .cell2-main{font-weight:400;color:#929298}
.vehicle-table td .cell2 span.cell2-av{flex:none;width:2.15em;height:2.15em;margin:-.4em 0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#f1f1f4;color:#55555c;font-weight:700;font-size:.82em!important;letter-spacing:.02em}
/* La vignette d'un vehicule (JM, 12/10, maquette VF_02) : son image dans un cadre clair, dans la hauteur de l'avatar. */
.vehicle-table td .cell2 img.cell2-th{flex:none;width:3.3em;height:2.3em;margin:-.5em 0;padding:2px 3px;box-sizing:border-box;object-fit:contain;
  border:1px solid rgba(110,110,118,.18);border-radius:8px;background:#f7f7f9}
/* Une taille et une police pour tout le contenu des lignes (JM, 11/10 : « taille et font unique pour les lignes de toutes les listes ») :
   les sous-textes (dates, prestataires…), les gras et les liens d'une case prennent ceux de la case — donc des Styles des contrôles et
   du zoom de la liste. Les badges et les boutons gardent les leurs. */
.mv2-fw table:has(th):not(.w-list table) td :is(span,strong,b,em,i,small,a,div,p,code,time,label):not(.mv2-badge,.mv2-badge *,.mv2-btn,.mv2-btn *,.btn,.btn *),
.vehicle-table td :is(span,strong,b,em,i,small,a,div,p,code,time,label):not(.mv2-badge,.mv2-badge *,.mv2-btn,.mv2-btn *,.btn,.btn *){
  font-size:inherit!important;font-family:inherit!important}

/* LES BOUTONS DE FILTRES (JM, 18/10 : Styles des contrôles › Cas particuliers › « Boutons de filtres » — « par défaut style de l'image ») :
   les choix des filtres (.vf-choice) du calque des filtres et de la ligne epinglee (Devis, Vehicules, Conducteurs), les titres de leurs
   groupes (.vf-section-title), leur rangee (.vf-options). Venus de mv2-charte.css (la copie de la maquette VF_02) : les valeurs par defaut
   ci-dessous sont les siennes, celles de ManagerControlStyle aussi (StyleSettingsTests y veille). Le bord du bouton actif prend son fond ;
   « urgent » garde son rouge. */
:root{
  --vf-h:30px;--vf-px:9px;--vf-gap:6px;--vf-radius:8px;--vf-bw:1px;--vf-border:#dddde1;--vf-bg:#ffffff;--vf-hover-bg:#f7f7f8;--vf-active-bg:#202023;
  --vf-color:#4b4b50;--vf-active-color:#ffffff;--vf-fs:9px;--vf-fw:700;--vf-title-fs:9px;--vf-title-fw:800;--vf-title-color:#727278;--vf-title-tt:uppercase;
}
.vf-section-title{font-size:var(--vf-title-fs);text-transform:var(--vf-title-tt);letter-spacing:.065em;color:var(--vf-title-color);font-weight:var(--vf-title-fw);margin-bottom:9px}
.vf-options{display:flex;gap:var(--vf-gap);flex-wrap:wrap}
.vf-choice{height:var(--vf-h);padding:0 var(--vf-px);border:var(--vf-bw) solid var(--vf-border);border-radius:var(--vf-radius);background:var(--vf-bg);
  color:var(--vf-color);font-size:var(--vf-fs);font-weight:var(--vf-fw);cursor:pointer}
.vf-choice:hover{background:var(--vf-hover-bg)}
.vf-choice.active{background:var(--vf-active-bg);color:var(--vf-active-color);border-color:var(--vf-active-bg)}
.vf-choice.urgent-choice.active{background:#b31932;border-color:#b31932}

/* LES FILTRES DE LA V1 (JM, 18/10 : « oui branche aussi les filtres V1 ») : les boutons et pastilles des barres au dessin de la V1 — widgets
   *FiltersV1, historique du pilotage, barres des indicateurs, du planning, de l'historique, des manquements — prennent eux aussi les
   « Boutons de filtres » ; la recherche et « Effacer » leur hauteur, l'espace d'un groupe le leur, les titres de groupe (legende, libelle
   des pastilles) ceux des titres. Les barres d'onglets (Autopartage, Reservations, Signalements : .mv2-v1-tabs) gardent les « Boutons ».
   Plus fortes que les regles de mv2-functional.css, chargee apres. */
.mv2-v1-filters:not(.mv2-v1-tabs) :is(.type-pill,.tpl-btn){height:var(--vf-h);box-sizing:border-box;padding:0 var(--vf-px);border:var(--vf-bw) solid var(--vf-border);
  border-radius:var(--vf-radius);background:var(--vf-bg);color:var(--vf-color);font-family:inherit;font-size:var(--vf-fs);font-weight:var(--vf-fw);line-height:1;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mv2-v1-filters:not(.mv2-v1-tabs) :is(.type-pill,.tpl-btn):hover{background:var(--vf-hover-bg);border-color:var(--vf-border);color:var(--vf-color)}
.mv2-v1-filters:not(.mv2-v1-tabs) :is(.type-pill.active,.tpl-btn.tpl-active){background:var(--vf-active-bg);border-color:var(--vf-active-bg);color:var(--vf-active-color)}
.mv2-v1-filters:not(.mv2-v1-tabs) :is(.pager-input,.pager-clear-btn){height:var(--vf-h)}
.mv2-v1-filters:not(.mv2-v1-tabs) .toolbar-group{gap:var(--vf-gap)}
.mv2-v1-filters:not(.mv2-v1-tabs) :is(.toolbar-group legend,.pills-label){font-size:var(--vf-title-fs);font-weight:var(--vf-title-fw);color:var(--vf-title-color);
  text-transform:var(--vf-title-tt);letter-spacing:.065em}