/***********************
**      Dropdown
***********************/
.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

.dropdown-item.active {
    cursor: default;
    font-weight: bold;
}

/***********************
**  Button btn-info override for login page
***********************/
/* More specific selectors to avoid being crossed out in DevTools */
.login-page .btn.btn-info,
.login-page .btn-info,
.login-box .btn.btn-info,
.login-box .btn-info,
.login-box .btn.btn-info.btn-block,
.login-box .btn-info.btn-block {
    background-color: #000842 !important;
    border-color: #000842 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 2rem !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

.login-page .btn.btn-info:hover,
.login-page .btn-info:hover,
.login-box .btn.btn-info:hover,
.login-box .btn-info:hover {
    background-color: #000630 !important;
    border-color: #000630 !important;
    color: #ffffff !important;
}

/* Lien par défaut - bouton */
#load-form {
    background-color: #0778BE !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: 2rem !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}

/* Quand le formulaire est visible - lien bleu simple */
#load-form.form-visible-link {
    background-color: transparent !important;
    color: #0778BE !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-decoration: underline !important;
    display: inline !important;
    width: auto !important;
    margin-top: 10px !important;
}

#load-form.form-visible-link:hover {
    color: #0665a0 !important;
    text-decoration: underline !important;
}

/***********************
**  AACME Sidebar - Mode Clair
***********************/

/* Fond de la sidebar en mode clair */
body:not(.dark-mode) .main-sidebar {
    background-color: #000842 !important;
    color: #ffffff !important;
}

/* Brand Link (en haut de la sidebar) en mode clair */
body:not(.dark-mode) .brand-link {
    background-color: #000842 !important;
    border-bottom-color: #000842 !important;
    height: auto !important;
    overflow: hidden !important;
}

body:not(.dark-mode) .brand-link .brand-image-xxl {
    max-width: 70% !important;
    max-height: none !important;
    float: none !important;
    margin-left: 14% !important;
    display: block !important;
}

/* Header de la sidebar en mode clair */
body:not(.dark-mode) .main-sidebar .sidebar-header {
    border-bottom-color: #000842 !important;
}

/* Navigation */
body:not(.dark-mode) .main-sidebar .nav.nav-pills.nav-sidebar {
    padding-top: 30px !important;
    margin-top: 0 !important;
}

/* Liens de navigation en mode clair */
body:not(.dark-mode) .main-sidebar .nav-item .nav-link {
    color: #ffffff !important;
}

body:not(.dark-mode) .main-sidebar .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(7, 120, 190, 0.2) !important;
}

/* Liens actifs/sélectionnés en mode clair */
body:not(.dark-mode) .main-sidebar .nav-item a.nav-link.active,
body:not(.dark-mode) .main-sidebar .nav-item.active > a.nav-link {
    color: #ffffff !important;
    background-color: #0778BE !important;
    font-weight: 600;
}

/* Sous-menu (treeview) en mode clair */
body:not(.dark-mode) .main-sidebar .nav-treeview .nav-item .nav-link {
    color: #b8c7ce !important;
}

body:not(.dark-mode) .main-sidebar .nav-treeview .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(7, 120, 190, 0.2) !important;
}

body:not(.dark-mode) .main-sidebar .nav-treeview .nav-item.active > a.nav-link {
    color: #ffffff !important;
    background-color: #0778BE !important;
}

/* Icônes en mode clair */
body:not(.dark-mode) .main-sidebar .nav-icon {
    color: #ffffff !important;
}

body:not(.dark-mode) .main-sidebar .nav-link:hover > .nav-icon {
    color: #ffffff !important;
}

/***********************
**  AACME Sidebar - Mode Sombre
***********************/

/* Fond de la sidebar en mode sombre */
body.dark-mode .main-sidebar,
.dark-mode .main-sidebar {
    background-color: #454d55 !important;  /* Nouvelle couleur */
    color: #ffffff !important;
}

/* Brand Link (en haut de la sidebar) en mode sombre */
body.dark-mode .brand-link,
.dark-mode .brand-link {
    background-color: #454d55 !important;  /* Même couleur que la sidebar */
    border-bottom-color: #454d55 !important;
    height: auto !important;        /* s'adapte au contenu */
    padding: 0.8rem 0.5rem !important;
    overflow: visible !important;
}

body.dark-mode .brand-link .brand-text,
.dark-mode .brand-link .brand-text {
    color: #ffffff !important;
}

/* Image du logo en mode sombre */
body.dark-mode .brand-link .brand-image-xxl,
.dark-mode .brand-link .brand-image-xxl {
    max-width: 70% !important;
    margin-left: 14% !important;
    display: block !important;
    float: none !important;
}

/* Header de la sidebar en mode sombre */
body.dark-mode .main-sidebar .sidebar-header,
.dark-mode .main-sidebar .sidebar-header {
    border-bottom-color: #454d55 !important;
}

/* Navigation en mode sombre */
body.dark-mode .main-sidebar .nav.nav-pills.nav-sidebar,
.dark-mode .main-sidebar .nav.nav-pills.nav-sidebar {
    padding-top: 30px !important;
    margin-top: 0 !important;
}

/* Liens de navigation en mode sombre */
body.dark-mode .main-sidebar .nav-item .nav-link,
.dark-mode .main-sidebar .nav-item .nav-link {
    color: #ffffff !important;
}

body.dark-mode .main-sidebar .nav-item .nav-link:hover,
.dark-mode .main-sidebar .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(7, 120, 190, 0.2) !important;
}

/* Liens actifs/sélectionnés en mode sombre */
body.dark-mode .main-sidebar .nav-item a.nav-link.active,
body.dark-mode .main-sidebar .nav-item.active > a.nav-link,
.dark-mode .main-sidebar .nav-item a.nav-link.active,
.dark-mode .main-sidebar .nav-item.active > a.nav-link {
    color: #ffffff !important;
    background-color: #0778BE !important;
    font-weight: 600;
}

/* Sous-menu (treeview) en mode sombre */
body.dark-mode .main-sidebar .nav-treeview .nav-item .nav-link,
.dark-mode .main-sidebar .nav-treeview .nav-item .nav-link {
    color: #b8c7ce !important;
}

body.dark-mode .main-sidebar .nav-treeview .nav-item .nav-link:hover,
.dark-mode .main-sidebar .nav-treeview .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(7, 120, 190, 0.2) !important;
}

body.dark-mode .main-sidebar .nav-treeview .nav-item.active > a.nav-link,
.dark-mode .main-sidebar .nav-treeview .nav-item.active > a.nav-link {
    color: #ffffff !important;
    background-color: #0778BE !important;
}

/* Icônes en mode sombre */
body.dark-mode .main-sidebar .nav-icon,
.dark-mode .main-sidebar .nav-icon {
    color: #ffffff !important;
}

body.dark-mode .main-sidebar .nav-link:hover > .nav-icon,
.dark-mode .main-sidebar .nav-link:hover > .nav-icon {
    color: #ffffff !important;
}

/***********************
**  AACME Navbar - Mode Clair
***********************/

/* Barre de navigation principale (navbar) en mode clair */
body:not(.dark-mode) .main-header .navbar {
    background-color: #000842 !important;
}

/* Logo/Brand dans la navbar en mode clair */
body:not(.dark-mode) .main-header .navbar .nav-brand {
    color: #ffffff !important;
}

/* Liens de navigation dans la navbar en mode clair */
body:not(.dark-mode) .main-header .navbar .nav-item .nav-link {
    color: #ffffff !important;
}

body:not(.dark-mode) .main-header .navbar .nav-item .nav-link:hover {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Icônes dans la navbar en mode clair */
body:not(.dark-mode) .main-header .navbar .nav-icon {
    color: #ffffff !important;
}

/* Dropdown dans la navbar en mode clair */
body:not(.dark-mode) .main-header .navbar .dropdown-menu {
    background-color: #ffffff !important;
    border-color: #000842 !important;
}

body:not(.dark-mode) .main-header .navbar .dropdown-menu .dropdown-item {
    color: #333333 !important;
}

body:not(.dark-mode) .main-header .navbar .dropdown-menu .dropdown-item:hover {
    background-color: #000842 !important;
    color: #ffffff !important;
}

/* Bouton de toggle sidebar en mode clair */
body:not(.dark-mode) .main-header .navbar .btn-sidebar-toggle {
    color: #ffffff !important;
}

/* Barre de recherche dans la navbar en mode clair */
body:not(.dark-mode) .main-header .navbar .form-control {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

body:not(.dark-mode) .main-header .navbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Header principal (fond au-dessus de la navbar) en mode clair */
body:not(.dark-mode) .main-header {
    background-color: #000842 !important;
}

/***********************
**  Tenant Dropdown (Dark mode support)
***********************/
/* Dropdown menu background */
.navbar-lightblue .dropdown-menu,
.navbar-dark .dropdown-menu {
    background-color: #ffffff !important;
    border-color: #0778BE !important;
}

/* Dark mode dropdown menu */
body.dark-mode .navbar-lightblue .dropdown-menu,
body.dark-mode .navbar-dark .dropdown-menu,
.dark-mode .navbar-lightblue .dropdown-menu,
.dark-mode .navbar-dark .dropdown-menu {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

/* Dropdown items */
.navbar-lightblue .dropdown-item {
    color: #333333 !important;
}

/* Dark mode dropdown items */
body.dark-mode .navbar-lightblue .dropdown-item,
body.dark-mode .navbar-dark .dropdown-item,
.dark-mode .navbar-lightblue .dropdown-item,
.dark-mode .navbar-dark .dropdown-item {
    color: #e2e8f0 !important;
}

/* Dropdown items hover */
.navbar-lightblue .dropdown-item:hover,
.navbar-lightblue .dropdown-item:focus {
    background-color: #0778BE !important;
    color: #ffffff !important;
}

/* Dark mode dropdown items hover */
body.dark-mode .navbar-lightblue .dropdown-item:hover,
body.dark-mode .navbar-dark .dropdown-item:hover,
.dark-mode .navbar-lightblue .dropdown-item:hover,
.dark-mode .navbar-dark .dropdown-item:hover {
    background-color: #4a5568 !important;
    color: #ffffff !important;
}

/* Tenant search container (the sticky search bar) */
#tenantSearchContainer {
    background-color: #ffffff !important;
    border-bottom-color: #dee2e6 !important;
}

/* Dark mode tenant search container */
body.dark-mode #tenantSearchContainer,
.dark-mode #tenantSearchContainer {
    background-color: #2d3748 !important;
    border-bottom-color: #4a5568 !important;
}

/* Tenant search input */
#tenantSearchInput {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #dee2e6 !important;
}

/* Dark mode tenant search input */
body.dark-mode #tenantSearchInput,
.dark-mode #tenantSearchInput {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
    border-color: #718096 !important;
}

body.dark-mode #tenantSearchInput::placeholder,
.dark-mode #tenantSearchInput::placeholder {
    color: #a0aec0 !important;
}

/* Selected tenant item (active) */
#tenantList .dropdown-item.active,
#tenantList .dropdown-item:active {
    background-color: #0778BE !important;
    color: #ffffff !important;
}

/* Dark mode selected tenant item */
body.dark-mode #tenantList .dropdown-item.active,
body.dark-mode #tenantList .dropdown-item:active,
.dark-mode #tenantList .dropdown-item.active,
.dark-mode #tenantList .dropdown-item:active {
    background-color: #4a5568 !important;
    color: #ffffff !important;
}

/* Champ de recherche dans le dropdown */
body.dark-mode .dropdown-menu input[type="text"],
body.dark-mode .dropdown-menu input[type="search"],
body.dark-mode .dropdown-menu .form-control,
.dark-mode .dropdown-menu input[type="text"],
.dark-mode .dropdown-menu input[type="search"],
.dark-mode .dropdown-menu .form-control {
    background-color: #3a4149 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

/* Placeholder du champ de recherche */
body.dark-mode .dropdown-menu .form-control::placeholder,
.dark-mode .dropdown-menu .form-control::placeholder {
    color: #b8c7ce !important;
}

/* Item actif / sélectionné dans le dropdown (ex: "Démo") */
body.dark-mode .dropdown-menu .dropdown-item.active,
body.dark-mode .dropdown-menu .active > .dropdown-item,
body.dark-mode .dropdown-menu .dropdown-header,
.dark-mode .dropdown-menu .dropdown-item.active,
.dark-mode .dropdown-menu .active > .dropdown-item,
.dark-mode .dropdown-menu .dropdown-header {
    background-color: #0778BE !important;   /* même bleu que la sidebar */
    color: #ffffff !important;
}

/* Fond du dropdown en mode sombre */
body.dark-mode .navbar .dropdown-menu,
.dark-mode .navbar .dropdown-menu {
    background-color: #454d55 !important;
    border-color: #3a4149 !important;
}

/* Items du dropdown */
body.dark-mode .navbar .dropdown-menu .dropdown-item,
.dark-mode .navbar .dropdown-menu .dropdown-item {
    color: #ffffff !important;
}

/* Survol des items */
body.dark-mode .navbar .dropdown-menu .dropdown-item:hover,
body.dark-mode .navbar .dropdown-menu .dropdown-item:focus,
.dark-mode .navbar .dropdown-menu .dropdown-item:hover,
.dark-mode .navbar .dropdown-menu .dropdown-item:focus {
    color: #ffffff !important;
    background-color: rgba(7, 120, 190, 0.2) !important;
}

/* Séparateur entre les items (la ligne entre "User profile" et "Logout") */
body.dark-mode .navbar .dropdown-menu .dropdown-divider,
.dark-mode .navbar .dropdown-menu .dropdown-divider {
    border-top-color: #5a6268 !important;
}

/* Native dark-mode popup (Chromium) for selects */
body.dark-mode,
.dark-mode {
    color-scheme: dark;
}

/* Select natifs en mode sombre */
body.dark-mode select,
body.dark-mode select.form-control,
body.dark-mode .custom-select,
.dark-mode select,
.dark-mode select.form-control,
.dark-mode .custom-select {
    background-color: #454d55 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

/* Options à l'intérieur du select */
body.dark-mode select option,
.dark-mode select option {
    background-color: #454d55 !important;
    color: #ffffff !important;
}

/* DataTables length menu (overrides transparent .dt-input for Chromium) */
body.dark-mode .dt-container select.dt-input,
.dark-mode .dt-container select.dt-input {
    background-color: #454d55 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
}

body.dark-mode .dt-container select.dt-input option,
.dark-mode .dt-container select.dt-input option {
    background-color: #454d55 !important;
    color: #ffffff !important;
}

/**************
**  DataTables processing indicator
**************/
/* top is set in datatables.params.js to the visible portion of this table */
div.dt-container div.dt-layout-table {
    position: relative;
}

div.dt-container div.dt-processing {
    position: absolute !important;
    left: 50% !important;
    width: max-content;
    min-width: 200px;
    height: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    padding: 12px 20px !important;
    border-radius: 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.85) !important;
    z-index: 1050 !important;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode div.dt-container div.dt-processing,
.dark-mode div.dt-container div.dt-processing {
    background: rgba(45, 45, 45, 0.9) !important;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/***********************
**  Bouton "Local authentication" personnalisé
***********************/
/* Augmenter la spécificité pour écraser les règles .btn-info */
.login-box .btn.btn-local-auth,
.login-page .btn.btn-local-auth,
.btn-local-auth {
    background-color: #01ADFF !important;
    border-color: #01ADFF !important;
    border-radius: 50px !important;
    color: white !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

.login-box .btn.btn-local-auth:hover,
.login-page .btn.btn-local-auth:hover,
.btn-local-auth:hover {
    background-color: #009ED9 !important;
    border-color: #009ED9 !important;
    color: white !important;
}

/* Support du mode sombre */
body.dark-mode .login-box .btn.btn-local-auth,
body.dark-mode .login-page .btn.btn-local-auth,
.dark-mode .login-box .btn.btn-local-auth,
.dark-mode .login-page .btn.btn-local-auth,
body.dark-mode .btn-local-auth,
.dark-mode .btn-local-auth {
    background-color: #01ADFF !important;
    border-color: #01ADFF !important;
    color: white !important;
}

body.dark-mode .login-box .btn.btn-local-auth:hover,
body.dark-mode .login-page .btn.btn-local-auth:hover,
.dark-mode .login-box .btn.btn-local-auth:hover,
.dark-mode .login-page .btn.btn-local-auth:hover,
body.dark-mode .btn-local-auth:hover,
.dark-mode .btn-local-auth:hover {
    background-color: #009ED9 !important;
    border-color: #009ED9 !important;
    color: white !important;
}

/***********************
**  Boutons TOTP en style pilule
***********************/
.btn-totp-pill {
    border-radius: 2rem !important;
    padding: 10px 20px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-totp-pill:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn-totp-pill:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Support du mode sombre */
body.dark-mode .btn-totp-pill,
.dark-mode .btn-totp-pill {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn-totp-pill:hover,
.dark-mode .btn-totp-pill:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .btn-totp-pill:active,
.dark-mode .btn-totp-pill:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/***********************
**  Table toolbar icons (export, share)
***********************/
.export,
.share {
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}

.export:hover,
.share:hover {
    color: #007bff;
}

.export:active,
.share:active {
    transform: scale(0.95);
}