/* ========================================
   ESTILOS GLOBAIS DO SISTEMA
   Melhor contraste e espaçamento para todas as páginas
   ======================================== */

/* Espaçamento para navbar fixa - aplicado em todos os containers */
.blog-container,
.article-container,
.admin-container,
.home-container,
.dashboard-container {
    padding-top: 60px !important;
    margin-top: 0 !important;
}

/* Headers das páginas também precisam de espaçamento extra */
.blog-header,
.page-header,
.admin-header,
.article-header {
    margin-top: 0 !important;
    padding-top: 2rem !important;
}

.blog-title,
.page-header h1,
.admin-header h1 {
    margin-top: 0 !important;
}

/* Centralizar container de autenticação verticalmente */
.auth-container {
    min-height: calc(100vh - 100px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4rem 1rem !important;
    padding-top: 140px !important;
}

/* Auth Card com tema dark */
.auth-card {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(127, 23, 211, 0.2) !important;
    box-shadow: 0 10px 40px rgba(127, 23, 211, 0.3) !important;
}

.auth-title {
    color: #ffffff !important;
}

.auth-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Form labels */
.auth-container .form-group label {
    color: #ffffff !important;
}

/* Form inputs */
.auth-container .form-control {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.auth-container .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.auth-container .form-control:focus {
    border-color: #7F17D3 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(127, 23, 211, 0.2) !important;
}

/* Checkbox label */
.auth-container .form-check-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Auth footer */
.auth-footer {
    color: rgba(255, 255, 255, 0.7) !important;
}

.auth-footer a {
    color: #7F17D3 !important;
}

.auth-footer a:hover {
    color: #9b3cef !important;
}

/* Divisor entre login tradicional e OAuth */
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.25rem 0;
    color: rgba(255, 255, 255, 0.4);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.auth-divider span {
    padding: 0 0.75rem;
    font-size: 0.85rem;
}

/* Botão de login com Google */
.btn-google {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    background: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    font-weight: 500 !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    text-decoration: none !important;
}

.btn-google:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    color: #3c4043 !important;
}

.google-icon {
    flex-shrink: 0;
}

/* Blog Header - Melhor Contraste */
.blog-title {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 1rem !important;
}

.blog-subtitle {
    font-size: 1.25rem !important;
    color: #e0e0e0 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

.blog-header {
    text-align: center !important;
    padding: 3rem 0 !important;
}