:root {
    --bg-main:         #0b0e14; /* Fond principal de l'espace de droite */
    --bg-sidebar:      #0d1119; /* Fond topbar, menu et footer */
    --bg-panel:        #141926; /* Fond des cartes / composants */
    --bg-panel-dark:   #0f1420; /* Fond interne sombre */
    --border-color:    #1f2637; /* Couleur des bordures et séparations */

    --text-normal:     #dde3ee; /* Blanc/Gris clair pour les textes */
    --text-muted:      #7e8aa0; /* Gris bleu pour les éléments discrets */
    --text-accent:     #5b9dff; /* Bleu électrique du Dashboard MTAC */

    /* Couleurs d'états issues de ton Dashboard */
    --state-ok:        #34d17b; /* Vert en ligne */
    --state-crit:      #ef5b5b; /* Rouge alerte */

    --hover-overlay:   rgba(91, 157, 255, 0.08);
    --active-overlay:  rgba(91, 157, 255, 0.12);
}

/* Application des couleurs de base */
body {
    background: var(--bg-main);
    color: var(--text-normal);

}

.topbar {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);

}

.main-title{
    color: var(--text-normal);
}

.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);

}






.site-footer {
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);

}

/* Application des couleurs sur la typographie */
.menu-item {
    color: var(--text-normal);

}

.menu-category, .sub-menu-item {
    color: var(--text-muted);

}

.uc-icon {
    color: var(--text-accent);

}

/* Interactions */
.menu-item:hover, .sub-menu-item:hover {
    background: var(--hover-overlay);
    color: var(--text-accent);

}

.menu-item.active {
    background: var(--active-overlay);
    color: var(--text-accent);
    border-left: 3px solid var(--text-accent);

}

.form-group-field label {
    color: var(--text-muted);
}

.form-group-field input {
    background: var(--bg-panel-dark);
    color: var(--text-normal);
}

.form-group-field input:focus {
    border-color: var(--text-accent);
}

.btn-submit {
    background: var(--text-accent);
    color: var(--bg-main);
}

.alert-box {
    background: rgba(239, 91, 91, 0.1);
}

.text-crit {
    color: var(--state-crit) !important;
}

.muted-link {
    color: var(--text-muted);
    text-decoration: none;
}

.muted-link:hover {
    color: var(--text-normal);
    text-decoration: underline;
}