/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS*/
/* DOLIBARR 21.0.2 — ELDY — PERSONNALISATION COMPLÈTE
 Adaptation du fichier joint étiqueté 24.0.2.
 Palette: #012f66 / #3397fa. UTF-8.
 Coller intégralement dans Configuration > Affichage > CSS.
 Feuille de surcharge: le thème Eldy natif doit rester chargé.
 Ne pas remplacer htdocs/theme/eldy/style.css.php.
 Cible: menus Eldy standard, navigation horizontale, interface claire.
 Sélecteurs vérifiés dans les sources officielles du tag 21.0.2.
 Les logos et le comportement de connexion restent ceux de Dolibarr.
*/
:root {
 /* Identité de la société */
 --erp-primary: #012f66;
 --erp-secondary: #3397fa;
 --erp-accent: #3397fa;
 --erp-accent-hover: #012f66;
 --erp-accent-rgb: 51, 151, 250;

 /* Surfaces et textes */
 --erp-surface: #ffffff;
 --erp-page-background: #f4f8fc;
 --erp-input-background: #f7faff;
 --erp-border: #dce6f0;
 --erp-captcha-border: #e1e8f0;
 --erp-text: #183451;
 --erp-placeholder: #62778b;
 --erp-muted: #526b84;

 /* Navigation et focus */
 --erp-nav-text: #e8f1fa;
 --erp-nav-icon: #c9e2f5;
 --erp-nav-indicator-base: #3397fa;
 --erp-nav-indicator: #3397fa;
 --erp-scrollbar: #4a83b3;
 --erp-login-focus: #3397fa;
 --erp-nav-focus: #3397fa;
 --erp-nav-radius: 10px;

 /* Transparences et ombres */
 --erp-login-glow: rgba(var(--erp-accent-rgb), 0.22);
 --erp-input-focus-ring: rgba(var(--erp-accent-rgb), 0.1);
 --erp-card-border: rgba(255, 255, 255, 0.65);
 --erp-login-title: rgba(255, 255, 255, 0.72);
 --erp-nav-hover: rgba(255, 255, 255, 0.10);
 --erp-nav-active-base: rgba(255, 255, 255, 0.14);
 --erp-nav-active: rgba(255, 255, 255, 0.13);
 --erp-card-shadow-main: rgba(0, 15, 40, 0.25);
 --erp-card-shadow-soft: rgba(0, 15, 40, 0.08);
 --erp-button-shadow: rgba(0, 70, 140, 0.2);
 --erp-button-shadow-hover: rgba(0, 70, 140, 0.32);
 --erp-nav-shadow: rgba(0, 25, 60, 0.15);
}

/* ==========================================================================
 02. PAGE DE CONNEXION
 ========================================================================== */

/* FOND GÉNÉRAL */

body.bodylogin {
 background: var(--erp-page-background) !important;
}

.login_center {
 min-height: 100vh !important;
 width: 100% !important;
 background:
 radial-gradient( circle at 15% 20%, var(--erp-login-glow), transparent 35% ),
 linear-gradient( 135deg, var(--erp-primary) 0%, var(--erp-secondary) 55%, var(--erp-accent) 100% ) !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding: 30px 20px !important;
 box-sizing: border-box !important;
}

/* CONTENEUR */

.login_vertical_align {
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 justify-content: center !important;
 width: 100% !important;
 max-width: 440px !important;
 margin: auto !important;
}

#login {
 width: 100% !important;
 margin: 0 !important;
}

/* CARTE DE CONNEXION */

.login_table {
 width: 100% !important;
 max-width: 440px !important;
 min-width: 0 !important;
 background: var(--erp-surface) !important;
 border-radius: 20px !important;
 border: 1px solid var(--erp-card-border) !important;
 box-shadow: 0 25px 65px var(--erp-card-shadow-main), 0 5px 15px var(--erp-card-shadow-soft) !important;
 padding: 42px 38px 36px !important;
 box-sizing: border-box !important;
 transition: box-shadow 0.3s ease;
}

/* VERSION DOLIBARR */

.login_table_title,
.login_table_title a {
 color: var(--erp-login-title) !important;
 font-size: 12px !important;
 font-weight: 500 !important;
 letter-spacing: 0.5px !important;
 text-decoration: none !important;
}

.login_table_title {
 margin: 0 0 18px !important;
}

/* STRUCTURE */

#login_line1,
#login_right,
#login_left,
#login_line2 {
 width: 100% !important;
 max-width: 100% !important;
 min-width: 0 !important;
 float: none !important;
 box-sizing: border-box !important;
}

#login_line1 {
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
}

#login_right {
 margin: 0 !important;
 padding: 0 !important;
}

#login_right .tagtable {
 width: 100% !important;
 box-sizing: border-box !important;
}

/* LOGO DE LA SOCIÉTÉ */

#login_left {
 text-align: center !important;
 margin-bottom: 34px !important;
}

#login #img_logo {
 display: block !important;
 width: auto !important;
 max-width: 210px !important;
 max-height: 115px !important;
 object-fit: contain !important;
 margin: 0 auto !important;
}

/* BLOCS DE SAISIE */

.trinputlogin {
 width: 100% !important;
 margin: 0 0 18px !important;
}

.tdinputlogin {
 display: flex !important;
 align-items: center !important;
 gap: 12px !important;
 width: 100% !important;
 min-width: 0 !important;
 padding: 0 15px !important;
 background: var(--erp-input-background) !important;
 border: 1px solid var(--erp-border) !important;
 border-radius: 11px !important;
 box-sizing: border-box !important;
 transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.tdinputlogin:focus-within {
 border-color: var(--erp-accent) !important;
 background: var(--erp-surface) !important;
 box-shadow: 0 0 0 4px var(--erp-input-focus-ring) !important;
}

/* ICÔNES */

.tdinputlogin > .fa,
.tdinputlogin > .fas {
 color: var(--erp-accent) !important;
 font-size: 16px !important;
 flex-shrink: 0 !important;
}

/* CHAMPS IDENTIFIANT ET MOT DE PASSE */

#login #username,
#login #password {
 width: 100% !important;
 min-width: 0 !important;
 max-width: 100% !important;
 height: 52px !important;
 padding: 0 5px !important;
 margin: 0 !important;
 background: transparent !important;
 border: none !important;
 border-radius: 0 !important;
 box-shadow: none !important;
 outline: none !important;
 color: var(--erp-text) !important;
 font-size: 14px !important;
 font-weight: 500 !important;
 box-sizing: border-box !important;
}

#login #username::placeholder,
#login #password::placeholder,
#login #securitycode::placeholder {
 color: var(--erp-placeholder) !important;
 opacity: 1 !important;
}

/* CAPTCHA STANDARD v21 */

.trinputlogin:has(#securitycode) .tdinputlogin {
 min-height: 52px !important;
 padding: 7px 10px !important;
 gap: 8px !important;
}

.span-icon-security {
 display: inline-flex !important;
 flex: 1 1 auto !important;
 min-width: 0 !important;
}

#login #securitycode {
 width: 100% !important;
 min-width: 0 !important;
 max-width: 100% !important;
 height: 38px !important;
 background: transparent !important;
 border: none !important;
 outline: none !important;
 box-shadow: none !important;
 color: var(--erp-text) !important;
 font-size: 14px !important;
 padding: 0 4px !important;
 box-sizing: border-box !important;
}

#login #img_securitycode {
 width: 80px !important;
 height: 32px !important;
 border-radius: 6px !important;
 border: 1px solid var(--erp-captcha-border) !important;
 object-fit: contain !important;
}

#login #captcha_refresh_img {
 color: var(--erp-accent) !important;
 font-size: 15px !important;
}

#login #captcha_refresh_img:hover {
 color: var(--erp-primary) !important;
}

/* BOUTON SE CONNECTER */

#login_line2 {
 margin-top: 12px !important;
 text-align: center !important;
}

#login-submit-wrapper {
 width: 100% !important;
}

#login-submit-wrapper input[type="submit"] {
 display: block !important;
 width: 100% !important;
 height: 53px !important;
 padding: 0 20px !important;
 margin: 0 !important;
 background: linear-gradient( 110deg, var(--erp-primary), #07569f ) !important;
 color: var(--erp-surface) !important;
 border: none !important;
 border-radius: 11px !important;
 font-size: 14px !important;
 font-weight: 700 !important;
 letter-spacing: 0.6px !important;
 text-transform: uppercase !important;
 cursor: pointer !important;
 box-shadow: 0 6px 18px var(--erp-button-shadow) !important;
 transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

#login-submit-wrapper input[type="submit"]:hover {
 filter: brightness(1.1) !important;
 transform: translateY(-2px) !important;
 box-shadow: 0 10px 25px var(--erp-button-shadow-hover) !important;
}

#login-submit-wrapper input[type="submit"]:active {
 transform: translateY(0) !important;
}

/* FOCUS ACCESSIBLE */

#login button:focus-visible,
#login input[type="submit"]:focus-visible,
#login a:focus-visible {
 outline: 3px solid var(--erp-login-focus) !important;
 outline-offset: 3px !important;
}

/* RESPONSIVE */

@media screen and (max-width: 600px) {
 .login_center {
 padding: 20px 15px !important;
 }

 .login_table {
 padding: 32px 22px 28px !important;
 border-radius: 16px !important;
 }

 #login #img_logo {
 max-width: 175px !important;
 }

 #login_left {
 margin-bottom: 25px !important;
 }

 #login #username,
 #login #password {
 height: 48px !important;
 }

 #login-submit-wrapper input[type="submit"] {
 height: 50px !important;
 }
}

/* RÉDUCTION DES ANIMATIONS */

@media (prefers-reduced-motion: reduce) {
 .login_table,
 .tdinputlogin,
 #login-submit-wrapper input[type="submit"] {
 transition: none !important;
 }
}

.login_table_title {
 display: none !important;
}


/* Ajustements structurels du formulaire v21. */
body.bodylogin {
 display: block !important;
 margin: 0 !important;
 background: var(--erp-primary) !important;
}
.login_center { min-height: 100dvh !important; }
.login_vertical_align { padding: 0 !important; box-sizing: border-box; }
#login { padding-bottom: 0 !important; }
#login_line1 > br, #login_line2 > br:first-child { display: none; }
#login #img_logo { max-width: min(210px, 100%) !important; height: auto !important; }
#login .tdinputlogin { min-height: 52px; white-space: normal !important; }
#login .tdinputlogin > .fa { padding-left: 0 !important; }
#login .span-icon-security { flex: 1 1 60px !important; }
#login #img_securitycode { flex: 0 0 80px; }
#login .tdinputlogin > a { flex-shrink: 0; }
#login .tdinputlogin:focus-within { outline: 2px solid var(--erp-primary); outline-offset: 2px; }
#login a { color: var(--erp-primary); }
body.bodylogin .login_main_message { width: 100%; box-sizing: border-box; }
body.bodylogin .login_main_home { max-width: 100%; }
@media screen and (max-width: 600px) {
 #login input#username, #login input#password, #login input#securitycode { font-size: 16px !important; }
 #login #img_logo { max-width: min(175px, 100%) !important; }
}
@media (prefers-reduced-motion: reduce) {
 #login-submit-wrapper input[type="submit"]:hover { transform: none !important; }
}

/* 03. NAVIGATION SUPÉRIEURE ELDY v21 — disposition et seuils natifs.
 Ne pas forcer display sur les liens: .menuhider et les options texte/icônes
 sont pilotés par Eldy. Ne pas supprimer le padding réservé au compte. */
#tmenu_tooltip {
 background: var(--erp-primary) !important;
 border: 0 !important;
 box-shadow: 0 4px 18px var(--erp-nav-shadow);
 box-sizing: border-box;
}
#tmenu_tooltip .tmenudiv { background: transparent !important; border: 0 !important; }
#tmenu_tooltip ul.tmenu { background: transparent !important; }
#tmenu_tooltip li.tmenu, #tmenu_tooltip li.tmenusel {
 background: transparent !important;
 border: 0 !important;
}
#tmenu_tooltip .tmenucenter {
 border-radius: var(--erp-nav-radius);
 transition: background-color .2s ease;
}
#tmenu_tooltip li.tmenu:not(.nohover):hover .tmenucenter {
 background: var(--erp-nav-hover) !important;
}
#tmenu_tooltip li.tmenusel .tmenucenter {
 background: var(--erp-nav-active) !important;
 box-shadow: inset 0 -3px 0 var(--erp-secondary);
}
#tmenu_tooltip a.tmenuimage, #tmenu_tooltip a.tmenulabel {
 color: var(--erp-nav-text) !important;
 background-color: transparent !important;
 text-decoration: none !important;
}
#tmenu_tooltip .topmenuimage { background-color: transparent !important; }
#tmenu_tooltip .topmenuimage span { color: var(--erp-nav-icon) !important; }
#tmenu_tooltip li.tmenusel .mainmenuaspan,
#tmenu_tooltip li.tmenusel .topmenuimage span { color: #fff !important; }
#tmenu_tooltip li.tmenusel .mainmenuaspan { font-weight: 700; }
#tmenu_tooltip .tmenudisabled { color: var(--erp-nav-icon) !important; }
#mainmenutd_companylogo img.mycompany { object-fit: contain; }
#tmenu_tooltip a:focus-visible {
 outline: 2px solid var(--erp-secondary) !important;
 outline-offset: -2px;
 border-radius: 5px;
}
/* Compte, aide, déconnexion: conserver positions, affichage et couleurs
 contextuelles natives (barre en bureau, panneau latéral sur petit écran). */
@media (prefers-reduced-motion: reduce) {
 #tmenu_tooltip .tmenucenter { transition: none !important; }
}
/* 04. MENU GAUCHE — structure et visibilité natives v21 conservées. */
.side-nav {
 background: var(--erp-page-background, #f3f8fc) !important;
 border-right: 1px solid var(--erp-border, #d6e7f3) !important;
 box-sizing: border-box;
}

.side-nav #id-left {
 padding: 16px 10px !important;
 background: transparent !important;
 box-sizing: border-box;
}

.side-nav #id-left div.vmenu,
.side-nav #id-left .blockvmenu {
 margin: 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 box-sizing: border-box;
}

.side-nav #id-left .blockvmenu {
 margin-bottom: 12px !important;
}

/* 02. Recherche — habillage du contrôle Select2 existant */
.side-nav #blockvmenusearch {
 margin: 0 0 20px !important;
 padding: 0 !important;
}

.side-nav #blockvmenusearch > .select2-container {
 width: 100% !important;
 max-width: 100%;
}

.side-nav #blockvmenusearch .select2-selection--single {
 height: 42px !important;
 background: var(--erp-surface, #ffffff) !important;
 border: 1px solid var(--erp-border, #d6e7f3) !important;
 border-radius: 9px !important;
 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.side-nav #blockvmenusearch .select2-selection__rendered {
 padding-left: 12px !important;
 padding-right: 30px !important;
 color: var(--erp-text, #151e46) !important;
 font-size: 13px !important;
 line-height: 40px !important;
}

.side-nav #blockvmenusearch .select2-selection__placeholder {
 color: var(--erp-muted, #647d98) !important;
}

.side-nav #blockvmenusearch .select2-selection__arrow {
 height: 40px !important;
 right: 6px !important;
}

.side-nav #blockvmenusearch .select2-container--open .select2-selection,
.side-nav #blockvmenusearch .select2-container--focus .select2-selection {
 border-color: var(--erp-accent, #3397fa) !important;
 box-shadow: 0 0 0 3px var(--erp-input-focus-ring, rgba(51, 151, 250, 0.1)) !important;
}

/* 03. Rubriques principales */
.side-nav #id-left .menu_titre {
 margin: 0 0 4px !important;
 padding: 0 !important;
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 overflow: visible !important;
}

.side-nav #id-left .menu_titre > .vmenu {
 display: flex !important;
 align-items: center;
 gap: 10px;
 width: 100%;
 min-height: 44px;
 padding: 11px 10px !important;
 box-sizing: border-box;
 border-radius: 9px;
 color: var(--erp-primary, #012f66) !important;
 background: transparent;
 font-size: 13px !important;
 font-weight: 600;
 line-height: 1.45;
 text-decoration: none !important;
 white-space: normal !important;
 overflow-wrap: anywhere;
 transition: background-color 0.2s ease, color 0.2s ease;
}

.side-nav #id-left .menu_titre > a.vmenu > .fa,
.side-nav #id-left .menu_titre > a.vmenu > .fas {
 flex: 0 0 20px;
 width: 20px !important;
 margin: 0 !important;
 padding: 0 !important;
 color: var(--erp-accent, #3397fa) !important;
 font-size: 16px;
 text-align: center;
}

.side-nav #id-left .menu_titre > a.vmenu:hover {
 background: rgba(var(--erp-accent-rgb, 51, 151, 250), 0.09) !important;
 color: var(--erp-accent-hover, #012f66) !important;
}

/* 04. Sous-menus
 Les espaces insécables du HTML matérialisent les niveaux de navigation.
 Conserver la taille du texte et les liens en ligne préserve ces retraits. */
.side-nav #id-left .menu_contenu {
 margin: 0 0 0 19px !important;
 padding: 0 0 0 10px !important;
 border-left: 1px solid var(--erp-border, #d6e7f3);
 background: transparent !important;
 font-size: 12px !important;
 line-height: 2.6 !important;
 white-space: normal;
}

.side-nav #id-left .menu_contenu > .vsmenu {
 display: inline !important;
 margin: 0 !important;
 padding: 5px 3px !important;
 border-radius: 5px;
 color: var(--erp-muted, #647d98) !important;
 font-size: 12px !important;
 font-weight: 500;
 line-height: 1.6;
 white-space: normal !important;
 overflow-wrap: anywhere;
 text-decoration: none !important;
 box-decoration-break: clone;
 -webkit-box-decoration-break: clone;
 transition: background-color 0.2s ease, color 0.2s ease;
}

.side-nav #id-left .menu_contenu > a.vsmenu:hover {
 color: var(--erp-accent-hover, #012f66) !important;
 background: rgba(var(--erp-accent-rgb, 51, 151, 250), 0.09) !important;
}

/* 05. Navigation au clavier */
.side-nav #id-left a.vmenu:focus-visible,
.side-nav #id-left a.vsmenu:focus-visible,
.side-nav #blockvmenusearch .select2-selection:focus-visible {
 outline: 2px solid var(--erp-login-focus, #3397fa) !important;
 outline-offset: 2px;
}

/* 06. Mobile — espacement uniquement, visibilité native conservée */
@media screen and (max-width: 768px) {
 .side-nav #id-left {
 padding: 12px 8px !important;
 }

 .side-nav #id-left .menu_titre > .vmenu {
 min-height: 46px;
 }

 .side-nav #id-left .menu_contenu {
 line-height: 3 !important;
 }

 .side-nav #id-left .menu_contenu > .vsmenu {
 padding-top: 8px !important;
 padding-bottom: 8px !important;
 }
}

/* 07. Préférence de réduction des animations */
@media (prefers-reduced-motion: reduce) {
 .side-nav #id-left .menu_titre > a.vmenu,
 .side-nav #id-left .menu_contenu > a.vsmenu,
 .side-nav #blockvmenusearch .select2-selection--single {
 transition: none !important;
 }
}


.side-nav #id-left .menu_titre,
.side-nav #id-left .menu_contenu { width: auto !important; }
.side-nav #id-left .menu_contenu > a.vsmenu:hover {
 background: transparent !important;
 text-decoration: underline !important;
}
/* Aucun flex imposé à #id-container/#id-right :
 compatible avec sidebar-collapse et les modes de défilement Eldy v21. */

/* Dolibarr 21.0.2 / Eldy : fond du menu gauche jusqu'en bas de l'écran.
 À coller à la fin du CSS existant.
 52 px : hauteur usuelle du bandeau Eldy (50 px + espacement).
 Ajuster cette variable si la hauteur du bandeau a été personnalisée. */
:root {
 --erp-header-height: 52px;
}

@media screen and (min-width: 769px) {
 .side-nav #id-left {
 /* Une hauteur sur la cellule de tableau sert de hauteur minimale :
 elle grandit naturellement si le menu contient davantage de liens.
 Ne pas convertir les conteneurs natifs en flex. */
 height: calc(100vh - var(--erp-header-height)) !important;
 height: calc(100dvh - var(--erp-header-height)) !important;
 box-sizing: border-box;
 }
}

/* À ajouter à la fin du CSS personnalisé Dolibarr 21.0.2 / Eldy. */
:root {
 --erp-topbar-padding: 8px;
 --erp-header-height: calc(52px + var(--erp-topbar-padding) + var(--erp-topbar-padding));
}

/* Conserver les marges latérales natives réservées au compte utilisateur. */
#tmenu_tooltip {
 padding-top: var(--erp-topbar-padding) !important;
 padding-bottom: var(--erp-topbar-padding) !important;
}


/* À coller à la fin du CSS personnalisé Eldy. */
#tmenu_tooltip ul.tmenu > li.tmenu,
#tmenu_tooltip ul.tmenu > li.tmenusel {
 margin-inline-end: 4px !important;
}

#tmenu_tooltip ul.tmenu > li:last-child {
 margin-inline-end: 0 !important;
}


/* Dolibarr 21.0.2 / Eldy — à placer en fin du CSS personnalisé. */

/* Masquer uniquement la version et l'impression, y compris leurs espaces. */
.login_block .aversion,
.login_block a[href*="optioncss=print"],
.login_block .login_block_elem:has(.aversion),
.login_block .login_block_elem:has(a[href*="optioncss=print"]) {
 display: none !important;
}

/* Compenser le padding supérieur de la barre (8 px par défaut).
 Les positions natives et l'ouverture du menu du compte sont conservées. */
@media screen and (min-width: 769px) {
 div.login_block {
 padding-top: var(--erp-topbar-padding, 8px) !important;
 }
}