/**
 * Dark Mode Styles for Kanply
 * Variables CSS et overrides pour le mode sombre
 */

/* Variables CSS pour le mode dark */
[data-bs-theme="dark"] {
    /* Couleurs principales */
    --kanply-primary: #3b82f6;
    --kanply-primary-hover: #2563eb;
    --kanply-secondary: #94a3b8;
    --kanply-success: #10b981;
    --kanply-dark: #f1f5f9;
    --kanply-light: #0f172a;
    
    /* Backgrounds */
    --kanply-bg: #0f172a;
    --kanply-bg-secondary: #1e293b;
    --kanply-card-bg: #1e293b;
    --kanply-card-border: #334155;
    
    /* Text */
    --kanply-text: #f1f5f9;
    --kanply-text-muted: #94a3b8;
    
    /* Borders */
    --kanply-border: #334155;
    --kanply-border-light: #475569;
}

/* Overrides pour le body */
[data-bs-theme="dark"] body {
    background-color: var(--kanply-bg) !important;
    color: var(--kanply-text) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Force dark mode on html element */
html[data-bs-theme="dark"] {
    color-scheme: dark;
}

/* Sidebar dark mode */
[data-bs-theme="dark"] .sidebar {
    background: var(--kanply-card-bg) !important;
    border-right-color: var(--kanply-border) !important;
}

[data-bs-theme="dark"] .sidebar-nav .nav-link {
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .sidebar-nav .nav-link:hover {
    background-color: var(--kanply-bg-secondary);
    border-left-color: var(--kanply-primary);
}

[data-bs-theme="dark"] .sidebar-nav .nav-link.active {
    background-color: rgba(59, 130, 246, 0.15);
    border-left-color: var(--kanply-primary);
    color: var(--kanply-primary);
}

/* Main content area */
[data-bs-theme="dark"] .main-content {
    background-color: var(--kanply-bg) !important;
    color: var(--kanply-text) !important;
}

/* Cards */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-kanply {
    background-color: var(--kanply-card-bg) !important;
    border-color: var(--kanply-border) !important;
    color: var(--kanply-text) !important;
}

/* Substep sections */
[data-bs-theme="dark"] .substep-section {
    background: var(--kanply-card-bg);
    border-color: var(--kanply-border);
}

[data-bs-theme="dark"] .substep-header {
    background: var(--kanply-bg-secondary);
    border-bottom-color: var(--kanply-border);
}

/* Tables */
[data-bs-theme="dark"] .table {
    --bs-table-bg: var(--kanply-card-bg);
    --bs-table-color: var(--kanply-text);
    --bs-table-border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--kanply-bg-secondary);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td {
    background-color: rgba(59, 130, 246, 0.1);
}

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control-plaintext {
    background-color: var(--kanply-bg-secondary);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--kanply-bg-secondary);
    border-color: var(--kanply-primary);
    color: var(--kanply-text);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--kanply-text-muted);
    opacity: 0.6;
}

[data-bs-theme="dark"] .form-control-plaintext {
    color: var(--kanply-text);
}

/* Note textarea */
[data-bs-theme="dark"] .note-textarea {
    background-color: var(--kanply-bg-secondary);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .note-textarea:focus {
    border-color: var(--kanply-primary);
    background-color: var(--kanply-bg-secondary);
}

/* File items */
[data-bs-theme="dark"] .file-item {
    border-bottom-color: var(--kanply-border);
}

/* Task items */
[data-bs-theme="dark"] .task-item {
    border-bottom-color: var(--kanply-border);
}

[data-bs-theme="dark"] .task-item:hover {
    background-color: var(--kanply-bg-secondary);
}

/* Badges - ajuster les couleurs pour le contraste */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--kanply-bg-secondary) !important;
    color: var(--kanply-text) !important;
}

[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: var(--kanply-bg-secondary) !important;
    color: var(--kanply-text) !important;
}

[data-bs-theme="dark"] .badge.bg-warning {
    color: #000 !important;
}

/* Progress bars */
[data-bs-theme="dark"] .progress-kanply {
    background-color: var(--kanply-bg-secondary);
}

/* Dropdown menus */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--kanply-card-bg);
    border-color: var(--kanply-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--kanply-bg-secondary);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--kanply-border);
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--kanply-card-bg);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--kanply-border);
}

[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--kanply-border);
}

/* Alerts */
[data-bs-theme="dark"] .alert {
    border-color: var(--kanply-border);
}

[data-bs-theme="dark"] .alert-light {
    background-color: var(--kanply-bg-secondary);
    color: var(--kanply-text);
    border-color: var(--kanply-border);
}

/* Company badge in navbar */
[data-bs-theme="dark"] .company-badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Links */
[data-bs-theme="dark"] a {
    color: var(--kanply-primary);
}

[data-bs-theme="dark"] a:hover {
    color: var(--kanply-primary-hover);
}

/* Text muted */
[data-bs-theme="dark"] .text-muted {
    color: var(--kanply-text-muted) !important;
}

/* HR / Dividers */
[data-bs-theme="dark"] hr {
    border-top-color: var(--kanply-border);
    opacity: 1;
}

/* Input groups */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--kanply-bg-secondary);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
    background-color: var(--kanply-card-bg);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .page-link:hover {
    background-color: var(--kanply-bg-secondary);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--kanply-primary);
    border-color: var(--kanply-primary);
}

/* List groups */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--kanply-card-bg);
    border-color: var(--kanply-border);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background-color: var(--kanply-bg-secondary);
}

/* Breadcrumbs */
[data-bs-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--kanply-text-muted);
}

/* Transitions globales pour un changement fluide */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Exceptions pour les éléments qui ne doivent pas avoir de transition */
[data-bs-theme="dark"] img,
[data-bs-theme="dark"] svg,
[data-bs-theme="dark"] canvas,
[data-bs-theme="dark"] video {
    transition: none;
}

/* === ONBOARDING WIZARD DARK MODE === */

/* Wizard progress section */
[data-bs-theme="dark"] .wizard-progress {
    background-color: var(--kanply-card-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Wizard step labels */
[data-bs-theme="dark"] .wizard-step-label {
    color: var(--kanply-text-muted);
}

[data-bs-theme="dark"] .wizard-step.active .wizard-step-label {
    color: var(--kanply-primary);
}

[data-bs-theme="dark"] .wizard-step.completed .wizard-step-label {
    color: var(--kanply-success);
}

/* Wizard card */
[data-bs-theme="dark"] .wizard-card {
    background-color: var(--kanply-card-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Wizard card body */
[data-bs-theme="dark"] .wizard-card-body {
    background-color: var(--kanply-card-bg);
    color: var(--kanply-text);
}

/* Form sections */
[data-bs-theme="dark"] .form-section {
    border-bottom-color: var(--kanply-border);
}

[data-bs-theme="dark"] .form-section-title {
    color: var(--kanply-text);
}

/* Form labels */
[data-bs-theme="dark"] .form-label {
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .form-check-label {
    color: var(--kanply-text);
}

/* Responsibility cards */
[data-bs-theme="dark"] .responsibility-card {
    background-color: var(--kanply-bg-secondary);
    border-color: var(--kanply-border);
}

[data-bs-theme="dark"] .responsibility-card.required {
    background-color: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
}

[data-bs-theme="dark"] .responsibility-card h5 {
    color: var(--kanply-text);
}

/* Required badge */
[data-bs-theme="dark"] .required-badge {
    background-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Wizard actions */
[data-bs-theme="dark"] .wizard-actions {
    border-top-color: var(--kanply-border);
}

/* Table light for invites */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead.table-light {
    background-color: var(--kanply-bg-secondary);
    color: var(--kanply-text);
}

[data-bs-theme="dark"] .table-light th {
    color: var(--kanply-text);
    border-color: var(--kanply-border);
}

/* Alert light sections */
[data-bs-theme="dark"] .alert-light {
    background-color: var(--kanply-bg-secondary);
    color: var(--kanply-text);
    border-color: var(--kanply-border);
}

/* === AUTH PAGES DARK MODE === */

/* Auth card backgrounds */
[data-bs-theme="dark"] .login-card,
[data-bs-theme="dark"] .signup-card,
[data-bs-theme="dark"] .auth-card {
    background-color: var(--kanply-card-bg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Brand logo */
[data-bs-theme="dark"] .brand-logo {
    color: var(--kanply-text);
}

/* Auth links divider */
[data-bs-theme="dark"] .auth-links {
    border-top-color: var(--kanply-border);
}

/* Auth form labels */
[data-bs-theme="dark"] .auth-card .form-label {
    color: var(--kanply-text);
}