/* ==========================================================
   NEON BANK – VARIABLES GLOBALES
   ========================================================== */

:root {
  --neon-red:       #d6001c;
  --neon-red-dark:  #b30017;
  --neon-red-light: #ffe5e8;
  --neon-red-soft:  rgba(214, 0, 28, 0.07);

  --primary: #d6001c;
  --success: #d6001c;
  --danger:  #b30017;

  --text-dark: #333333;
  --white:     #ffffff;
}

/* ==========================================================
   BOUTONS (Bootstrap override propre)
   ========================================================== */

.btn-primary {
  background-color: var(--neon-red) !important;
  border-color: var(--neon-red) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--neon-red-dark) !important;
  border-color: var(--neon-red-dark) !important;
  color: #ffffff !important;
}

/* Boutons blancs (actions secondaires) */
.btn.btn-white {
  background-color: #ffffff !important;
  border: 1px solid var(--neon-red) !important;
  color: var(--neon-red) !important;
}

.btn.btn-white i {
  color: var(--neon-red) !important;
}

.btn.btn-white:hover {
  background-color: var(--neon-red) !important;
  color: #ffffff !important;
}

.btn.btn-white:hover i {
  color: #ffffff !important;
}

/* ==========================================================
   MENU DESKTOP (PC) — MARK3 COMPATIBLE
   NE PAS écraser les variables du Mark3 avec !important
   ========================================================== */

.menu-w {
  background-color: #ffffff !important;
}

/* Couleur par défaut des liens — pas !important
   pour laisser le Mark3 gérer l'actif/hover */
.menu-w .main-menu > li > a {
  font-weight: 600;
}

/* Icônes — doit garder la couleur rouge */
.menu-w .os-icon {
  color: var(--neon-red);
}

/* Item sélectionné — supporté par les 2 systèmes */
.menu-w .main-menu > li.selected > a {
  color: #ffffff !important;
}

/* Icône de l'item sélectionné */
.menu-w .main-menu > li.selected > a .os-icon {
  color: #ffffff !important;
}

/* Sous-menus */
.menu-w .sub-menu-header {
  color: var(--neon-red) !important;
}

.menu-w .sub-menu a {
  color: var(--text-dark) !important;
}

.menu-w .sub-menu a:hover {
  color: var(--neon-red-dark) !important;
}

/* Neutralisation du vert du thème */
.menu-w.sub-menu-color-bright,
.menu-w.selected-menu-color-bright,
.menu-w.color-style-default {
  background-image: none !important;
}

/* ==========================================================
   MENU MOBILE — MARK3 COMPATIBLE
   ========================================================== */

.menu-mobile {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Liens */
.menu-mobile .main-menu > li > a {
  font-weight: 600;
}

.menu-mobile .os-icon {
  color: var(--neon-red) !important;
}

/* Hover / actif — compatible Mark3 */
.menu-mobile .main-menu > li > a:hover,
.menu-mobile .main-menu > li.active > a {
  color: var(--neon-red) !important;
  background-color: var(--neon-red-soft) !important;
}

/* Sous-menus mobile */
.menu-mobile .sub-menu {
  background-color: #ffffff !important;
}

.menu-mobile .sub-menu a {
  color: var(--text-dark) !important;
}

.menu-mobile .sub-menu a:hover {
  background-color: var(--neon-red-light) !important;
  color: var(--neon-red-dark) !important;
}

/* Icônes top mobile */
.menu-mobile .mobile-menu-trigger .os-icon,
.menu-mobile .content-panel-open .os-icon {
  color: var(--neon-red) !important;
}

/* ==========================================================
   TOPBAR — MARK3 COMPATIBLE
   ========================================================== */

.top-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(214, 0, 28, 0.15) !important;
}

.top-bar a,
.top-bar span,
.top-bar .os-icon {
  color: var(--neon-red);
  font-weight: 600;
}

.avatar-w img {
  border: 2px solid var(--neon-red);
}

.logged-user-menu {
  background: #fff !important;
  border: 1px solid rgba(214, 0, 28, 0.15) !important;
}

.logged-user-menu a {
  color: #333 !important;
}

.logged-user-menu a:hover {
  background: var(--neon-red-light) !important;
  color: var(--neon-red-dark) !important;
}

.logged-user-role {
  color: var(--neon-red-dark);
  font-size: 12px;
}

/* ==========================================================
   SIDEBAR / ACTIVITÉS
   ========================================================== */

.content-panel .element-header {
  color: var(--neon-red) !important;
  font-weight: 600;
}

.activity-box-w {
  border-left: 3px solid var(--neon-red);
  padding-left: 10px;
}

.activity-time {
  color: var(--neon-red-dark);
  font-size: 12px;
}

.activity-title {
  color: var(--text-dark);
}

.activity-box:hover {
  background-color: var(--neon-red-light) !important;
}

/* ==========================================================
   LIENS GÉNÉRAUX
   ========================================================== */

a {
  color: var(--neon-red);
}

a:hover {
  color: var(--neon-red-dark);
}

/* ==========================================================
   LOCK THÈMES (empêche le vert du dashboard)
   ========================================================== */

.menu-w.color-style-default,
.menu-w.sub-menu-color-bright,
.menu-w.selected-menu-color-bright {
  background-image: none !important;
}

/* ==========================================================
   SUPPRESSION TOTALE DU FOND BLEU SUR MOBILE
   ========================================================== */
@media (max-width: 768px) {
    /* Force le blanc sur tous les conteneurs principaux */
    html, body, .all-wrapper, .layout-w, .content-w, .content-i, .content-box,
    .element-wrapper, .element-box, .solid-bg-all, .with-side-panel,
    .all-wrapper.with-side-panel.solid-bg-all, .bg-primary, .bg-info,
    [class*="bg-"], [class*="bg-"] * {
        background-color: #ffffff !important;
        background-image: none !important;
        background: #ffffff !important;
    }
    /* Assure que les images et icônes ne prennent pas de fond */
    img, svg, i, .fas, .fab, .os-icon {
        background: transparent !important;
    }
    
}
/* CORRECTION DÉFINITIVE – FOND BLANC SUR MOBILE (toutes pages) */
@media (max-width: 768px) {
    /* Blanc absolu sur tous les conteneurs principaux */
    html, body, .all-wrapper, .layout-w, .content-w, .content-i, .content-box,
    .element-wrapper, .element-box, .solid-bg-all, .with-side-panel,
    .all-wrapper.with-side-panel.solid-bg-all,
    /* Classes Bootstrap qui pourraient apporter du fond coloré */
    .bg-primary, .bg-info, .bg-secondary, .bg-light, .bg-white, .bg-transparent,
    /* Classes génériques de fond */
    [class*="bg-"], [class*="background"] {
        background-color: #ffffff !important;
        background-image: none !important;
        background: #ffffff !important;
    }
    /* Supprime les dégradés éventuels */
    .gradient-bg, .gradient-primary {
        background: #fff !important;
    }
    /* Réinitialise les éléments qui doivent rester transparents (ex: icônes, images) */
    i, .fa, .fab, .fas, .os-icon, .icon, img, svg {
        background: transparent !important;
    }
    /* Force le blanc sur les éléments de formulaire (input, select, etc.) */
    input, select, textarea, .form-control {
        background-color: #ffffff !important;
    }
}