/* ======================
   SISTEMA DE TEMAS PADRONIZADO - BASEADO NO GERADOR DE CRIATIVOS
   ====================== */

/* Tema Claro - Exatamente como no gerador-de-criativos.css */
[data-theme="light"], :root {
    /* Background principal com gradiente azul */
    --background-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --body-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Textos sobre o fundo gradiente */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-headings: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-light: #ffffff;
    
    /* Textos sobre fundos de cards/janelas */
    --text-on-window: #333333;
    
    /* Cards e janelas com glassmorphism */
    --card-background: rgba(255, 255, 255, 0.15);
    --card-background-hover: rgba(255, 255, 255, 0.25);
    --surface-color: rgba(255, 255, 255, 0.15);
    --content-window-bg: rgba(255, 255, 255, 0.15);
    --content-window-backdrop-filter: blur(12px);
    --content-window-border: rgba(255, 255, 255, 0.25);
    --content-window-shadow: 0 20px 40px rgba(0,0,0,0.15);
    
    /* Sidebar tema claro - CORRIGIR */
    --sidebar-bg: rgba(68, 56, 180, 0.25);
    --sidebar-text: rgba(255, 255, 255, 0.8);
    --sidebar-text-hover: #ffffff;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.15);
    --sidebar-title-color: #ffffff;
    --sidebar-footer-bg: rgba(68, 56, 180, 0.25);
    --sidebar-icon-color: rgba(255, 255, 255, 0.7);
    --sidebar-icon-hover-color: #ffffff;
    --sidebar-icon-hover-bg: rgba(255, 255, 255, 0.2);
    
    /* Top bar */
    --top-bar-bg: rgba(255, 255, 255, 0.08);
    --top-bar-border: rgba(255, 255, 255, 0.15);
    --top-bar-shadow: rgba(0,0,0,0.1);
    --top-bar-text-color: #efefff;
    
    /* Inputs */
    --input-background: rgba(255,255,255,0.1);
    --input-border: rgba(255,255,255,0.2);
    --input-text-color: #ffffff;
    --input-placeholder-color: rgba(255,255,255,0.6);
    --input-focus-border: #ff8c42;
    --input-focus-bg: rgba(255,255,255,0.2);
    --input-focus-shadow: 0 0 0 3px rgba(255, 140, 66, 0.15);
    
    /* Botões */
    --button-primary-bg: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    --button-primary-text: white;
    --button-secondary-bg: rgba(255,255,255,0.2);
    --button-secondary-text: white;
    --button-secondary-border: rgba(255,255,255,0.35);
    
    /* Cores primárias para compatibilidade */
    --primary-color: #ff6b6b;
    --primary-color-hover: #ee5a24;
    --primary-color-light: rgba(255, 107, 107, 0.15);
    --primary-color-alpha: rgba(255, 107, 107, 0.15);
    --secondary-color: #ff8c42;
    --accent-color: #ff8c42;
    --success-color: #5CB85C;
    --warning-color: #F0AD4E;
    --error-color: #D9534F;
    
    /* Bordas */
    --border-color: rgba(255, 255, 255, 0.25);
    --border-color-light: rgba(255, 255, 255, 0.15);
    
    /* Sombras */
    --shadow-small: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-medium: 0 8px 16px rgba(0,0,0,0.15);
    --shadow-large: 0 20px 40px rgba(0,0,0,0.15);
    
    /* Gradientes */
    --gradient-primary: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Variantes de cards */
    --card-bg-variant-1: hsla(233, 50%, 100%, 0.15);
    --card-bg-variant-2: hsla(250, 50%, 100%, 0.18);
    --card-bg-variant-3: hsla(265, 50%, 100%, 0.15);
    --card-bg-variant-4: hsla(280, 50%, 100%, 0.18);
    
    /* Logo branca no tema claro */
    --logo-filter: brightness(0) invert(1);
}

/* Tema Escuro - BASEADO NA IMAGEM */
[data-theme="dark"] {
    /* Background escuro como na imagem */
    --background-color: #0f0f0f;
    --body-bg: #0f0f0f;
    
    /* Textos tema escuro */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-headings: #ffffff;
    --text-muted: #757575;
    --text-light: #ffffff;
    --text-on-window: #ffffff;
    
    /* Cards escuros com glassmorphism como na imagem */
    --card-background: rgba(25, 25, 25, 0.8);
    --card-background-hover: rgba(35, 35, 35, 0.9);
    --surface-color: rgba(25, 25, 25, 0.8);
    --content-window-bg: rgba(25, 25, 25, 0.8);
    --content-window-backdrop-filter: blur(20px);
    --content-window-border: rgba(255, 255, 255, 0.1);
    --content-window-shadow: 0 25px 50px rgba(0,0,0,0.5);
    
    /* Sidebar escura como na imagem */
    --sidebar-bg: rgba(20, 20, 20, 0.9);
    --sidebar-text: #a0a0a0;
    --sidebar-text-hover: #ffffff;
    --sidebar-bg-hover: rgba(40, 40, 40, 0.8);
    --sidebar-title-color: #ffffff;
    --sidebar-footer-bg: rgba(15, 15, 15, 0.95);
    --sidebar-icon-color: #a0a0a0;
    --sidebar-icon-hover-color: #ffffff;
    --sidebar-icon-hover-bg: rgba(50, 50, 50, 0.8);
    
    /* Top bar escura */
    --top-bar-bg: rgba(20, 20, 20, 0.9);
    --top-bar-border: rgba(255, 255, 255, 0.1);
    --top-bar-shadow: rgba(0,0,0,0.5);
    --top-bar-text-color: #ffffff;
    
    /* Inputs escuros */
    --input-background: rgba(30, 30, 30, 0.8);
    --input-border: rgba(255, 255, 255, 0.15);
    --input-text-color: #ffffff;
    --input-placeholder-color: rgba(255, 255, 255, 0.4);
    --input-focus-border: #00ff88;
    --input-focus-bg: rgba(30, 30, 30, 0.9);
    --input-focus-shadow: 0 0 0 3px rgba(0, 255, 136, 0.2);
    
    /* Botões escuros com verde como na imagem */
    --button-primary-bg: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    --button-primary-text: #000000;
    --button-secondary-bg: rgba(40, 40, 40, 0.8);
    --button-secondary-text: #ffffff;
    --button-secondary-border: rgba(255, 255, 255, 0.2);
    
    /* Cores primárias com verde da imagem */
    --primary-color: #00ff88;
    --primary-color-hover: #00cc6a;
    --primary-color-light: rgba(0, 255, 136, 0.15);
    --primary-color-alpha: rgba(0, 255, 136, 0.15);
    --secondary-color: #ffff00;
    --accent-color: #00ff88;
    --success-color: #00ff88;
    --warning-color: #ffff00;
    --error-color: #ff4444;
    
    /* Bordas escuras */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.05);
    
    /* Sombras intensas como na imagem */
    --shadow-small: 0 5px 15px rgba(0,0,0,0.4);
    --shadow-medium: 0 15px 35px rgba(0,0,0,0.5);
    --shadow-large: 0 25px 50px rgba(0,0,0,0.6);
    
    /* Gradientes escuros */
    --gradient-primary: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    --gradient-secondary: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    
    /* Cards com variações escuras e brilhos coloridos */
    --card-bg-variant-1: rgba(25, 25, 25, 0.8);
    --card-bg-variant-2: rgba(25, 25, 25, 0.85);
    --card-bg-variant-3: rgba(25, 25, 25, 0.8);
    --card-bg-variant-4: rgba(25, 25, 25, 0.85);
    
    /* Logo branca */
    --logo-filter: brightness(0) invert(1);
}

/* Configurações globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    transition: all 0.3s ease;
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--body-bg);
    color: var(--text-primary);
    transition: all 0.3s ease;
    line-height: 1.6;
    min-height: 100vh;
}

/* Botão de toggle do tema */
.theme-toggle-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
}

.theme-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--card-background);
    backdrop-filter: var(--content-window-backdrop-filter);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-large);
    background: var(--card-background-hover);
}

.theme-toggle .light-icon,
.theme-toggle .dark-icon {
    position: absolute;
    transition: all 0.3s ease;
}

/* Ícones do tema */
[data-theme="light"] .theme-toggle .light-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

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

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

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

/* Botão de toggle do tema - APENAS NO LOGIN */
.login-page .theme-toggle-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
}

.login-page .theme-toggle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--card-background);
    backdrop-filter: var(--content-window-backdrop-filter);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow: hidden;
}

.login-page .theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-large);
    background: var(--card-background-hover);
}

.login-page .theme-toggle .light-icon,
.login-page .theme-toggle .dark-icon {
    position: absolute;
    transition: all 0.3s ease;
}

/* Ícones do tema - APENAS NO LOGIN */
.login-page[data-theme="light"] .theme-toggle .light-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.login-page[data-theme="light"] .theme-toggle .dark-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0.5);
}

.login-page[data-theme="dark"] .theme-toggle .light-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
}

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

/* Responsive - APENAS NO LOGIN */
@media (max-width: 768px) {
    .login-page .theme-toggle-container {
        top: 1rem;
        right: 1rem;
    }
    
    .login-page .theme-toggle {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

/* Remover o botão de tema das outras páginas */
.theme-toggle-container:not(.login-page .theme-toggle-container) {
    display: none !important;
}