/* =============================================================
   TRIVIA - Sistema de Controle de Frotas
   Design System: Fleet Indigo
   Tela: Login
   ============================================================= */

/* --- Design System : variaveis obrigatorias do Fleet Indigo -- */
:root {
    --color-primary:    #2563eb;
    --color-secondary:  #6575AB;
    --color-neutral:    #757680;
    --color-bg-input:   #F3F4F6;

    /* Derivacoes internas (nao sobrepostas ao DS) */
    --color-primary-hover:  #1d4ed8;
    --color-text:           #1a1d2e;
    --color-border-input:   #e2e5ec;
    --color-card:           #ffffff;
    --color-success-bg:     #ecfdf5;
    --color-success-text:   #065f46;
    --color-error-bg:       #fef2f2;
    --color-error-text:     #b91c1c;
    --color-warning-bg:     #fffbeb;
    --color-warning-text:   #92400e;

    --card-radius:  18px;
    --input-radius: 10px;
    --input-height: 52px;
}

/* --- Reset ---------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--color-text);
}

a   { color: inherit; text-decoration: none; }
button,
input { font: inherit; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    line-height: 1;
    display: block;
}

/* --- Fundo da pagina ----------------------------------- */
/*
 * Gradiente radial suave:
 * azul/lilas claro no canto superior esquerdo  -> neutro
 * pessego/rosa claro no canto inferior direito -> neutro
 */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;

    background:
        /* Lilas/azul -- canto superior esquerdo */
        radial-gradient(ellipse 90% 95% at -8% -8%,   rgba(160, 188, 250, 0.75) 0%, transparent 52%),
        /* Pessego/coral -- canto inferior direito */
        radial-gradient(ellipse 75% 70% at 108% 108%,  rgba(248, 165, 130, 0.70) 0%, transparent 55%),
        /* Violeta -- canto superior direito */
        radial-gradient(ellipse 55% 50% at 108% -8%,   rgba(196, 175, 248, 0.55) 0%, transparent 52%),
        /* Verde-agua -- canto inferior esquerdo */
        radial-gradient(ellipse 50% 45% at -8% 108%,   rgba(140, 215, 200, 0.45) 0%, transparent 50%),
        /* Rosa suave -- centro */
        radial-gradient(ellipse 40% 35% at 50% 50%,    rgba(240, 180, 210, 0.20) 0%, transparent 60%),
        #dfe4f2;
}

/* --- Card : Glassmorphism ------------------------------ */
/* --- Card: branco puro, sem linhas, sem vidro --- */
.login-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow:
        0 8px 32px  rgba(17,  82, 212, 0.14),
        0 2px 8px   rgba(17,  82, 212, 0.08);
    padding: 48px 44px 40px;
    overflow: hidden;
}





/* Garante que todo conteudo fique acima do padrao */
.login-card > * {
    position: relative;
    z-index: 1;
}

/* --- Logo ---------------------------------------------- */
.card-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 32px;
}

.logo-img {
    height: 70px;
    width: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.logo-subtitle {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-neutral);
    letter-spacing: 0.015em;
    text-align: center;
}

/* --- Flash messages ------------------------------------ */
.flash-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.flash {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.45;
}

.flash--success { background: var(--color-success-bg); color: var(--color-success-text); }
.flash--error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.flash--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* --- Formulario ---------------------------------------- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Campos de input ----------------------------------- */
.field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.field-wrap input {
    width: 100%;
    height: var(--input-height);
    padding: 0 48px 0 44px;
    border: 1.5px solid var(--color-border-input);
    border-radius: var(--input-radius);
    background: var(--color-bg-input);
    color: var(--color-text);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.field-wrap input::placeholder {
    color: var(--color-neutral);
    font-weight: 400;
}

.field-wrap input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Icone esquerdo */
.field-icon {
    position: absolute;
    left: 14px;
    font-size: 18px;
    color: var(--color-neutral);
    pointer-events: none;
    transition: color 0.2s ease;
}

.field-wrap:focus-within .field-icon {
    color: var(--color-primary);
}

/* Botao do olho (visibilidade da senha) */
.eye-btn {
    position: absolute;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-neutral);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: color 0.15s ease;
}

.eye-btn:hover,
.eye-btn:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.eye-btn .material-symbols-outlined {
    font-size: 18px;
}

/* --- Linha de opcoes secundarias ----------------------- */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 0;
}

/* Checkbox + label Lembrar */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-neutral);
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c2c6d2;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, background-color 0.15s;
    position: relative;
}

.checkbox-label input[type='checkbox']:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-label input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 5px;
    height: 8px;
    border: 1.5px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.checkbox-label input[type='checkbox']:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.40);
    outline-offset: 2px;
}

/* Link Esqueci minha senha */
.link-forgot {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-secondary);
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.link-forgot:hover { opacity: 0.70; }

/* --- Botao principal ENTRAR ---------------------------- */
.btn-submit {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    border: none;
    border-radius: var(--input-radius);
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.10s ease;
    box-shadow: 0 3px 14px rgba(37, 99, 235, 0.28);
}

.btn-submit:hover {
    background-color: var(--color-primary-hover);
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.36);
}

.btn-submit:active {
    transform: scale(0.988);
}

.btn-submit:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.40);
    outline-offset: 2px;
}

/* --- Rodape do card ------------------------------------ */
.signup-note {
    margin-top: 22px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-neutral);
    line-height: 1.5;
}

.signup-note a {
    color: var(--color-primary);
    font-weight: 600;
}

.signup-note a:hover {
    text-decoration: underline;
}

/* --- Responsividade ------------------------------------ */
@media (max-width: 480px) {
    .login-card {
        padding: 36px 28px 32px;
        border-radius: 14px;
    }

    .logo-img { height: 58px; }

    .field-wrap input { font-size: 1rem; }
}

@media (max-width: 360px) {
    .login-card { padding: 28px 20px 26px; }
}