/* ==========================================================================
   GLOBAL SALESFORCE LIGHTNING ARCHITECTURE
   ========================================================================== */

body { 
    font-family: 'Inter', 'Salesforce Sans', BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background-color: #f0f7ff !important; 
    color: #181818 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 1. Core Structural Layout */
#id-container { 
    background-color: #f0f7ff;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    padding-top: 70px !important; /* Space for fixed header + buffer */
    display: block !important;
    min-height: 100vh;
}

div#id-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    background-color: white !important;
    border-bottom: 2px solid #0176d3 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    z-index: 2000 !important;
    display: flex !important;
    align-items: center !important;
}

.side-nav, #id-left {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 280px !important;
    height: calc(100vh - 60px) !important;
    background-color: #16325c !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    border-right: none !important;
}

#id-right, .conteneur {
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
    min-height: calc(100vh - 60px);
    background-color: #f0f7ff !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    overflow-x: hidden !important; /* Prevent the entire content area from scrolling */
}

/* State Management */
#id-container.becreativeenuhidden #id-right {
    margin-left: 0 !important;
    width: 100% !important;
}
#id-container.becreativeenuhidden .side-nav {
    left: -280px !important;
}

/* 2. Salesforce Cards & Containers */
#id-right > .fiche, 
.fiche,
.tabBar,
.boxtable,
.liste,
.border,
div.fichecenter {
    background: white !important;
    border: 1px solid #c9c7c5 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1) !important;
    margin-bottom: 16px !important; /* Compact spacing between cards */
    padding: 0 !important;
    overflow-x: auto !important;
}

/* 3. Global Dashboard & Card Fixes (Sticky Stats) */
.sf-dashboard-container {
    position: sticky !important;
    top: 60px !important; /* Below fixed header */
    z-index: 500 !important;
    background-color: rgba(240, 247, 255, 0.9) !important; /* Glassy Salesforce Blue feel */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 12px 0 !important; /* Compact padding */
    margin-bottom: 4px !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    border-bottom: 2px solid rgba(221, 219, 218, 0.5) !important;
}

/* Ensure individual stat cards are responsive and uniform */
.sf-dashboard-container > div, 
.sf-dashboard-container > .fiche {
    margin: 0 !important;
    flex: 1 1 200px !important; 
    min-width: 180px !important;
    max-width: 100% !important;
    padding: 12px 16px !important; /* Compact internal card padding */
}

.sf-list-container,
.sf-record-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Mobile Adjustments for Dashboard Cards */
@media only screen and (max-width: 768px) {
    .sf-dashboard-container {
        top: 60px !important; /* Keep it sticky on mobile */
        padding: 12px 8px !important;
        justify-content: center !important;
    }
    .sf-dashboard-container > div {
        flex: 1 1 140px !important; /* Smaller cards on mobile */
    }
}

/* 4. Table & Scroll Logic */
.div-table-responsive, 
.div-table-responsive-no-min {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

table.liste, table.border {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    table-layout: auto !important;
    min-width: 100%; /* Ensure it's at least as wide as container */
}

/* Specifically allow tables inside responsive containers to expand beyond 100% */
.div-table-responsive > table.liste,
.div-table-responsive-no-min > table.liste {
    width: auto !important;
    min-width: 100% !important;
}

/* 4b. Specific Column Width Optimizations (High Density) */
.linecolqty, 
.linecolqty_requested, 
.linecolqty_shipped {
    width: 70px !important;
    text-align: center !important;
}

.linecoldiscount, 
.linecolvat {
    width: 80px !important;
    text-align: center !important;
}

.linecoluprice, 
.linecoltotalht {
    width: 110px !important;
    text-align: right !important;
}

/* Prioritize Description space */
.linecoldescription {
    width: auto !important;
    min-width: 250px !important;
    white-space: normal !important; /* Allow description to wrap if very long */
}

table tr td {
    padding: 6px 10px !important; /* High-density vertical spacing */
    border-bottom: 1px solid #ecebea !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important; /* Prevent text wrapping */
}

/* Tighten record labels (left column) */
table.border td:first-child, 
table.noborder td:first-child,
.tdtitre {
    width: auto !important;
    min-width: 200px !important; 
    color: #444 !important;
    font-weight: 500 !important;
    background-color: #f9fbff !important;
    white-space: nowrap !important;
}

/* 5. Tabs & Buttons (Salesforce Style) */
div.tabs {
    margin-bottom: 20px !important;
}

div.tabs .tabsElem a.tab {
    padding: 8px 16px !important;
    color: #fff !important;
    border-bottom: 3px solid transparent !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

div.tabs .tabsElem a.tabactive {
    color: #0176d3 !important;
    border-bottom: 3px solid #0176d3 !important;
    font-weight: 700 !important;
}

div.tabs .tabsElem a.tab:hover:not(.tabactive) {
    color: #0176d3 !important;
    border-bottom-color: #dddbda !important;
}

/* Buttons */
input[type="submit"].button, 
input[type="button"].button,
button.button,
a.butAction {
    background-color: #0176d3 !important;
    color: white !important;
    border: 1px solid #0176d3 !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

input[type="submit"].button:hover, 
a.butAction:hover {
    background-color: #005fb2 !important;
    border-color: #005fb2 !important;
}

/* 6. Salesforce Form Elements */
input[type="text"], 
input[type="number"], 
input[type="password"], 
input[type="email"], 
input[type="search"], 
input[type="tel"], 
input[type="url"], 
select, 
textarea,
.select2-container .select2-choice {
    background-color: #fff !important;
    border: 1px solid #dddbda !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    transition: border 0.1s linear, box-shadow 0.1s linear !important;
    font-size: 13px !important;
    color: #080808 !important;
    min-height: 32px !important;
    box-sizing: border-box !important;
}

input:focus, select:focus, textarea:focus, .select2-container-active .select2-choice {
    border-color: #0176d3 !important;
    outline: 0 !important;
    box-shadow: 0 0 3px #0176d3 !important;
}

/* Ensure form layouts within cards have space */
.tabBar form {
    padding: 10px !important;
}

.tabBar form table.border, 
.tabBar form table.noborder {
    margin: 10px 0 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

/* Responsive Overrides */
@media only screen and (max-width: 768px) {
    #id-right { margin-left: 0 !important; width: 100% !important; }
    .side-nav { left: -280px !important; }
    #id-container.becreativeenuvisible .side-nav { left: 0 !important; }
    #id-container.becreativeenuvisible #id-right { margin-left: 280px !important; }
}


#id-left .slimScrollDiv{
    z-index: 5;
}

.side-nav .sidebar-background {
    /*background-image: url(/htravelsystem/custom/becreative/img/sidebar_5.jpg);*/
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50%;
    opacity: 0.4;
}




.search_icons_container > input[type="image"] {
    position: absolute;
    left: -9px;
    top: -2px;
    padding: 0px !important;
}
.fichecenter table.boxtable,
.fichecenter table.noborder, 
table#table-1, 
.fiche table.noborder, 
table.liste, 
table.border,
 /* css-imane */
div.tabBar{
    /* border: 2px solid #245d8f !important; */
    width:100%;
}
div.tabBar{
    display: inline-block;
    width: 100% !important;
}
body .fiche div.tabBar table{
    border: 1px solid transparent !important;
}
.fichecenter table.boxtable,
.fichecenter table.noborder{
    border-collapse: initial;
}
.opacitytransp {
    opacity: 0;
}
div.liste_titre {
    border-bottom: 1px solid #376c9b;
}
body th.liste_titre, body tr.liste_titre, body .liste_titre_filter, body tr.liste_titre tr, body tr.box_titre, body div.liste_titre, body tr.box_titre * {
    background-color: #e9e9e9;
    background: #e9e9e9 !important;
    color: #3b8cd2 !important;
}
body th.liste_titre *, body tr.liste_titre *, body tr.box_titre *, body div.liste_titre * {
    color: #3b8cd2;
}
body div.liste_titre input {
    color: #080808;
}
.pictowarning, .pictopreview{
    padding-left: 4px;
}
.paddingright{
    padding-right: 4px;
}
.icon-plus-filter, .icon-plus-filter-cancel{
    margin:0 1px;
}
body .select2-container .select2-choice > .select2-chosen,body tr.liste_titre input, textarea{
    color: #080808 !important;
}
body table tr th {
    font-weight: bold;
}
#id-left form[action*="list.php"] {
    border: none;
}
body div.tabBar table.noborder[summary=list_of_modules] tr.liste_titre td{
    padding: .3em .5em;
}
body div.tabBar table{
    border-left:none !important;
    border-right:none !important;
}
body .table-border, 
body .table-border-col, 
body .table-key-border-col, 
body .table-val-border-col, 
body div.border, 
body div.border div div.tagtd, 
body table.border, 
body table.border td, 
body table.dataTable{
    border: 1px solid #d6d6d6;
}
.boxstats{
    background:#ffffff;
}
body table tr.pair,table.noborder tr.oddeven:nth-child(odd){
    background-color: #e9e9e9;
}
.tabBar table tr:nth-child(odd) {
    background-color: #e9e9e9;
}
.tabBar table tr:nth-child(odd) tr {
    background-color: #e9e9e9;
}
table.boxtable tr:nth-child(odd):not(.box_titre) {
    background-color: #e9e9e9;
}

.minwidth100{
    max-width:100% !important;
}
.tabBar table tr:nth-child(even) {
    background-color: #ffffff;
}
.tabBar table tr:nth-child(even) tr{
    background-color: #ffffff;
}
body div.tabs .tabsElem a.tabactive{
    color: #ffffff;
    background: #245d8f;
}

body div.tabs .tabsElem .tab{
    border: none !important;
}
body div.tabs .tabsElem .tabactive a{
    color: #ffffff;
    background: #245d8f !important;
}
#otherboxes tr td{
    padding-top: 8px;
}
body table tr.liste_titre td.liste_titre input[name*=button_search], 
body table tr.liste_titre td.liste_titre input[name*=button_removefilter] {
    position: absolute;
    z-index: 2;
    width: 24px;
    margin: -3px 0 0 0px;
    left: 0;
    padding: 0;
    top: 0;
    background:none !important;

}
.div-table-responsive-no-min>table, 
.div-table-responsive>table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto !important;
}

.div-table-responsive-no-min, 
.div-table-responsive {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    padding-bottom: 2px !important;
}
body .icon-plus-filter,body .icon-plus-filter-cancel{
    color: #0176d3 !important;
}
.icon-plus-filter-cancel:before, .icon-plus-filter:before {
    background: #fff;
    border-radius: 50%;
    float:left;
}
table tr.liste_titre td.liste_titre .icon-plus-filter, table tr.liste_titre td.liste_titre .icon-plus-filter-cancel{
    font-size: 1.9em !important;
}

div#tmenu_tooltip .tmenudiv li {
    border: 1px solid #1e4b72;
    border-left: 1px solid #2f70a9;
    border-top: none;
}
div#tmenu_tooltip .tmenudiv li a.tmenuimage:hover,div#tmenu_tooltip .tmenudiv li:hover {
    background-color: #608FBE;
}
div#tmenu_tooltip .tmenudiv li:hover {
    background-color: #608FBE;
}
div#tmenu_tooltip .tmenudiv {
    border-left: 1px solid transparent;
}
div#id-left div.vmenu {
    background-color: #16325c !important; 
    background: #16325c !important;
    width: 100% !important;
    background-size: auto !important;
    height:100%;

         display: inline-table; 
    }
div#id-left div.vmenu>*{
    background: transparent;
    background-color: transparent;
}

div#id-left div.vmenu .company_logo, div#id-left div.vmenu .blockvmenulogo {
    border-bottom: 1px solid transparent;
    padding: .5em;
}
div#id-left .vmenu>nav {
    border-top: 1px solid transparent;
    border-bottom: 1px solid #245d8f;
}
div#blockvmenusearch {
/*padding: 7px 3px;*/
    border-top: 1px solid #efeaea;
    border-bottom: 1px solid #efeaea;
    display: grid;
}
div#blockvmenuhelp *{
    background-color:transparent;
}
div#blockvmenuhelp{
    background-color:#efeaea;
    border-top: 1px solid transparent;
}
div div#blockvmenubookmarks {
    background-color: transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid #efeaea;
    padding: .5em;
    float: initial;
}
.select2-results{
    width: 100% !important;
}
.select2-container--open .select2-dropdown--below{
    min-width: 250px !important;
}
div div#blockvmenubookmarks table td:first-child{
    text-align:center;
}
div#blockvmenuhelp *,div#blockvmenubookmarks * {
    color: #ffffff;
}

div#id-top {
    background-color: white !important;
    border-bottom: 2px solid #0176d3 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    height: 50px !important;
    z-index: 1000 !important;
    }

div#id-top .login_block {
    color: #181818 !important;
    line-height: 50px !important;
}

div#id-top .login_block a {
    color: #0176d3 !important;
    text-decoration: none !important;
}

div#id-top .login_block img {
    border-radius: 50% !important;
    vertical-align: middle !important;
}


div#tmenu_tooltip .tmenudiv li a.tmenuimage .mainmenuaspan,
div#id-left div.vmenu a.vsmenu, div#id-left div.vmenu .mainmenuhspan,
div#id-top div.login_block * {
}
div.info{
    color: #333;
}
div.blockvmenusearch input[type=text] {
    width: 100%;
    background: #ffffff;
    border: 1px solid #1b5486;
    color: #09355b;
}

div.blockvmenusearch input[type=submit] {
    width: 18%;
}

@media screen and (max-width: 1280px){
.login_block .login {
    font-size: 1em !important;
}
}














div#blockvmenubookmarks span.select2 *{
    color: #999;
}
div#blockvmenubookmarks span.select2.select2-container {
    width: 98px !important;
}
#filetreeauto ul.ecmjqft{
    position:relative;
}
#filetree ul.ecmjqft{
    position:relative;
}
body table.liste tr:nth-child(even) {
    background-color: #FFFFFF;
}
body table.liste tr:nth-child(odd) {
    background-color: #e9e9e9;
}
.attacharea input[type=file]{
    width:auto;
}
.fiche.modules div.divsearchfield {
    float: left;
    margin: 4px 12px 4px 2px;
    padding-left: 2px;
}
img.photouserphoto {
    height: 14px;
    width:auto;
}
div.login_block img.photouserphoto {
    height: 16px;
    width:auto;
}

.inline-block.login_block_elem.login_block_elem_name {
    float: right;
    font-size: 10px;
}

div.login_block .login_block_other {
    line-height: 13px;
}

.arearef .pagination li.pagination span {
    background-color: #3b8cd2;

}
dl.dropdown {
    margin:0px;
    margin-left: 2px;
    margin-right: 2px;
    padding:0px;
    vertical-align: middle;
    display: inline-block;
    position: initial;
    background: #09355b;
}
.dropdown dd, .dropdown dt {
    margin:0px;
    padding:0px;
}
.dropdown ul {
    margin: -1px 0 0 0;
    text-align: left;
}
.dropdown dd {
    position:relative;
    z-index: 2;
}
.dropdown dt a {
    display:block;
    overflow: hidden;
    border:0;
}
.dropdown dt a span, .multiSel span {
    cursor:pointer;
    display:inline-block;
    padding: 0 3px 2px 0;
}
.dropdown dd ul {
    background-color: #245d8f;
    border: 1px solid #888;
    display:none;
    right:0px;                      /* pop is align on right */
    padding: 2px 15px 2px 5px;
    position:absolute;
    top:2px;
    list-style:none;
    max-height: 264px;
    overflow: auto;
}
.dropdown span.value {
    display:none;
}
.dropdown dd ul li {
    white-space: nowrap;
    font-weight: normal;
    padding: 2px;
}
.dropdown dd ul li input[type="checkbox"] {
    margin-right: 3px;
}
.dropdown dd ul li a, .dropdown dd ul li span {
    padding: 3px;
    display: block;
}
.dropdown dd ul li span {
    color: #888;
}
.dropdown dd ul li a:hover {
    background-color:#fff;
}
dl.dropdown:after{
    content: none !important;
}
table.tagtable.liste[summary="list_of_modules"] {
    width: 100%;
}
.boxtable td.tdboxstats div.boxstatsindicator .boxstatsborder {
    display: inline-block;
    margin: .2em;
    border: 1px solid #608FBE;
    text-align: center;
    -moz-border-radius: 5px!important;
    -webkit-border-radius: 5px!important;
    border-radius: 5px!important;
    padding: .5em;
}
.boxtable td.tdboxstats{
    background:#fff;
}
.boxtable div.boxstatsindicator {
    display: inline-block;
}
.boxclose.right.nowraponall{
    white-space:nowrap;
}
.boxclose.right.nowraponall .linkobject.boxfilter{
    margin-right:10px;
}
.nographyet {
    content:url(/htravelsystem/theme/becreative/img/nographyet.svg);
    display: inline-block;
    opacity: 0.1;
    background-repeat: no-repeat;
}
#id-right>.fiche>table.notopnoleftnoright .pagination .paginationafterarrows form[name="projectform"] select,#id-right .notopnoleftnoright .pagination .paginationafterarrows form[name="projectform"] input {
    font-size:14px;
}
#id-right>.fiche table.notopnoleftnoright div.pagination>ul{
    list-style: none;
}
.fiche>form>table.notopnoleftnoright{
    background: #f2f2f3;
}
.fiche>form>table.notopnoleftnoright[summary]{
    display:inline-block;
}
.fiche>form>table.notopnoleftnoright tr td:first-child{
    border: none;
    color: #608FBE;
    font-size: 1.6em;
    text-transform: none;
    white-space: nowrap;
}
.fiche>form>table.notopnoleftnoright{
    margin-bottom:0 !important;
}
#id-right>.fiche>table.notopnoleftnoright tr td:first-child,
#id-right>.fiche>table.notopnoleftnoright tr td:first-child .titre{
    white-space: nowrap;
}

font.vsmenudisabled.vsmenudisabledmargin {
    color: #b9b9b9;
    font-size: 12px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    display: inline-block;
}




input[type="submit"].button,a.butAction{
    background-color: #245c8f !important;
    border-color: #245c8f !important;
    color: #fff !important;
}
input[type="submit"].button:hover,a.butAction:hover{
    background-color: #3b8cd2 !important;
    border-color: #3b8cd2 !important;
    box-shadow: none !important;
}
input[type="submit"].button:focus,a.butAction:focus{
    box-shadow: 0 0 0 0.2rem rgba(23,162,184,.5) !important;
}


input[type="submit"].button,input[type="button"].button,a.butAction,a.butActionRefused{
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: .25rem;
}






























body .becreativesubmenus a.vsmenu:hover{
    background-color: transparent !important;
}

body .becreativesubmenus ul.vmenu li>div:hover{
    background-color: #608FBE !important;
}
body .becreativesubmenus a[data-actif="nc_actif_element"]:hover{
    <!-- background-color: #37b8c4 !important; -->
}
a[data-actif="nc_actif_element"] {
    <!-- background: #36C6D3; -->
    color:#fff !important;
}
div[data-actif="nc_actif_element"] {
    background: #125188;
}
div[data-actif="nc_actif_element"] a{
    color: #fff !important;
}
body .becreativesubmenus li.menu_titre>div {
    padding: 3px 0.6em;
}
body .becreativesubmenus li.menu_titre>div.menu_contenu2 {
    padding: 3px 1.3em;
}
body .becreativesubmenus li.menu_titre>div.menu_contenu3 {
    padding: 3px 2em;
}
#tmenu_tooltip .tmenudiv,#tmenu_tooltip .tmenu{
    float:left;
}
div#id-top div.login_block .login_block_other{
    font-size: 12px;
}
div#id-top div.login_block .login_block_user>div{
    float:right;
}
body .becreativesubmenus li.menu_titre a * {
    line-height: 18px;
}
body .becreativesubmenus li.menu_titre>a {
    padding: 7px 0 7px 2px;
}
body select option:disabled{
    color: #e3e3e3 !important;
}
div div#blockvmenubookmarks select {
    width: 100%;
}
body #id-left div.vmenu li.menu_titre a {
    display:inline-block;
    width:100%;
}
body #id-left div.vmenu li.menu_titre {
    padding:0;
}
body #tmenu_tooltip .tmenudiv li a.tmenuimage .mainmenu{
    color: #f7f7f7;
}

body #tmenu_tooltip .tmenudiv li.tmenusel{
    background-color: #125188;
}
body #tmenu_tooltip .tmenudiv li.tmenusel a.tmenuimage .mainmenuaspan{
    color: #ffffff;
}
body #tmenu_tooltip .tmenudiv li.tmenusel div.mainmenu {
    color: #ffffff;
}
#id-left div.vmenu{
    width: 100% !important;
}
.fixed-menu #id-right{
    width: calc(100% - 280px) !important;
    margin-left: 280px !important;
}
#tiptip_holder #tiptip_content, .conteneur, body.fixed-menu #id-right{
    font-size: 1.2rem;
}
div.icon-engin_chantier:before {
    content: "\e603";
}
div.mainvmenu.icon-cmpProd:before {
    content: "\e60e";
}
div.mainvmenu.icon-arvAchat:before {
    content: "\e62e";
}
.icon-transferorders:before{
  content: '\e615';
}
div.mainvmenu.icon-lrh:before {
    content: "\e611";
}

div.mainvmenu.icon-resource:before {
    content: "\e61a";
}

.minwidth100 { min-width: 100px; }
.minwidth200 { min-width: 200px; }
.minwidth300 { min-width: 300px; }
.maxwidth100 { max-width: 100px; }
.maxwidth200 { max-width: 200px; }
.maxwidth300 { max-width: 300px; }

input[type=submit],
button,
.button,
.butAction,
.butActionDelete,
.butActionRefused,
div.tabs .tabsElem a {
  /* background: #26c6da;
    color: #FFFFFF;*/

    background: #245c8f !important;
    color: #FFFFFF !important;
}

input[type=submit]:link,
button:link,
.button:link,
.butAction:link,
.butActionDelete:link,
.butActionRefused:link,
div.tabs .tabsElem a:link {
    background: #26c6da;
    color: #FFFFFF;
    font-size: 12px;
}

input[type=submit]:visited,
button:visited,
.button:visited,
.butAction:visited,
.butActionDelete:visited,
.butActionRefused:visited,
div.tabs .tabsElem a:visited {
    background: #26c6da;
    color: #FFFFFF;
}

input[type=submit]:hover,
button:hover,
.button:hover,
.butAction:hover,
.butActionDelete:hover,
.butActionRefused:hover,
div.tabs .tabsElem a:hover {
    background: #3adaee;
    color: #FFFFFF;


}

input[type=submit]:active,
button:active,
.button:active,
.butAction:active,
.butActionDelete:active,
.butActionRefused:active,
div.tabs .tabsElem a:active {
 <!--    background: #26c6da;
    color: #FFFFFF; -->

    background: #09355b !important;
    color: #FFFFFF !important;
}


.icon-plus-filter,
.icon-plus-filter-cancel,
.dpInvisibleButtons {
    background: transparent;
    color: #26c6da;
}

.icon-plus-filter:link,
.icon-plus-filter-cancel:link,
.dpInvisibleButtons:link {
    background: transparent;
    color: #26c6da;
}

.icon-plus-filter:visited,
.icon-plus-filter-cancel:visited,
.dpInvisibleButtons:visited {
    background: transparent;
    color: #26c6da;
}

.icon-plus-filter:hover,
.icon-plus-filter-cancel:hover,
.dpInvisibleButtons:hover {
    background: transparent;
    color: #3adaee;
}

.icon-plus-filter:active,
.icon-plus-filter-cancel:active,
.dpInvisibleButtons:active {
    background: transparent;
    color: #3adaee;
}

@media 
only screen and (max-width: 64em),
only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 1280px),
not all,
only screen and (max-device-width: 1280px) and (min-resolution: 120dpi) {
    #tmenu_tooltip { 
        font-size: 1.6rem; 
    }
    #id-left {
        font-size: 1.2rem; 
    }
}















































/* NEW */

.centpercent {
    width: 100%;
}
.quatrevingtpercent, .inputsearch {
    width: 80%;
}
.soixantepercent {
    width: 60%;
}
textarea.centpercent {
    width: 96%;
}

#upbuttons-nav ul li{
    padding: .5em 1em;
    white-space: nowrap;
}

/* For table into table into card */
div.ficheaddleft tr.liste_titre:first-child td table.nobordernopadding td {
    padding: 0 0 0 0;
}
div.nopadding {
    padding: 0 !important;
}

.containercenter {
    display : table;
    margin : 0px auto;
}

#pictotitle {
    margin-right: 8px;
    margin-bottom: 4px;
}
.pictoobjectwidth {
    width: 14px;
}
.pictosubstatus {
    padding-left: 2px;
    padding-right: 2px;
}
.pictostatus {
    width: 15px;
    vertical-align: middle;
    margin-top: -3px
}
.pictowarning, .pictopreview {
    padding-left: 3px;
}
.pictoedit, .pictowarning, .pictodelete {
    vertical-align: text-bottom;
}
.fiche img.pictoedit {
    opacity: 0.7;
}
.colorthumb {
    padding-left: 1px !important;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 44px;
    text-align:center;
}
div.attacharea {
    padding-top: 18px;
    padding-bottom: 10px;
}
div.attachareaformuserfileecm {
    padding-top: 0;
    padding-bottom: 0;
}

div.arearef {
    background: white !important;
    padding: 16px 20px !important; /* Compact reference banner */
    margin: 0 0 12px 0 !important;
    border-bottom: 1px solid #dddbda !important;
    border-left: 4px solid #0176d3 !important;
    border-radius: 4px !important;
}

div.statusref {
    margin-top: 0 !important;
}

.arearef .titre {
    font-size: 20px !important; /* Slightly smaller header */
    font-weight: 400 !important;
    color: #181818 !important;
}
div.statusref img {
    padding-left: 8px;
    padding-right: 9px;
    vertical-align: text-bottom;
}
div.statusrefbis {
    padding-left: 8px;
    padding-right: 9px;
    vertical-align: text-bottom;
}
img.photoref, div.photoref {
    border: 1px solid #CCC;
    -webkit-box-shadow: 2px 2px 4px #ccc;
    box-shadow: 2px 2px 4px #ccc;
    padding: 4px;
    height: 80px;
    width: 80px;
    object-fit: contain;
}
img.fitcontain {
    object-fit: contain;
}
div.photoref {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
img.photorefnoborder {
    padding: 2px;
    height: 48px;
    width: 48px;
    object-fit: contain;
    border: 1px solid #AAA;
    border-radius: 100px;
}
.underrefbanner {
}
.underbanner {
    border-bottom: 2px solid rgb(120,120,120);
}
.tdhrthin {
    margin: 0;
    padding-bottom: 0 !important;
}
/* END For table into table into card */
body.onlinepaymentbody div.fiche {  /* For online payment page */
    margin: 20px !important;
}
div.fiche>table:first-child {
    margin-bottom: 15px !important;
}
div.fichecenter {
    /* margin-top: 10px; */
    width: 100%;
    clear: both;    /* This is to have div fichecenter that are true rectangles */
}
div.fichecenterbis {
    margin-top: 8px;
}
div.fichethirdleft {
    float: left;
    width: 50%;
    }
div.fichetwothirdright {
    float: right;
    width: 50%;
    }
div.fichehalfleft {
    float: left;
    width: 50%;
}
div.fichehalfright {
    float: right;
    width: 50%;
}
div.ficheaddleft {
    padding-left: 16px;
}
div.firstcolumn div.box {
    padding-right: 10px;
}
div.secondcolumn div.box {
    padding-left: 10px;
}
.butActionNew, .butActionNewRefused, .butActionNew:link, .butActionNew:visited, .butActionNew:hover, .butActionNew:active {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: normal;

    margin: 0em 0.3em 0 0.3em !important;
    padding: 0.2em 0.7em 0.3em;
    font-family: roboto,arial,tahoma,verdana,helvetica;
    display: inline-block;
    /* text-align: center; New button are on right of screen */
    cursor: pointer;
    /*color: #fff !important;
    background: rgb(60,70,100);
    border: 1px solid rgb(60,70,100);*/
    border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);

    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;

    padding-top: 0 !important;
}
a.butActionNew>span.fa-plus-circle, a.butActionNew>span.fa-plus-circle:hover { padding-left: 6px; font-size: 1.5em; border: none; box-shadow: none; webkit-box-shadow: none; }
a.butActionNewRefused>span.fa-plus-circle, a.butActionNewRefused>span.fa-plus-circle:hover { padding-left: 6px; font-size: 1.5em; border: none; box-shadow: none; webkit-box-shadow: none; }
.butActionNew *, .butActionNewRefused *, .butActionNew *:link, .butActionNew *:visited, .butActionNew *:hover, .butActionNew *:active{
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}
.span-icon-multicompany {
    width: auto !important;
}
div#s2id_receivercc,div#s2id_receiver{
    min-width: 400px;
    width: auto;
}
div.tabsAction.upbuttonsdiv {
    position: initial !important;
    bottom: initial !important;
    right: initial !important;
    background-color: initial !important;
    padding: .5em 0 !important;
    border: initial !important;
    border-radius: initial !important;
    margin: initial !important;
    opacity: initial !important;
    display: block !important;
}
div.tabsAction.upbuttonsdiv .divButAction a{
    padding: .5em 1em !important;
}
.tabBar .tagtd tr:nth-child(odd),body tr td tr:nth-child(odd) {
    background-color: transparent !important;
}
#blockvmenusearch .select2.select2-container
,#blockvmenusearch .select2-container--focus span.select2-selection.select2-selection--single
,#blockvmenusearch .select2-container--default .select2-selection--single
{
    width:94px !important;
}

#blockvmenusearch select{
    display:none;
}
/* Section headings - Salesforce Style */
body #id-left div.vmenu li.menu_titre>div>span.vsmenu {
    color: rgba(255, 255, 255, 0.45) !important; /* Muted uppercase heading */
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 16px 8px 16px !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}
.login_table .span-icon-multicompany {
    width: auto !important;
}
.dashboardlinelatecoin {
    float: right;
    position: relative;
    text-align: right;
    top: -24px;
    padding: 1px 2px 1px 2px;
    border-radius: .25em;
    background-color: #9f4705;
    padding: 0px 5px 0px 5px;
    /* top: -26px; */
}
span.dashboardlineko {
    color: #FFF;
    font-size: 80%;
}
.boxstats130 {
    width: 158px;
    height: 48px;
    padding: 3px;
}
.boxstatscontent {
    padding: 3px;
}
.boxstats, .boxstats130, .boxstatscontent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boxstats {
    padding: 3px;
    width: 103px;
}
body #id-left div.vmenu li.menu_titre>div.menu_top{
    padding: 0 !important;
}
body #id-left div.vmenu li.menu_titre>div.menu_end{
    padding: 0 !important;
}
.tmenuend {
    display: none;
}
select.flat.selectlimit {
    max-width: 62px;
}
.selectlimit, .marginrightonly {
    margin-right: 10px !important;
}
.marginleftonly {
    margin-left: 10px !important;
}
.nomarginleft {
    margin-left: 0px !important;
}
.selectlimit, .selectlimit:focus {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    outline: none;
}
.strikefordisabled {
    text-decoration: line-through;
}
.widthdate {
    width: 130px;
}
.cursorpointer {
    cursor: pointer;
}
.cursormove {
    cursor: move;
}


/*---------------------------------------------*/
.cke_reset {
    min-width: 250px;
}
.flexcontainer {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.thumbstat {
    flex: 1 1 116px;
}
.thumbstat150 {
    flex: 1 1 170px;
}
.thumbstat, .thumbstat150 {
    /* flex-grow: 1; */
    /* flex-shrink: 1; */
    /* flex-basis: 140px; */
    display: inline;
    width: 100%;
    justify-content: flex-start;
    align-self: flex-start;
}
/*
 *  Boxes
 */

.ficheaddleft div.boxstats {
    border: none;
}
.boxstatsborder {
    border: 1px solid #CCC !important;
}
.boxstats, .boxstats130 {
    display: inline-block;
    margin: 3px;
    border: 1px solid #CCC;
    text-align: center;
    border-radius: 2px;
}
.boxstats, .boxstats130, .boxstatscontent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boxstats {
    padding: 3px;
    width: 103px;
}
.boxstats130 {
    width: 158px;
    height: 48px;
    padding: 3px
}
.boxstatscontent {
    padding: 3px;
}
div.fichecenter{
    display:block !important;
}
#upbuttons-nav ul{
    top: -36px !important;
}
#upbuttons-nav ul li>a, #upbuttons-nav ul li>span{
    box-shadow: 2px 2px 4px #565656;
}
/*---------------------------------------------*/

/*----------------------08/09-----------------------*/
.select2-container *,.select2-results * {
    font-size: 1.2rem;
}
/*--------------------END 08/09---------------------*/

/*----------------------08/09 - 2-----------------------*/
.butActionRefused {
    cursor: not-allowed !important;
    color: #999 !important;
    border: 1px solid #ccc;
    -moz-box-sizing: border-box;
    background: #7d7d7d21 !important;
}
/*--------------------END 08/09 - 2---------------------*/
/*----------------------17/10-----------------------*/
body .jnotify-container{
    top: 0px !important;
    right: 0 !important;
}
/*--------------------END 17/10---------------------*/

/*----------------------30/11-----------------------*/
.select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr {
  padding: 2px 5px 1px 5px;
  margin: 0 0 2px 3px;
  position: relative;
  line-height: 13px;
  color: #333;
  cursor: default;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #e4e4e4;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr a {
    font-weight: normal;
}
.select2-container-multi-dolibarr .select2-choices-dolibarr li {
  float: left;
  list-style: none;
}
.select2-container-multi-dolibarr .select2-choices-dolibarr {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0 5px 0 0;
  position: relative;
  cursor: text;
  overflow: hidden;
}
/*----------------------END 30/11-----------------------*/
/*----------------------31/01/2019-----------------------*/
div.mainmenu.tmenudisabled {
    display: none;
}
@media only screen and (max-width: 64em), only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 1280px), not all, only screen and (max-device-width: 1280px) and (min-resolution: 120dpi)
{
#tmenu_tooltip .tmenudiv li {
    width: auto !important;
}

}
/* --------------- edit by imane 31/07/2019 ------------------*/

    .login_block_other img.img_right{
        height: 20px;
        margin: 12px 0;
        cursor:pointer;

    }
    .login_block_other img.img_right:hover{

    }

    @media only screen and (max-width: 1290px)  {
        .child_div {
            width: 50% !important;
        }
    }

      
    @media only screen and (min-width: 1080px) {
        .logo {
            width: 25%;
        }

    } 


    @media only screen and (max-width: 750px) {
        .logo {
            width: 150px !important ;
        }
        .login_block_other > .inline-block {
            display: none;
        }
        img.img_right{
            display:block !important;
        }

    }

    @media only screen and (min-width: 751px) {
        .logo {
            width: 12% ;
        }
        .login_block_other{
            display: block !important;
        }
        .login_block_other > .inline-block{
            display: inline-block !important;
        }
        .inline-block{
            display: inline-block !important;
        }

        img.img_right{
            display:none ;
        }

    }

   

    @media only screen and (max-width: 692px) {
        .child_div {
            width: 100% !important;
        }
        .child_div>div{
            margin-left: 15px;
            /*margin-left: 2.5%*/;
        }
       
    }
   

    form[action*="list.php"]{
        float:left;
        width: 100%;
    }

    li.li-visited{
        background-color: #a9a9a936;
        margin-right: 0px !important;
        margin-left: 0px !important;
        border-radius: 3px;
        border-right: 5px solid #ef2a37;
    }
/*----------------------END 31/07/2019-----------------------*/



/*----------------------END 31/01-----------------------*/





/*----------------------    12/02/19-----------------------*/
.flexcontainer {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.thumbstat {
    min-width: 150px;
}
.thumbstat150 {
    min-width: 168px;
    max-width: 169px;
}
.thumbstat, .thumbstat150 {
    flex-grow: 1;
    flex-shrink: 0;
}
.butAction, .butActionDelete, .butActionRefused, .button, button, input[type=image], input[type=submit],select{
    font-size: 12px;
}
/*----------------------END 31/02/19-----------------------*/





/*---------------------- 23/04/19 -----------------------*/
dl.dropdown *{
    color:#FFFFFF !important;
}
table .dropdown dt a span, .multiSel span{
    padding: 0px 3px 2px 3px;
}
.dropdown dd ul li a:hover,.dropdown dt a {
    color:#000 !important;
}
.jnotify-container{
    font-size: 11px;
}
.jnotify-container .jnotify-notification a.jnotify-close{
    font-size: initial;
}
/*---------------------- END 23/04/19 -----------------------*/


<!-- css-imane -->
/*---------------------- 16/07/19 -----------------------*/
div.tmenudiv ul.tmenu {
    max-width: 200px !important;
}
li.tmenu, li.tmenusel {
    padding: 10px 7px;
    margin: 10px 0;
    text-align: center;
    list-style: none;
}
li.tmenu:hover {
    background-color:#a9a9a936;
    margin-right: 0px !important;
    margin-left: 0px !important;
    border-radius: 3px;
    border-right: 5px solid #ef2a37;
    padding: 10px 2px 10px 7px;
}
li.tmenusel:hover {
    background-color:#a9a9a936;
    margin-right:0px !important;
    margin-left: 0px !important;
    border-radius: 3px;
    border-right: 5px solid #ef2a37;
    padding: 10px 7px;
}
.top-menu-10{
    background: #09355b; 
    height: 44px;
    
}
.top-menu-10 img{
    
}

ul.vmenu{
    list-style: none;
    position: fixed;
    left: 113px;
    display: none;
    background-color: #09355beb;
    margin-top: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 200px !important;
    max-width: 200px;
    margin-top: 10px;
    margin-left:0px !important
}
div.blockvmenu{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    
}
a.vmenu{
    text-align:left !important;
    /*padding-left:5px !important;*/
    color:white !important;
}
a.vsmenu{
    text-align:left !important;
    padding-left:10px !important;
    color:white !important;
} 




#inner-content-sousmenu .slimScrollDiv {
    min-height: 0px !important;
}

/* --- menu-top icon_right --- */

span.fa-print{
    padding: 5px;
    background: #FFA87D !important;
    border-radius: .65rem !important;
}
span.valignmiddle.atoplogin:hover {
   
    bottom: 5px;
}

span.fa-question-circle{
    padding: 5px;
    background: #22d3d6;
    border-radius: .65rem!important;
}

span.fa-sign-out-alt{
    padding: 8px 6px;
    background: #FF7588;
    border-radius: .65rem!important;
}
span.fa-sign-out{
    padding: 5px;
    background: #FF7588;
    border-radius: .65rem!important;
}

div.login_block {
    display: -webkit-box !important;
}
a.vsmenu {
    font-size: 11px !important;
}

/* --- logo --- */
.logo {
    height: 44px;
    width: 80%;
    background: rgba(255,255,255,0.7);
    padding: 4px;
    border-bottom: 3px solid #09355b;
    border-top: 3px solid #09355b;
    border-top-right-radius: 33px;
    border-bottom-right-radius: 33px;
    text-align: center;
    float:left;
}
.logo img.mycompany {
    height: auto;
    width: auto;
    padding-right: 20px;
    /*float: left;*/
    max-height: 30px;
} 

<!--  -->
.notopnoleftnoright td:first-child{
    width: 1.2em;
    padding-right: .5em;
    padding: 0px;
}

.fiche>table.notopnoleftnoright:nth-child(2) tr, .fiche>table[summary] tr {
    border: none;
    color: #608FBE;
    font-size: 1.6em;
    text-transform: none;
    font-weight: 700;
    white-space: nowrap;
}
.child_div a:hover{
    color: #09355b !important
}

body.body.bodylogin {
    background-image: url(/htravelsystem/custom/becreative/img/background_login_1.jpg) !important;
    background-repeat: round;
}


/* ---- css input --- */

.dropdown {
    border: none !important;
}
li.tmenu a.tmenuimage{
    color: #545766 !important;
}
li.tmenusel a.tmenuimage{
    color: #545766 !important;
}

img.icon-menu{
   margin-right: 10px;
}
img.icon-menu:hover{
    cursor: pointer;
    background-color: #e9e9e95e;
    border-radius: 2px;
}
img.icon-menu {
    height: 34px;
    width: 30px;
    margin-left: 5px;
}


.dropdown:after{
    content: none !important;
}

.mainmenuaspan {
    font-size: 11px;
}
a.vsmenu {
    font-size: 11px;
}
a.dropdown-toggle.login-dropdown-a {
    color: white !important;
}
/*---------------------- END 16/07/19 -----------------------*/



/* * * * * * * * * * * * * * * * * * * 26/09/2019 * * * */

.center {
    text-align: center;
    margin: 0px auto;
}

.notopnoleftnoright td.titre_right .select2-container{
    max-width: 200px;
}

/* REMOVED DUPLICATE STATE RULES */
span.becreativeiconopenmenu {
    display:none;
}

div.sous-menu ul.vmenu{
    padding-bottom: 20px;
}

@media only screen and (max-width: 64em), only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-device-width: 1280px), not all, only screen and (max-device-width: 1280px) and (min-resolution: 120dpi){
    #id-container.becreativeenuvisible #id-right{
        width: calc(100% - 280px) !important;
        margin-left: 280px !important;
    }
    .fixed-menu #id-left{
        box-shadow: 3px 0 6px -2px #bfbaba;
        transform: initial !important;
    }
    #id-container .side-nav{
        display:none;
    }
    #id-left .vmenu li.tmenu, #id-left .vmenu li.tmenusel{
        position:relative;
    }
    span.becreativeiconopenmenu {
        display:block;
        position: absolute;
        left: 0px;
        top: 0;
        padding: 2px 5px;
        font-size: 10px;
        cursor: pointer;
        color: #9e9e9e;
    }
    span.becreativeiconopenmenu:hover {
        background: #545766 ;
        color: #fff;
    }
}
.widthpictotitle {
    /*width: 32px;*/
}
/* * * * * * * * * * * * * * * * * * * END 26/09/2019 * */




div#tmenu_tooltip {
    padding-right: 0px !important;
}


.login_block_elem {
    vertical-align: top !important;
    padding: 0px 3px 0px 4px !important;
    line-height: 44px !important;
    height: 44px !important;
}


div.inline-block span.aversion {
    padding: 4px 3px 5px;
    background: #00c292ab !important;
    border-radius: .65rem !important;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
}

.atoplogin, .atoplogin:hover {
    color: #FFFFFF !important;
}

.fixed-menu #id-left {
    /*width: 100% !important;*/
}

div#id-left div.vmenu{
    padding:0px !important;
    margin: 0px !important;
}

li.tmenu, li.tmenusel{
    float: none !important;    
}

div.tmenudiv {
    white-space: initial !important;
}

#id-left{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.vmenu div.blockvmenuend{
    padding: 0px !important;
    margin: 0px !important;
}

.mainmenu::before{
    color: #545766 !important
}

.info-box.info-box-sm{
    background: #fff !important; 
}

div.info {
    color: #09355b;
    background: #c9e6ff !important;
    border-left: solid 5px #09355b;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.menu_contenu{
    padding: 0px !important;    
}

.select2-dropdown{
    background: #fafafa;
}

select {
    padding: 5px;
    margin: .1em;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    background: #E7505A !important;
    color: #fcfcfc;
    border: none;
    outline: 0;
}

.select2-container--default .select2-selection--single{
    background-color: #fff !important;
    border: 1px solid #608FBE !important;
    border-radius: 4px !important;
}
input, textarea {
    background: #fff !important;
    color: #080808 !important;
    border: 1px solid #608FBE !important;
    -webkit-border-radius: .3em !important;
    -moz-border-radius: .3em;
    border-radius: .3em;
    padding: 5px;
    margin: 1px !important;
}

input[type=image]{
    background-color: transparent !important;
    border: none !important;
}

table.table-fiche-title.modulefamilygroup .col-title div.titre {
    line-height: 40px;
    font-weight: 600;
    padding-left: 5px;
}

.table-fiche-title.modulefamilygroup tr:nth-child(odd) {
    border-radius: 4px;
}

.table-fiche-title.modulefamilygroup tr.titre td {
    padding-top: 0px !important;
}

span.widthpictotitle.pictotitle {
    background: #09355b;
    opacity: 0.8;
    color: #fff !important;
    padding: 7px;
    border-radius: 2px;
    min-width: 30px;
    text-align: center;
}

span.widthpictotitle {
    font-size: 1.2em;
}

.pictotitle {
    margin-right: 0px;
}

div.blockvmenupair, div.blockvmenuimpair, div.blockvmenubookmarks, div.blockvmenuend{
    background: transparent;
}


div.login_block_other{
    max-width: max-content !important;
}

.dropdown-menu > .user-header {
    background: #09355b;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
    color: white !important;
}

.login_table .tdinputlogin .fa {
    padding-left: 0 !important;
}

.iconboxesbecreative {
    max-width: 47px;
}

@media only screen and (max-width: 600px)
{
    .side-nav {
        z-index: 200;
        background: var(--colorbackvmenu1);
        padding-top: 0px;
    }
    .fixed-menu #id-left{
        left: 0px;
    }
    div.login_block {
        padding-top: 0px !important;
        background: none !important;
        right: 0px !important;
        left: auto !important;
    }
    .login_block_other{
        position: absolute !important;
        right: 55px;
    }

    div.login_block_user{
        position: absolute !important;
        right: 0px;
    }
}

span.becreativeshowsubmenus {
    position: absolute;
    right: 2px;
    top: 0px;
    font-weight: 900;
    display: none;
    background-color: #09355b;
    color: #fff;
    border-radius: 4px;
    line-height: 18px;
    font-size: 12px;
    height: 20px;
    width: 20px;
}
li.tmenu:hover span.becreativeshowsubmenus 
,li.li-visited span.becreativeshowsubmenus 
{
    right: -5px;
}
span.becreativeshowsubmenus::after {
    font-family: "Font Awesome 5 Free";
    font-size: 0.7em;
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    text-decoration: none;
    margin: auto 3px;
    display: inline-block;
    content: "\f054";
    -webkit-transition: -webkit-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}
@media screen and (max-width: 900px){
    span.becreativeshowsubmenus {
        display: block;
    }
    li.tmenu a.tmenuimage 
    ,li.tmenusel  a.tmenuimage 
    {
        margin-top: 10px !important;
    }
}

li.tmenu a.tmenuimage {
    padding-right: 8px !important;
}

.becreativesubmenus {
    position: absolute;
    top: 0;
    left: 0;
    display:none;
}

.becreativesubmenus .inner-content-sousmenu {
    display: block !important;
}

.becreativesubmenus .inner-content-sousmenu ul.vmenu {
    display: block !important;
    width: auto !important;
    min-width: 200px !important;
    background-color: #09355b !important;
    /*background-color: #09355beb !important;*/
    /*background-color: rgb(9 53 91 / 92%) !important;*/
}
.becreativesubmenus .blockvmenu .menu_titre .vsmenu
,.becreativesubmenus .blockvmenu .menu_titre a.vmenu 
,.becreativesubmenus .blockvmenu .menu_titre .vmenudisabled {
    white-space: normal;
    display: inline-block;
    font-weight: 200;
}

.becreativesubmenus span.vsmenu 
,.becreativesubmenus a.vmenu 
,.becreativesubmenus font.vmenudisabled {
    font-size: 11px;
    font-weight: 200;
    color: #bbbaba;
}
body .becreativesubmenus .menu_top
body .becreativesubmenus span.vsmenu {
    color: #bbbaba;
}
body .becreativesubmenus .menu_top
,body .becreativesubmenus .menu_end {
    display:none;
}
.side-nav .tmenu div.tmenudisabled, .side-nav .tmenu a.tmenudisabled {
    white-space: normal;
}

div#login_left,div#login_right{margin:0 auto;}


/* ==========================================================================
   WORLD-CLASS ENTERPRISE SIDEBAR REDESIGN (SAP/ORACLE STYLE)
   ========================================================================== */

/* 1. Main Container & Reset */
/* ==========================================================================
   SALESFORCE LIGHTNING SIDEBAR REDESIGN
   ========================================================================== */

/* 1. Main Container Fixes */
div#id-left, 
.side-nav {
    background-color: #16325c !important; /* Salesforce Dark Blue */
    background: #16325c !important;
    border-right: none !important;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1) !important;
    overflow-x: hidden !important;
}

div#id-left div.vmenu,
#id-left .vmenu {
    background-color: transparent !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 2. Top Level Menu Items */
body #id-left .vmenu li.tmenu,
body #id-left .vmenu li.tmenusel {
    margin: 4px 8px !important; /* Proper spacing for a card-like look */
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
}

/* 3. Main Links Styling (Salesforce Style) */
body #id-left .vmenu li.tmenu > a.tmenuimage,
body #id-left .vmenu li.tmenusel > a.tmenuimage {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    height: auto !important;
    min-height: 40px !important;
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    border: none !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Hover State (Salesforce Style) */
body #id-left .vmenu li.tmenu > a.tmenuimage:hover,
body #id-left .vmenu li.tmenusel > a.tmenuimage:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle highlight */
    color: #ffffff !important;
}

/* 5. Active State (Salesforce Style) */
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left .vmenu li.tmenu > a.tmenuimage[data-actif="nc_actif_element"],
body #id-left .vmenu li.tmenu.expanded > a.tmenuimage {
    background-color: #0176d3 !important; /* Salesforce Bright Blue */
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Vertical indicator for active item */
body #id-left .vmenu li[data-actif="nc_actif_element"]::before,
body #id-left .vmenu li.tmenusel::before {
    content: '' !important;
    position: absolute !important;
    left: -8px !important;
    top: 5px !important;
    bottom: 5px !important;
    width: 4px !important;
    background-color: #ffffff !important; /* White bar on active */
    border-radius: 0 2px 2px 0 !important;
    z-index: 10 !important;
}

/* 6. Icons (Salesforce Style) */
body #id-left .vmenu li .tmenuimage div[class*="icon-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-right: 12px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Icon glyphs */
body #id-left .vmenu li .tmenuimage div[class*="icon-"]::before,
body #id-left .vmenu li .tmenuimage div[class*="icon-"] .fa,
body #id-left .vmenu li .tmenuimage div[class*="icon-"] .fas {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: color 0.2s ease !important;
}

/* Active/Hover Icon Color */
body #id-left .vmenu li.tmenu > a.tmenuimage:hover div[class*="icon-"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage div[class*="icon-"]::before {
    color: #ffffff !important;
}

/* 7. Label Styling */
body #id-left .vmenu .mainmenuaspan {
    flex: 1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 8. Submenu (Salesforce Style) */
body #id-left .vmenu .tree-submenu {
    background-color: rgba(0, 0, 0, 0.2) !important; /* Darker indented background */
    padding: 4px 0 !important;
    margin: 0 8px 4px 8px !important;
    border-radius: 4px !important;
    border: none !important;
}

body #id-left .vmenu .tree-submenu li a {
    padding: 8px 12px 8px 40px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 4px !important;
}

body #id-left .vmenu .tree-submenu li a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

body #id-left .vmenu .tree-submenu li a[data-actif="nc_actif_element"] {
    color: #ffffff !important;
    background-color: rgba(1, 118, 211, 0.2) !important;
    font-weight: 600 !important;
}

/* 9. Header Fixes (To prevent overlap) */
div#id-top {
    z-index: 100 !important;
}

/* Hide clutter */
.menu_top, .menu_end, .blockvmenuheader {
    display: none !important;
}

/* Fix for the "Accounting & Finance" overlap mentioned by user */
#id-left .vmenu li, #id-left .vmenu a {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Remvoe old arrows from submenus */
body #id-left .vmenu .tree-submenu a.vsmenu::before {
    content: none !important;
    display: none !important;
}

/* Submenu Hover */
body #id-left .vmenu .tree-submenu a.vsmenu:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Submenu Active */
body #id-left .vmenu .tree-submenu a[data-actif="nc_actif_element"],
body #id-left .vmenu .tree-submenu div[data-actif="nc_actif_element"] {
    color: #3b82f6 !important; /* Blue text */
    font-weight: 500 !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-left: 3px solid #3b82f6 !important;
    padding-left: 47px !important; /* Adjust for border */
}

/* Hide clutter */
.menu_top, .menu_end, .blockvmenuheader, .vmenu-chevron {
    display: none !important;
}

/* Logo Area Integration */
.top-menu-10 {
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
    padding: 15px !important;
}

.logo {
    background: white !important;
    border-radius: 4px !important;
    padding: 5px !important;
}

/* Scrollbar Styling for Sidebar */
#id-left::-webkit-scrollbar {
    width: 6px;
}
#id-left::-webkit-scrollbar-track {
    background: #1e293b; 
}
#id-left::-webkit-scrollbar-thumb {
    background: #475569; 
    border-radius: 3px;
}
#id-left::-webkit-scrollbar-thumb:hover {
    background: #64748b; 
}

/* Icon Specific Mappings (ensure FontAwesome) */
/* Home */
body #id-left .vmenu .icon-home::before { content: '\f015' !important; }
/* Parties */
body #id-left .vmenu .icon-companies::before { content: '\f1ad' !important; }
/* Products */
body #id-left .vmenu .icon-products::before { content: '\f468' !important; }
/* Commercial */
body #id-left .vmenu .icon-commercial::before { content: '\f07a' !important; }
/* Financial */
body #id-left .vmenu .icon-billing::before, 
body #id-left .vmenu .icon-compta::before,
body #id-left .vmenu .icon-accounting::before { content: '\f53d' !important; }
/* Bank */
body #id-left .vmenu .icon-bank::before { content: '\f19c' !important; }
/* Projects */
body #id-left .vmenu .icon-project::before { content: '\f0ae' !important; }
/* HRM */
body #id-left .vmenu .icon-hrm::before { content: '\f500' !important; }
/* Documents */
body #id-left .vmenu .icon-ecm::before { content: '\f07c' !important; }

/* SAP-like Active Indicator (Left Bar) is handled by border-left in hover/active states above */


/* Fix vertical line overlap - pull content back slightly */
#id-left .vmenu li.tmenu, 
#id-left .vmenu li.tmenusel,
#id-left div.vmenu li.tmenu, 
#id-left div.vmenu li.tmenusel,
#id-left .tree-submenu {
    width: calc(100% - 1px) !important; /* 1px gap for right border */
    margin-right: auto !important; /* Ensure it sticks to left */
}

/* Ensure sidebar container matches */
#id-left, .side-nav {
    background-color: #2d3748 !important; 
    background: #2d3748 !important;
}

/* Main menu items (HEADERS) - Light Grey Background, Dark Text */
body #id-left .vmenu li.tmenu,
body #id-left .vmenu li.tmenusel,
body #id-left div.vmenu li.tmenu,
body #id-left div.vmenu li.tmenusel {
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 0 !important; /* Prevent pop-out */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #a0aec0 !important; /* Light Grey Header Background */
    border-bottom: 1px solid #718096 !important;
    border-right: none !important; /* Ensure no right border conflict */
    overflow: hidden !important; /* Clip content */
}

/* Main menu links (HEADERS TEXT) */
body #id-left .vmenu li.tmenu > a.tmenuimage,
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left div.vmenu li.tmenu > a.tmenuimage,
body #id-left div.vmenu li.tmenusel > a.tmenuimage {
    background: #cbd5e0 !important; /* Lighter Grey for Header */
    color: #1a202c !important; /* Dark Text */
    border-radius: 0 !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    min-height: 30px !important;
    
    /* Layout & Overflow Fix */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* Text Overflow Fix */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Submenu container - Dark Background */
body #id-left .vmenu li.tmenu .tree-submenu,
body #id-left .vmenu li.tmenusel .tree-submenu,
body #id-left div.vmenu li.tmenu .tree-submenu,
body #id-left div.vmenu li.tmenusel .tree-submenu {
    background-color: #2d3748 !important; /* Match sidebar dark bg */
    margin: 0 !important;
    padding: 0 !important; 
    border-left: none !important;
    width: 100% !important;
    overflow: hidden !important; /* Prevent overlap */
}

/* HIDE ALL ICONS IN SUBMENU (Level 2 headers etc) */
body #id-left .tree-submenu div[class*="icon-"],
body #id-left .tree-submenu .mainmenuaspan img,
body #id-left .tree-submenu img {
    display: none !important;
}

/* RESET submenu headers if they exist as items */
body #id-left .tree-submenu .menu_contenu1, 
body #id-left .tree-submenu .menu_contenu2 {
    text-align: left !important;
    text-indent: 0 !important; /* Remove any indent */
    padding: 8px 12px !important; /* Standard padding */
    margin: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    font-weight: 600 !important; /* Bold headers */
    color: #edf2f7 !important; /* Light text matches items */
    list-style: none !important;
    
    /* Text Overflow Fix for nested headers */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Submenu Items - List Style with Separators */
body #id-left div.vmenu .tree-submenu a.vsmenu {
    color: #edf2f7 !important; /* Light Text */
    border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* Thin separator */
    padding: 8px 12px !important;
    font-size: 12px !important;
    background: transparent !important;
    border-radius: 0 !important;
    
    /* Text Overflow Fix */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Submenu Hover */
body #id-left div.vmenu .tree-submenu a.vsmenu:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* Remove chevron */
body #id-left .vmenu li.tmenu.has-children > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel.has-children > a.tmenuimage::after {
    display: none !important; 
}

/* Better icon and text alignment - Compact spacing */
body #id-left .vmenu li.tmenu > a.tmenuimage,
body #id-left .vmenu li.tmenusel > a.tmenuimage {
    gap: 8px !important; /* Tighter gap */
}

/* Chevron icon on the RIGHT side - Show only for items with submenus */
body #id-left .vmenu li.tmenu.has-children > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel.has-children > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu.has-children > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel.has-children > a.tmenuimage::after,
body #id-left .vmenu li.tmenu[class*="has-children"] > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel[class*="has-children"] > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu[class*="has-children"] > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel[class*="has-children"] > a.tmenuimage::after {
    content: '\f078' !important; /* Chevron down */
    font-family: 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 10px !important; /* Compact chevron size */
    color: #6b7280 !important; /* Grey chevron */
    transition: transform 0.2s ease !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    order: 999 !important; /* Push to the right */
    padding-left: 6px !important; /* Compact spacing */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide chevron for items without submenus (like Dashboard) */
body #id-left .vmenu li.tmenu:not(.has-children) > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel:not(.has-children) > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu:not(.has-children) > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel:not(.has-children) > a.tmenuimage::after {
    content: none !important;
    display: none !important;
}

/* Fallback: Show arrow for any menu item that has a tree-submenu child */
body #id-left .vmenu li.tmenu:has(.tree-submenu) > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel:has(.tree-submenu) > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu:has(.tree-submenu) > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel:has(.tree-submenu) > a.tmenuimage::after {
    content: '\f078' !important; /* Chevron down */
    font-family: 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    transition: transform 0.2s ease !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    order: 999 !important;
    padding-left: 12px !important;
    padding-right: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body #id-left .vmenu li.tmenu.has-children.expanded > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel.has-children.expanded > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu.has-children.expanded > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel.has-children.expanded > a.tmenuimage::after,
body #id-left .vmenu li.tmenu[class*="expanded"] > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel[class*="expanded"] > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu[class*="expanded"] > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel[class*="expanded"] > a.tmenuimage::after,
body #id-left .vmenu li.tmenu:has(.tree-submenu).expanded > a.tmenuimage::after,
body #id-left .vmenu li.tmenusel:has(.tree-submenu).expanded > a.tmenuimage::after,
body #id-left div.vmenu li.tmenu:has(.tree-submenu).expanded > a.tmenuimage::after,
body #id-left div.vmenu li.tmenusel:has(.tree-submenu).expanded > a.tmenuimage::after {
    transform: rotate(180deg) !important; /* Rotate when expanded */
    color: #1f2937 !important; /* Keep black color */
}

/* Hover state - subtle darkening */
body #id-left .vmenu li.tmenu > a.tmenuimage:hover,
body #id-left .vmenu li.tmenusel > a.tmenuimage:hover,
body #id-left div.vmenu li.tmenu > a.tmenuimage:hover,
body #id-left div.vmenu li.tmenusel > a.tmenuimage:hover {
    background-color: #cbd5e0 !important; /* Slightly darker grey on hover */
    color: #1a202c !important;
    box-shadow: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 12px !important; /* Match default padding exactly */
    border-radius: 0 !important;
}

/* Active state - Strict No-Layout-Shift */
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left div.vmenu li.tmenusel > a.tmenuimage,
body #id-left .vmenu li.tmenu > a.tmenuimage[data-actif="nc_actif_element"],
body #id-left div.vmenu li.tmenu > a.tmenuimage[data-actif="nc_actif_element"] {
    background-color: #2d3748 !important; /* Keep dark theme consistent - no white highlight */
    color: #ffffff !important; /* White text for active */
    font-weight: 700 !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Ensure left alignment and width control for ALL headers */
body #id-left .vmenu li.tmenu > a.tmenuimage,
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left div.vmenu li.tmenu > a.tmenuimage,
body #id-left div.vmenu li.tmenusel > a.tmenuimage {
    justify-content: flex-start !important; /* Left Align */
    padding: 8px 12px !important;
    background-color: #a0aec0 !important; /* Muted Grey for Header */
    color: #1f2937 !important;
    font-weight: 600 !important;
    border-radius: 0 !important; /* Remove rounding to match enterprise look */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    margin-right: 0 !important;
    border-right: none !important;
}

/* Ensure icon divs are visible and properly positioned - OVERRIDDEN ABOVE */
/* Keeping this structural block empty or minimal to avoid conflicts */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"] {
    display: none !important;
}

/* Icon container styling for colorful icons - Compact size */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"],
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"] {
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 12px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 1 !important; /* Icon comes first */
    position: relative !important;
    overflow: visible !important;
}

/* If icons use background images, ensure they're visible */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"][style*="background"],
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"][style*="background"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Ensure icon divs have content and are visible - Add Font Awesome icons */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"]::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-family: 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 900 !important;
    content: '\f15b' !important; /* Default document icon - will be overridden by specific icons below */
}

/* Specific icons for menu items - Using appropriate Font Awesome icons */
body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-home::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-home::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div.icon-home::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div.icon-home::before {
    content: '\f015' !important; /* fa-home - Black home icon */
    color: #000000 !important; /* Black */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-companies::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-companies::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div.icon-companies::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div.icon-companies::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-third"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-third"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-third"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-third"]::before {
    content: '\f0c0' !important; /* fa-users - Black people icon */
    color: #000000 !important; /* Black */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-service"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-service"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-service"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-service"]::before {
    content: '\f0b1' !important; /* fa-briefcase - Purple briefcase for services */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-sale"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-sale"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-sale"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-sale"]::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-commercial"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-commercial"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-commercial"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-commercial"]::before {
    content: '\f07a' !important; /* fa-shopping-cart - Purple shopping cart */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-billing"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-billing"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-billing"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-billing"]::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-payment"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-payment"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-payment"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-payment"]::before {
    content: '\f155' !important; /* fa-dollar-sign - Black dollar sign */
    color: #000000 !important; /* Black */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-bank"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-bank"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-bank"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-bank"]::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-cash"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-cash"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-cash"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-cash"]::before {
    content: '\f19c' !important; /* fa-university - Black bank building */
    color: #000000 !important; /* Black */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-accounting"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-accounting"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-accounting"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-accounting"]::before {
    content: '\f02d' !important; /* fa-book - Blue accounting book */
    color: #3b82f6 !important; /* Blue */
    font-size: 20px !important;
}


body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-hrm"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-hrm"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-hrm"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-hrm"]::before {
    content: '\f0c0' !important; /* fa-users - Black people icon */
    color: #000000 !important; /* Black */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-document"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-document"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-document"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-document"]::before {
    content: '\f15b' !important; /* fa-file - Purple file */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-email"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-email"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-email"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-email"]::before {
    content: '\f0e0' !important; /* fa-envelope - Purple envelope */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-financial"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-financial"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-financial"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-financial"]::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-reporting"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-reporting"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-reporting"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-reporting"]::before {
    content: '\f201' !important; /* fa-chart-line - Purple chart line */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-receivables"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-receivables"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-receivables"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-receivables"]::before {
    content: '\f658' !important; /* fa-hand-holding-usd - Purple receivables/money hand */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-fleet"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-fleet"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-fleet"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-fleet"]::before {
    content: '\f1b9' !important; /* fa-car - Purple car */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-accountancy"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-accountancy"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-accountancy"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-accountancy"]::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-compta"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-compta"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-compta"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-compta"]::before {
    content: '\f200' !important; /* fa-chart-pie - Purple pie chart (for Accounting & Financial / Billing) */
    color: #8b5cf6 !important; /* Purple */
    font-size: 20px !important;
}

/* Default icon for any other menu items - Generic file icon */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]:not(.icon-home):not([class*="icon-companies"]):not([class*="icon-service"]):not([class*="icon-sale"]):not([class*="icon-commercial"]):not([class*="icon-billing"]):not([class*="icon-payment"]):not([class*="icon-bank"]):not([class*="icon-cash"]):not([class*="icon-accounting"]):not([class*="icon-compta"]):not([class*="icon-hrm"]):not([class*="icon-document"]):not([class*="icon-email"]):not([class*="icon-financial"]):not([class*="icon-reporting"]):not([class*="icon-receivables"]):not([class*="icon-fleet"]):not([class*="icon-accountancy"]):not([class*="icon-third"]):not([class*="icon-project"])::before {
    content: '\f15b' !important; /* fa-file - Default file icon */
    color: #8b5cf6 !important; /* Purple */
}

/* Ensure icons maintain their colors (no grayscale) - Override all filters */
body #id-left .vmenu li.tmenu > a.tmenuimage img,
body #id-left .vmenu li.tmenusel > a.tmenuimage img,
body #id-left .vmenu li.tmenu a.tmenuimage img,
body #id-left .vmenu li.tmenusel a.tmenuimage img,
body #id-left div.vmenu li.tmenu > a.tmenuimage img,
body #id-left div.vmenu li.tmenusel > a.tmenuimage img {
    filter: brightness(1) invert(0) !important;
    -webkit-filter: brightness(1) invert(0) !important;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

/* Font Awesome icons - keep colorful, override white color */
body #id-left .vmenu li.tmenu > a.tmenuimage .fa,
body #id-left .vmenu li.tmenusel > a.tmenuimage .fa,
body #id-left .vmenu li.tmenu > a.tmenuimage [class*="fa-"],
body #id-left .vmenu li.tmenusel > a.tmenuimage [class*="fa-"],
body #id-left div.vmenu li.tmenu > a.tmenuimage .fa,
body #id-left div.vmenu li.tmenusel > a.tmenuimage .fa {
    color: inherit !important;
    font-size: 18px !important;
}

/* Remove icon container backgrounds - let icons show naturally */
body #id-left .vmenu li.tmenu a.tmenuimage,
body #id-left .vmenu li.tmenusel a.tmenuimage {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Submenu container - inline tree structure with card spacing */
body #id-left .vmenu li.tmenu .tree-submenu,
body #id-left .vmenu li.tmenusel .tree-submenu,
body #id-left div.vmenu li.tmenu .tree-submenu,
body #id-left div.vmenu li.tmenusel .tree-submenu {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
    padding-left: 0 !important;
    margin-top: 2px !important;
    background: transparent !important;
    width: 100% !important;
}

body #id-left .vmenu li.tmenu.expanded .tree-submenu,
body #id-left .vmenu li.tmenusel.expanded .tree-submenu,
body #id-left div.vmenu li.tmenu.expanded .tree-submenu,
body #id-left div.vmenu li.tmenusel.expanded .tree-submenu {
    max-height: 2000px !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Submenu items - Professional flat design */
body #id-left div.vmenu .tree-submenu .menu_contenu1,
body #id-left div.vmenu .tree-submenu .menu_contenu2,
body #id-left div.vmenu .tree-submenu .menu_contenu3 {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    background: transparent !important;
    position: relative !important;
}

/* Submenu links - Clean flat design REMOVING ARROW ICONS */
body #id-left div.vmenu .tree-submenu a.vsmenu {
    display: flex !important;
    align-items: center !important;
    color: #1f2937 !important; /* Dark gray/black */
    text-decoration: none !important;
    margin: 0 !important;
    padding-left: 6px !important; /* Reduced padding for left alignment */
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
}

/* REMOVED right-pointing arrow > icon */
body #id-left div.vmenu .tree-submenu a.vsmenu::before {
    content: none !important;
    display: none !important;
}

/* Submenu link hover */
body #id-left div.vmenu .tree-submenu a.vsmenu:hover {
    background-color: #f9fafb !important;
    color: #111827 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Active submenu item - Light gray background */
body #id-left div.vmenu .tree-submenu div[data-actif="nc_actif_element"],
body #id-left div.vmenu .tree-submenu a[data-actif="nc_actif_element"] {
    background-color: #f2f2f3 !important; /* Light gray like screenshot */
    color: #1f2937 !important;
    font-weight: 400 !important;
    border-left: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body #id-left div.vmenu .tree-submenu div[data-actif="nc_actif_element"] a,
body #id-left div.vmenu .tree-submenu a[data-actif="nc_actif_element"] {
    color: #1f2937 !important;
}

/* Level 2 and 3 indentation - FLATTENED for left alignment */
body #id-left div.vmenu .tree-submenu .menu_contenu2 a.vsmenu,
body #id-left div.vmenu .tree-submenu .menu_contenu3 a.vsmenu {
    padding-left: 6px !important; /* Force all levels to align left */
}

/* Remove margin overrides since arrows are gone */
body #id-left div.vmenu .tree-submenu .menu_contenu2 a.vsmenu::before,
body #id-left div.vmenu .tree-submenu .menu_contenu3 a.vsmenu::before {
    margin-left: 0 !important;
    display: none !important;
}

/* Ensure text color is black for all menu items */
body #id-left .vmenu li.tmenu > a.tmenuimage,
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left .vmenu li.tmenu > a.tmenuimage .mainmenuaspan,
body #id-left .vmenu li.tmenusel > a.tmenuimage .mainmenuaspan,
body #id-left div.vmenu li.tmenu > a.tmenuimage,
body #id-left div.vmenu li.tmenusel > a.tmenuimage {
    color: #000000 !important; /* Black text */
}

/* Remove any white text on active items - keep black */
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left .vmenu li.tmenu > a.tmenuimage[data-actif="nc_actif_element"],
body #id-left div.vmenu li.tmenusel > a.tmenuimage,
body #id-left div.vmenu li.tmenu > a.tmenuimage[data-actif="nc_actif_element"] {
    color: #000000 !important; /* Black text */
}

/* Remove any borders or shadows from menu items */
body #id-left .vmenu li.tmenu > a.tmenuimage,
body #id-left .vmenu li.tmenusel > a.tmenuimage,
body #id-left div.vmenu li.tmenu > a.tmenuimage,
body #id-left div.vmenu li.tmenusel > a.tmenuimage,
body #id-left div.vmenu .tree-submenu a.vsmenu {
    box-shadow: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Clean, professional typography */
body #id-left div.vmenu,
body #id-left .vmenu {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ============================================== */
/*      OVERRIDE CONFLICTING STYLES               */
/*      Ensure Modern Professional Look           */
/* ============================================== */

/* Override icon container backgrounds - remove gray boxes */
body #id-left .vmenu li.tmenu a.tmenuimage,
body #id-left .vmenu li.tmenusel a.tmenuimage,
body #id-left div.vmenu li.tmenu a.tmenuimage,
body #id-left div.vmenu li.tmenusel a.tmenuimage {
    background-color: transparent !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
}

/* Override icon div backgrounds - ensure colorful icons show */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"],
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"] {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
}

/* Remove chevron from all items - only show for expandable */
body #id-left .vmenu li.tmenu::after,
body #id-left .vmenu li.tmenusel::after {
    display: none !important;
}

/* Ensure icons are colorful - override any filters or color changes */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"]::before {
    color: inherit !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Override any white icon colors */
body #id-left .vmenu li.tmenu a.tmenuimage .fa,
body #id-left .vmenu li.tmenusel a.tmenuimage .fa,
body #id-left .vmenu li.tmenu a.tmenuimage [class*="fa-"],
body #id-left .vmenu li.tmenusel a.tmenuimage [class*="fa-"] {
    color: inherit !important;
}

/* Remove image inversion - keep icons colorful */
body #id-left .vmenu li.tmenu a.tmenuimage img,
body #id-left .vmenu li.tmenusel a.tmenuimage img,
body #id-left div.vmenu li.tmenu a.tmenuimage img,
body #id-left div.vmenu li.tmenusel a.tmenuimage img {
    filter: none !important;
    -webkit-filter: none !important;
    filter: brightness(1) invert(0) !important;
    -webkit-filter: brightness(1) invert(0) !important;
}

/* Modern spacing and layout */
body #id-left .vmenu li.tmenu,
body #id-left .vmenu li.tmenusel {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* Text styling - Bold black text matching screenshot */
body #id-left .vmenu li.tmenu > a.tmenuimage .mainmenuaspan,
body #id-left .vmenu li.tmenusel > a.tmenuimage .mainmenuaspan,
body #id-left .vmenu li.tmenu > a.tmenuimage .mainmenuaspan b,
body #id-left .vmenu li.tmenusel > a.tmenuimage .mainmenuaspan b {
    color: #000000 !important; /* Black text */
    font-weight: 600 !important; /* Bold */
    font-size: 13px !important;
    flex: 1 !important;
    text-align: left !important;
    order: 2 !important; /* Text comes after icon */
    min-width: 0 !important; /* Allow text to shrink if needed */
    line-height: 1.4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Active state text should also be black and bold */
body #id-left .vmenu li.tmenusel > a.tmenuimage .mainmenuaspan,
body #id-left .vmenu li.tmenusel > a.tmenuimage .mainmenuaspan b {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* Icon font colors - ensure colorful icons (Dolibarr icon font) */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"]::before,
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]::before,
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"]::before {
    color: inherit !important;
    /* Use vibrant colors for different icon types */
}

/* Specific icon colors matching screenshot - Correct colors */
body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-home::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-home::before {
    color: #000000 !important; /* Black document icon */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-companies::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-companies::before {
    color: #000000 !important; /* Black for companies/people */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-project::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-project::before {
    color: #10b981 !important; /* Green for projects */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-billing::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-billing::before,
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-bank"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-bank"]::before {
    color: #000000 !important; /* Black for billing/bank */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div.icon-accounting::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div.icon-accounting::before {
    color: #3b82f6 !important; /* Blue for accounting */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-sale"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-sale"]::before {
    color: #8b5cf6 !important; /* Purple for sales */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-inventory"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-inventory"]::before {
    color: #14b8a6 !important; /* Teal for inventory */
}

body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-hrm"]::before,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-hrm"]::before {
    color: #000000 !important; /* Black for HRM */
}

/* Default colorful icon if no specific color - use vibrant colors */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"]:not([class*="icon-home"]):not([class*="icon-companies"]):not([class*="icon-project"]):not([class*="icon-billing"]):not([class*="icon-accounting"]):not([class*="icon-sale"]):not([class*="icon-inventory"]):not([class*="icon-hrm"]):not([class*="icon-bank"])::before {
    color: #6366f1 !important; /* Indigo default - vibrant color */
}

/* Remove any background on icon divs and ensure they're visible */
body #id-left .vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left .vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"],
body #id-left div.vmenu li.tmenu > a.tmenuimage > div[class*="icon-"],
body #id-left div.vmenu li.tmenusel > a.tmenuimage > div[class*="icon-"] {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force icon visibility - override any display:none */
body #id-left .vmenu li.tmenu > a.tmenuimage > div,
body #id-left .vmenu li.tmenusel > a.tmenuimage > div {
    display: inline-flex !important;
    visibility: visible !important;
}



            /* --- Sidebar Card-based Menu Redesign --- */
            body #id-left div.vmenu {
                background-color: #f1f5f9 !important; /* Slightly grayer background like in image */
                padding: 12px 10px !important;
                border-right: 1px solid #e2e8f0;
                height: 100vh;
            }

            .vmenu-item-card {
                list-style: none !important;
                margin-bottom: 4px !important; /* Reduced margin */
            }

            .vmenu-card-link {
                display: flex !important;
                align-items: center !important;
                background: transparent !important;
                border: none !important;
                border-radius: 0 !important;
                padding: 8px 16px 8px 0px !important; /* Fixed padding */
                text-decoration: none !important;
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
                position: relative !important;
                box-shadow: none !important;
                margin: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .vmenu-card-link:hover {
                border-color: transparent !important;
                background-color: #334155 !important; /* Dark Slate Hover */
                box-shadow: none !important;
                transform: none !important;
            }

            .vmenu-card-active, 
            body #id-left div.vmenu a[data-actif="nc_actif_element"].vmenu-card-link,
            body #id-left div.vmenu li.expanded > .vmenu-card-link {
                background-color: #334155 !important; /* Dark Slate Active */
                border-color: transparent !important;
                box-shadow: none !important;
            }

            .vmenu-icon-box {
                width: 32px !important; /* Slightly smaller icon box */
                height: 32px !important;
                min-width: 32px !important;
                border-radius: 50% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin-right: 10px !important;
                overflow: hidden !important;
            }

            /* Color Themes for Icon Boxes - Vibrant colors for all modules */
            .vmenu-color-home { background-color: #3b82f6 !important; } /* Dashboard - Blue */
            .vmenu-color-cashdesk { background-color: #10b981 !important; } /* POS - Green */
            .vmenu-color-shift { background-color: #6366f1 !important; } /* Shift - Indigo */
            .vmenu-color-companies, .vmenu-color-thirdparties { background-color: #0ea5e9 !important; } /* Customers - Sky Blue */
            .vmenu-color-fournisseur { background-color: #f43f5e !important; } /* Suppliers - Rose */
            .vmenu-color-billing, .vmenu-color-compta, .vmenu-color-accounting { background-color: #8b5cf6 !important; } /* Financial - Purple */
            .vmenu-color-bank { background-color: #f59e0b !important; } /* Bank - Amber */
            .vmenu-color-products, .vmenu-color-medicine, .vmenu-color-service { background-color: #ec4899 !important; } /* Products - Pink */
            .vmenu-color-stock { background-color: #14b8a6 !important; } /* Inventory - Teal */
            .vmenu-color-commercial { background-color: #a855f7 !important; } /* Sales Management - Violet */
            .vmenu-color-stats { background-color: #6366f1 !important; } /* Reports - Indigo */
            .vmenu-color-fourn { background-color: #f97316 !important; } /* Purchase - Orange */
            .vmenu-color-accountancy { background-color: #06b6d4 !important; } /* Accounting - Cyan */
            .vmenu-color-tax { background-color: #f43f5e !important; } /* Tax - Rose */
            .vmenu-color-expense { background-color: #eab308 !important; } /* Expenses - Yellow */
            .vmenu-color-reporting { background-color: #d946ef !important; } /* Reporting - Fuchsia */
            .vmenu-color-hrm, .vmenu-color-payroll { background-color: #22c55e !important; } /* HRM - Green */
            .vmenu-color-ecm, .vmenu-color-document { background-color: #334155 !important; } /* Documents - Slate (Darker) */
            .vmenu-color-mailing, .vmenu-color-email { background-color: #f43f5e !important; } /* Emails - Rose */
            .vmenu-color-fleet { background-color: #475569 !important; } /* Fleet - Slate */
            .vmenu-color-project { background-color: #6366f1 !important; } /* Project - Indigo */
            .vmenu-color-tools { background-color: #71717a !important; } /* Tools - Zinc */
            .vmenu-color-members { background-color: #10b981 !important; } /* Members - Green */
            .vmenu-color-ticket { background-color: #f59e0b !important; } /* Tickets - Amber */
            .vmenu-color-mrp { background-color: #ec4899 !important; } /* MRP - Pink */

            /* Default color */
            .vmenu-icon-box { background-color: #94a3b8 !important; }

            /* Icon Styling inside the box - Fix visibility for FontAwesome icons */
            .vmenu-icon-box .mainvmenu {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                height: 100% !important;
                position: relative !important;
            }

            /* Force all sidebar icons to be white and have proper size */
            body #id-left .vmenu .vmenu-icon-box div[class*="icon-"]::before {
                color: #ffffff !important;
                font-size: 16px !important;
                font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "Dolibarr-Icons", FontAwesome !important;
                font-weight: 900 !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
 
            /* Remove some defaults that might interfere */
            .vmenu-icon-box .mainvmenu {
                background-image: none !important;
            }

            .vmenu-label {
                font-size: 13.5px !important;
                font-weight: 500 !important;
                color: #1e293b !important;
                flex-grow: 1 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            .vmenu-card-active .vmenu-label,
            body #id-left div.vmenu a[data-actif="nc_actif_element"] .vmenu-label,
            body #id-left div.vmenu li.expanded > .vmenu-card-link .vmenu-label {
                color: #0f172a !important;
                font-weight: 600 !important;
            }

            .vmenu-chevron {
                font-size: 11px !important;
                color: #94a3b8 !important;
                margin-left: auto !important;
                transition: transform 0.2s ease !important;
            }

            li.expanded > .vmenu-card-link .vmenu-chevron {
                transform: rotate(90deg) !important;
            }

            /* Tree Submenu styling */
            .tree-submenu {
                display: none !important;
                padding: 2px 0 4px 0 !important;
                margin: 0 !important;
            }

            li.expanded > .tree-submenu {
                display: block !important;
            }

            .tree-submenu li {
                list-style: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .tree-submenu li a.vsmenu {
                display: flex !important;
                align-items: center !important;
                padding: 2px 12px 2px 44px !important; /* Minimized vertical padding */
                font-size: 13px !important;
                color: #475569 !important; /* Slightly darker for better readability */
                text-decoration: none !important;
                border-radius: 6px !important;
                transition: all 0.2s ease !important;
                position: relative !important;
            }

            .tree-submenu li a.vsmenu:before {
                content: ">" !important;
                font-family: monospace !important;
                font-weight: bold !important;
                margin-right: 8px !important;
                color: #94a3b8 !important;
                font-size: 12px !important;
            }

            .tree-submenu li a.vsmenu:hover {
                background-color: #f1f5f9 !important;
                color: #3b82f6 !important;
            }

            .tree-submenu li a[data-actif="nc_actif_element"] {
                background-color: #f8fafc !important;
                color: #3b82f6 !important;
                font-weight: 600 !important;
            }

            /* Hide original top/bottom separators and other clutter */
            body #id-left div.vmenu .menu_top, 
            body #id-left div.vmenu .menu_end,
            body #id-left div.vmenu .blockvmenuheader {
                display: none !important;
            }

            /* Fix logo container to match new sidebar and prevent overlap */
            .top-menu-10 {
                padding: 10px 12px 10px !important;
                height: auto !important;
                margin-bottom: 10px !important; /* Reduced spacing */
                border-bottom: 1px solid #f1f5f9 !important;
            }
            #menu_contenu_logo {
                background: transparent !important;
                height: auto !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            .logo {
                background: white !important;
                border: 2px solid #09355b !important;
                border-radius: 50px !important;
                height: auto !important;
                width: auto !important;
                padding: 8px 15px !important;
                max-width: 90% !important;
                box-shadow: 0 4px 12px rgba(9, 53, 91, 0.08) !important;
                margin: 0 !important;
                display: block !important;
            }
            .logo a {
                display: block !important;
                line-height: 0 !important;
            }
            .logo img.mycompany {
                max-height: 40px !important;
                width: auto !important;
                object-fit: contain !important;
            }
            /* --- High Specificity Professional Icon Mappings --- */
            body #id-left .vmenu .vmenu-icon-box .mainvmenu::before {
                content: '\f15b' !important; /* Default: File */
            }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-home::before { content: '\f015' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-companies::before, 
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-thirdparties::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-societe::before { content: '\f0c0' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-products::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-medicine::before { content: '\f468' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-service::before { content: '\f0b1' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-commercial::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-sale::before { content: '\f07a' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-bank::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-cash::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-cashdesk::before { content: '\f19c' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-billing::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-payment::before { content: '\f155' !important; }
            
            /* Accounting refined icons */
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-accountancy::before { content: '\f1ec' !important; } /* Accounting -> Calculator */
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-accounting::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-compta::before { content: '\f53d' !important; } /* Accounting & Financial -> Money Bill */
            
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-hrm::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-payroll::before { content: '\f508' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-ecm::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-document::before { content: '\f07c' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-mailing::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-email::before { content: '\f0e0' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-fleet::before { content: '\f1b9' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-project::before { content: '\f0ae' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-tools::before { content: '\f7d9' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-ticket::before { content: '\f3ff' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-mrp::before { content: '\f275' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-agenda::before { content: '\f073' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-stats::before,
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-reporting::before { content: '\f201' !important; }
            body #id-left .vmenu .vmenu-icon-box .mainvmenu.icon-members::before { content: '\f007' !important; }

            /* Ensure Home and Fleet have colors if missing */
            .vmenu-color-home { background-color: #3b82f6 !important; } /* Home - Blue */
            .vmenu-color-fleet { background-color: #475569 !important; } /* Fleet - Slate */
            .vmenu-color-accountancy { background-color: #06b6d4 !important; } /* Accounting - Cyan */
            .vmenu-color-billing { background-color: #8b5cf6 !important; } /* Financial - Purple */

/* ==========================================================================
   High-Density ERP Sidebar Styles (World-Class Redesign)
   ========================================================================== */

/* override sidebar container */
#id-container > .side-nav {
    background: #1e293b !important; /* Slate-800 */
    border-right: 1px solid #334155;
    width: 280px !important;
}

#id-left {
    background: transparent !important;
}

div#id-left div.vmenu {
    background: transparent !important;
}

/* Menu Item Container */
.vmenu-item-card {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}

/* Menu Link (Density High) */
a.vmenu-card-link.density-high {
    display: flex !important;
    align-items: center;
    padding: 10px 16px !important;
    min-height: 44px;
    height: auto !important;
    color: #cbd5e1 !important; /* Slate-300 */
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: none !important; /* Reset existing borders */
    border-bottom: 1px solid rgba(255,255,255,0.05) !important; /* Faint gray divider */
    border-left: 3px solid transparent !important; /* Space for accent */
    background: transparent !important;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
    box-shadow: none !important; /* Remove card shadow */
    border-radius: 0 !important; /* Remove card radius */
}

a.vmenu-card-link.density-high:hover {
    background: #334155 !important; /* Slate-700 */
    color: #fff !important;
    border-left-color: #3b82f6; /* Blue-500 */
}

/* Active State */
li.tmenusel > a.vmenu-card-link.density-high,
li.expanded > a.vmenu-card-link.density-high {
    background: #2563eb10 !important; /* Blue tint */
    color: #fff !important;
    border-left-color: #3b82f6;
}

li.tmenusel > a.vmenu-card-link.density-high .vmenu-icon-compact,
li.expanded > a.vmenu-card-link.density-high .vmenu-icon-compact {
    color: #60a5fa !important; /* Blue-400 */
}

/* Icon Wrapper */
.vmenu-icon-compact {
    width: 24px;
    text-align: center;
    margin-right: 12px;
    color: #94a3b8; /* Slate-400 */
    font-size: 1.1em;
    display: flex;
    justify-content: center;
}

a.vmenu-card-link.density-high:hover .vmenu-icon-compact {
    color: #e2e8f0;
}

/* Label */
.vmenu-label {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* Chevron */
.vmenu-chevron {
    font-size: 0.75rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

li.expanded > a.vmenu-card-link.density-high .vmenu-chevron {
    transform: rotate(90deg);
    color: #94a3b8;
}

/* Tree Submenu container */
.tree-submenu {
    background: #0f172a !important; /* Slate-900 */
    border-top: 1px solid #1e293b;
    display: none; /* JS toggles this */
}

li.expanded .tree-submenu {
    display: block;
}

/* Submenu Items (override generic link styles) */
.tree-submenu a.vmenu-card-link, 
.tree-submenu div a {
    display: block;
    padding: 5px 12px 5px 32px !important; /* Ultra-compact padding */
    font-size: 13px !important; /* Standard ERP font size */
    font-weight: 400 !important;
    color: #f1f5f9 !important; /* Slate-100: Soft white for better reading */
    text-decoration: none;
    border-left: 2px solid transparent; /* Thinner accent line */
    transition: all 0.15s ease-in-out;
    background: transparent !important;
    opacity: 0.85;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    letter-spacing: 0.2px;
}

.tree-submenu a.vmenu-card-link:hover, 
.tree-submenu div a:hover {
    color: #ffffff !important;
    opacity: 1;
    background: rgba(255,255,255,0.06) !important;
    padding-left: 36px !important; /* Smaller slide effect */
}

.tree-submenu li a.vsmenu:before {
    content: "›" !important; /* Elegant chevron instead of > */
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 300 !important;
    margin-right: 8px !important;
    color: #94a3b8 !important; /* Slate-400: Subtle dashed look */
    font-size: 16px !important;
    line-height: 10px !important;
    display: inline-block;
    transform: translateY(1px);
}

/* Active Submenu Item */
.tree-submenu a[data-actif="nc_actif_element"],
.tree-submenu .nc_actif_element {
    color: #38bdf8 !important; /* Sky-400 */
    font-weight: 500 !important;
    background-color: rgba(56, 189, 248, 0.1) !important;
    border-left-color: #38bdf8 !important;
    opacity: 1;
}


/* Force override for submenu text color with high specificity */
body #id-left div.vmenu .tree-submenu a.vsmenu {
    color: #ffffff !important;
}

/* ========================================
   MODERN ACTION BUTTONS - Enhanced UX
   ======================================== */

/* Base button styling - Professional & Modern */
.butAction,
.butActionDelete,
.butActionRefused,
.button,
button:not(.ui-button),
input[type="submit"]:not(.ui-button) {
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s ease-in-out !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Primary Action - Blue (Default actions like VALIDATE, SAVE) */
.butAction {
    background: #2563eb !important;
    color: #ffffff !important;
}

.butAction:hover {
    background: #1d4ed8 !important;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px) !important;
}

.butAction:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* Delete Action - Red (Destructive actions) */
.butActionDelete {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.butActionDelete:hover {
    background: #b91c1c !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px) !important;
}

.butActionDelete:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
}

/* Refused/Disabled Action - Gray */
.butActionRefused {
    background: #9ca3af !important;
    color: #ffffff !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.butActionRefused:hover {
    background: #9ca3af !important;
    transform: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Secondary buttons (like CLONE, CHANGE) - Teal/Cyan */
.butAction[href*="clone"] {
    background: #0891b2 !important;
    color: #ffffff !important;
}

.butAction[href*="clone"]:hover {
    background: #0e7490 !important;
    box-shadow: 0 4px 8px rgba(8, 145, 178, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Change/Modify buttons - Purple */
.butAction[href*="change"],
.butAction[href*="modify"] {
    background: #7c3aed !important;
    color: #ffffff !important;
}

.butAction[href*="change"]:hover,
.butAction[href*="modify"]:hover {
    background: #6d28d9 !important;
    box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Send/Email buttons - Indigo */
.butAction[href*="send"],
.butAction[href*="email"],
.butAction[href*="mail"] {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

.butAction[href*="send"]:hover,
.butAction[href*="email"]:hover,
.butAction[href*="mail"]:hover {
    background: #4338ca !important;
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Success/Validation buttons - Green */
.butAction[href*="valid"],
.butAction[href*="confirm"],
.butAction[href*="approve"],
.butAction[href*="accept"] {
    background: #16a34a !important;
    color: #ffffff !important;
}

.butAction[href*="valid"]:hover,
.butAction[href*="confirm"]:hover,
.butAction[href*="approve"]:hover,
.butAction[href*="accept"]:hover {
    background: #15803d !important;
    box-shadow: 0 4px 8px rgba(22, 163, 74, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Cancel buttons - Red */
.butAction[href*="cancel"],
.butAction[href*="refuse"],
.butActionRefused,
input[name="cancel"],
input[value="Cancel"],
input[value="Annuler"] {
    background: #C82909 !important;
    border-color: #C82909 !important;
    color: #ffffff !important;
}

.butAction[href*="cancel"]:hover,
.butAction[href*="refuse"]:hover,
.butActionRefused:hover,
input[name="cancel"]:hover,
input[value="Cancel"]:hover,
input[value="Annuler"]:hover {
    background: #A52207 !important;
    border-color: #A52207 !important;
    box-shadow: 0 4px 8px rgba(200, 41, 9, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Set/Configure buttons - Sky Blue */
.butAction[href*="set"],
.butAction[href*="config"] {
    background: #0ea5e9 !important;
    color: #ffffff !important;
}

.butAction[href*="set"]:hover,
.butAction[href*="config"]:hover {
    background: #0284c7 !important;
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Focus states for accessibility */
.butAction:focus,
.butActionDelete:focus,
.butActionRefused:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Button group spacing */
.butAction + .butAction,
.butAction + .butActionDelete,
.butActionDelete + .butAction {
    margin-left: 8px !important;
}


/* ========================================
   ENHANCED BUTTON COLOR SPECIFICITY
   Target buttons by common Dolibarr patterns
   ======================================== */

/* Re-modify / Modify buttons - Purple with higher specificity */
a.butAction[href*="action=edit"],
a.butAction[href*="action=modify"],
a.butAction[href*="action=reopen"],
a.butAction[title*="Modify"],
a.butAction[title*="modify"] {
    background: #7c3aed !important;
}

a.butAction[href*="action=edit"]:hover,
a.butAction[href*="action=modify"]:hover,
a.butAction[href*="action=reopen"]:hover {
    background: #6d28d9 !important;
}

/* Post to Accounting / Accounting buttons - Dark Teal */
a.butAction[href*="accounting"],
a.butAction[href*="compta"],
a.butAction[title*="Accounting"] {
    background: #0f766e !important;
}

a.butAction[href*="accounting"]:hover,
a.butAction[href*="compta"]:hover {
    background: #115e59 !important;
}

/* Send Email buttons - Indigo */
a.butAction[href*="action=presend"],
a.butAction[href*="sendemail"],
a.butAction[title*="Send"],
a.butAction[title*="email"] {
    background: #4f46e5 !important;
}

a.butAction[href*="action=presend"]:hover,
a.butAction[href*="sendemail"]:hover {
    background: #4338ca !important;
}

/* Prepare / Create buttons - Sky Blue */
a.butAction[href*="action=create"],
a.butAction[href*="action=prepare"],
a.butAction[title*="Prepare"],
a.butAction[title*="Create"] {
    background: #0ea5e9 !important;
}

a.butAction[href*="action=create"]:hover,
a.butAction[href*="action=prepare"]:hover {
    background: #0284c7 !important;
}

/* Enter Payment / Payment buttons - Emerald */
a.butAction[href*="payment"],
a.butAction[href*="paiement"],
a.butAction[title*="payment"],
a.butAction[title*="Enter"] {
    background: #10b981 !important;
}

a.butAction[href*="payment"]:hover,
a.butAction[href*="paiement"]:hover {
    background: #059669 !important;
}

/* Classify / Status Change buttons - Amber */
a.butAction[href*="classify"],
a.butAction[href*="status"],
a.butAction[title*="Classify"],
a.butAction[title*="Abandoned"] {
    background: #f59e0b !important;
}

a.butAction[href*="classify"]:hover,
a.butAction[href*="status"]:hover {
    background: #d97706 !important;
}

/* Create Credit Note / Credit buttons - Cyan */
a.butAction[href*="credit"],
a.butAction[href*="avoir"],
a.butAction[title*="credit"],
a.butAction[title*="Credit"] {
    background: #06b6d4 !important;
}

a.butAction[href*="credit"]:hover,
a.butAction[href*="avoir"]:hover {
    background: #0891b2 !important;
}

/* Clone buttons - Teal */
a.butAction[href*="action=clone"],
a.butAction[title*="Clone"] {
    background: #14b8a6 !important;
}

a.butAction[href*="action=clone"]:hover {
    background: #0d9488 !important;
}

/* Change Third Party buttons - Purple Variant */
a.butAction[href*="thirdparty"],
a.butAction[href*="socid"],
a.butAction[title*="Third Party"],
a.butAction[title*="Change"] {
    background: #a855f7 !important;
}

a.butAction[href*="thirdparty"]:hover,
a.butAction[href*="socid"]:hover {
    background: #9333ea !important;
}


/* ========================================
   WORLD-CLASS ERP BUTTON SYSTEM
   Following SAP/Odoo Standards
   5 Semantic Colors Only
   ======================================== */

/* RESET: All buttons start as SECONDARY (Grey) */
.butAction,
a.butAction {
    background: #E5E7EB !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
}

.butAction:hover,
a.butAction:hover {
    background: #D1D5DB !important;
    color: #1f2937 !important;
    border-color: #9ca3af !important;
}

/* ========================================
   1. PRIMARY BLUE - Critical Accounting Actions
   ======================================== */
a.butAction[href*="accounting"],
a.butAction[href*="compta"],
a.butAction[href*="action=valid"],
a.butAction[href*="action=confirm"],
a.butAction[title*="Accounting"],
a.butAction[title*="Post"],
a.butAction[title*="Validate"] {
    background: #0a3086 !important;
    color: #ffffff !important;
    border-color: #0a3086 !important;
}

a.butAction[href*="accounting"]:hover,
a.butAction[href*="compta"]:hover,
a.butAction[href*="action=valid"]:hover,
a.butAction[href*="action=confirm"]:hover {
    background: #08266a !important;
    border-color: #08266a !important;
}

/* ========================================
   2. SUCCESS GREEN - Financial Confirmations
   ======================================== */
a.butAction[href*="payment"],
a.butAction[href*="paiement"],
a.butAction[title*="payment"],
a.butAction[title*="Payment"],
a.butAction[title*="Enter"] {
    background: #16A34A !important;
    color: #ffffff !important;
    border-color: #16A34A !important;
}

a.butAction[href*="payment"]:hover,
a.butAction[href*="paiement"]:hover {
    background: #15803d !important;
    border-color: #15803d !important;
}

/* ========================================
   3. WARNING ORANGE - State Changes
   ======================================== */
a.butAction[href*="classify"],
a.butAction[href*="status"],
a.butAction[href*="abandon"],
a.butAction[title*="Classify"],
a.butAction[title*="Abandoned"],
a.butAction[title*="Status"] {
    background: #D97706 !important;
    color: #ffffff !important;
    border-color: #D97706 !important;
}

a.butAction[href*="classify"]:hover,
a.butAction[href*="status"]:hover,
a.butAction[href*="abandon"]:hover {
    background: #b45309 !important;
    border-color: #b45309 !important;
}

/* ========================================
   4. DANGER RED - Destructive Actions
   ======================================== */
.butActionDelete,
a.butActionDelete {
    background: #DC2626 !important;
    color: #ffffff !important;
    border-color: #DC2626 !important;
}

.butActionDelete:hover,
a.butActionDelete:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* ========================================
   5. SECONDARY GREY - All Neutral Operations
   (Already set as default above)
   Modify, Send Email, Clone, Change Third Party, etc.
   ======================================== */

/* Special Case: Credit Note - Keep grey but add subtle distinction */
a.butAction[href*="credit"],
a.butAction[href*="avoir"],
a.butAction[title*="credit"],
a.butAction[title*="Credit"] {
    background: #E5E7EB !important;
    color: #374151 !important;
    border: 1px solid #9ca3af !important;
}

a.butAction[href*="credit"]:hover,
a.butAction[href*="avoir"]:hover {
    background: #D1D5DB !important;
    border-color: #6b7280 !important;
}

/* Disabled buttons */
.butActionRefused,
a.butActionRefused {
    background: #D1D5DB !important;
    color: #9ca3af !important;
    border-color: #D1D5DB !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.butActionRefused:hover,
a.butActionRefused:hover {
    background: #D1D5DB !important;
    border-color: #D1D5DB !important;
    transform: none !important;
}


/* ========================================
   FIX: Select2 Dropdown Arrows on Buttons
   Make arrows white on colored buttons
   ======================================== */

/* Select2 arrow on all select elements */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #374151 transparent transparent transparent !important;
}

/* White arrows for select2 on forms/payment pages */
body .select2-container--default .select2-selection--single .select2-selection__arrow b,
.tabBar .select2-container--default .select2-selection--single .select2-selection__arrow b,
form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important;
}

/* Ensure select2 dropdown itself has proper styling */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #D1D5DB !important;
}

/* Select2 dropdown arrow container */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}


/* ========================================
   WORLD-CLASS TABLE ROW STYLING
   SAP/Odoo Enterprise Grade
   ======================================== */

/* Zebra Striping - Soft & Professional */
body table tr.pair,
table.noborder tr.oddeven:nth-child(odd),
.tabBar table tr:nth-child(odd),
table.boxtable tr:nth-child(odd):not(.box_titre) {
    background-color: #F8FAFC !important; /* Softer grey */
}

/* Even rows - Pure white */
body table tr.impair,
table.noborder tr.oddeven:nth-child(even),
.tabBar table tr:nth-child(even),
table.boxtable tr:nth-child(even):not(.box_titre) {
    background-color: #FFFFFF !important;
}

/* ========================================
   STATUS HIGHLIGHTS - Subtle & Semantic
   ======================================== */

/* Signed/Approved - Very light green */
tr.oddeven[class*="signed"],
tr.pair[class*="signed"],
tr.impair[class*="signed"],
tr[data-status="signed"],
tr[data-status="approved"] {
    background-color: #F0FDF4 !important;
}

/* Draft - Neutral light grey */
tr.oddeven[class*="draft"],
tr.pair[class*="draft"],
tr.impair[class*="draft"],
tr[data-status="draft"] {
    background-color: #F9FAFB !important;
}

/* Attention/Warning - Soft amber (NOT aggressive) */
tr.oddeven[class*="attention"],
tr.pair[class*="attention"],
tr.impair[class*="attention"],
tr[data-status="attention"] {
    background-color: #FFF7ED !important;
}

/* Expired/Error - Light red */
tr.oddeven[class*="expired"],
tr.pair[class*="expired"],
tr.impair[class*="expired"],
tr[data-status="expired"],
tr[data-status="error"] {
    background-color: #FEF2F2 !important;
}

/* ========================================
   SELECTION - Clear Blue Border
   Separate from status highlighting
   ======================================== */

/* Selected row - Blue left border */
tr.selected,
tr.oddeven.selected,
tr.pair.selected,
tr.impair.selected {
    border-left: 3px solid #2563EB !important;
}

/* Hover state - Subtle */
table.noborder tr.oddeven:hover,
table tr.pair:hover,
table tr.impair:hover {
    background-color: #F1F5F9 !important;
}

/* ========================================
   REMOVE COMPETING VISUAL SIGNALS
   Author names should be neutral, not red
   ======================================== */

/* Neutral author/user text color */
td.author,
td.user,
.author-name,
.user-name,
table td a[href*="user"],
table td span.author {
    color: #374151 !important; /* Neutral dark grey */
    font-weight: normal !important;
}

/* Table cell text - ensure readability */
table.noborder td,
table.liste td {
    color: #1f2937 !important;
}


/* ========================================
   FIX: Dashboard Card Icon Alignment
   Center icons vertically with equal spacing
   ======================================== */

/* Dashboard module cards - Equal padding top and bottom */
.boxstats {
    padding: 8px 3px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 70px !important;
}

/* Icon container - centered */
.boxstats .inline-block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Icon itself - ensure proper sizing */
.boxstats img,
.boxstats .fa,
.boxstats .fas,
.boxstats .far {
    margin: 0 auto !important;
    display: block !important;
}

/* Text label below icon */
.boxstats span {
    margin-top: 4px !important;
    display: block !important;
    text-align: center !important;
}

/* ========================================
   TREE MENU EXPANSION LOGIC
   Ensures sidebar toggle remains active
   ======================================== */

/* Hidden by default */
.tree-submenu {
    display: none;
    padding-left: 10px;
    background-color: rgba(0,0,0,0.02);
}

/* Visible when expanded */
li.expanded > .tree-submenu {
    display: block !important;
}

/* Chevron rotation */
.vmenu-chevron {
    transition: transform 0.2s ease;
}
li.expanded > a .vmenu-chevron {
    transform: rotate(90deg);
}

/* Active submenu item highlight - World Class */
li.current-url-active > a {
    color: #2563EB !important;
    font-weight: 600 !important;
    background-color: rgba(37, 99, 235, 0.08); /* Very subtle blue bg */
    border-radius: 4px;
    border-left: 3px solid #2563EB; /* Left border accent */
    padding-left: 8px !important; /* Adjust for border */
}

/* ========================================
   COMPACT TREE SUBMENU STYLING
   Fixes large gaps between submenu items
   ======================================== */

.tree-submenu {
    padding: 0 0 0 14px !important; /* Left indentation only */
    margin: 0 !important;
    background-color: transparent !important;
    border-left: 1px solid #e5e7eb;
    margin-left: 18px !important;
}

.tree-submenu li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    line-height: 0 !important; /* Kill any line-height gaps */
}

/* Enforce ultra-compact links */
.tree-submenu a,
.tree-submenu li a,
.tree-submenu .vmenu-card-link,
.tree-submenu .vsmenu,
.tree-submenu a.vsmenu {
    display: block !important;
    padding: 3px 6px !important; /* Even tighter vertical padding */
    font-size: 11px !important; /* Reduced font size to 11px */
    color: #4b5563 !important;
    text-decoration: none !important;
    line-height: 1.2 !important; 
    border-radius: 3px !important;
    font-weight: 400 !important;
    min-height: auto !important;
    height: auto !important;
    margin-bottom: 1px !important;
    transition: all 0.1s ease !important;
    
    /* Prevent Overlapping */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.tree-submenu a:hover,
.tree-submenu li a:hover {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

/* Hide ALL potential icon containers in submenu to save space */
.tree-submenu a .vmenu-icon-compact,
.tree-submenu a .vmenu-chevron,
.tree-submenu .mainmenuaspan {
    display: none !important; 
}