/* ==========================================================================
   Tema das páginas de cadastro/admin (eventos, atletas, checkpoints RFID,
   dispositivos RFID, IPs autorizados) — fundo escuro com cards brancos,
   inputs sem borda e botão de ação com efeito de preenchimento no hover.
   Inclua este arquivo (depois de components.css) só nas páginas de cadastro
   - não é o tema das páginas públicas/telão/relatórios.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700");

body {
    font-family: "Open Sans", Tahoma, Verdana, sans-serif;
    color: #a7a599;
    background: #31302b;
}

.container .card {
    background: #ffffff;
    border: none;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .1);
    color: var(--color-text);
}

.container .card__header {
    background: #1abc9c;
}

/* Título de página fora de card (ex: ips-config.html) fica direto sobre o
   fundo escuro - sem isso herdaria a cor escura padrão e ficaria ilegível. */
.container .page-heading {
    border-bottom-color: rgba(255, 255, 255, .15);
}

.container .page-heading h1 {
    color: #f7f3eb;
}

.container .page-heading__subtitle {
    color: #a7a599;
}

.container .form-control {
    font-family: "Open Sans", Calibri, Arial, sans-serif;
    padding: 10px 15px;
    border: none;
    border-radius: 0;
    background: #f7f3eb;
    color: #676056;
    transition: background .3s ease-out;
}

.container .form-control::placeholder {
    color: #ded9cf;
}

.container .form-control:hover,
.container .form-control:focus {
    background: #efe9db;
    outline: none;
}

.container label {
    color: #676056;
}

.container .btn--success {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    background-color: #16a085;
    border: none;
    border-radius: 0;
    box-shadow: inset 0 0 0 0 rgba(26, 188, 156, 1);
    transition: box-shadow .1s ease-out;
    animation: shadowFadeOut .4s;
}

.container .btn--success:hover,
.container .btn--success:focus {
    color: #fff;
    box-shadow: inset 0 50px 0 0 rgba(26, 188, 156, 1);
    animation: shadowFade .4s;
}

@keyframes shadowFade {
    0%   { box-shadow: inset 0 0 0 0 rgba(26, 188, 156, 1); }
    100% { box-shadow: inset 0 50px 0 0 rgba(26, 188, 156, 1); }
}

@keyframes shadowFadeOut {
    0%   { box-shadow: inset 0 50px 0 0 rgba(26, 188, 156, 1); }
    100% { box-shadow: inset 0 0 0 0 rgba(26, 188, 156, 1); }
}