body.light-theme {
    background: radial-gradient(circle at top, #ffffff 0%, #f1f2f6 55%, #e6e8ef 100%);
    color: #1f1f24;
}

body.dark-theme {
    background: radial-gradient(circle at top, #111117 0%, #050507 70%);
    color: #f5f5f7;
}

/* =============================================
   DARK-THEME – éléments principaux
   ============================================= */

.dark-theme .navbar-custom {
    background: #011809;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.dark-theme .metric-card,
.dark-theme .mini-stat,
.dark-theme .dashboard-card,
.dark-theme .kanban-column,
.dark-theme .kanban-card,
.dark-theme .search-field,
.dark-theme .drawer-content,
.dark-theme .modal-panel {
    background: #15151a;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

/* Spotlight-cards INSIDE a dashboard-card → fond plus clair pour créer du contraste */
.dark-theme .spotlight-card {
    background: #1e1e25;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Tableau — rangées légèrement plus claires que le fond carte */
.dark-theme .table-modern tbody tr {
    background: #1c1c21;
}

.dark-theme .table-modern thead th {
    color: #9898a5;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* =============================================
   DARK-THEME – bordures & séparateurs
   ============================================= */

/* card-header séparateur */
.dark-theme .dashboard-card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* due-item, playbook-item, timeline-item séparateurs */
.dark-theme .due-item,
.dark-theme .playbook-item,
.dark-theme .timeline-item {
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-theme .notification-item {
    background: #1c1c21;
    border-color: rgba(255, 255, 255, 0.06);
}

/* =============================================
   DARK-THEME – badges & pills
   ============================================= */

.dark-theme .badge-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}

.dark-theme .status-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f7;
}

.dark-theme .chip,
.dark-theme .chip-outline {
    border-color: rgba(255, 255, 255, 0.15);
    color: #c0c0ca;
}

.dark-theme .chip.active,
.dark-theme .chip:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #111117;
}

/* =============================================
   DARK-THEME – navigation & sidebar
   ============================================= */

.dark-theme .sidebar {
    background: #011a08;
}

/* =============================================
   DARK-THEME – boutons
   ============================================= */

.dark-theme .btn-outline {
    border-color: rgba(255, 255, 255, 0.2);
    color: #f5f5f7;
}

.dark-theme .btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
}

.dark-theme .btn-primary {
    box-shadow: 0 4px 16px rgba(255, 210, 0, 0.2);
}

.dark-theme .btn-icon {
    color: #c0c0ca;
}

.dark-theme .btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =============================================
   DARK-THEME – formulaires & inputs
   ============================================= */

.dark-theme .search-field input,
.dark-theme .subtitle {
    color: #d6d6dd;
}

.dark-theme .search-field input::placeholder {
    color: #6e6e7a;
}

.dark-theme .form-control-custom,
.dark-theme .form-select {
    background: #1c1c21;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f0f0f5;
}

.dark-theme .form-control-custom:focus,
.dark-theme .form-select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.15);
}

.dark-theme .form-label {
    color: #c0c0ca;
}

/* =============================================
   DARK-THEME – progression & animation
   ============================================= */

.dark-theme .progress-custom {
    background: rgba(255, 255, 255, 0.1);
}

/* =============================================
   DARK-THEME – panneaux & modales
   ============================================= */

.dark-theme .panel-side-right {
    background: #15151a;
    box-shadow: -18px 0 60px rgba(0, 0, 0, 0.6);
}

.dark-theme .panel-header,
.dark-theme .panel-footer {
    border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .modal-shell {
    background: rgba(0, 0, 0, 0.7);
}

/* =============================================
   DARK-THEME – notification & paiements
   ============================================= */

.dark-theme .notification {
    background: #050507;
    border-color: var(--secondary-color);
}

.dark-theme .payment-summary-bar {
    background: #1c1c21;
    border-color: rgba(255, 255, 255, 0.06);
}

/* =============================================
   DARK-THEME – kanban
   ============================================= */

.dark-theme .kanban-card {
    background: #1c1c21;
    border-color: rgba(255, 255, 255, 0.04);
}

/* =============================================
   DARK-THEME – recommandations & automatisations
   ============================================= */

.dark-theme .recommendation {
    background: #1c1c21;
    border-color: rgba(255, 255, 255, 0.06);
}

.dark-theme .automation-item {
    border-color: rgba(255, 255, 255, 0.08);
}

/* =============================================
   DARK-THEME – textes & labels
   ============================================= */

.dark-theme .eyebrow {
    color: #7e7e8a;
}

.dark-theme .text-muted,
.dark-theme .muted-color {
    color: #7e7e8a !important;
}

.dark-theme .metric-label,
.dark-theme .mini-stat .label {
    color: #9898a5;
}

.dark-theme .mini-stat small,
.dark-theme .metric-card small {
    color: #7e7e8a;
}

/* =============================================
   DARK-THEME – scrollbar
   ============================================= */

.dark-theme ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Dark theme — unified button variable overrides */
.dark-theme {
    --btn-primary-bg: #07461c;
    --btn-primary-color: #ffffff;
    --btn-primary-hover: #095e25;

    --btn-danger-bg: #dc3545;
    --btn-danger-hover: #c82333;

    --btn-outline-border: rgba(255,255,255,0.18);
    --btn-ghost-border: rgba(255,255,255,0.12);

    --btn-export-bg: rgba(4,128,44,0.12);
    --btn-export-color: #04802c;

    --btn-icon-hover-bg: rgba(255,255,255,0.06);
}

/* Dark-theme modal button overrides */
.dark-theme .modal-shell .btn-primary,
.dark-theme .modal-panel .btn-primary,
.dark-theme .modal-form-actions .btn-primary,
.dark-theme .modal-shell.confirm-modal .modal-footer .btn-confirm-ok {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
    border: none !important;
}
.dark-theme .modal-shell .btn-ghost,
.dark-theme .modal-shell .btn-outline,
.dark-theme .modal-panel .btn-ghost {
    background: rgba(255,255,255,0.04) !important;
    color: #d6d6dd !important;
    border-color: rgba(255,255,255,0.06) !important;
}