/* Copyright (C) 2026 TAD IT Services
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*
* ============================================================================
* MboaPaie — Design system « humain »
* Charte chaleureuse, professionnelle et accessible. Tokens partagés par toutes
* les pages du module et par lib/mboapaie_ui.lib.php. Responsive, dark-mode ready,
* focus visibles, transitions douces (respecte prefers-reduced-motion).
* ============================================================================
*/
:root {
/* Marque — verts chaleureux (feuille / croissance). Accents conserves : ils
portent leur propre texte blanc, donc restent lisibles sur n'importe quel
theme (clair comme sombre). Les liens suivent le theme Dolibarr. */
/* Accent principal : suit le theme Dolibarr actif. Priorite a la marque du
* theme ergonova (--ergo-brand-primary) s'il est actif, puis a la couleur
* d'action / de lien standard, et enfin repli sur le vert de marque si aucun
* theme ne definit rien. Les boutons/KPI/focus ne sont donc plus figes. */
/* v1.25.0 : l'ACCENT suit desormais EXCLUSIVEMENT le theme Dolibarr natif
* (--butactionbg / couleur d'action). Plus aucune couleur d'accent figee.
* Statuts (amber/red/brick) et surbrillances d'audit restent des variables
* SEMANTIQUES MboaPaie centralisees (seul endroit ou une valeur est definie). */
--mbp-green: var(--butactionbg, var(--colortextlink, var(--colortext)));
--mbp-green-600: var(--butactionbghover, var(--butactionbg, var(--colortextlink)));
--mbp-on-accent: var(--textbutaction, var(--colorbacktabcard1));
/* Teinte claire de l'accent : derivee du theme via color-mix (repli sur un
* vert tres pale si le navigateur ne supporte pas color-mix). Suit donc le
* theme actif (turquoise pale sous ergonova). */
--mbp-green-050: color-mix(in srgb, var(--mbp-green) 12%, var(--mbp-surface));
/* ============================================================
* EXCEPTION UNIQUE (v1.25.1) : les INDICATEURS DE STATUT propres au module
* (validé / en attente / rejeté = ok / avertissement / danger) conservent des
* couleurs FIXES attribuees. C'est le SEUL endroit du module ou une couleur est
* ecrite en dur, et uniquement pour porter un SENS metier stable quel que soit
* le theme. Sont FIXES ici : statuts (ok/warn/danger) + surbrillances d'audit.
* TOUT le reste (accent, neutres, ombres) herite dynamiquement du theme ACTIF.
* ============================================================ */
--mbp-amber: #F2B705;
--mbp-amber-050: #FDF4DA;
--mbp-brick: #B3541E;
--mbp-brick-050: #F7E9DF;
--mbp-red: #C4453B;
--mbp-red-050: #F8E6E4;
/* Neutres : herites du THEME Dolibarr actif (var --color*), avec repli sur
l'ancienne palette creme si le theme ne definit pas la variable. C'est ce
qui fait que MboaPaie epouse le theme (clair / sombre / couleurs entreprise)
au lieu d'imposer un ilot creme fige. */
--mbp-ink: var(--colortext);
--mbp-muted: color-mix(in srgb, var(--colortext) 62%, var(--colorbackbody));
--mbp-line: var(--tableborder, color-mix(in srgb, var(--colortext) 15%, var(--colorbackbody)));
--mbp-bg: var(--colorbackbody);
--mbp-surface: var(--colorbacktabcard1);
--mbp-surface-2: var(--colorbacklinepair1);
/* Formes & profondeur */
--mbp-radius: 2px;
--mbp-radius-sm: 2px;
--mbp-shadow: 0 1px 2px color-mix(in srgb, var(--colorblack) 5%, transparent), 0 6px 20px color-mix(in srgb, var(--colorblack) 6%, transparent);
--mbp-shadow-sm: 0 1px 2px color-mix(in srgb, var(--colorblack) 6%, transparent);
--mbp-ring: 0 0 0 3px color-mix(in srgb, var(--mbp-green) 25%, transparent);
--mbp-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
/* v1.24.2 : jetons issus de la migration des couleurs FIGEES (audit couleurs).
Valeurs identiques aux anciens litteraux -> rendu inchange, theming centralise. */
--mbp-white: var(--colorwhite);
--mbp-badge-bg: color-mix(in srgb, var(--colortext) 10%, var(--colorbacktabcard1));
--mbp-badge-ink: var(--colortext);
--mbp-amber-ink: #8A6D00;
--mbp-red-ink: #9E362E;
--mbp-grey-050: color-mix(in srgb, var(--colortext) 8%, var(--colorbacktabcard1));
--mbp-line-strong: color-mix(in srgb, var(--mbp-line) 70%, var(--colortext));
--mbp-line-soft: color-mix(in srgb, var(--mbp-line) 60%, var(--colorbackbody));
--mbp-muted-soft: color-mix(in srgb, var(--colortext) 42%, var(--colorbackbody));
--mbp-neutral-800: var(--colortext);
--mbp-neutral-700: color-mix(in srgb, var(--colortext) 85%, var(--colorbackbody));
--mbp-neutral-550: var(--mbp-muted);
--mbp-neutral-500: var(--mbp-muted-soft);
--mbp-surface-alt: var(--colorbacklinepair1);
--mbp-surface-alt2: var(--colorbacktabcard1);
--mbp-green-tint: color-mix(in srgb, var(--mbp-green) 8%, var(--mbp-surface));
--mbp-danger-strong: #C0392B;
--mbp-shadow-tint: color-mix(in srgb, var(--colorblack) 6%, transparent);
/* Bannieres des outils de diagnostic (audit alignement / couleurs / bascule) */
--mbp-ok-bg: #EEF7F1; --mbp-ok-border: #BFE3CD;
--mbp-err-bg: #FBEEE9; --mbp-err-border: #E0B0A0; --mbp-err-ink: #B3401F;
--mbp-warn-bg: #FBF6E9; --mbp-warn-border: #E0C48A; --mbp-warn-ink: #8A6D1F;
--mbp-ink-strong: var(--colortext);
--mbp-shadow-strong: color-mix(in srgb, var(--colorblack) 30%, transparent);
--mbp-flag-height: #E69500;
--mbp-flag-left: #7A3FB5;
--mbp-flag-gap: #2A8A8A;
--mbp-flag-indent: #C0398B;
--mbp-flag-text: #D81B60;
--mbp-flag-list: #DD3333;
}
/* ---- Coquille de page -------------------------------------------------- */
.mbp-page {
max-width: 1200px;
margin: 0 auto;
padding: 20px 18px 56px;
color: var(--mbp-ink);
font-family: var(--mbp-font);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.mbp-page * { box-sizing: border-box; }
/* En-tete de page (titre + sous-titre + actions) */
/* ---- Titre de section -------------------------------------------------- */
/* Icone d'en-tete : taille maitrisee (evite le picto surdimensionne), alignee au titre. */
/* ---- Cartes ------------------------------------------------------------ */
.mbp-card {
background: var(--mbp-surface);
border: 1px solid var(--mbp-line);
border-radius: var(--mbp-radius);
box-shadow: var(--mbp-shadow-sm);
padding: 18px 18px;
margin: 0 0 16px;
}
.mbp-card h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
/* Grille responsive de cartes / KPIs */
/* ---- Tuiles KPI -------------------------------------------------------- */
/* ---- Badges (pilules teintees, douces) --------------------------------- */
/* ---- Boutons ----------------------------------------------------------- */
.mbp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
padding: 8px 15px;
border-radius: var(--mbp-radius-sm);
font-family: inherit; font-size: .88rem; font-weight: 650;
line-height: 1.2;
border: 1px solid var(--mbp-line);
background: var(--mbp-surface);
color: var(--mbp-ink);
cursor: pointer;
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.mbp-btn:hover { transform: translateY(-1px); box-shadow: var(--mbp-shadow-sm); text-decoration: none; }
.mbp-btn:active { transform: translateY(0); }
.mbp-btn:focus-visible { outline: none; box-shadow: var(--mbp-ring); }
/* v1.35.3 : la surcouche d'en-tete .mbp-greenhead (qui FORCAIT le vert/accent de
* charte sur les en-tetes de tableau) est SUPPRIMEE. Les en-tetes « liste_titre »
* suivent desormais exclusivement le THEME actif choisi par l'utilisateur — plus
* aucun forcage de couleur propre au module sur la structure. */
.mbp-btn[disabled], .mbp-btn.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* ---- Barre d'outils / filtres ----------------------------------------- */
.mbp-toolbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 14px;
}
.mbp-toolbar.mbp-card { padding: 12px 14px; }
/* ---- Navigation de configuration (presente sur TOUTES les sous-pages) --- */
/* Champs de formulaire coherents */
.mbp-page input[type=text], .mbp-page input[type=search], .mbp-page input[type=number],
.mbp-page input[type=date], .mbp-page input[type=email], .mbp-page select, .mbp-page textarea,
.mbp-page .flat {
font-family: inherit; font-size: .9rem; color: var(--mbp-ink);
background: var(--mbp-surface);
border: 1px solid var(--mbp-line);
border-radius: var(--mbp-radius-sm);
padding: 7px 10px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.mbp-page input:focus, .mbp-page select:focus, .mbp-page textarea:focus, .mbp-page .flat:focus {
outline: none; border-color: var(--mbp-green); box-shadow: var(--mbp-ring);
}
.mbp-page label { font-weight: 600; color: var(--mbp-ink); }
/* ---- Tableaux ---------------------------------------------------------- */
/* ---- Encart d'aide / info --------------------------------------------- */
/* ---- Etat vide (humain, encourageant) --------------------------------- */
/* ---- Avatar / initiales (humaniser les personnes) --------------------- */
/* ---- Fil d'aide / documentation --------------------------------------- */
/* NB v1.28.1 : l'accordeon du menu de gauche a ete SUPPRIME (JS + CSS) :
* il interferait avec les menu managers type ergonova (panneau off-canvas,
* etats replies persistants). Le menu est laisse 100% natif. */
/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 640px) {
.mbp-page { padding: 14px 12px 48px; }
.mbp-toolbar { flex-direction: column; align-items: stretch; }
.mbp-toolbar .mbp-btn { width: 100%; }
}
/* ---- Compatibilite menu managers famille "remark" (revolutionpro,
* ergonova...) : entree de menu MboaPaie. Ces templates attenuent les
* modules qu'ils ne connaissent pas : ils appliquent
* "filter: grayscale(1)" a l'icone (barre claire) et "brightness(0) invert(1)
* + opacity: .5" (barre sombre), ce qui rend MboaPaie grise/delave alors que
* les modules natifs restent nets. On remet l'entree a parite :
* - barre claire : on annule le greyscale -> icone couleur, nette ;
* - barre sombre : on garde le knockout blanc (contraste) mais pleine opacite ;
* - texte : on n'impose PAS de couleur (pas de "inherit" qui capturait
* l'accent turquoise) -> il herite du texte de menu standard. */
body .site-menu-icon.mainmenu.mboapaie {
opacity: 1 !important;
-webkit-filter: none !important;
filter: none !important;
}
body .site-menubar-dark .site-menu-icon.mainmenu.mboapaie { opacity: 1 !important; }
body .site-menu-item a[href*="mboapaie"],
body .site-menu-item a[href*="mboapaie"] .site-menu-title { opacity: 1 !important; }
/* ---- Icone MboaPaie dans la barre du HAUT (eldy natif, fond navy) --------
* Le menu haut eldy affiche l'icone du module en (object_mboapaie.png,
* vert de marque). Sur le bandeau navy, on la passe en BLANC pour l'aligner sur
* les icones natives (Accueil, Tiers...). Portee stricte a la barre .tmenu : la
* carte module (fond blanc) et le menu gauche ergonova gardent l'icone en couleur. */
ul.tmenu li a[href*="mboapaie"] img,
.tmenu a[href*="mboapaie"] img.pictofixedwidth {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
/* Pas de soulignage sur les entrees ET sous-entrees du menu de gauche
* (rendu propre facon menu natif Dolibarr). */
#id-left a.vmenu,
#id-left a.vmenu:hover,
#id-left a.vsmenu,
#id-left a.vsmenu:hover {
text-decoration: none !important;
}
/* ---- Etats de chargement (js/mboapaie.js) ----------------------------- */
/* Bouton en cours de soumission : desactive visuellement + petit spinner. */
.mbp-btn.mbp-is-loading,
button.mbp-is-loading,
input.mbp-is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
opacity: .8;
}
.mbp-is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
color: var(--mbp-green);
animation: mbp-spin .6s linear infinite;
}
/* Squelette de contenu en attente (listes rafraichies en AJAX). */
.mbp-skeleton {
height: 14px;
margin: 8px 0;
border-radius: var(--mbp-radius);
background: linear-gradient(90deg, var(--mbp-surface-2) 25%, var(--mbp-line) 37%, var(--mbp-surface-2) 63%);
background-size: 400% 100%;
animation: mbp-shimmer 1.4s ease infinite;
}
@keyframes mbp-spin { to { transform: rotate(360deg); } }
@keyframes mbp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
.mbp-is-loading::after { animation: none; }
.mbp-skeleton { animation: none; }
}
/* ---- Emplacement de capture d'ecran reserve (manuel admin) ------------ */
/* ---- Accessibilite : mouvement reduit --------------------------------- */
@media (prefers-reduced-motion: reduce) {
.mbp-btn { transition: none !important; }
.mbp-btn:hover { transform: none; }
}
/* ---- Theme : heritage Dolibarr (clair / sombre / entreprise) ---------- */
/* Depuis v1.4.2, les neutres (fond, surface, texte, bordures) sont pilotes par
les variables du theme Dolibarr actif (voir :root ci-dessus). Le module suit
donc automatiquement le theme choisi par l'entreprise, y compris un theme
sombre, sans ilot creme fige. Les accents verts de marque et les couleurs de
statut (ambre/rouge) sont conserves car ils embarquent leur propre contraste
de texte et restent lisibles quel que soit le fond. */
/* ============================================================
* Fiche employe (formulaire 2 colonnes) : lecture optimisee.
* - AUCUNE bordure ni cadre (aspect epure).
* - Libelles sur UNE seule ligne.
* - Champs qui REMPLISSENT la largeur de la colonne.
* - Zebrage discret + survol pour la lisibilite.
* ============================================================ */
table.mbp-empform,
table.mbp-empform td,
table.mbp-empform tr {
border: none !important;
box-shadow: none !important;
}
/* table-layout FIXE : la table respecte toujours 100% de sa demi-colonne,
* quel que soit le zoom -> plus aucun debordement hors zone. */
table.mbp-empform {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
table.mbp-empform td {
padding: 7px 10px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
table.mbp-empform td:first-child {
width: 40%; /* colonne libelle : proportion fixe et stable */
padding-right: 14px;
color: var(--mbp-neutral-700);
font-weight: 500;
white-space: normal; /* une ligne au zoom normal ; retour propre si tres etroit */
word-break: break-word;
}
table.mbp-empform > tbody > tr:nth-child(even) { background: var(--mbp-surface-alt); }
table.mbp-empform > tbody > tr:hover { background: var(--mbp-green-tint); }
/* Les champs remplissent leur cellule sans jamais la depasser */
table.mbp-empform td:last-child input[type="text"],
table.mbp-empform td:last-child input[type="email"],
table.mbp-empform td:last-child select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* HAUTEUR UNIFORME de toutes les zones de saisie (texte, email, nombre, date,
* telephone) ET des listes select2 -> rendu homogene facon Dolibarr. Une seule
* valeur (30px) partagee par tous les controles du formulaire. */
table.mbp-empform td:last-child input[type="text"],
table.mbp-empform td:last-child input[type="email"],
table.mbp-empform td:last-child input[type="number"],
table.mbp-empform td:last-child input[type="tel"],
table.mbp-empform td:last-child input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
table.mbp-empform td:last-child .select2-selection--single {
height: 30px !important;
box-sizing: border-box;
vertical-align: middle;
}
table.mbp-empform td:last-child input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
padding-top: 3px;
padding-bottom: 3px;
line-height: normal;
/* Meme retrait gauche que la valeur des listes (rendered padding-left:8px)
* -> le texte des champs de saisie et des listes s'aligne exactement.
* !important + bordure gauche figee a 1px : certains THEMES Dolibarr posent
* sur input[type=text] un padding/bordure plus prioritaire, ce qui collait le
* texte de saisie au bord (retrait < 8px) alors que la LISTE gardait ses 8px
* -> decalage visible entre saisie et liste. On verrouille donc les deux
* composantes du retrait (bordure + padding) pour un debut de texte identique. */
padding-left: 8px !important;
border-left-width: 1px !important;
box-sizing: border-box;
}
/* ============================================================
* CENTRAGE DES LISTES select2 SUR TOUTES LES PAGES DU MODULE.
* La correction n'est plus limitee a la fiche employe : toute liste select2
* d'une page MboaPaie voit sa valeur centree verticalement (flex). Corrige
* « la valeur des listes calee trop haut » partout, pas seulement ici.
* ============================================================ */
.mbp-page .select2-container--default .select2-selection--single {
display: flex;
align-items: center;
/* CLE DU DECALAGE « listes vs saisies » : Dolibarr propage les classes du
*