/* ===========================================
   SISTEMA DE TEMAS - SUPORTARE V2.0
   =========================================== */

/* CSS Custom Properties para Sistema de Temas */
:root {
    /* ==== LIGHT THEME (padrão) ==== */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8fafc;
    --theme-bg-tertiary: #f1f5f9;
    --theme-bg-card: #ffffff;
    --theme-bg-hover: #f1f5f9;
    --theme-bg-active: #e2e8f0;
    
    /* Texto */
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #64748b;
    --theme-text-tertiary: #94a3b8;
    --theme-text-inverse: #ffffff;
    
    /* Bordas */
    --theme-border-primary: #e2e8f0;
    --theme-border-secondary: #cbd5e1;
    --theme-border-tertiary: #f1f5f9;
    
    /* Sombras */
    --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --theme-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Cores do Sistema */
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    
    /* Estados */
    --theme-success: #10b981;
    --theme-success-bg: #d1fae5;
    --theme-success-border: #a7f3d0;
    
    --theme-warning: #f59e0b;
    --theme-warning-bg: #fef3c7;
    --theme-warning-border: #fde68a;
    
    --theme-error: #ef4444;
    --theme-error-bg: #fee2e2;
    --theme-error-border: #fecaca;
    
    --theme-info: #3b82f6;
    --theme-info-bg: #dbeafe;
    --theme-info-border: #bfdbfe;
    
    /* Header Gradient */
    --header-gradient: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
    --header-text: #ffffff;
    --header-text-secondary: rgba(255, 255, 255, 0.9);
    
    /* Transições */
    --theme-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --theme-transition-fast: all 0.15s ease-out;
    
    /* Blur Effects */
    --theme-blur: blur(20px);
    --theme-backdrop: rgba(255, 255, 255, 0.8);
}

/* ==== DARK THEME ==== */
[data-theme="dark"] {
    /* Backgrounds */
    --theme-bg-primary: #0f172a;
    --theme-bg-secondary: #1e293b;
    --theme-bg-tertiary: #334155;
    --theme-bg-card: #1e293b;
    --theme-bg-hover: #334155;
    --theme-bg-active: #475569;
    
    /* Texto */
    --theme-text-primary: #f8fafc;
    --theme-text-secondary: #cbd5e1;
    --theme-text-tertiary: #94a3b8;
    --theme-text-inverse: #1e293b;
    
    /* Bordas */
    --theme-border-primary: #334155;
    --theme-border-secondary: #475569;
    --theme-border-tertiary: #64748b;
    
    /* Sombras (mais sutis no dark) */
    --theme-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
    --theme-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6);
    
    /* Estados (cores ajustadas para dark) */
    --theme-success: #34d399;
    --theme-success-bg: #064e3b;
    --theme-success-border: #047857;
    
    --theme-warning: #fbbf24;
    --theme-warning-bg: #78350f;
    --theme-warning-border: #92400e;
    
    --theme-error: #f87171;
    --theme-error-bg: #7f1d1d;
    --theme-error-border: #991b1b;
    
    --theme-info: #60a5fa;
    --theme-info-bg: #1e3a8a;
    --theme-info-border: #1d4ed8;
    
    /* Header no Dark Mode */
    --header-gradient: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    --header-text: #f8fafc;
    --header-text-secondary: rgba(248, 250, 252, 0.8);
    
    /* Blur Effects */
    --theme-backdrop: rgba(15, 23, 42, 0.8);
}

/* ==== APLICAÇÃO DOS TEMAS ==== */

/* Base Elements */
body {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
    transition: var(--theme-transition);
}

/* Cards e Containers */
.theme-card {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-primary);
    box-shadow: var(--theme-shadow-md);
    transition: var(--theme-transition);
}

.theme-card:hover {
    background-color: var(--theme-bg-hover);
    box-shadow: var(--theme-shadow-lg);
}

/* Inputs e Form Elements */
.theme-input {
    background-color: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-primary);
    color: var(--theme-text-primary);
    transition: var(--theme-transition);
}

.theme-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    outline: none;
}

.theme-input::placeholder {
    color: var(--theme-text-tertiary);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: var(--theme-text-inverse);
    border: none;
    transition: var(--theme-transition);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    transform: translateY(-1px);
    box-shadow: var(--theme-shadow-lg);
}

.btn-secondary {
    background-color: var(--theme-bg-card);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-primary);
    transition: var(--theme-transition);
}

.btn-secondary:hover {
    background-color: var(--theme-bg-hover);
    border-color: var(--theme-border-secondary);
}

/* Navigation */
.theme-nav {
    background: var(--header-gradient);
    backdrop-filter: var(--theme-blur);
    border-bottom: 1px solid var(--theme-border-primary);
}

.nav-link {
    color: var(--header-text);
    transition: var(--theme-transition);
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--header-text);
}

/* Dropdowns */
.theme-dropdown {
    background: var(--theme-backdrop);
    backdrop-filter: var(--theme-blur);
    border: 1px solid var(--theme-border-primary);
    box-shadow: var(--theme-shadow-xl);
}

/* Tables */
.theme-table {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-primary);
}

.theme-table th {
    background-color: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
    border-bottom: 2px solid var(--theme-border-secondary);
}

.theme-table td {
    border-bottom: 1px solid var(--theme-border-primary);
    color: var(--theme-text-primary);
}

.theme-table tbody tr:hover {
    background-color: var(--theme-bg-hover);
}

/* Modais */
.theme-modal {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-primary);
    box-shadow: var(--theme-shadow-xl);
}

.theme-modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: var(--theme-blur);
}

/* Status Colors */
.status-success {
    background-color: var(--theme-success-bg);
    color: var(--theme-success);
    border: 1px solid var(--theme-success-border);
}

.status-warning {
    background-color: var(--theme-warning-bg);
    color: var(--theme-warning);
    border: 1px solid var(--theme-warning-border);
}

.status-error {
    background-color: var(--theme-error-bg);
    color: var(--theme-error);
    border: 1px solid var(--theme-error-border);
}

.status-info {
    background-color: var(--theme-info-bg);
    color: var(--theme-info);
    border: 1px solid var(--theme-info-border);
}

/* Theme Toggle Button */
.theme-toggle {
    position: relative;
    width: 50px;
    height: 25px;
    background-color: var(--theme-border-secondary);
    border-radius: 25px;
    cursor: pointer;
    transition: var(--theme-transition);
    border: 1px solid var(--theme-border-primary);
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    background-color: var(--theme-bg-primary);
    border-radius: 50%;
    transition: var(--theme-transition);
    box-shadow: var(--theme-shadow-sm);
}

[data-theme="dark"] .theme-toggle {
    background-color: var(--primary-600);
}

[data-theme="dark"] .theme-toggle::before {
    transform: translateX(25px);
    background-color: var(--theme-text-inverse);
}

.theme-toggle-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    transition: var(--theme-transition);
}

.theme-toggle-icon.sun {
    left: 6px;
    color: var(--theme-warning);
    opacity: 1;
}

.theme-toggle-icon.moon {
    right: 6px;
    color: var(--theme-text-tertiary);
    opacity: 0.3;
}

[data-theme="dark"] .theme-toggle-icon.sun {
    opacity: 0.3;
}

[data-theme="dark"] .theme-toggle-icon.moon {
    opacity: 1;
    color: var(--primary-300);
}

/* Scrollbars para Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

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

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

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--theme-border-tertiary);
}

/* Animações de Transição de Tema */
* {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Otimizações para elementos específicos */
.glass-effect {
    background: var(--theme-backdrop);
    backdrop-filter: var(--theme-blur);
    border: 1px solid var(--theme-border-primary);
}

/* Compatibilidade com Tailwind */
.bg-theme-primary { background-color: var(--theme-bg-primary) !important; }
.bg-theme-secondary { background-color: var(--theme-bg-secondary) !important; }
.bg-theme-card { background-color: var(--theme-bg-card) !important; }
.text-theme-primary { color: var(--theme-text-primary) !important; }
.text-theme-secondary { color: var(--theme-text-secondary) !important; }
.border-theme-primary { border-color: var(--theme-border-primary) !important; }

/* Estados específicos para componentes do sistema */
.ticket-card {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-primary);
    transition: var(--theme-transition);
}

.ticket-card:hover {
    box-shadow: var(--theme-shadow-lg);
    transform: translateY(-2px);
}

.sidebar {
    background-color: var(--theme-bg-card);
    border-right: 1px solid var(--theme-border-primary);
}

.dashboard-widget {
    background-color: var(--theme-bg-card);
    border: 1px solid var(--theme-border-primary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--theme-shadow-md);
    transition: var(--theme-transition);
}

.dashboard-widget:hover {
    box-shadow: var(--theme-shadow-lg);
}

/* Responsividade do Toggle */
@media (max-width: 768px) {
    .theme-toggle {
        width: 45px;
        height: 23px;
    }
    
    .theme-toggle::before {
        width: 17px;
        height: 17px;
    }
    
    [data-theme="dark"] .theme-toggle::before {
        transform: translateX(22px);
    }
}

/* Print Styles (sempre light) */
@media print {
    :root {
        --theme-bg-primary: #ffffff !important;
        --theme-bg-secondary: #ffffff !important;
        --theme-bg-card: #ffffff !important;
        --theme-text-primary: #000000 !important;
        --theme-text-secondary: #666666 !important;
        --theme-border-primary: #cccccc !important;
    }
}