<?php
$temaToCss = [
    'rosa'   => '#e91e8c',
    'azul'   => '#3b82f6',
    'verde'  => '#22c55e',
    'roxo'   => '#8b5cf6',
    'laranja'=> '#f97316',
];
$cor = $temaToCss[$tema ?? 'azul'] ?? '#3b82f6';
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= htmlspecialchars($titulo ?? 'Login') ?></title>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- v1.4.12: favicon Fire Sistemas -->
<link rel="icon" type="image/x-icon" href="/favicon.ico?v=<?= \App\Core\Versao::ATUAL ?>">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png?v=<?= \App\Core\Versao::ATUAL ?>">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png?v=<?= \App\Core\Versao::ATUAL ?>">
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh;
    background: linear-gradient(135deg, <?= $cor ?>22 0%, #f8fafc 60%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.login-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.10);
    padding: 40px 36px 32px;
    width: 100%; max-width: 380px;
}
.login-logo {
    width: 52px; height: 52px; border-radius: 14px;
    background: <?= $cor ?>; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin: 0 auto 12px;
}
.login-empresa {
    text-align: center; font-weight: 700; font-size: 1.1rem;
    color: #1e293b; margin-bottom: 4px;
}
.login-sub {
    text-align: center; color: #64748b; font-size: .82rem; margin-bottom: 28px;
}
.form-label {
    font-size: .82rem; font-weight: 600; color: #374151;
    padding-left: 4px;  /* alinha visualmente com o icone interno do input */
    margin-bottom: 4px;
}
.form-control {
    border-radius: 8px; border: 1.5px solid #e2e8f0;
    padding: 10px 14px; font-size: .92rem;
    transition: border-color .15s;
}
.form-control:focus {
    border-color: <?= $cor ?>; box-shadow: 0 0 0 3px <?= $cor ?>22; outline: none;
}
.btn-login {
    width: 100%; padding: 11px; border-radius: 8px;
    background: <?= $cor ?>; color: #fff; border: none;
    font-weight: 700; font-size: .95rem; cursor: pointer;
    transition: opacity .15s;
}
.btn-login:hover { opacity: .9; }
.alert-erro {
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; border-radius: 8px;
    padding: 10px 14px; font-size: .85rem; margin-bottom: 18px;
}
.input-icon { position: relative; }
.input-icon .bi {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #94a3b8; font-size: 1rem; pointer-events: none;
}
.input-icon .form-control { padding-left: 36px; }
/* v1.4.11: logo Fire solta — login NÃO carrega app.css então precisa estar aqui */
.fire-logo-solta {
    display: block;
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 80px;
    object-fit: contain;
    margin: 0 auto 14px;   /* topo zero, pouco abaixo */
}
.login-card { text-align: center; }
.login-card form { text-align: left; }
@media (max-width: 480px) {
    .fire-logo-solta { max-width: 200px; max-height: 64px; }
}
</style>
</head>
<body>
<div class="login-card">
    <img class="fire-logo-solta"
         src="/assets/img/fire-sistemas-logo.png?v=<?= \App\Core\Versao::ATUAL ?>"
         alt="Fire Sistemas - Automação Comercial">
    <div class="login-sub" style="margin-bottom:6px">Business Intelligence</div>
    <div class="login-empresa" style="margin-bottom:24px"><?= htmlspecialchars($empresa ?? 'Premium Express Gestão') ?></div>

    <?php if (!empty($erro)): ?>
    <div class="alert-erro"><i class="bi bi-exclamation-circle me-1"></i><?= htmlspecialchars($erro) ?></div>
    <?php endif; ?>

    <form method="POST" action="/autenticar" autocomplete="off">
        <input type="hidden" name="redirect" value="<?= htmlspecialchars($redirect ?? '/') ?>">

        <div class="mb-3">
            <label class="form-label">Usuario</label>
            <div class="input-icon">
                <i class="bi bi-person"></i>
                <input type="text" name="usuario" class="form-control"
                       placeholder="Ex: JOAO, GERENTE" autocomplete="username"
                       value="<?= htmlspecialchars($_POST['usuario'] ?? '') ?>" required>
            </div>
        </div>

        <div class="mb-4">
            <label class="form-label">Senha</label>
            <div class="input-icon">
                <i class="bi bi-lock"></i>
                <input type="password" name="senha" class="form-control"
                       placeholder="Senha do ERP Fire Sistemas" autocomplete="current-password" required>
            </div>
        </div>

        <button type="submit" class="btn-login">
            <i class="bi bi-box-arrow-in-right me-2"></i>Entrar
        </button>
    </form>

    <div style="text-align:center;margin-top:20px;font-size:.75rem;color:#94a3b8">
        Premium Express Gestão &copy; <?= date('Y') ?>
    </div>
</div>
</body>
</html>
