/**
 * OrionCMS - Dark Theme (#000000)
 * Theme sombre professionnel pour l'espace client
 * Compatible avec toutes les pages client et documentation
 */

/* ===== Variables CSS pour le thème dark ===== */
:root {
    --dark-bg-primary: #000000;
    --dark-bg-secondary: #0a0a0a;
    --dark-bg-tertiary: #111111;
    --dark-bg-card: #0d0d0d;
    --dark-bg-hover: #1a1a1a;
    --dark-bg-input: #0a0a0a;
    
    --dark-border-primary: #1f1f1f;
    --dark-border-secondary: #2a2a2a;
    --dark-border-input: #333333;
    
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #a0a0a0;
    --dark-text-muted: #666666;
    
    --dark-accent-blue: #3b82f6;
    --dark-accent-green: #22c55e;
    --dark-accent-red: #ef4444;
    --dark-accent-yellow: #eab308;
    --dark-accent-purple: #a855f7;
}

/* ===== Application du thème dark ===== */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Body et conteneurs principaux */
[data-theme="dark"] body,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Sidebar */
[data-theme="dark"] #sidebar,
[data-theme="dark"] #sidebar.bg-white {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] #sidebar .border-gray-50,
[data-theme="dark"] #sidebar .border-gray-100 {
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] #sidebar .text-gray-900 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] #sidebar .text-gray-600,
[data-theme="dark"] #sidebar .text-gray-500 {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] #sidebar a:hover,
[data-theme="dark"] #sidebar .hover\:bg-blue-50:hover,
[data-theme="dark"] #sidebar .hover\:bg-green-50:hover,
[data-theme="dark"] #sidebar .hover\:bg-red-50:hover,
[data-theme="dark"] #sidebar .hover\:bg-purple-50:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* Dropdown langue dans sidebar */
[data-theme="dark"] #sidebar .bg-white.border-gray-200,
[data-theme="dark"] #sidebar .group\/lang > div:last-child {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-secondary) !important;
}

/* Bouton menu mobile */
[data-theme="dark"] #mobile-menu-button,
[data-theme="dark"] #mobile-menu-button.bg-white {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-secondary) !important;
    color: var(--dark-text-primary) !important;
}

/* Overlay mobile */
[data-theme="dark"] #sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ===== Cartes et conteneurs ===== */
[data-theme="dark"] .bg-white {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Bordures */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dark-border-primary) !important;
}

/* ===== Textes ===== */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 {
    color: var(--dark-text-muted) !important;
}

/* ===== Formulaires ===== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border-input) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Labels */
[data-theme="dark"] label {
    color: var(--dark-text-secondary) !important;
}

/* ===== Boutons ===== */
/* Boutons primaires (restent colorés) */
[data-theme="dark"] .bg-blue-600,
[data-theme="dark"] .bg-blue-700 {
    background-color: var(--dark-accent-blue) !important;
}

[data-theme="dark"] .bg-green-600,
[data-theme="dark"] .bg-green-700 {
    background-color: var(--dark-accent-green) !important;
}

[data-theme="dark"] .bg-red-600,
[data-theme="dark"] .bg-red-700 {
    background-color: var(--dark-accent-red) !important;
}

/* Boutons hover sur fond gris */
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* ===== Badges et status ===== */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

[data-theme="dark"] .bg-yellow-50,
[data-theme="dark"] .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.15) !important;
}

[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

[data-theme="dark"] .bg-purple-50,
[data-theme="dark"] .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.15) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background-color: var(--dark-bg-tertiary) !important;
}

/* ===== Icônes ===== */
[data-theme="dark"] .text-gray-400 svg,
[data-theme="dark"] svg.text-gray-400 {
    color: var(--dark-text-muted) !important;
}

/* ===== Tables ===== */
[data-theme="dark"] table {
    background-color: var(--dark-bg-card) !important;
}

[data-theme="dark"] thead {
    background-color: var(--dark-bg-tertiary) !important;
}

[data-theme="dark"] th {
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] td {
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] tbody tr:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* ===== Onglets et navigation ===== */
[data-theme="dark"] .border-b-2.border-transparent {
    border-color: transparent !important;
}

[data-theme="dark"] nav a.border-transparent:hover {
    border-color: var(--dark-border-secondary) !important;
}

/* ===== Gradients ===== */
[data-theme="dark"] .bg-gradient-to-r.from-blue-600,
[data-theme="dark"] .bg-gradient-to-r.from-blue-600.to-blue-700 {
    background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-blue-50,
[data-theme="dark"] .bg-gradient-to-r.from-blue-50.to-gray-50 {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.1), var(--dark-bg-tertiary)) !important;
}

/* ===== Chat / Messages (Tickets) ===== */
[data-theme="dark"] #messagesContainer,
[data-theme="dark"] .bg-gray-50#messagesContainer {
    background-color: var(--dark-bg-primary) !important;
}

[data-theme="dark"] .message-item .bg-white {
    background-color: var(--dark-bg-card) !important;
}

[data-theme="dark"] .message-item .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

[data-theme="dark"] .message-item .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

/* ===== Annonces ===== */
[data-theme="dark"] .announcement-item {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Documentation ===== */
[data-theme="dark"] .prose,
[data-theme="dark"] .prose-lg {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .prose h1,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4,
[data-theme="dark"] .prose h5,
[data-theme="dark"] .prose h6 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .prose p,
[data-theme="dark"] .prose li {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .prose code {
    background-color: var(--dark-bg-tertiary) !important;
    color: #f472b6 !important;
}

[data-theme="dark"] .prose pre {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .prose blockquote {
    border-left-color: var(--dark-accent-blue) !important;
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .prose a {
    color: var(--dark-accent-blue) !important;
}

[data-theme="dark"] .prose hr {
    border-color: var(--dark-border-primary) !important;
}

/* ===== Scrollbar ===== */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dark-border-secondary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

/* ===== Sélection de texte ===== */
[data-theme="dark"] ::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: var(--dark-text-primary);
}

/* ===== Modals ===== */
[data-theme="dark"] .modal-content,
[data-theme="dark"] [class*="modal"] .bg-white {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] [class*="modal-overlay"] {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ===== Alertes ===== */
[data-theme="dark"] .alert,
[data-theme="dark"] [class*="alert-"] {
    border-color: var(--dark-border-secondary) !important;
}

/* ===== Tooltips ===== */
[data-theme="dark"] [class*="tooltip"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Progress bars ===== */
[data-theme="dark"] .bg-gray-200[class*="progress"],
[data-theme="dark"] [class*="progress-bar"] {
    background-color: var(--dark-bg-tertiary) !important;
}

/* ===== Service renders (Pterodactyl, Proxmox, Plesk) ===== */
[data-theme="dark"] .server-card,
[data-theme="dark"] .resource-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Sticky elements ===== */
[data-theme="dark"] .sticky {
    background-color: var(--dark-bg-card) !important;
}

/* ===== Dropdowns ===== */
[data-theme="dark"] [class*="dropdown"] .bg-white,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-secondary) !important;
}

[data-theme="dark"] [class*="dropdown"] a:hover,
[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* ===== File uploads ===== */
[data-theme="dark"] .file-upload,
[data-theme="dark"] [class*="dropzone"] {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-secondary) !important;
}

/* ===== Empty states ===== */
[data-theme="dark"] .empty-state {
    color: var(--dark-text-muted) !important;
}

/* ===== Animations pour le switch de thème ===== */
body,
body * {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.2s ease,
                box-shadow 0.3s ease;
}

/* Exclusion pour les animations de performance */
[data-theme="dark"] svg,
[data-theme="dark"] img,
[data-theme="dark"] video {
    transition: none !important;
}

/* ===== Bouton de changement de thème ===== */
.theme-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    border: none;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                opacity 0.3s ease;
}

.theme-toggle-btn .sun-icon {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    color: #fbbf24;
}

.theme-toggle-btn .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #6b7280;
}

[data-theme="dark"] .theme-toggle-btn .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle-btn .moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* Hover effect for theme toggle in sidebar */
[data-theme="dark"] .group\/theme:hover {
    background-color: rgba(251, 191, 36, 0.1) !important;
}

[data-theme="dark"] .group\/theme:hover .theme-toggle-btn .sun-icon {
    color: #fbbf24 !important;
}

/* ===== Responsive adjustments ===== */
@media (max-width: 768px) {
    [data-theme="dark"] #sidebar {
        background-color: var(--dark-bg-secondary) !important;
    }
}

/* ===== Fix pour les éléments spécifiques Tailwind ===== */
[data-theme="dark"] .ring-blue-500 {
    --tw-ring-color: var(--dark-accent-blue) !important;
}

[data-theme="dark"] .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--dark-accent-blue) !important;
}

/* ===== Fixes pour z-index et overlay ===== */
[data-theme="dark"] .z-50,
[data-theme="dark"] .z-40 {
    background-color: inherit;
}

/* ===== Partner page specific ===== */
[data-theme="dark"] .partner-stats,
[data-theme="dark"] .affiliate-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Wallet page specific ===== */
[data-theme="dark"] .wallet-container {
    background-color: transparent !important;
    border-color: var(--dark-border-secondary) !important;
}

/* ===== Order page specific ===== */
[data-theme="dark"] .order-summary,
[data-theme="dark"] .pricing-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Status page specific ===== */
[data-theme="dark"] .status-indicator {
    box-shadow: 0 0 10px currentColor;
}

/* ===== Ticket Chat specific ===== */
[data-theme="dark"] #messagesContainer::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #333333, #444444);
}

[data-theme="dark"] #messagesContainer::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #444444, #555555);
}

[data-theme="dark"] #message:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    border-color: var(--dark-accent-blue);
}

[data-theme="dark"] .message-item:hover .rounded-2xl {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #templatesPanel {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Service Renders (Proxmox, Pterodactyl, Plesk, None) ===== */
[data-theme="dark"] .card-modern {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .os-icon {
    background-color: var(--dark-bg-tertiary) !important;
}

[data-theme="dark"] .status-indicator.status-running {
    color: #22c55e !important;
}

[data-theme="dark"] .status-indicator.status-stopped {
    color: #ef4444 !important;
}

[data-theme="dark"] .status-indicator.status-other {
    color: #eab308 !important;
}

/* ===== Resource Cards ===== */
[data-theme="dark"] .resource-card,
[data-theme="dark"] .stat-card {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Console/Terminal styles ===== */
[data-theme="dark"] .console-output,
[data-theme="dark"] .terminal-output {
    background-color: #0a0a0a !important;
    color: #00ff00 !important;
}

/* ===== Renew section ===== */
[data-theme="dark"] .renew-section,
[data-theme="dark"] .renewal-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

/* ===== Folders CSS overrides ===== */
[data-theme="dark"] .folder-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .folder-card:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* ===== Code blocks ===== */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--dark-bg-secondary) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] pre code {
    background-color: transparent !important;
}

/* ===== Documentation specific ===== */
[data-theme="dark"] .hljs {
    background-color: var(--dark-bg-secondary) !important;
    color: #e2e8f0 !important;
}

/* ===== Upgrade service specific ===== */
[data-theme="dark"] .upgrade-option,
[data-theme="dark"] .plan-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .upgrade-option:hover,
[data-theme="dark"] .plan-card:hover {
    border-color: var(--dark-accent-blue) !important;
    background-color: var(--dark-bg-hover) !important;
}

[data-theme="dark"] .upgrade-option.selected,
[data-theme="dark"] .plan-card.selected {
    border-color: var(--dark-accent-blue) !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ===== Payment method cards ===== */
[data-theme="dark"] .payment-method-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-primary) !important;
}

[data-theme="dark"] .payment-method-card:hover {
    border-color: var(--dark-border-secondary) !important;
}

[data-theme="dark"] .payment-method-card.selected {
    border-color: var(--dark-accent-blue) !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ===== Empty/loading states ===== */
[data-theme="dark"] .loading-spinner {
    border-color: var(--dark-border-secondary);
    border-top-color: var(--dark-accent-blue);
}

[data-theme="dark"] .empty-state-icon {
    background-color: var(--dark-bg-tertiary) !important;
}

/* ===== Highlight.js for dark mode ===== */
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-built_in {
    color: #c678dd !important;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-attr {
    color: #98c379 !important;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal {
    color: #d19a66 !important;
}

[data-theme="dark"] .hljs-comment {
    color: #5c6370 !important;
}

[data-theme="dark"] .hljs-function,
[data-theme="dark"] .hljs-title {
    color: #61afef !important;
}

/* ===== Link styling ===== */
[data-theme="dark"] a:not(.bg-blue-600):not(.bg-green-600):not(.bg-red-600):not([class*="text-white"]) {
    color: var(--dark-accent-blue);
}

[data-theme="dark"] a:not(.bg-blue-600):not(.bg-green-600):not(.bg-red-600):not([class*="text-white"]):hover {
    color: #60a5fa;
}

/* Override for specific navigation links */
[data-theme="dark"] #sidebar a,
[data-theme="dark"] nav a {
    color: inherit;
}

/* ===== Focus states ===== */
[data-theme="dark"] *:focus {
    outline-color: var(--dark-accent-blue) !important;
}

[data-theme="dark"] *:focus-visible {
    outline-color: var(--dark-accent-blue) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}