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

body.dark-theme {
    /* dark theme variable overrides */
    --body-bg: radial-gradient(circle at top, #111117 0%, #050507 70%);
    --body-color: #f5f5f7;
    --sidebar-bg: #011a08;
    --card-bg: #15151a;
    --card-border: rgba(255,255,255,0.06);
    --muted-text: #c0c0ca;
    --scrollbar-thumb: rgba(255,255,255,0.12);

    background: var(--body-bg);
    color: var(--body-color);
}

/* =============================================
   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-custom {
    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;
}

/* Strong override: ensure modal headers use platform yellow (unless danger) */
.modal-shell .modal-header,
.modal-card .modal-header,
.modal-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-light) 100%) !important;
    background-color: var(--secondary-color) !important;
    color: #111117 !important;
}

/* Ensure success badges show green text with pale background across themes */
.badge.bg-success {
    background: rgba(4,128,44,0.08) !important;
    color: #04802c !important;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

/* =============================================
   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);
}