/* ============================================================
   INVITER LOGIN CSS — Minimalista · Mobile-first · 2026   Mesmos tokens de admin_css.php / cliente_css.php, para que a tela
   de login siga o mesmo modo claro/escuro do resto do sistema.
   ============================================================ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ── Tokens (modo claro) ──────────────────────────────────────────────────── */
:root {
    --radius-sm:        8px;
    --radius-md:       12px;
    --radius-lg:       16px;
    --radius-pill:    999px;
    --shadow-xs:  0 1px 2px rgba(16,24,40,.04);
    --shadow-sm:  0 2px 8px rgba(16,24,40,.05);
    --shadow-md:  0 8px 24px rgba(16,24,40,.08);
    --transition: .18s cubic-bezier(.4,0,.2,1);

    --primary:    #00058a;
    --primary-l:  #262b9c;
    --primary-d:  #000479;
    --primary-04: rgba(0,5,138,0.04);
    --primary-08: rgba(0,5,138,0.08);
    --primary-12: rgba(0,5,138,0.12);
    --primary-16: rgba(0,5,138,0.16);
    --primary-20: rgba(0,5,138,0.2);

    --border:        #edeff2;
    --border-strong: #e2e5ea;
    --surface:    #ffffff;
    --bg:         #fafbfc;
    --text:       #030303;
    --muted:      #767b87;
    --faint:      #a3a8b3;
    --success:    #0d9455;
    --success-bg: #e7f7ee;
    --warning:    #c9760a;
    --warning-bg: #fff4e5;
    --danger:     #d6493a;
    --danger-bg:  #fdeaea;
    --info:       #0284c7;
    --info-bg:    #e0f2fe;
}

/* ── Modo escuro — mesmos nomes de token usados em todo o sistema ───────────
   Ativado via data-theme="dark" na tag <html> (script anti-flash no login.php,
   mesma chave de localStorage 'asher_theme' usada em admin/cliente). ───────── */
[data-theme="dark"] {
    --border:        #23262c;
    --border-strong: #2e323a;
    --surface:    #14161a;
    --bg:         #0b0c0f;
    --text:       #e8eaed;
    --muted:      #9aa0ac;
    --faint:      #646973;
    --success:     #3ecf8e;
    --success-bg:  rgba(62,207,142,.14);
    --warning:     #f0a83a;
    --warning-bg:  rgba(240,168,58,.14);
    --danger:      #f0645a;
    --danger-bg:   rgba(240,100,90,.14);
    --info:        #4db8f0;
    --info-bg:     rgba(77,184,240,.14);

    --primary:    #262b9c;
    --primary-l:  #474bab;
    --primary-d:  #00058a;
    --primary-04: rgba(38,43,156,0.06);
    --primary-08: rgba(38,43,156,0.14);
    --primary-12: rgba(38,43,156,0.2);
    --primary-16: rgba(38,43,156,0.26);
    --primary-20: rgba(38,43,156,0.32);

    --shadow-xs:  0 1px 2px rgba(0,0,0,.5);
    --shadow-sm:  0 2px 10px rgba(0,0,0,.55);
    --shadow-md:  0 8px 32px rgba(0,0,0,.7);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background var(--transition), color var(--transition);
}

/* ── Botão de alternância de tema (mesmo componente de admin/cliente) ──────── */
.theme-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-xs);
}
.theme-toggle:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border-strong);
}
.theme-toggle .fa-sun { display: none; }
[data-theme="dark"] .theme-toggle .fa-sun { display: inline-block; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* ── Card de login — espaçamento mínimo, denso e moderno ─────────────────── */
.login-container {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 340px;
    width: 100%;
    padding: 20px 20px 16px;
}

.logo-container {
    text-align: center;
    margin-bottom: 10px;
}
.logo-container img {
    max-width: 150px;
    max-height: 46px;
    object-fit: contain;
}

.login-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
    text-align: center;
    margin-bottom: 2px;
}
.login-subtitle {
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 14px;
}

/* ── Alertas — mesmos tokens de --success/--danger usados no resto do sistema ── */
.alert {
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.4;
    border: none;
}
.alert-danger  { background: var(--danger-bg);  color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }

/* ── Formulário ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 9px; }

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.form-control {
    width: 100%;
    padding: 8px 11px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--text);
    font-family: inherit;
    transition: all var(--transition);
}
.form-control:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-08);
}
.form-control::placeholder { color: var(--faint); }

.btn-login {
    width: 100%;
    padding: 9px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 3px;
}
.btn-login:hover {
    background: var(--primary-d);
    box-shadow: var(--shadow-sm);
}
.btn-login:active { transform: translateY(1px); }

/* ── Links ────────────────────────────────────────────────────────────────── */
.links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 11px;
}
.links a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition);
}
.links a:hover { color: var(--primary-d); }

.footer-text {
    text-align: center;
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--faint);
}

@media (max-width: 480px) {
    .login-container { padding: 18px 16px 14px; }
    .links { flex-direction: column; gap: 6px; align-items: flex-start; }
}