/* ===============================
   Styles de base / Global
================================= */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #fff;
}

body, .dropdown-menu {
    font-size: 14px;
}

.nav-item .dropdown .btn {
    font-size: 0.875rem;
    background-color: white;
    color: #1c94c4;
    border-color: white;
}

button#otherButton, button#optionsButton {
    color: white !important;
    background-color: #007cc3;
    border-radius: 0;
}

#optionsButton {
    background-color: rgb(126 166 219);
}

button#configurationButtonDropdown, a#logout-button-dropdown {
    background-color: white !important;
    color: #007cc3 !important;
}

#optionDropdownList {
    border-radius: 0;
}

/* ===============================
   Bandeau / Tabs container
================================= */

#BandeauContainer #configurationButton {
    border: none;
    background-color: inherit;
    color: #007cc3;
}

#BandeauContainer #configurationButton:hover {
    border: none;
    background-color: #007cc3;
    color: white;
}

#BandeauHeader {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

#BandeauHeader .nav-item {
    flex: 1 1 0;      /* prend l'espace restant, shrink si besoin */
    min-width: 0;     /* permet le shrink sur textes longs */
    transition: flex 0.3s;
}

#BandeauHeader .nav-item.active {
    flex: 2 1 0; /* double la largeur pour l'onglet actif */
}

#BandeauHeader .nav-link {
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    background-color: transparent;
    gap: .5rem;
}

/* Etats spéciaux sur li */
#BandeauHeader .nav-link.disabled,
#BandeauHeader .nav-link.locked,
#BandeauHeader .nav-link.error,
#BandeauHeader .nav-link.maintenance {
    color: #000000;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
    background-color: inherit;
}

/* Badge dans un nav-link */
#BandeauContainer .nav-link .badge {
    font-size: 12px;
}

#BandeauHeader .btn-outline-secondary:hover {
    background-color: #007cc3;
    color: #ffffff;
}

/* ===============================
   Dropdown / Items
================================= */

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f0f0f0 !important;
    color: black !important;
}

a .sous_menu .dropdown-item {
    background-color: white;
}

/* ===============================
   Disabled / Special Buttons gris
================================= */

.disabled {
    background-color: lightgray !important;
    color: rgba(128,128,128,0.9) !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.8;
}

.disabled {
    background-color: lightgray !important;
    color: rgba(128,128,128,0.9) !important;
}

/* ===============================
   Contenu Bandeau / iframe
================================= */

#BandeauContent > div,
#BandeauContent > div > iframe {
    height: 100%;
}

/* ===============================
   Options container (boutons à droite)
================================= */

.options-container {
    flex: 0 0 auto;      /* largeur = celle du contenu, jamais réduite */
    white-space: nowrap;  /* évite les retours à la ligne */
}

/* ===============================
   Danger icon
================================= */

.danger {
    color: darkred;
}


/* ===============================
   Couleurs et hover des tabs
================================= */

#BandeauContainer li#tabItem, li#others:not(.disabled) {
    color: #19457e;
    background-color: #ffffff;
}

#BandeauContainer li#tabItem.active,
.nav-item .dropdown .btn .active,
li#tabItem.active .nav-link,
li#tabItem.active #linkOptions,
#BandeauContainer #others.active,
#BandeauContainer #others.active .nav-link,
#BandeauContainer #others.active #linkOptions
{
    color: #ffffff !important;
    background-color: #19457e !important;
}

/* Hover global sauf onglet actif */

li#others:not(.disabled):hover,
li#tabItem:not(.active):hover,
li#tabItem:not(.active):hover .nav-link,
li#tabItem:not(.active):hover span#email,
li#tabItem:not(.active):hover #linkOptions {
    background-color: #007cc3 !important;
    color: #ffffff !important;
}



#linkOptions button:not(.dropdown-item):not(.dropdown-menu) {
    background-color: transparent;
    color: inherit;
}

/* Logout button */

#logout-button {
    gap: .5rem;
    color: #007cc3;
}

.options-container {
    max-height: 25px;
}