/* =====================================================
   PADRÃO FIFA - TEMA FUTEBOL V1
   ===================================================== */

html {
    min-height: 100%;
    background: #020817;
}

body {
    min-height: 100vh !important;
    margin: 0;

    background-image:
        linear-gradient(
            180deg,
            rgba(2, 8, 23, 0.82) 0%,
            rgba(3, 12, 28, 0.88) 45%,
            rgba(2, 8, 23, 0.95) 100%
        ),
        url('/img/fundo-futebol.png') !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

    color: #eef7ff;
}


/* -----------------------------------------
   EFEITO DE LUZ
----------------------------------------- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 5%,
            rgba(34, 211, 238, 0.10),
            transparent 38%
        ),
        radial-gradient(
            circle at 90% 60%,
            rgba(59, 130, 246, 0.08),
            transparent 35%
        );
}


/* -----------------------------------------
   CONTEÚDO
----------------------------------------- */

main,
.container,
.content,
.page,
.page-content,
.dashboard {
    position: relative;
}


/* -----------------------------------------
   CARDS / PAINÉIS
----------------------------------------- */

.card,
.panel,
.box,
.stat-card,
.dashboard-card,
.req-card,
.match-card,
.player-card,
.finance-card {
    background: rgba(5, 17, 35, 0.82) !important;

    border: 1px solid rgba(80, 180, 255, 0.20) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.03);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius: 16px;
}


/* -----------------------------------------
   CABEÇALHO
----------------------------------------- */

header {
    background:
        linear-gradient(
            90deg,
            rgba(2,8,23,.97),
            rgba(6,25,48,.94),
            rgba(2,8,23,.97)
        ) !important;

    border-bottom:
        1px solid rgba(34,211,238,.25);

    box-shadow:
        0 8px 30px rgba(0,0,0,.28);

    backdrop-filter: blur(12px);
}


/* -----------------------------------------
   MENU
----------------------------------------- */

nav a {
    transition:
        background .20s ease,
        transform .20s ease,
        border-color .20s ease,
        color .20s ease;
}

nav a:hover {
    background: rgba(34,211,238,.10) !important;
    border-color: rgba(34,211,238,.35) !important;
    color: #67e8f9 !important;
    transform: translateY(-1px);
}


/* -----------------------------------------
   INPUTS
----------------------------------------- */

input,
select,
textarea {
    background: rgba(3, 13, 28, 0.88) !important;
    border: 1px solid rgba(100,180,255,.25) !important;
    color: #f0f9ff !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.25);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;

    border-color: #22d3ee !important;

    box-shadow:
        0 0 0 3px rgba(34,211,238,.12) !important;
}

input::placeholder,
textarea::placeholder {
    color: #7892aa !important;
}


/* -----------------------------------------
   TABELAS
----------------------------------------- */

table {
    background: rgba(4,15,31,.76);
    backdrop-filter: blur(10px);
}

thead,
th {
    background: rgba(8,30,55,.94) !important;
}

tr {
    border-color: rgba(100,180,255,.10) !important;
}

tbody tr:hover {
    background: rgba(34,211,238,.055) !important;
}


/* -----------------------------------------
   TÍTULOS
----------------------------------------- */

h1,
h2,
h3 {
    text-shadow:
        0 2px 10px rgba(0,0,0,.45);
}


/* -----------------------------------------
   BOTÕES
----------------------------------------- */

button,
.btn {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}


/* -----------------------------------------
   LOGIN / FORMULÁRIOS CENTRAIS
----------------------------------------- */

.login-card,
.auth-card,
.form-card {
    background: rgba(3,14,30,.88) !important;

    border: 1px solid rgba(34,211,238,.22) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.50) !important;
}


/* -----------------------------------------
   SCROLLBAR
----------------------------------------- */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #020817;
}

::-webkit-scrollbar-thumb {
    background: #183b5b;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #25658c;
}


/* -----------------------------------------
   CELULAR
----------------------------------------- */

@media (max-width: 768px) {

    body {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    .card,
    .panel,
    .box,
    .stat-card,
    .dashboard-card,
    .req-card {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

}