/* ==========================================================================
   ARQUIVO: login.css
   ========================================================================== */

:root {
    --sys-bg:        #0F172A;
    --sys-text:      #F8FAFC;
    --login-bg-dark: #020617;
    --login-primary: #00c3ff;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--sys-bg); color: var(--sys-text); font-size: 14px; transition: background-color 0.3s, color 0.3s; }
a { text-decoration: none; color: inherit; transition: 0.2s; }

/* Botão Flutuante de Tema */
.theme-btn { position: absolute; top: 30px; right: 30px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 12px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); transition: 0.3s; }
.theme-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }

/* Estrutura Original do Login */
.login-container { display: flex; height: 100vh; width: 100%; background: var(--login-bg-dark); }
.login-image { flex: 1.4; background: url('/static/img/login.png') no-repeat center center; background-size: cover; position: relative; }
.login-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,6,23,0.25) 0%, rgba(2,6,23,0.95) 100%); }
.login-form-container { flex: 1; background: linear-gradient(180deg, #020617, #050b18); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; position: relative; }
.login-box { width: 100%; max-width: 420px; background: rgba(8, 16, 32, 0.85); backdrop-filter: blur(12px); border-radius: 16px; padding: 40px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 0 40px rgba(0, 195, 255, 0.1); }
.login-box h1 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.login-box h1 span { color: var(--login-primary); }
.login-box p { color: #9ca3af; font-size: 14px; margin-bottom: 30px; }
.login-box .input-group { margin-bottom: 20px; }
.login-box .input-group label { display: block; color: #cbd5f5; font-size: 14px; margin-bottom: 6px; }
.login-box .input-group input { width: 100%; padding: 12px 14px; border-radius: 8px; border: 1px solid #1e293b; background: #020617; color: #fff; outline: none; }
.login-box .input-group input:focus { border-color: var(--login-primary); }
.login-box button { width: 100%; padding: 14px; margin-top: 10px; background: var(--login-primary); border: none; border-radius: 10px; color: #fff; font-weight: 600; cursor: pointer; transition: 0.2s;}
.login-box button:hover { filter: brightness(1.1); }
.login-footer-links { margin-top: 20px; display: flex; justify-content: space-between; font-size: 14px; }
.text-highlight { color: var(--login-primary); font-weight: 600; }
.forgot-password { color: #64748b; }
.login-form-container footer { position: absolute; bottom: 20px; color: #64748b; font-size: 12px; }
@media (max-width: 900px) { .login-image { display: none; } }

/* ==========================================================================
   TEMA CLARO (LIGHT MODE) - LOGIN
   ========================================================================== */
body.light-mode {
    --login-bg-dark: #F8FAFC; /* Fundo principal claro */
    --login-primary: #0284C7; /* Azul Escuro Elegante */
    background: #F8FAFC;
}

body.light-mode .theme-btn { color: #0F172A; background: #E2E8F0; border-color: #CBD5E1; }
body.light-mode .theme-btn:hover { background: #CBD5E1; }
body.light-mode .login-form-container { background: #F8FAFC; }
body.light-mode .login-image::after { background: linear-gradient(90deg, rgba(248, 250, 252, 0.1) 0%, rgba(248, 250, 252, 1) 100%); }

body.light-mode .login-box { background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
body.light-mode .login-box h1 { color: #0F172A; }
body.light-mode .login-box p { color: #475569; }
body.light-mode .login-box .input-group label { color: #334155; }
body.light-mode .login-box .input-group input { background: #F1F5F9; border: 1px solid #CBD5E1; color: #0F172A; }
body.light-mode .login-box button { color: #FFFFFF; }