/* ================================================================
   EstacionAki — Estilos globais
   Bootstrap 5.3 (dark) entra via CDN. Aqui ficam os ajustes
   específicos do sistema: portaria, autenticação, dashboard.
   ================================================================ */

:root {
    --color-bg:        #0f172a;
    --color-surface:   #1e293b;
    --color-border:    #334155;
    --color-primary:   #3b82f6;
    --color-text:      #e2e8f0;
    --color-muted:     #94a3b8;
    color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
}

/* ── Tela de autenticação ─────────────────────────────────────── */
.auth-bg {
    background: radial-gradient(ellipse at top, #1e3a5f 0%, var(--color-bg) 60%);
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 99, 235, .45);
}

.card {
    background: var(--color-surface);
}

/* ── Botões grandes (portaria — uso em celular) ───────────────── */
.btn-grande {
    min-height: 52px;
    font-size: 1.05rem;
}

/* ── Cards de módulos no dashboard ───────────────────────────── */
.modulo-card {
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
}

.modulo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

.modulo-inativo {
    opacity: .55;
    cursor: not-allowed;
}

.modulo-inativo:hover {
    transform: none;
    box-shadow: none;
}

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar-brand { letter-spacing: -.3px; }

/* ── Inputs ───────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
}

/* ── Badges e alertas ─────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .3px; }

/* ── Alerta pátio: veículo há muito tempo sem saída ──────────── */
@keyframes blink-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}
.blink { animation: blink-badge 1.5s ease-in-out infinite; }

/* ── PWA safe-area (notch em celulares) ───────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}