/* =====================================================
   Dr.Chat — Premium Dark Mode (Escopo ESTRITO de Login)
   Arquivo: /root/vendedor-digital/branding/drchat-theme.css
   Nenhuma regra vaza para o painel interno logado.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── FONTE (restrito ao container de autenticação) ── */
.auth-wrapper *,
.login-page *,
.login-box * {
    font-family: 'Inter', 'Segoe UI Variable', system-ui, sans-serif !important;
}

/* ── 1. FUNDO DA PÁGINA (apenas na tela de auth) ──── */
.auth-wrapper,
.login-page,
.flex.flex-col.w-full.min-h-screen {
    background: #0f172a !important;
    background-image: none !important;
}

/* ── 2. CARD DE LOGIN ─────────────────────────────── */
.login-box,
.bg-white.shadow,
.sm\:shadow-lg.sm\:rounded-lg,
.dark\:bg-n-solid-2 {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── 3. LOGO — background-image (max-height respeitado) ──────
   content: url() não respeita max-height, por isso usamos
   background-image no ::before para controlar o tamanho.
   Também ocultamos as logos nativas do Chatwoot.            */
.login-box img,
.brand-logo img,
img[alt="Chatwoot logo"],
img[alt="Dr.Chat"],
img.mx-auto,
.block.w-auto.h-8.mx-auto,
.hidden.w-auto.h-8.mx-auto,
.mx-auto.dark\:hidden,
.mx-auto.dark\:block {
    display: none !important;
}

/* Injeta a logo Dr. Junior via background-image (tamanho controlável) */
.login-box::before,
.sm\:shadow-lg.sm\:rounded-lg::before,
.bg-white.shadow::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 72px !important;
    background-image: url('/drjunior-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    margin: 0 auto 28px auto !important;
}

/* ── 4. TÍTULO (h2 "Bem-vindo ao Dr.Chat") ────────── */
.login-box h1,
.login-box h2,
.login-box h3,
h2.mt-6.text-3xl.font-medium,
.text-n-slate-12 {
    color: #f8fafc !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* ── 5. SUBTÍTULOS E TEXTOS SECUNDÁRIOS ───────────── */
.login-box p,
.text-n-slate-11 {
    color: #94a3b8 !important;
}

/* ── 6. LABELS ─────────────────────────────────────── */
.login-box label,
label {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

/* ── 7. INPUTS ─────────────────────────────────────── */
.login-box input,
input[type="email"],
input[type="password"],
input[type="text"] {
    background: #0f172a !important;
    border: 1px solid #475569 !important;
    border-radius: 6px !important;
    color: #f1f5f9 !important;
    padding: 11px 14px !important;
    font-size: 0.9rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input::placeholder {
    color: #475569 !important;
}

.login-box input:focus,
input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20) !important;
    outline: none !important;
}

/* ── 8. BOTÃO DE LOGIN ─────────────────────────────── */
.login-box button[type="submit"],
button[type="submit"],
form .w-full > button {
    background: #2563eb !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.login-box button[type="submit"]:hover,
button[type="submit"]:hover {
    background: #3b82f6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.40) !important;
}

/* ── 9. LINK "Esqueceu a senha?" ───────────────────── */
.login-box a.text-link,
a.text-link {
    color: #60a5fa !important;
    transition: color 0.2s !important;
}
a.text-link:hover { color: #93c5fd !important; }

/* ── 10. BOTÃO "Entrar com Google" ─────────────────── */
.login-box .ring-n-container,
.login-box .bg-n-background,
.bg-n-background,
.dark\:bg-n-solid-3 {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
    color: #e2e8f0 !important;
}