/* Reset e tipografia */
body {
    background-color: #f4f6f9;
    font-family: "Roboto Condensed", sans-serif;
    display: flex;
    flex-direction: column;    
}

main {
    flex: 1 0 auto; /* Empurra o footer para o fundo se houver pouco conteúdo */
}
footer {
    flex-shrink: 0;
}
/*.footer { background: #212529; color: #adb5bd; padding: 15px; text-align: center; margin-top: 30px; }*/
.table-sm td,
.table-sm th{
    padding: .35rem .35rem;
}
.navbar-brand img {
    max-height: 40px;
}
.user-stat-badge {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}
.admin-card { 
    background: #fff; 
    border: 1px solid #e9ecef; 
    border-radius: 8px; 
    transition: all .2s ease; height: 100%; 
} 
.admin-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); 
} 
.admin-card i {
    width: 45px; 
    text-align: center; 
}
.section-title { 
    background: #212529; 
    color: #fff; 
    padding: .75rem 1rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    border-radius: 8px 8px 0 0;
    font-size: .9rem; 
}
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;    
}
.card-header-custom {
    background-color: #212529;
    color: white;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    font-weight: 600;
}
.match-box {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.match-box:hover {    
    box-shadow: 0 .125rem .5rem rgba(0,0,0,.08)!important;
    background-color: #fafafa;
}

/* Estilização para o Feed de Jogos (Estilo Flashscore) */
.match-card {
    background: #fff;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}
.match-card:last-child {
    border-bottom: none;
}
.match-box:hover,
.match-card:hover{
    transform:translateY(-3px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.live-indicator {
    color: #dc3545;
    font-weight: bold;
    min-width: 35px;
    animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0.4; }
}
.trophy-icon {
    margin-left: 2px;
    cursor: help;
}


/* Navegação fixa */
.top-nav {
  position:fixed; top:0; left:0; right:0;
  height:60px; background:#fff;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 20px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  z-index:1000;
}
.top-nav .logo { font-weight:bold; font-size:1.2rem; }
.top-nav nav a { margin-left:15px; }

/* Layout principal */
.event-page {
  display:flex; gap:20px;
  padding:80px 20px 20px;
}
.event-header { margin-bottom:20px; }
.event-header h1 { font-size:1.8rem; }
.event-header p { color:#666; }

/* Markets e outcomes */
.markets { flex:2; display:grid; gap:20px; }
.market-card {
  background:#fff; padding:15px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.market-card h2 { margin-bottom:10px; }
.outcomes {
  list-style:none; display:flex; gap:10px; flex-wrap:wrap;
}
.odd-btn {
  padding:10px 15px; border:none; border-radius:4px;
  background:#eee; cursor:pointer;
  transition:background .2s;
}
.odd-btn:hover, .odd-btn.selected {
  background:#c00; color:#fff;
}

/* Bet slip */
.bet-slip {
  flex:1; background:#fff; padding:15px;
  border-radius:6px; height:max-content;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
#bets { list-style:none; margin:10px 0; }
#bets li { margin-bottom:5px; }
#placeBet {
  width:100%; padding:10px;
  background:#c00; color:#fff; border:none;
  border-radius:4px; cursor:pointer;
}


/* Responsividade */
@media(max-width:768px) {
  .event-page { flex-direction:column; }
  .bet-slip { order:-1; margin-bottom:20px; }
}
/* Botão menu mobile */
.menu-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  margin-right: 10px;
  display: none;
}

.top-links {
  display: flex;
  gap: 15px;
}

/* Sidebar */
.side-menu {
  position: fixed;
  top: 60px;
  left: 0;
  width: 220px;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  z-index: 999;
}

.side-menu nav ul {
  list-style: none;
  padding: 0;
}

.side-menu nav ul li {
  margin-bottom: 15px;
}

.side-menu nav ul li a {
  color: #333;
  font-weight: 500;
}


/* Responsivo */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .side-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .side-menu.open {
    transform: translateX(0);
  }

  .top-links {
    display: none;
  }

  .event-page {
    padding-left: 0;
  }
}
/* Design da Nova Grade de Confrontos */
.match-row-container {
    background: #fff;
    border-bottom: 2px solid #e9ecef;
    transition: background-color 0.15s;
    font-size: 0.95rem;
}
.match-row-container:hover {
    background-color: #f8f9fa;
}
.match-row-container:last-child {
    border-bottom: none;
}
/* Caixas de Placar e Palpite */
.score-box {
    width: 35px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #212529;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}
.score-box.live {
    background-color: #dc3545;
    animation: blinker 1.5s linear infinite;
}
.score-box.not-started {
    background-color: #e9ecef;
    color: #6c757d;
    border: 1px solid #ccc;
}
.bet-box {
    width: 35px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: bold;
    border: 1px dashed #ccc;
    border-radius: 4px;
}

/* Alinhamento de textos longos */
.team-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info-text {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: bold;
}

/* BARRA FIXA NO RODAPÉ (ESTILO APP) - Apenas em ecrãs pequenos */

    
.mobile-nav-item {
    color: #aaa;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    font-weight: bold;
    text-uppercase: uppercase;
    flex-grow: 1;
    padding: 5px 0;
}
.mobile-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}
.mobile-nav-item.active, .mobile-nav-item:hover {
    color: #0dcaf0;
}

/* Espaçamento extra no fundo no Mobile para a barra não tapar o conteúdo */
@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050; /* Fica à frente de quase tudo */
        height: 60px;
        background-color: #ffffff;
        border-top: 1px solid #dee2e6;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        display: flex !important; /* Força o alinhamento flex dos ícones internos */
        justify-content: space-around;
        align-items: center;
    }
    
    /* Compensação para o conteúdo do site não sumir atrás da barra */
    body {
        padding-bottom: 60px !important;
    }
}