/* ==========================================================
   AFTER DO DIEGUIN - Lista Feminina Oficial
   Identidade Visual: Preto & Vermelho | Tema Premium Noturno
   ========================================================== */

:root {
    --cor-preto: #0D0D0D;
    --cor-preto-card: #161616;
    --cor-preto-card2: #1c1c1c;
    --cor-vermelho: #E10600;
    --cor-vermelho-hover: #ff1a12;
    --cor-branco: #FFFFFF;
    --cor-cinza: #2a2a2a;
    --cor-cinza-texto: #a3a3a3;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
    --radius: 16px;
}

html {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--cor-preto);
    color: var(--cor-branco);
    font-family: 'Poppins', 'Inter', sans-serif;
    min-height: 100vh;
}

a {
    color: var(--cor-vermelho);
    text-decoration: none;
}

/* ================= BACKGROUND EFFECT ================= */
.bg-glow {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, rgba(225, 6, 0, 0.18), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(225, 6, 0, 0.12), transparent 45%),
        var(--cor-preto);
}

/* ================= HEADER ================= */
.brand-title {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: clamp(1.8rem, 5vw, 3rem);
    text-transform: uppercase;
    color: var(--cor-branco);
    text-shadow: 0 0 25px rgba(225, 6, 0, 0.45);
}

.brand-slogan {
    color: var(--cor-vermelho);
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 0.95rem;
}

/* ================= ALERT AVISO ================= */
.aviso-lista {
    background: linear-gradient(135deg, rgba(225,6,0,0.18), rgba(225,6,0,0.08));
    border: 1px solid var(--cor-vermelho);
    border-radius: var(--radius);
    color: var(--cor-branco);
    padding: 1rem 1.25rem;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

/* ================= COUNTDOWN ================= */
.countdown-box {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.countdown-item {
    background: var(--cor-preto-card);
    border: 1px solid var(--cor-cinza);
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    min-width: 78px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.countdown-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--cor-vermelho);
    line-height: 1;
}

.countdown-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cor-cinza-texto);
}

.countdown-encerrado {
    color: var(--cor-vermelho);
    font-weight: 700;
    font-size: 1.1rem;
}

/* ================= CARDS ================= */
.card-premium {
    background: var(--cor-preto-card);
    border: 1px solid var(--cor-cinza);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-premium:hover {
    box-shadow: 0 15px 40px rgba(225, 6, 0, 0.15);
}

/* ================= FORM ================= */
.form-label {
    color: var(--cor-branco);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.form-control, .form-select {
    background-color: #111111;
    border: 1px solid var(--cor-cinza);
    color: var(--cor-branco);
    border-radius: 10px;
    padding: 0.7rem 1rem;
}

.form-control:focus, .form-select:focus {
    background-color: #111111;
    color: var(--cor-branco);
    border-color: var(--cor-vermelho);
    box-shadow: 0 0 0 0.2rem rgba(225, 6, 0, 0.25);
}

.form-control::placeholder {
    color: #6b6b6b;
}

/* ================= BUTTONS ================= */
.btn-vermelho {
    background-color: var(--cor-vermelho);
    border: none;
    color: var(--cor-branco);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-vermelho:hover {
    background-color: var(--cor-vermelho-hover);
    color: var(--cor-branco);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 6, 0, 0.35);
}

.btn-outline-premium {
    background: transparent;
    border: 1px solid var(--cor-vermelho);
    color: var(--cor-vermelho);
    font-weight: 600;
    border-radius: 12px;
    padding: 0.6rem 1.2rem;
    transition: all 0.2s ease;
}

.btn-outline-premium:hover {
    background-color: var(--cor-vermelho);
    color: var(--cor-branco);
}

/* ================= NUMBER RESULT ================= */
.numero-resultado {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 800;
    color: var(--cor-vermelho);
    letter-spacing: 4px;
    text-shadow: 0 0 30px rgba(225, 6, 0, 0.5);
}

/* ================= BADGES ================= */
.badge-validado {
    background-color: #145a32;
    color: #b9f6ca;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-weight: 600;
}

.badge-pendente {
    background-color: rgba(225, 6, 0, 0.18);
    color: #ff6b63;
    border: 1px solid var(--cor-vermelho);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-weight: 600;
}

/* ================= TABLE ================= */
/*
   IMPORTANTE: alguns navegadores Android (modo escuro forçado / "leitura noturna")
   ignoram background-color em <table>, <tr>, <td> mesmo com color-scheme:dark.
   Usar background-image (gradiente sólido) força o navegador a NÃO reescrever
   as cores dessas células.
*/
.table-premium {
    background-image: linear-gradient(0deg, var(--cor-preto-card), var(--cor-preto-card)) !important;
    background-color: var(--cor-preto-card) !important;
    border-radius: var(--radius);
    overflow: hidden;
    color-scheme: dark;
    forced-color-adjust: none;
}

.table-premium thead {
    background-image: linear-gradient(0deg, #111111, #111111) !important;
    background-color: #111111 !important;
}

.table-premium th {
    background-image: linear-gradient(0deg, #111111, #111111) !important;
    background-color: #111111 !important;
    color: var(--cor-vermelho) !important;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--cor-cinza);
}

.table-premium td, .table-premium th {
    border-color: var(--cor-cinza) !important;
    background-image: linear-gradient(0deg, var(--cor-preto-card), var(--cor-preto-card)) !important;
    background-color: var(--cor-preto-card) !important;
    vertical-align: middle;
    color: var(--cor-branco) !important;
    forced-color-adjust: none;
}

.table-premium tr {
    background-image: linear-gradient(0deg, var(--cor-preto-card), var(--cor-preto-card)) !important;
    background-color: var(--cor-preto-card) !important;
}

.table-premium thead th {
    background-image: linear-gradient(0deg, #111111, #111111) !important;
    background-color: #111111 !important;
}

.table-premium tbody tr:hover td {
    background-image: linear-gradient(0deg, #1f1f1f, #1f1f1f) !important;
    background-color: #1f1f1f !important;
}

/* ============ TABELA RESPONSIVA (CARDS NO MOBILE) ============ */
@media (max-width: 767.98px) {
    .table-responsive-cards thead {
        display: none;
    }

    .table-responsive-cards, .table-responsive-cards tbody, .table-responsive-cards tr, .table-responsive-cards td {
        display: block;
        width: 100%;
    }

    .table-responsive-cards tr {
        background-image: linear-gradient(0deg, var(--cor-preto-card), var(--cor-preto-card)) !important;
        background-color: var(--cor-preto-card) !important;
        border: 1px solid var(--cor-cinza);
        border-radius: 14px;
        margin-bottom: 0.85rem;
        padding: 0.5rem 0.25rem;
        box-shadow: var(--shadow-soft);
        forced-color-adjust: none;
    }

    .table-responsive-cards td {
        background-color: transparent !important;
        border: none !important;
        padding: 0.5rem 0.9rem;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
    }

    .table-responsive-cards td::before {
        content: attr(data-label);
        color: var(--cor-cinza-texto);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        text-align: left;
        flex-shrink: 0;
    }

    .table-responsive-cards td:not(:last-child) {
        border-bottom: 1px solid #232323 !important;
    }
}

/* ================= SIDEBAR (ADMIN) ================= */
.sidebar-admin {
    background-color: #0a0a0a;
    border-right: 1px solid var(--cor-cinza);
    min-height: 100vh;
}

.sidebar-admin a {
    color: var(--cor-cinza-texto);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    margin: 0.2rem 0.75rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.sidebar-admin a:hover, .sidebar-admin a.active {
    background-color: rgba(225, 6, 0, 0.15);
    color: var(--cor-branco);
}

/* ================= STAT CARDS ================= */
.stat-card {
    background: linear-gradient(160deg, var(--cor-preto-card2), var(--cor-preto-card));
    border: 1px solid var(--cor-cinza);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
}

.stat-card .stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--cor-vermelho);
}

.stat-card .stat-label {
    color: var(--cor-cinza-texto);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ================= FOOTER ================= */
.footer-premium {
    border-top: 1px solid var(--cor-cinza);
    padding: 2rem 0;
    text-align: center;
    color: var(--cor-cinza-texto);
    font-size: 0.85rem;
}

.footer-premium strong {
    color: var(--cor-branco);
}

.footer-premium .footer-aviso {
    color: var(--cor-vermelho);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* ================= UTIL ================= */
.text-vermelho { color: var(--cor-vermelho) !important; }
.fw-800 { font-weight: 800; }
.min-vh-90 { min-height: 90vh; }

@media (max-width: 576px) {
    .card-premium { padding: 1.25rem; }
    .countdown-item { min-width: 65px; padding: 0.6rem 0.8rem; }
}