/* =====================================================
   MULTIBABA ARENAS - 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-multibaba-arenas.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(128,214,43,.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(128,214,43,.10) !important;
    border-color: rgba(128,214,43,.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: #80d62b !important;

    box-shadow:
        0 0 0 3px rgba(128,214,43,.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(128,214,43,.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(128,214,43,.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);
    }

}



/* =========================================================
   MULTIBABA ARENAS - IDENTIDADE VISUAL V1
========================================================= */

:root {
  --mba-green: #80d62b;
  --mba-green-dark: #4c9e15;
  --mba-black: #050908;
  --mba-dark: #08110f;
  --mba-card: rgba(8, 18, 15, .92);
  --mba-border: rgba(128, 214, 43, .22);
  --mba-text: #f5f7f5;
  --mba-muted: #9ca9a1;
}

body {
  background:
    linear-gradient(rgba(2,8,6,.76), rgba(2,8,6,.90)),
    url('/img/fundo-multibaba-arenas.png') center center / cover fixed !important;
  color: var(--mba-text);
}

.multibaba-slogan {
  color: #b7c4bb;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 22px;
  font-size: .92rem;
  letter-spacing: .3px;
}

button,
.btn,
input[type="submit"] {
  border-radius: 8px;
}

button:not(.danger),
.btn-primary,
input[type="submit"] {
  background: linear-gradient(135deg,#69bd20,#92e438);
  color: #071006;
}

.card,
.panel,
.box {
  border-color: var(--mba-border);
}

a {
  transition: .2s ease;
}


/* =========================================================
   MULTIBABA ARENAS - TEMA GLOBAL V3
   Remove identidade azul/ciano herdada
========================================================= */

:root{
  --mba-green:#80d62b;
  --mba-green-2:#5aad18;
  --mba-green-soft:#a8ef65;
  --mba-bg:#020604;
  --mba-bg-2:#050b07;
  --mba-panel:#08120d;
  --mba-panel-2:#0b1710;
  --mba-line:rgba(128,214,43,.22);
  --mba-line-strong:rgba(128,214,43,.42);
  --mba-text:#f6f8f6;
  --mba-muted:#9eaaa2;
  --mba-danger:#ff6b6b;
}

/* FUNDO GLOBAL */

html,
body{
  background:
    linear-gradient(rgba(1,6,3,.82),rgba(1,6,3,.94)),
    url('/img/fundo-multibaba-arenas.png')
    center center / cover fixed !important;

  color:var(--mba-text) !important;
}

/* CABEÇALHOS */

header,
.topbar,
.navbar,
.nav,
.main-header,
.site-header{
  background:rgba(3,10,6,.97) !important;
  border-color:var(--mba-line) !important;
}

/* SIDEBAR / MENU */

aside,
.sidebar,
.menu,
.navigation,
nav{
  border-color:var(--mba-line) !important;
}

.sidebar,
.side-menu{
  background:rgba(3,10,6,.97) !important;
}

nav a,
.sidebar a,
.menu a{
  color:#eaf4e8 !important;
}

nav a:hover,
.sidebar a:hover,
.menu a:hover,
nav a.active,
.sidebar a.active{
  background:rgba(128,214,43,.12) !important;
  color:var(--mba-green-soft) !important;
}

/* CARDS / PAINÉIS */

.card,
.panel,
.box,
.widget,
.stat-card,
.metric-card,
.player-card,
.dash-card,
section > article{
  background:
    linear-gradient(
      145deg,
      rgba(9,20,14,.96),
      rgba(4,10,7,.96)
    ) !important;

  border-color:var(--mba-line) !important;

  box-shadow:
    0 14px 38px rgba(0,0,0,.26) !important;

  color:var(--mba-text) !important;
}

/* TEXTOS */

h1,
h2,
h3,
h4,
h5,
h6,
strong,
label{
  color:#fff !important;
}

p,
small,
.help,
.hint,
.muted,
.text-muted,
.subtitle{
  color:var(--mba-muted) !important;
}

/* LINKS */

a{
  color:var(--mba-green) !important;
}

a:hover{
  color:var(--mba-green-soft) !important;
}

/* BOTÕES */

button,
.btn,
.button,
input[type="submit"],
input[type="button"]{
  border-radius:8px !important;
}

.btn-primary,
.btn-success,
button.primary,
button.save,
button[type="submit"],
input[type="submit"]{
  background:
    linear-gradient(
      135deg,
      var(--mba-green-2),
      var(--mba-green)
    ) !important;

  border-color:var(--mba-green) !important;
  color:#061005 !important;
  font-weight:700 !important;
}

.btn-primary:hover,
.btn-success:hover,
button.primary:hover,
button.save:hover,
button[type="submit"]:hover{
  filter:brightness(1.08);
}

/* BOTÕES SECUNDÁRIOS */

.btn-secondary,
button.secondary{
  background:#14231a !important;
  border-color:var(--mba-line-strong) !important;
  color:#eef7eb !important;
}

/* FORMULÁRIOS */

input,
select,
textarea{
  background:#07110c !important;
  border:1px solid rgba(128,214,43,.25) !important;
  color:#fff !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--mba-green) !important;
  outline:none !important;

  box-shadow:
    0 0 0 3px rgba(128,214,43,.12) !important;
}

input::placeholder,
textarea::placeholder{
  color:#77867c !important;
}

/* TABELAS */

table{
  background:rgba(5,12,8,.9) !important;
  color:var(--mba-text) !important;
}

thead,
thead tr,
th{
  background:#0b180f !important;
  color:var(--mba-green-soft) !important;
}

td,
th{
  border-color:rgba(128,214,43,.12) !important;
}

tbody tr:hover{
  background:rgba(128,214,43,.05) !important;
}

/* BADGES / STATUS */

.badge,
.tag,
.pill{
  border-color:rgba(128,214,43,.28) !important;
}

.status-open,
.status-active,
.status-confirmed,
.badge-success,
.success{
  background:rgba(128,214,43,.13) !important;
  color:var(--mba-green-soft) !important;
}

.status-cancelled,
.status-inactive,
.badge-danger,
.danger{
  color:#ff8989 !important;
}

/* MODAIS */

.modal,
.modal-content,
.dialog,
.popup{
  background:#08120d !important;
  border-color:var(--mba-line) !important;
  color:var(--mba-text) !important;
}

/* SEPARADORES */

hr{
  border-color:var(--mba-line) !important;
}

/* SUBSTITUI CORES CIANO MAIS COMUNS */

.text-cyan,
.cyan,
.text-info{
  color:var(--mba-green-soft) !important;
}

.bg-info{
  background:rgba(128,214,43,.12) !important;
}

/* SELEÇÃO */

::selection{
  background:rgba(128,214,43,.35);
  color:#fff;
}