/**
 * Dark mode específico
 */
 
/* Forçar transições suaves em mudanças de tema */
html {
    transition: color-scheme 0.3s ease;
}

html, body, div, header, nav, main, footer, button, input, textarea, select,
.kanban-stage, .kanban-task, .task-modal, .dark-mode-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Cores para modo escuro */
:root {
    --dark-primary: #111827;
    --dark-secondary: #1f2937;
    --dark-tertiary: #374151;
    --dark-border: #4b5563;
    --dark-text: #f9fafb;
    --dark-text-secondary: #d1d5db;
    --dark-text-muted: #9ca3af;
    --dark-accent: #6a00f5; /* laranja */
    --dark-accent-hover: #6a00f5;
}

html.dark {
    color-scheme: dark;
}

/* Reset forçado para classes específicas do Tailwind no modo escuro */
.dark .bg-white {
    background-color: var(--dark-secondary) !important;
}

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

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

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

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

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

.dark .text-gray-900, 
.dark .text-black {
    color: var(--dark-text) !important;
}

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

/* Botões */
.dark .bg-orange-500, 
.dark .bg-orange-600 {
    background-color: var(--dark-accent) !important;
}

.dark .bg-orange-500:hover, 
.dark .bg-orange-600:hover {
    background-color: var(--dark-accent-hover) !important;
}

/* Kanban específico */
.dark .kanban-stage {
    background-color: var(--dark-secondary);
    border-color: var(--dark-border);
}

.dark .kanban-task {
    background-color: var(--dark-tertiary);
    border-color: var(--dark-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark .kanban-task:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Modal */
.dark .task-modal {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark .task-modal .bg-white {
    background-color: var(--dark-secondary) !important;
}

/* Inputs */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--dark-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

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

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
}

/* Scrollbars */
.dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.dark ::-webkit-scrollbar-track {
    background-color: var(--dark-tertiary);
    border-radius: 6px;
}

.dark ::-webkit-scrollbar-thumb {
    background-color: var(--dark-border);
    border-radius: 6px;
    border: 3px solid var(--dark-tertiary);
}

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

/* Ícones de alternância de tema */
.dark #light-icon {
    display: block !important;
}

.dark #dark-icon {
    display: none !important;
}