/**
 * YorkHost HostBill Theme
 * Mode Clair / Mode Sombre
 * Cohérent avec le site vitrine
 */

/* ============================================
   CSS VARIABLES - MODE CLAIR (défaut)
   ============================================ */
:root {
  /* Couleurs principales */
  --yh-primary: #763BD4;
  --yh-secondary: #BC5EF2;
  --yh-primary-rgb: 118, 59, 212;
  --yh-secondary-rgb: 188, 94, 242;

  /* Fond et surfaces */
  --yh-bg: #E8E6ED;
  --yh-bg-alt: #F4F2F7;
  --yh-card-bg: #FFFFFF;
  --yh-surface: #FFFFFF;

  /* Texte */
  --yh-text: #232323;
  --yh-text-secondary: #6b7280;
  --yh-text-muted: #9799A6;

  /* Bordures */
  --yh-border: rgba(118, 59, 212, 0.15);
  --yh-border-strong: rgba(118, 59, 212, 0.25);

  /* Ombres */
  --yh-shadow: 0 8px 32px 0 rgba(118, 59, 212, 0.12);
  --yh-shadow-lg: 0 12px 48px 0 rgba(118, 59, 212, 0.18);

  /* Navigation */
  --yh-navbar-bg: #FFFFFF;
  --yh-sidebar-bg: #F4F2F7;

  /* États */
  --yh-success: #2DC76B;
  --yh-warning: #F6BB42;
  --yh-danger: #D9252E;
  --yh-info: #763BD4;
}

/* ============================================
   CSS VARIABLES - MODE SOMBRE
   ============================================ */
html.dark-mode,
body.dark-mode {
  --yh-primary: #935bf0;
  --yh-secondary: #a77cf2;
  --yh-primary-rgb: 147, 91, 240;
  --yh-secondary-rgb: 167, 124, 242;

  /* Fond et surfaces */
  --yh-bg: #171717;
  --yh-bg-alt: #1d1d1d;
  --yh-card-bg: #1d1d1d;
  --yh-surface: #252525;

  /* Texte */
  --yh-text: #E8E6ED;
  --yh-text-secondary: #9ca3af;
  --yh-text-muted: #6b7280;

  /* Bordures */
  --yh-border: rgba(147, 91, 240, 0.2);
  --yh-border-strong: rgba(147, 91, 240, 0.3);

  /* Ombres */
  --yh-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --yh-shadow-lg: 0 12px 48px 0 rgba(0, 0, 0, 0.4);

  /* Navigation */
  --yh-navbar-bg: #1d1d1d;
  --yh-sidebar-bg: #1d1d1d;
}

/* ============================================
   STYLES DE BASE
   ============================================ */
body.template_2019 {
  background-color: var(--yh-bg) !important;
  color: var(--yh-text) !important;
  font-family: "Rubik", Arial, sans-serif !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Page titles */
h1, h2, h3, h4, h5, h6 {
  color: #1f2937 !important;
  font-weight: 600 !important;
}

h1 {
  font-size: 1.75rem !important;
}

h2 {
  font-size: 1.5rem !important;
}

/* Dark mode titles */
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: #f9fafb !important;
}

/* Paragraph text */
p {
  color: #4b5563 !important;
}

.dark-mode p {
  color: #d1d5db !important;
}

/* ============================================
   NAVIGATION - MODE CLAIR
   ============================================ */
nav.navbar,
nav.navbar.fixed-top,
.template_2019 nav.navbar,
body.template_2019 nav.navbar,
body.template_2019.yorkhost-theme nav.navbar {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(118, 59, 212, 0.12) !important;
  box-shadow: 0 2px 12px rgba(118, 59, 212, 0.08) !important;
  transition: all 0.3s ease;
}

/* Navbar left section - Logo area with gradient */
nav.navbar .navbar-left,
.navbar .navbar-left,
.template_2019 .navbar .navbar-left {
  background-color: #763BD4 !important;
  background: linear-gradient(135deg, #763BD4 0%, #BC5EF2 100%) !important;
}

.navbar .navbar-brand img {
  transition: filter 0.3s ease;
  max-height: 40px;
}

/* Navbar body - Main content area - MODE CLAIR - FORCE */
nav.navbar .navbar-body,
.navbar .navbar-body,
.navbar.fixed-top .navbar-body,
.template_2019 .navbar .navbar-body,
body.template_2019 .navbar .navbar-body,
body.template_2019.yorkhost-theme .navbar .navbar-body,
.template_2019 nav.navbar.fixed-top .navbar-body,
html body.template_2019 .navbar .navbar-body {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
  border: none !important;
}

/* Force navbar body with inline style override */
.navbar-body[style],
.navbar .navbar-body[style] {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Navbar links */
.navbar .nav-link,
.navbar .btn-left-navbar,
.navbar .navbar-menu .nav-link,
.navbar-menu .nav-link {
  color: var(--yh-text-secondary) !important;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .btn-left-navbar:hover,
.navbar .navbar-menu .nav-link:hover {
  color: var(--yh-primary) !important;
}

/* Navbar text */
.navbar .nav-link small,
.navbar .text-nowrap,
.navbar-menu small {
  color: var(--yh-text) !important;
}

/* Navbar icons */
.navbar .nav-link .material-icons,
.navbar .material-icons {
  color: var(--yh-text-secondary) !important;
}

.navbar .nav-link:hover .material-icons {
  color: var(--yh-primary) !important;
}

/* Dark mode toggle in navbar */
.yorkhost-navbar-dark-toggle {
  color: var(--yh-text-secondary) !important;
}

.yorkhost-navbar-dark-toggle:hover {
  color: var(--yh-primary) !important;
}

.yorkhost-navbar-dark-toggle .material-icons {
  font-size: 24px;
}

/* Search bar */
.navbar-search .form-control,
.navbar .navbar-search .form-control {
  background-color: var(--yh-bg-alt) !important;
  border-color: var(--yh-border) !important;
  color: var(--yh-text) !important;
}

.navbar-search .form-control:focus {
  border-color: var(--yh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--yh-primary-rgb), 0.15) !important;
}

.navbar-search .form-control::placeholder {
  color: var(--yh-text-muted) !important;
}

/* Search icon */
.navbar-search .navbar-search-icon,
.navbar-search .input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: var(--yh-text-muted) !important;
}

/* Order button */
.navbar .btn-success,
.navbar-order .btn-success {
  background: linear-gradient(135deg, var(--yh-primary) 0%, var(--yh-secondary) 100%) !important;
  border: none !important;
  color: #fff !important;
}

.navbar .btn-success:hover,
.navbar-order .btn-success:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Dropdowns in navbar */
.navbar .dropdown-menu {
  background-color: var(--yh-card-bg) !important;
  border: 1px solid var(--yh-border) !important;
  box-shadow: var(--yh-shadow-lg) !important;
}

.navbar .dropdown-item {
  color: var(--yh-text) !important;
}

.navbar .dropdown-item:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.1) !important;
  color: var(--yh-primary) !important;
}

/* Cart badge */
.navbar .badge-primary {
  background-color: var(--yh-primary) !important;
}

/* Language dropdown */
.navbar .nav-link .language,
.navbar .dropdown-toggle::after {
  color: var(--yh-text-secondary) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
  background-color: var(--yh-sidebar-bg) !important;
  border-right: 1px solid var(--yh-border) !important;
  transition: all 0.3s ease;
}

.sidebar .nav-link {
  color: var(--yh-text-secondary) !important;
  border-radius: 0.5rem;
  margin: 2px 8px;
  transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.1) !important;
  color: var(--yh-primary) !important;
}

.sidebar .nav-link.active {
  background-color: rgba(var(--yh-primary-rgb), 0.15) !important;
  color: var(--yh-primary) !important;
  font-weight: 500;
}

.sidebar .nav-link .material-icons {
  color: inherit !important;
}

.sidebar .sidebar-heading {
  color: var(--yh-text-muted) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   CARTES
   ============================================ */
.card {
  background-color: var(--yh-card-bg) !important;
  border: 1px solid var(--yh-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--yh-shadow);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--yh-shadow-lg);
  transform: translateY(-2px);
}

.card .card-header {
  background-color: rgba(var(--yh-primary-rgb), 0.05) !important;
  border-bottom: 1px solid var(--yh-border) !important;
  color: var(--yh-text) !important;
}

.card .card-body {
  color: var(--yh-text) !important;
}

.card .card-footer {
  background-color: rgba(var(--yh-primary-rgb), 0.03) !important;
  border-top: 1px solid var(--yh-border) !important;
}

/* ============================================
   BOUTONS
   ============================================ */
.btn-primary {
  background-color: var(--yh-primary) !important;
  border-color: var(--yh-primary) !important;
  color: #fff !important;
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--yh-secondary) !important;
  border-color: var(--yh-secondary) !important;
  box-shadow: 0 0 0 3px rgba(var(--yh-primary-rgb), 0.25) !important;
}

.btn-success {
  background-color: var(--yh-success) !important;
  border-color: var(--yh-success) !important;
}

.btn-outline-primary {
  color: var(--yh-primary) !important;
  border-color: var(--yh-primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--yh-primary) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-default {
  background-color: var(--yh-bg-alt) !important;
  border-color: var(--yh-border) !important;
  color: var(--yh-text) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.1) !important;
  border-color: var(--yh-border-strong) !important;
}

/* ============================================
   FORMULAIRES
   ============================================ */
.form-control {
  background-color: var(--yh-surface) !important;
  border-color: var(--yh-border) !important;
  color: var(--yh-text) !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: var(--yh-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--yh-primary-rgb), 0.15) !important;
  background-color: var(--yh-surface) !important;
}

.form-control::placeholder {
  color: var(--yh-text-muted) !important;
}

.form-label,
label {
  color: var(--yh-text) !important;
}

.form-label-placeholder {
  color: var(--yh-text-muted) !important;
}

/* Select & Custom inputs */
.custom-select,
select.form-control {
  background-color: var(--yh-surface) !important;
  border-color: var(--yh-border) !important;
  color: var(--yh-text) !important;
}

/* ============================================
   TABLEAUX - CLEAN STYLE
   ============================================ */
.table {
  color: var(--yh-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

.table thead th {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(var(--yh-primary-rgb), 0.1) !important;
  color: var(--yh-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 1rem !important;
}

.table td {
  border: none !important;
  border-bottom: 1px solid rgba(var(--yh-primary-rgb), 0.06) !important;
  color: var(--yh-text) !important;
  font-weight: 400 !important;
  padding: 0.875rem 1rem !important;
  vertical-align: middle !important;
}

.table th {
  border: none !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--yh-primary-rgb), 0.02) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: transparent !important;
}

.table-hover tbody tr:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.04) !important;
}

/* Card containing table - remove double borders */
.card .table {
  margin-bottom: 0 !important;
}

.card .table thead th:first-child {
  border-top-left-radius: 0.5rem !important;
}

.card .table thead th:last-child {
  border-top-right-radius: 0.5rem !important;
}

/* ============================================
   BADGES & LABELS
   ============================================ */
.badge-primary,
.label-primary {
  background-color: var(--yh-primary) !important;
}

.badge-success,
.label-success,
.badge-Active,
.badge-Paid,
.label-Active,
.label-Paid {
  background-color: rgba(45, 199, 107, 0.15) !important;
  color: var(--yh-success) !important;
}

.badge-warning,
.label-warning,
.badge-Pending,
.label-Pending {
  background-color: rgba(246, 187, 66, 0.15) !important;
  color: var(--yh-warning) !important;
}

.badge-danger,
.label-danger,
.badge-Unpaid,
.badge-Terminated,
.label-Unpaid,
.label-Terminated {
  background-color: rgba(217, 37, 46, 0.15) !important;
  color: var(--yh-danger) !important;
}

.badge-info,
.label-info {
  background-color: rgba(var(--yh-primary-rgb), 0.15) !important;
  color: var(--yh-primary) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
  background-color: var(--yh-card-bg) !important;
  border: 1px solid var(--yh-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--yh-shadow-lg) !important;
}

.dropdown-item {
  color: var(--yh-text-secondary) !important;
  transition: all 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(var(--yh-primary-rgb), 0.1) !important;
  color: var(--yh-primary) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--yh-primary) !important;
  color: #fff !important;
}

.dropdown-divider {
  border-color: var(--yh-border) !important;
}

/* ============================================
   MODALES
   ============================================ */
.modal-content {
  background-color: var(--yh-card-bg) !important;
  border: 1px solid var(--yh-border) !important;
  border-radius: 1rem !important;
  box-shadow: var(--yh-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--yh-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--yh-border) !important;
}

.modal-title {
  color: var(--yh-text) !important;
}

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   ALERTES
   ============================================ */
.alert {
  border-radius: 0.5rem !important;
  border: none !important;
}

.alert-success {
  background-color: rgba(45, 199, 107, 0.15) !important;
  color: var(--yh-success) !important;
}

.alert-warning {
  background-color: rgba(246, 187, 66, 0.15) !important;
  color: #b45309 !important;
}

.alert-danger {
  background-color: rgba(217, 37, 46, 0.15) !important;
  color: var(--yh-danger) !important;
}

.alert-info {
  background-color: rgba(var(--yh-primary-rgb), 0.15) !important;
  color: var(--yh-primary) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination .page-link {
  background-color: var(--yh-surface) !important;
  border-color: var(--yh-border) !important;
  color: var(--yh-text-secondary) !important;
}

.pagination .page-link:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.1) !important;
  color: var(--yh-primary) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--yh-primary) !important;
  border-color: var(--yh-primary) !important;
  color: #fff !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  background-color: rgba(var(--yh-primary-rgb), 0.05) !important;
  border-radius: 0.5rem !important;
}

.breadcrumb-item {
  color: var(--yh-text-secondary) !important;
}

.breadcrumb-item.active {
  color: var(--yh-primary) !important;
}

.breadcrumb-item a {
  color: var(--yh-text-secondary) !important;
}

.breadcrumb-item a:hover {
  color: var(--yh-primary) !important;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress {
  background-color: var(--yh-bg-alt) !important;
  border-radius: 0.5rem !important;
}

.progress-bar {
  background-color: var(--yh-primary) !important;
}

/* ============================================
   LIST GROUPS
   ============================================ */
.list-group-item {
  background-color: var(--yh-card-bg) !important;
  border-color: var(--yh-border) !important;
  color: var(--yh-text) !important;
}

.list-group-item:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.05) !important;
}

.list-group-item.active {
  background-color: var(--yh-primary) !important;
  border-color: var(--yh-primary) !important;
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
.tooltip .tooltip-inner {
  background-color: var(--yh-primary) !important;
}

.popover {
  background-color: var(--yh-card-bg) !important;
  border-color: var(--yh-border) !important;
  box-shadow: var(--yh-shadow-lg) !important;
}

/* ============================================
   LIENS
   ============================================ */
a {
  color: var(--yh-primary) !important;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--yh-secondary) !important;
}

.text-primary {
  color: var(--yh-primary) !important;
}

.text-secondary {
  color: var(--yh-text-secondary) !important;
}

.text-muted {
  color: var(--yh-text-muted) !important;
}

/* ============================================
   SECTION PRINCIPALE
   ============================================ */
.section-main {
  background-color: transparent !important;
}

.body-content {
  background-color: var(--yh-bg) !important;
}

/* ============================================
   ROOT BOXES (Page d'accueil)
   ============================================ */
.root-boxes .root-box {
  background-color: var(--yh-card-bg) !important;
  border: 1px solid var(--yh-border) !important;
  border-radius: 1rem !important;
  box-shadow: var(--yh-shadow);
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.root-boxes .root-box:hover {
  border-color: var(--yh-primary) !important;
  box-shadow: var(--yh-shadow-lg);
  transform: translateY(-4px);
}

.root-boxes .root-box h4 {
  color: var(--yh-text) !important;
}

.root-boxes .root-box span {
  color: var(--yh-text-secondary) !important;
}

.root-boxes .root-box .material-icons {
  color: var(--yh-primary) !important;
}

/* ============================================
   FOOTER - STICKY BOTTOM
   ============================================ */

/* Make body flex container for sticky footer */
body.template_2019 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.template_2019 > .body-wrapper,
body.template_2019 > div:first-of-type {
  flex: 1 0 auto;
}

.footer-content {
  flex-shrink: 0;
  width: 100%;
  margin-top: auto;
}

.footer {
  background-color: var(--yh-bg-alt) !important;
  border-top: 1px solid var(--yh-border) !important;
  color: var(--yh-text-secondary) !important;
  padding: 1rem 0;
  width: 100%;
}

.footer .footer-box {
  max-width: 100%;
  padding: 0 2rem;
}

.footer a {
  color: var(--yh-text-secondary) !important;
}

.footer a:hover {
  color: var(--yh-primary) !important;
}

/* Dark mode footer */
.dark-mode .footer-content,
.dark-mode .footer {
  background-color: #0f0f0f !important;
}

/* ============================================
   PAGE LOADER
   ============================================ */
.pageloader-layer {
  border-color: var(--yh-primary) !important;
}

/* ============================================
   SCROLLBAR PERSONNALISEE
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--yh-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--yh-primary-rgb), 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--yh-primary-rgb), 0.5);
}

/* ============================================
   TOGGLE DARK MODE BUTTON
   ============================================ */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(var(--yh-primary-rgb), 0.1);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  background-color: rgba(var(--yh-primary-rgb), 0.2);
}

.dark-mode-toggle .material-icons {
  color: var(--yh-primary);
  font-size: 20px;
}

/* ============================================
   SERVICES & INVOICES PAGES
   ============================================ */
.service-status-Active,
.invoice-status-Paid {
  color: var(--yh-success) !important;
}

.service-status-Suspended,
.invoice-status-Unpaid {
  color: var(--yh-danger) !important;
}

.service-status-Pending,
.invoice-status-Draft {
  color: var(--yh-warning) !important;
}

/* ============================================
   TICKETS
   ============================================ */
.ticket-status-Open {
  color: var(--yh-success) !important;
}

.ticket-status-Answered {
  color: var(--yh-primary) !important;
}

.ticket-status-Customer-Reply {
  color: var(--yh-warning) !important;
}

.ticket-status-Closed {
  color: var(--yh-text-muted) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 991px) {
  .sidebar {
    background-color: var(--yh-card-bg) !important;
  }

  .sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}

/* ============================================
   GLASS MORPHISM EFFECTS (comme le site vitrine)
   ============================================ */
.glass-card {
  background: var(--yh-card-bg) !important;
  border-radius: 1.25rem !important;
  border: 1.5px solid var(--yh-border) !important;
  box-shadow: var(--yh-shadow) !important;
  transition: box-shadow 0.3s, transform 0.3s;
}

.glass-card:hover {
  box-shadow: var(--yh-shadow-lg) !important;
  transform: scale(1.02);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card,
.root-box {
  animation: fadeIn 0.3s ease-out;
}

/* ============================================
   UTILITAIRES
   ============================================ */
.bg-primary {
  background-color: var(--yh-primary) !important;
}

.bg-secondary {
  background-color: var(--yh-secondary) !important;
}

.border-primary {
  border-color: var(--yh-primary) !important;
}

.text-yorkhost-primary {
  color: var(--yh-primary) !important;
}

.text-yorkhost-secondary {
  color: var(--yh-secondary) !important;
}

/* ============================================
   MODE SOMBRE - OVERRIDES SPECIFIQUES
   ============================================ */

/* Dark mode body */
.dark-mode.template_2019,
body.dark-mode {
  background-color: #0f0f0f !important;
}

.dark-mode .body-content,
.dark-mode .section-main {
  background-color: #0f0f0f !important;
}

/* Dark mode navbar specific */
.dark-mode nav.navbar,
.dark-mode nav.navbar.fixed-top,
body.dark-mode nav.navbar,
html.dark-mode nav.navbar,
.dark-mode.template_2019 nav.navbar,
body.dark-mode.template_2019 nav.navbar {
  background-color: #18181b !important;
  background: #18181b !important;
  border-bottom: 1px solid rgba(147, 91, 240, 0.2) !important;
}

.dark-mode nav.navbar .navbar-body,
.dark-mode .navbar .navbar-body,
body.dark-mode .navbar .navbar-body,
html.dark-mode .navbar .navbar-body,
.dark-mode.template_2019 .navbar .navbar-body,
html.dark-mode body.template_2019 .navbar .navbar-body,
.dark-mode .navbar-body[style],
.dark-mode .navbar .navbar-body[style] {
  background-color: #18181b !important;
  background: #18181b !important;
}

.dark-mode .navbar .nav-link,
.dark-mode .navbar-menu .nav-link {
  color: #c4b5fd !important;
}

.dark-mode .navbar .nav-link:hover {
  color: #a78bfa !important;
}

.dark-mode .navbar .nav-link small,
.dark-mode .navbar .text-nowrap,
.dark-mode .navbar-menu small,
.dark-mode .navbar .navbar-menu-user small {
  color: #f3f4f6 !important;
}

.dark-mode .navbar .material-icons {
  color: #c4b5fd !important;
}

.dark-mode .navbar .nav-link:hover .material-icons {
  color: #a78bfa !important;
}

/* Dark mode search */
.dark-mode .navbar-search .form-control {
  background-color: #252525 !important;
  border-color: rgba(147, 91, 240, 0.3) !important;
  color: #f3f4f6 !important;
}

.dark-mode .navbar-search .form-control::placeholder {
  color: #9ca3af !important;
}

/* ============================================
   SIDEBAR REWORK - MODE CLAIR
   ============================================ */
.sidebar {
  background: linear-gradient(180deg, #f8f7fc 0%, #f0eef5 100%) !important;
  border-right: 1px solid rgba(118, 59, 212, 0.1) !important;
}

.sidebar .sidebar-heading,
.sidebar .nav-header {
  color: #763BD4 !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 1rem 1rem 0.5rem !important;
}

.sidebar .nav-link {
  color: #374151 !important;
  font-weight: 500 !important;
  padding: 0.6rem 1rem !important;
  margin: 2px 0.5rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
}

.sidebar .nav-link span,
.sidebar .nav-link small {
  font-weight: 500 !important;
}

.sidebar .nav-link:hover {
  background: rgba(118, 59, 212, 0.08) !important;
  color: #763BD4 !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link[aria-expanded="true"] {
  background: linear-gradient(135deg, #763BD4 0%, #BC5EF2 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(118, 59, 212, 0.3) !important;
}

.sidebar .nav-link.active .material-icons,
.sidebar .nav-link[aria-expanded="true"] .material-icons {
  color: #fff !important;
}

.sidebar .nav-link .material-icons {
  color: #763BD4 !important;
  font-size: 20px !important;
  margin-right: 0.5rem !important;
}

.sidebar .nav-link:hover .material-icons {
  color: #763BD4 !important;
}

/* Sidebar submenu */
.sidebar .collapse .nav-link,
.sidebar .collapsing .nav-link {
  padding-left: 2.5rem !important;
  font-size: 0.875rem !important;
}

/* ============================================
   SIDEBAR REWORK - MODE SOMBRE
   ============================================ */
.dark-mode .sidebar {
  background: linear-gradient(180deg, #1a1a1a 0%, #141414 100%) !important;
  border-right: 1px solid rgba(147, 91, 240, 0.15) !important;
}

.dark-mode .sidebar .sidebar-heading,
.dark-mode .sidebar .nav-header {
  color: #a78bfa !important;
}

.dark-mode .sidebar .nav-link {
  color: #e5e7eb !important;
  font-weight: 500 !important;
}

.dark-mode .sidebar .nav-link span,
.dark-mode .sidebar .nav-link small {
  font-weight: 500 !important;
  color: inherit !important;
}

.dark-mode .sidebar .nav-link:hover {
  background: rgba(147, 91, 240, 0.12) !important;
  color: #c4b5fd !important;
}

.dark-mode .sidebar .nav-link.active,
.dark-mode .sidebar .nav-link[aria-expanded="true"] {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4) !important;
}

.dark-mode .sidebar .nav-link .material-icons {
  color: #a78bfa !important;
}

.dark-mode .sidebar .nav-link:hover .material-icons {
  color: #c4b5fd !important;
}

/* Dark mode cards */
.dark-mode .card {
  background-color: #1a1a1a !important;
  border-color: rgba(147, 91, 240, 0.2) !important;
}

.dark-mode .card .card-header {
  background-color: rgba(147, 91, 240, 0.08) !important;
  border-color: rgba(147, 91, 240, 0.2) !important;
  color: #f3f4f6 !important;
}

.dark-mode .card .card-body {
  color: #e5e7eb !important;
}

/* Dark mode text colors - plus lumineux */
.dark-mode .text-dark,
.dark-mode .text-gray-dark {
  color: #f3f4f6 !important;
}

.dark-mode .text-gray {
  color: #d1d5db !important;
}

.dark-mode .text-muted {
  color: #9ca3af !important;
}

.dark-mode .text-secondary {
  color: #c4b5fd !important;
}

/* Dark mode general text */
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
  color: #f3f4f6 !important;
}

.dark-mode p, .dark-mode span, .dark-mode div {
  color: #e5e7eb;
}

.dark-mode label {
  color: #d1d5db !important;
}

/* Dark mode dropdown */
.dark-mode .dropdown-menu {
  background-color: #1a1a1a !important;
  border-color: rgba(147, 91, 240, 0.25) !important;
}

.dark-mode .dropdown-item {
  color: #e5e7eb !important;
}

.dark-mode .dropdown-item:hover {
  background-color: rgba(147, 91, 240, 0.15) !important;
  color: #c4b5fd !important;
}

/* Dark mode inputs */
.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .form-control {
  background-color: #1f1f1f !important;
  border-color: rgba(147, 91, 240, 0.25) !important;
  color: #f3f4f6 !important;
}

.dark-mode .form-control:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25) !important;
}

/* Dark mode tables - CLEAN */
.dark-mode .table {
  color: #e5e7eb !important;
  border: none !important;
}

.dark-mode .table thead th {
  color: #a78bfa !important;
  border: none !important;
  border-bottom: 1px solid rgba(147, 91, 240, 0.15) !important;
  background-color: transparent !important;
}

.dark-mode .table th {
  border: none !important;
}

.dark-mode .table td {
  color: #e5e7eb !important;
  border: none !important;
  border-bottom: 1px solid rgba(147, 91, 240, 0.08) !important;
}

.dark-mode .table tbody tr:last-child td {
  border-bottom: none !important;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(147, 91, 240, 0.04) !important;
}

.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(147, 91, 240, 0.1) !important;
}

/* Dark mode modals */
.dark-mode .modal-content {
  background-color: #1a1a1a !important;
  border-color: rgba(147, 91, 240, 0.25) !important;
}

.dark-mode .modal-header {
  border-color: rgba(147, 91, 240, 0.2) !important;
  color: #f3f4f6 !important;
}

.dark-mode .modal-footer {
  border-color: rgba(147, 91, 240, 0.2) !important;
}

.dark-mode .modal-title {
  color: #f3f4f6 !important;
}

/* Dark mode footer */
.dark-mode .footer {
  background-color: #0f0f0f !important;
}

/* Dark mode welcome text */
.dark-mode .navbar-menu-user .text-dark {
  color: #f3f4f6 !important;
}

.dark-mode .navbar-menu-user .text-gray {
  color: #c4b5fd !important;
}

/* Dark mode tabs */
.dark-mode .nav-tabs .nav-link {
  color: #9ca3af !important;
}

.dark-mode .nav-tabs .nav-link.active {
  color: #c4b5fd !important;
  background-color: transparent !important;
  border-color: #7c3aed !important;
}

.dark-mode .nav-tabs .nav-link:hover {
  color: #c4b5fd !important;
  border-color: rgba(147, 91, 240, 0.3) !important;
}

/* Dark mode badges */
.dark-mode .badge {
  color: #f3f4f6 !important;
}

/* Dark mode links */
.dark-mode a {
  color: #a78bfa !important;
}

.dark-mode a:hover {
  color: #c4b5fd !important;
}