/* =========================================================
   ePerf — Surcouche "Sleek Light" pour AdminLTE 2
   - Look sobre, clair, moderne (inspiration SaaS)
   - Sidebar & Header clairs
   - Cards soft, onglets soulignés, badges pills
   - Couleurs ajustables ci-dessous
   ========================================================= */

/* -------- Palette minimaliste (modifiable) -------- */
:root{
    --accent:        #1aa3a3;  /* teal discret (remplaçable) */
    --accent-600:    #168b8b;
    --accent-soft:   #e8f6f6;

    --bg-page:       #f5f7fb;
    --bg-card:       #ffffff;

    --text-strong:   #1f2937;  /* gris foncé élégant */
    --text:          #2d3748;
    --muted:         #6b7280;

    --line:          #e6eaf0;
    --shadow-soft:   0 6px 18px rgba(0,0,0,.06);
    --radius:        6px;      /* coins doux, pas bébé */
}


/* -------- Reset typographique -------- */
body{
    font-family: "Inter","Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg-page);
    letter-spacing: .1px;
}

/* ======= HEADER clair ======= */
.main-header .navbar{
    background: #ffffff !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.main-header .navbar .nav>li>a{
    color: var(--text) !important;
}
.main-header .navbar .nav>li>a:hover{
    background: #f3f6fb !important;
    color: var(--text-strong) !important;
}
.main-header .logo{
    background: #ffffff !important;
    color: var(--text-strong) !important;
    font-weight: 700;
    border-right: 1px solid var(--line) !important;
}

/* ======= SIDEBAR claire ======= */
.main-sidebar{
    background: #ffffff !important;
    border-right: 1px solid var(--line) !important;
}
.sidebar-menu>li.header{
    color: #8a94a7 !important;
    background: #ffffff !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
}
.sidebar-menu>li>a{
    background: #ffffff !important;
    color: var(--text) !important;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    margin: 2px 8px;
    padding: 10px 12px;
}
.sidebar-menu>li>a:hover{
    background: #f6f9fc !important;
    color: var(--text-strong) !important;
}
.sidebar-menu>li.active>a{
    background: var(--accent-soft) !important;
    color: var(--text-strong) !important;
    border-left-color: var(--accent) !important;
    font-weight: 700;
}
.sidebar-menu i.fa,
.sidebar-menu i.fas,
.sidebar-menu i.far{
    color: #7c8799 !important;
}
.sidebar-menu>li.active i,
.sidebar-menu>li>a:hover i{
    color: var(--accent) !important;
}

/* ======= CONTENU / Cards (AdminLTE .box) ======= */
.content-wrapper{
    background: var(--bg-page) !important;
}
.box{
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-soft) !important;
}
.box-header.with-border{
    border-bottom: 1px solid var(--line) !important;
    padding: 14px 16px;
}
.box-title{
    color: var(--text-strong);
    font-weight: 800;
}

/* ======= “Stats cards” compactes (si tu en as) ======= */
.box.box-stat{
    padding: 16px;
}
.box.box-stat .stat-title{
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}
.box.box-stat .stat-value{
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-600);
}

/* ======= Onglets style “soulignés” ======= */
.nav-tabs{
    border-bottom: 1px solid var(--line);
}
.nav-tabs>li>a{
    border: none !important;
    color: var(--muted);
    padding: 10px 14px;
    margin-right: 6px;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
}
.nav-tabs>li>a:hover{
    color: var(--text-strong);
    background: #f7fafc !important;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover{
    border: none !important;
    border-bottom: 2px solid var(--accent) !important;
    color: var(--text-strong);
    background: transparent !important;
    font-weight: 700;
}

/* ======= Badges “pills” discrets ======= */
.label, .badge{
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
}
.label-default{
    background: #eef2f7;
    color: var(--text);
}
.label-success, .badge-success{
    background: var(--accent);
}

/* ======= Formulaires ======= */
label{
    color: #334155;
    font-weight: 700;
}
.form-control{
    border: 1px solid #d7dde6 !important;
    background: #fbfcfe !important;
    height: 38px !important;
    border-radius: 4px !important; /* léger adoucissement */
    color: var(--text) !important;
}
.form-control:focus{
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(26,163,163,.15) !important;
}

/* Champs de recherche larges */
.input-lg, .form-control.input-lg{
    height: 44px !important;
}


/* ======= Tables ======= */
.table{
    background: var(--bg-card);
}
.table>thead>tr>th{
    background: #f3f6fb !important;
    color: var(--text-strong) !important;
    border-bottom: 1px solid var(--line) !important;
    font-weight: 800 !important;
}
.table>tbody>tr>td{
    border-color: var(--line) !important;
    color: var(--text) !important;
}
.table a{
    color: var(--accent-600) !important;
    text-decoration: none;
}
.table a:hover{ text-decoration: underline; }

/* ======= Leaflet (carte) ======= */
#map{
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-soft);
}
.leaflet-control-zoom a, .leaflet-bar a{
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    color: var(--text) !important;
}
.leaflet-control-zoom a:hover, .leaflet-bar a:hover{
    background: #f6f9fc !important;
}
.leaflet-control-layers{
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-soft);
}
.leaflet-popup-content-wrapper{
    border-radius: 8px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* ======= Breadcrumb “chip” ======= */
.content-header>.breadcrumb{
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
}
.content-header{
    padding: 10px 15px 0 15px;
}

/* ======= Petits utilitaires ======= */
.rounded-0{ border-radius: 0 !important; }
.text-muted-600{ color: var(--muted) !important; }
.bg-soft{ background: #f6f9fc !important; }
.hr-soft{ border-color: var(--line); }

/* =========================================================
   Onglets style SaaS (comme ta capture)
   ========================================================= */

.nav-tabs {
    border-bottom: 1px solid #e5e7eb !important;
}

.nav-tabs > li > a {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 10px 14px !important;
    margin-right: 4px;
    color: #6b7280 !important;         /* gris soft */
    font-weight: 500 !important;       /* pas bold */
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s;
}

.nav-tabs > li > a:hover {
    color: #374151 !important;
    background: transparent !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #14b8a6 !important;         /* teal actif */
    border-bottom: 2px solid #14b8a6 !important;
    font-weight: 600 !important;
}

/* Icônes */
.nav-tabs > li > a i {
    margin-right: 6px;
    font-size: 14px;
    color: #9ca3af !important;         /* gris clair */
}

.nav-tabs > li.active > a i {
    color: #14b8a6 !important;         /* icône teal quand actif */
}

/* =========================================================
   ePerf — BOUTONS (Sleek Light)
   - Flat, texte non gras, compacts
   - Icône + texte centrés, icon-only ok
   - Mapping sur classes AdminLTE existantes
   ========================================================= */

/* ---------- RESET & BASE ---------- */
.btn {
    /* reset bootstrap/adminlte "moche" */
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;

    /* look sleek */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;                          /* espace icône/texte */
    font-weight: 500 !important;       /* PAS gras */
    font-size: 14px !important;
    line-height: 1.25 !important;
    padding: 7px 16px !important;      /* compact cohérent */
    border-radius: var(--radius, 6px) !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Icônes (FA) correctement alignées */
.btn i, .btn .fa, .btn .fas, .btn .far, .btn .fal {
    margin: 0;                         /* on utilise gap */
    font-size: 14px;
    line-height: 1;
}

/* Icône seule (ex: outils / xs) : centrage parfait */
.btn > i:first-child:last-child,
.btn > .fa:first-child:last-child,
.btn > .fas:first-child:last-child {
    width: 1.2em;                      /* équilibre visuel */
    text-align: center;
}

/* ---------- TAILLES ---------- */
.btn-xs {                            /* “petit” avec texte */
    padding: 4px 10px !important;
    height: 28px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}
.btn-sm {
    padding: 0 10px !important;
    height: 32px;
    font-size: 13px !important;
}
.btn-lg {
    padding: 9px 20px !important;
    font-size: 15px !important;
}

/* Icône-seule carrée (outil) : ajoute .icon-only */
.btn-xs.icon-only {
    padding: 0 !important;
    width: 28px; height: 28px;
}

/* ---------- ÉTATS ---------- */
.btn:active {
    filter: brightness(0.94);
}

.btn:focus  { outline: none; }
.btn[disabled], .btn:disabled {
    opacity: .6; cursor: not-allowed;
}

/* ---------- VARIANTES (mapping sur classes existantes) ---------- */
/* Neutre “soft” — pour .btn-default */
.btn-default,
.btn.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger) {
    background-color: #f0f7ff !important;
    border-color:   #d2e3f5 !important;
    color:          var(--text, #2d3748) !important;
}
.btn-default:hover,
.btn.btn-default:not(.btn-primary):not(.btn-success):not(.btn-danger):hover {
    background-color: #e4eefc !important;
    border-color:   #c8dcf2 !important;
}

/* Action “teal” — mappe .btn-primary et .btn-success */
.btn-primary,
.btn-success {
    background-color: var(--accent,   #1aa3a3) !important;
    border-color:     var(--accent,   #1aa3a3) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background-color: var(--accent-600, #168b8b) !important;
    border-color:     var(--accent-600, #168b8b) !important;
}

/* Danger “soft” — pour supprimer */
.btn-danger {
    background-color: #fde8e8 !important;
    border-color:     #fbcaca !important;
    color:            #b91c1c !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #fbd5d5 !important;
    border-color:     #f8b9b4 !important;
}

/* Bouton-lien très léger (si tu utilises .btn-link) */
.btn-link {
    color: var(--accent, #1aa3a3) !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.btn-link:hover { text-decoration: underline; }


.btn-default.active,
.btn-default:active,
.btn-default.active:hover {
    background-color: #d9e7f9 !important;
    border-color: #bfd5f2 !important;
    color: var(--text-strong) !important;
    box-shadow: inset 0 0 0 1px #b9d0ec !important;
}
.btn-primary.active,
.btn-primary:active,
.btn-success.active,
.btn-success:active {
    background-color: var(--accent-600) !important;
    border-color: var(--accent-600) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08) !important;
}
.btn-danger.active,
.btn-danger:active {
    background-color: #f8d0d0 !important;
    border-color:     #f5b4b4 !important;
    color:            #9f1a1a !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05) !important;
}
.btn.icon-only.active,
.btn-xs.icon-only.active {
    background-color: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
/* =======================================================
   BOUTONS TOGGLE (Oui / Non) – état actif très visible
   ======================================================= */

/* Style du groupe */
.btn-group .btn {
    background: #f1f5f9 !important;     /* gris clair uniforme */
    border-color: #d1d5db !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* Hover neutre */
.btn-group .btn:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* État ACTIF très visible */
.btn-group .btn.active,
.btn-group .btn:active,
.btn-group .btn.active:hover,
.btn-group .btn:focus {
    background: var(--accent) !important;      /* teal fort */
    border-color: var(--accent-600) !important;
    color: #ffffff !important;                 /* texte blanc */
    box-shadow: 0 0 0 2px rgba(26,163,163,.25) !important;
    z-index: 2;
}

/* Pour éviter les bordures écrasées dans un groupe */
.btn-group .btn + .btn {
    margin-left: -1px !important;
}


/* ---------- CONTEXTES COURANTS ADMINLTE ---------- */
/* Dans un header de box (AdminLTE applique parfois des contraintes) */
.box .box-tools .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle;
}

/* Évite le “saut” quand tu masques/affiches une icône dans un bouton */
.btn .fa[style*="display:none"] { width: 0 !important; }

/* Variante si tu préfères réserver l’espace des icônes (pas de décalage) */
/*
.btn .fa { width:16px; height:16px; visibility:hidden; }
.btn .fa.is-visible { visibility:visible; }
*/

/* ---------- EXCEPTIONS CIBLÉES (tes cas nommés) ---------- */
/* Téléchargement carte : bouton compact propre */
#btn-dwd-map {
    height: 32px !important;
    padding: 6px 12px !important;
    gap: 8px;
    border-radius: var(--radius, 6px) !important;
}
#btn-dwd-map .fa { width:16px; height:16px; }

/* ==========================================================
   ePerf — TABLEAU Sleek Light (pro, moderne, SaaS)
   Remplace complètement le style AdminLTE/Bootstrap 3
   ========================================================== */

/* ---- CONTENEUR DU TABLEAU ---- */
.table {
    width: 100%;
    background: #ffffff;
    border-radius: var(--radius, 6px);
    border: 1px solid var(--line, #e6eaf0);
    overflow: hidden;
}

/* ---- HEADER ---- */
.table > thead > tr > th {
    background: #f3f6fb !important;
    color: var(--text-strong, #1f2937) !important;
    font-weight: 700 !important;
    font-size: 14px;
    border-bottom: 1px solid var(--line, #e6eaf0) !important;
    padding: 10px 14px !important;
    white-space: nowrap;
}

/* ---- CELLULES ---- */
.table > tbody > tr > td {
    color: var(--text, #2d3748) !important;
    font-size: 14px;
    padding: 10px 14px !important;
    border-top: 1px solid #f0f2f5 !important;
    vertical-align: middle !important;
}

/* ---- INTERLIGNES ---- */
.table > tbody > tr {
    height: 48px; /* moderne, plus aéré */
}

/* ---- HOVER ---- */
.table-hover > tbody > tr:hover {
    background: #f9fcff !important;
}

/* ---- COLONNE ACTIONS ---- */
.table td .btn {
    margin-right: 6px;
}
.table td .btn:last-child {
    margin-right: 0;
}

/* ---- ALIGNEMENT ---- */
.table td,
.table th {
    vertical-align: middle !important;
}

/* ---- RENDU DU BLOC TABLEAU (box AdminLTE) ---- */
.box .box-body .table {
    margin-bottom: 0 !important;
    border: 1px solid var(--line, #e6eaf0);
    border-radius: var(--radius, 6px);
}

/* ---- Petits badges/couleurs dans tableau ---- */
.table .color-box {
    width: 32px;
    height: 18px;
    border-radius: var(--radius, 6px);
    border: 1px solid #d1d5db;
}

/* ---- Bouton dans tableau : taille cohérente ---- */
.table .btn-xs {
    height: 28px !important;
    padding: 4px 10px !important;
}

/* ---- Enlever les ombres moches AdminLTE ---- */
.table > thead > tr > th,
.table > tbody > tr > td {
    box-shadow: none !important;
}
/* ===== Tableaux plus compacts (global) ===== */

/* Hauteur + padding des lignes */
.table > thead > tr > th {
    padding: 8px 10px !important;          /* avant: 10px 14px */
    font-size: 13px;                        /* un poil plus fin */
    line-height: 1.15;
}

.table > tbody > tr > td {
    padding: 7px 10px !important;           /* avant: 10px 14px */
    font-size: 13px;
    line-height: 1.2;
    border-top: 1px solid #eff2f6 !important;  /* ligne plus discrète */
}

/* Resserre la hauteur des lignes */
.table > tbody > tr { height: 36px; }     /* avant: 48px */

/* Hover discret conservé */
.table-hover > tbody > tr:hover {
    background: #fafcff !important;
}

/* Boutons dans cellules: ne débordent pas la hauteur */
.table .btn-xs {
    height: 26px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
}

/* Petits boutons icône seule */
.table .btn-xs.icon-only {
    width: 26px; height: 26px;
}

/* Si tu as des inputs/select dans le tableau, on les compacte aussi */
.table .form-control {
    height: 30px !important;
    padding: 3px 8px !important;
    font-size: 13px !important;
}
/* ============================================================================
   SLEEK LIGHT — STYLE GÉNÉRIQUE POUR TOUS LES GROUPES DE SOUS-MENUS
   (AdminLTE 2 treeview avec un bloc propre)
   ============================================================================ */

/* -------- Enveloppe de tout groupe -------- */
.sidebar-menu > li.menu-group {
    margin: 0 8px;
}

/* -------- Parent NEUTRE par défaut -------- */
.sidebar-menu > li.menu-group > a {
    background: #ffffff !important;
    color: var(--text) !important;
    padding: 10px 12px;
    border-radius: var(--radius) var(--radius) 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid transparent !important; /* pas actif par défaut */
    margin: 0;
}

.sidebar-menu > li.menu-group > a:hover {
    background: #f6f9fc !important;
    color: var(--text-strong) !important;
}

/* -------- Parent ACTIF/OUVERT -------- */
.sidebar-menu > li.menu-group.menu-open > a,
.sidebar-menu > li.menu-group.active > a {
    background: var(--accent-soft) !important;
    border-left-color: var(--accent) !important;
    color: var(--text-strong) !important;
    font-weight: 700;
}

/* Chevron */
.sidebar-menu > li.menu-group > a .fa-angle-left {
    margin-left: auto;
    color: var(--accent) !important;
}

/* -------- Sous-menu bloc -------- */
.sidebar-menu > li.menu-group > .treeview-menu {
    background: var(--bg-card) !important; /* blanc Sleek Light */
    margin: 0;
    padding: 6px 0 8px 0;
    border-radius: 0 0 var(--radius) var(--radius);
    border: 1px solid var(--line);
    border-top: none;
}

/* -------- Sous-niveaux -------- */
.sidebar-menu > li.menu-group .treeview-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 2px 6px;
    border-radius: 6px;
    background: transparent !important;
    color: var(--text) !important;
    font-weight: 500;
}

/* Icônes sous-niveaux (gris) */
.sidebar-menu > li.menu-group .treeview-menu > li > a i {
    color: #7c8799 !important;
}

/* Hover doux */
.sidebar-menu > li.menu-group .treeview-menu > li > a:hover {
    background: #f3f6fb !important;
    color: var(--text-strong) !important;
}

/* -------- Sous-niveau ACTIF (pas de cadre) -------- */
.sidebar-menu > li.menu-group .treeview-menu > li.active > a {
    background: transparent !important; /* PAS DE CADRE */
    border: none !important;
    box-shadow: none !important;
    color: var(--accent-600) !important;
    font-weight: 700 !important;
}

/* Icône active (simple) */
.sidebar-menu > li.menu-group .treeview-menu > li.active > a i {
    color: var(--accent) !important;
}

.sidebar-menu > li.menu-group > .treeview-menu {
    background: #e8f6f6 !important;
}

/* Box premium très légère, dans l'esprit ePerf */
.box {
    border-radius: 10px !important;
}

/* Header arrondi */
.box-header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Sélecteurs mois/année côte à côte */
.flex-selects {
    display: flex;
    gap: 10px;
}
.flex-selects .form-group {
    flex: 1;
}

/* Scroll interne fixe TreeView */
.treeview-fixed {
    height: 650px;         /* même hauteur que la box de droite */
    overflow-y: auto;
}

/* Checkbox un poil plus visible */
input[type=checkbox] {
    transform: scale(1.2);
    margin-left: 5px;
}

/* ====== Résumé Sandre V4 (kpis) ====== */
.sv4-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.sv4-kpi {
    flex: 1 1 180px;
    min-width: 180px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e9edf2;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.sv4-kpi .sv4-kpi-title {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    letter-spacing: .2px;
    margin-bottom: 8px;
}

.sv4-kpi .sv4-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #101828;
}

/* Couleurs alignées AdminLTE (red/orange/teal/blue) */
.sv4-kpi.e4  .sv4-kpi-value { color: #dd4b39; } /* red */
.sv4-kpi.a4  .sv4-kpi-value { color: #f39c12; } /* orange */
.sv4-kpi.all .sv4-kpi-value { color: #00a65a; } /* green */

/* ====== Répartition par entité ====== */
.sv4-entities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sv4-entity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e9edf2;
    background: #fff;
    color: #344054;
    padding: 8px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.sv4-entity .sv4-badge {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: #111;
    font-weight: 700;
}

.sv4-hint {
    font-size: 12px;
    color: #667085;
    margin: 6px 0 2px 0;
}
/* Bloc profil sleek minimal */
/* Bloc profil sleek et compact */
.ef-sidebar-profile{
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

/* Nom */
.efsp-name{
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tags */
.efsp-tags{
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}

/* Badge sleek */
.efsp-badge{
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #f8fafc;
    color: var(--muted);
}

.efsp-badge i {
    margin-right: 4px;
    margin-left: 4px;
}

/* variantes */
.efsp-role-admin{ background: var(--accent-soft); color: var(--accent-600); }
.efsp-role-user{ background: #eef2f7; color:#475569; }
.efsp-readonly{
    background:#f3f4f6;
    color:#6b7280;
}
.efsp-readonly i{
    color:#6b7280 !important;
}
.efsp-ok{ background:#e8f7f3; color:#107e6b; }
.efsp-ko{ background:#fdeeee; color:#b91c1c; }
.efsp-maint{ background:#fff7e6; color:#a36100; }

/* Power off compact + hover */
.efsp-power i{
    color:#b94a48 !important;
}

.efsp-power:hover{
    background:#f6f9fc;
    border-color:#d5dde7;
}
.efsp-power:hover i{
    color:#dd4b39 !important;
}



/* Compacité supplémentaire sur petites hauteurs */
@media (max-height: 800px){
    .ef-sidebar-profile{ padding: 10px; margin: 8px 10px 6px; }
    .ef-sidebar-profile .efsp-avatar{ width: 36px; height: 36px; font-size: 15px; }
    .ef-sidebar-profile .efsp-name{ font-size: 13px; }
}