/* Sistema de Temas para Blog de Notícias */

/* Variáveis CSS para cada tema */
:root {
    /* Tema Azul (Padrão) */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #007bff;
    --header-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --button-primary: #007bff;
    --button-hover: #0056b3;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Verde */
.theme-verde {
    --primary-color: #56ab2f;
    --secondary-color: #a8e6cf;
    --accent-color: #28a745;
    --header-gradient: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
    --button-primary: #28a745;
    --button-hover: #1e7e34;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Roxo */
.theme-roxo {
    --primary-color: #8e2de2;
    --secondary-color: #4a00e0;
    --accent-color: #6f42c1;
    --header-gradient: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%);
    --button-primary: #6f42c1;
    --button-hover: #5a32a3;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Vermelho */
.theme-vermelho {
    --primary-color: #ff416c;
    --secondary-color: #ff4b2b;
    --accent-color: #dc3545;
    --header-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    --button-primary: #dc3545;
    --button-hover: #c82333;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Laranja */
.theme-laranja {
    --primary-color: #ff9a9e;
    --secondary-color: #fecfef;
    --accent-color: #fd7e14;
    --header-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --button-primary: #fd7e14;
    --button-hover: #e55a00;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Cinza */
.theme-cinza {
    --primary-color: #bdc3c7;
    --secondary-color: #2c3e50;
    --accent-color: #6c757d;
    --header-gradient: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
    --button-primary: #6c757d;
    --button-hover: #545b62;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Rosa */
.theme-rosa {
    --primary-color: #ffecd2;
    --secondary-color: #fcb69f;
    --accent-color: #e83e8c;
    --header-gradient: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --button-primary: #e83e8c;
    --button-hover: #d91a72;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Tema Azul Marinho */
.theme-azul-marinho {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #1e3a8a;
    --header-gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    --button-primary: #1e3a8a;
    --button-hover: #1e40af;
    --text-primary: #333;
    --text-secondary: #666;
    --background-light: #f8f9fa;
    --border-color: #dee2e6;
}

/* Aplicação das variáveis CSS */
.header {
    background: var(--header-gradient) !important;
}

.btn-primary {
    background-color: var(--button-primary) !important;
    border-color: var(--button-primary) !important;
}

.btn-primary:hover {
    background-color: var(--button-hover) !important;
    border-color: var(--button-hover) !important;
}

.bg-primary {
    background-color: var(--button-primary) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.border-primary {
    border-color: var(--button-primary) !important;
}

/* Cards com tema */
.card {
    border-color: var(--border-color);
}

.card-header {
    background-color: var(--background-light);
    border-bottom-color: var(--border-color);
}

/* Sidebar específica do admin - apenas quando dentro de .admin-container */
.admin-container .sidebar {
    background: var(--header-gradient) !important;
    min-height: 100vh !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 250px !important;
    z-index: 1000 !important;
}

.admin-container .sidebar .nav-link {
    color: rgba(255,255,255,0.8) !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    margin: 2px 10px !important;
    transition: all 0.3s ease !important;
}

.admin-container .sidebar .nav-link:hover {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
    transform: translateX(5px) !important;
}

.admin-container .sidebar .nav-link.active {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    transform: translateX(5px) !important;
}

/* Links com tema */
a {
    color: var(--button-primary);
}

a:hover {
    color: var(--button-hover);
}

/* Badges com tema */
.badge.bg-primary {
    background-color: var(--button-primary) !important;
}

/* Navegação com tema */
.navbar-nav .nav-link.active {
    color: var(--button-primary) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--button-hover) !important;
}

/* Footer com tema */
.footer {
    background-color: var(--background-light);
    border-top-color: var(--border-color);
}

/* Formulários com tema */
.form-control:focus {
    border-color: var(--button-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--button-primary), 0.25);
}

.form-select:focus {
    border-color: var(--button-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--button-primary), 0.25);
}

/* Botões de ação com tema */
.btn-outline-primary {
    color: var(--button-primary);
    border-color: var(--button-primary);
}

.btn-outline-primary:hover {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
}

/* Paginação com tema */
.page-link {
    color: var(--button-primary);
}

.page-link:hover {
    color: var(--button-hover);
    background-color: var(--background-light);
}

.page-item.active .page-link {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
}
