/**
 * Dark Mode Styles pour BAMBOU EKO / Bijoux Express
 * 
 * Ce fichier contient les styles CSS pour le mode sombre.
 * Utilise la classe .dark sur <html> pour activer le mode sombre.
 * 
 * Compatible avec Tailwind CSS dark: variant
 */

/* ============================================
   Variables CSS pour le mode sombre
   ============================================ */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

.dark {
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* ============================================
   Styles de base - Mode Sombre
   ============================================ */
.dark body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Cards et conteneurs */
.dark .bg-white {
    background-color: var(--bg-primary) !important;
}

.dark .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

.dark .bg-gray-100 {
    background-color: var(--bg-tertiary) !important;
}

/* Textes */
.dark .text-gray-900,
.dark .text-gray-800 {
    color: var(--text-primary) !important;
}

.dark .text-gray-700,
.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
    color: var(--text-muted) !important;
}

/* Bordures */
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--border-color) !important;
}

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-color) !important;
}

/* ============================================
   Composants spécifiques
   ============================================ */

/* Navigation / Sidebar */
.dark .sidebar,
.dark nav.bg-white {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.dark .sidebar a:hover,
.dark .nav-link:hover {
    background-color: var(--bg-tertiary) !important;
}

.dark .sidebar .active,
.dark .nav-link.active {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

/* Dropdown menus */
.dark .dropdown-menu,
.dark [x-show].absolute {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.dark .dropdown-item:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Tables */
.dark table {
    background-color: var(--bg-primary);
}

.dark thead {
    background-color: var(--bg-tertiary) !important;
}

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

.dark tbody tr {
    border-color: var(--border-color) !important;
}

.dark tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

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

/* Formulaires */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--text-muted) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Labels */
.dark label {
    color: var(--text-secondary) !important;
}

/* Boutons */
.dark .btn-secondary,
.dark .bg-gray-200 {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.dark .btn-outline {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark .btn-outline:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Cards statistiques */
.dark .stat-card,
.dark .card {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

/* Modals */
.dark .modal-content,
.dark [role="dialog"] > div {
    background-color: var(--bg-primary) !important;
}

.dark .modal-header,
.dark .modal-footer {
    border-color: var(--border-color) !important;
}

/* Alertes */
.dark .alert-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.dark .alert-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.dark .alert-warning {
    background-color: rgba(234, 179, 8, 0.2) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
}

.dark .alert-danger,
.dark .alert-error {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Badges */
.dark .badge {
    opacity: 0.9;
}

/* Charts (si utilisés) */
.dark .chart-container {
    filter: brightness(0.9);
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ============================================
   Transitions pour le changement de thème
   ============================================ */
html.dark,
html:not(.dark) {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.sidebar,
nav,
.card,
table,
input,
textarea,
select,
.modal-content {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Utilitaires supplémentaires
   ============================================ */
.dark .shadow-sm {
    box-shadow: 0 1px 2px 0 var(--shadow-color) !important;
}

.dark .shadow {
    box-shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color) !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color) !important;
}

/* Ring focus */
.dark .ring-gray-300 {
    --tw-ring-color: var(--border-color) !important;
}
