/* ==========================================================================
   pages/login.css — Página de login (marca WifiMaxx magenta).
   Re-skin v2: gradiente magenta→laranja sobre fundo ameixa; card de vidro
   escuro; botão de marca em gradiente. Mantém a marcação Bootstrap
   (form-floating) e os hooks de login.js. Login é sempre tema escuro.
   ========================================================================== */

/* Impede a inflação automática de fonte do Android (text autosizing), que
   no login deixa o texto "com zoom" e estoura o botão de download. O iOS não
   faz isso. login.css só carrega na página de login, então o escopo é restrito. */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background:
        radial-gradient(900px 600px at 80% -10%, rgba(var(--wmx-magenta-rgb), 0.22), transparent 60%),
        radial-gradient(700px 500px at -5% 110%, rgba(var(--wmx-orange-rgb), 0.18), transparent 55%),
        linear-gradient(160deg, #17131f 0%, #0d0b15 100%);
    background-attachment: fixed;
}


/* =========================================================
   Card de login
   ========================================================= */
.login-card {
    width: 100%;
    max-width: 420px;
    margin: 16px;
    background: linear-gradient(135deg, rgba(30, 24, 48, 0.96), rgba(20, 16, 32, 0.98));
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--wmx-magenta-rgb), 0.08);
    overflow: hidden;
    animation: login-card-in 0.35s ease-out both;
}

@keyframes login-card-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-header {
    padding: var(--space-2xl) var(--space-xl) var(--space-lg);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(160deg, rgba(var(--wmx-magenta-rgb), 0.10), transparent);
}

.login-body { padding: var(--space-xl); }


/* =========================================================
   Logo + tipografia do header
   ========================================================= */
.logo-icon { font-size: 3rem; margin-bottom: var(--space-md); color: var(--color-primary); }

.logo-image {
    max-width: 170px;
    height: 56px;
    width: auto;
    margin-bottom: var(--space-sm);
    object-fit: contain;
    /* logo-dark.png já é a marca colorida com wordmark branco (card escuro) */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.login-header__title {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    letter-spacing: 0.14em;
    color: var(--text-primary);
    margin-top: var(--space-xs);
}
.login-header__subtitle { font-size: var(--text-sm); color: var(--text-secondary); }


/* =========================================================
   Form floating (Bootstrap) — campos escuros com foco magenta
   ========================================================= */
.login-card .form-floating { margin-bottom: var(--space-md); }

.login-card .form-floating > .form-control {
    height: calc(3.4rem + 2px);
    padding: 1.5rem 0.85rem 0.5rem;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.login-card .form-floating > .form-control::placeholder { color: transparent; }

.login-card .form-floating > label {
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 1rem 0.85rem;
}

.login-card .form-floating > .form-control:focus ~ label,
.login-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--color-primary);
    font-size: 0.7rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 1;
    transform: scale(.92) translateY(-0.6rem) translateX(0.1rem);
}

.login-card .form-floating > .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--wmx-magenta-rgb), 0.2);
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Autofill: mascara o fundo amarelo do browser. */
.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus,
.login-card .form-control:autofill,
.login-card .form-control:autofill:hover,
.login-card .form-control:autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #1b1530 inset;
    -webkit-text-fill-color: var(--text-primary);
    border: 1px solid var(--border-medium);
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}


/* =========================================================
   Checkbox "Lembrar meu login"
   ========================================================= */
.login-card .form-check { margin-bottom: var(--space-md); }
/* appearance:none + SVG de check próprios — não dependem do Bootstrap do CDN
   (que pode ser bloqueado pelo Tracking Prevention do navegador). */
.login-card .form-check-input {
    width: 18px; height: 18px;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-input);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    cursor: pointer;
}
.login-card .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.login-card .form-check-input:focus { box-shadow: var(--shadow-focus); border-color: var(--color-primary); }
.login-remember-label { font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; }


/* =========================================================
   Botão de login — superfície de marca (gradiente)
   ========================================================= */
.btn-login {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--wmx-gradient);
    color: #fff;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
    box-shadow: 0 6px 20px rgba(var(--wmx-magenta-rgb), 0.35);
    transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn-login:hover {
    color: #fff;
    filter: brightness(1.07);
    box-shadow: var(--shadow-brand-glow);
    transform: translateY(-2px);
}

.btn-login:disabled { opacity: 0.8; transform: none; cursor: not-allowed; filter: grayscale(20%); }
.btn-login .spinner-border-sm { width: 1rem; height: 1rem; }


/* =========================================================
   Link "Esqueci minha senha"
   ========================================================= */
.login-forgot {
    text-align: center;
    margin-top: var(--space-sm);
}
.login-forgot a {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.login-forgot a:hover { color: var(--color-primary); }


/* =========================================================
   Alerts e toast
   ========================================================= */
.login-card .alert { border-radius: var(--radius-md); border: 1px solid var(--border-medium); }
.login-card .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); }

.login-alert-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-toast);
    max-width: 400px;
}


/* =========================================================
   App download (oculto por padrão, exibido via JS)
   ========================================================= */
.login-app-download { display: none; }
.login-app-download hr {
    border: none;
    height: 1px;
    background: var(--border-light);
    opacity: 1;
    margin: var(--space-lg) 0 var(--space-md);
}
.login-app-download .text-muted { color: var(--text-muted) !important; }
.login-app-download__version { font-size: 0.7rem; opacity: 0.85; }

/* Botão "Baixar App Android" à prova de overflow. A base .btn é inline-flex com
   white-space:nowrap e altura fixa, o que jogava ícone + rótulo + "versão mais
   recente" todos na mesma linha, estourando à direita. Aqui liberamos a altura,
   permitimos quebra e empurramos a linha da versão para baixo. */
#downloadAppLink {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    font-size: var(--text-md);
    padding: 0.6rem 0.75rem;
    overflow-wrap: anywhere;
}
#downloadAppLink .login-app-download__version {
    flex-basis: 100%;
    width: 100%;
    margin-top: 2px;
}


/* =========================================================
   Rodapé do card
   ========================================================= */
.login-footer {
    text-align: center;
    padding: var(--space-md);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
}


/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 576px) {
    .logo-image { max-width: 120px; height: 48px; }
    .login-card { margin: 10px; border-radius: var(--radius-lg); }
    .login-header { padding: var(--space-xl) var(--space-lg) var(--space-md); }
    .login-body { padding: var(--space-lg); }
}


/* =========================================================
   Acessibilidade
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .login-card { animation: none; }
    .login-card .form-control, .btn-login { transition: none; }
    .btn-login:hover { transform: none; }
}