:root {
    --verde: #1f9d55;
    --verde-escuro: #157347;
}

body {
    background: #f4f6f8 url('../bg/bg.svg') center center / cover no-repeat fixed;
    min-height: 100vh;
}

/* ===== Layout com sidebar ===== */
.layout {
    display: flex;
    align-items: flex-start;
}
.sidebar {
    width: 240px;
    flex: 0 0 240px;
    min-height: calc(100vh - 56px);
    position: sticky;
    top: 56px;
}
.conteudo {
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 991.98px) {
    .sidebar { position: fixed; }
    .conteudo { width: 100%; }
}

.sidebar .nav-link {
    color: #344;
    border-radius: .5rem;
}
.sidebar .nav-link.active {
    background: var(--verde);
}
.sidebar .nav-link:hover:not(.active) {
    background: #e7efe9;
}

/* ===== Avatares e bandeiras ===== */
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.avatar-md { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.avatar-pick { width: 64px; height: 64px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: .15s; }
.avatar-pick:hover { transform: scale(1.05); }
.avatar-radio:checked + .avatar-pick { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(31,157,85,.25); }

.avatar-wrap { position: relative; display: inline-block; }
.avatar-ocupado { cursor: not-allowed; }
.avatar-ocupado .avatar-pick { filter: grayscale(1); opacity: .4; pointer-events: none; }
.avatar-lock {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #444; font-size: 1.1rem; text-shadow: 0 0 3px #fff;
}

.flag { border-radius: 3px; box-shadow: 0 0 1px rgba(0,0,0,.4); vertical-align: middle; }
.flag-tbd {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 18px; background: #ccc; border-radius: 3px;
    font-size: 12px; font-weight: 700; color: #666; vertical-align: middle;
}

/* ===== Cartoes de jogo ===== */
.jogo-card { border: 1px solid #e3e8ee; border-radius: .75rem; }
.jogo-card.travado { background: #fbfbfb; }
.placar-input {
    width: 48px; text-align: center; font-weight: 700; font-size: 1.1rem;
    -moz-appearance: textfield;
}
.placar-input::-webkit-outer-spin-button,
.placar-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.time-nome { font-weight: 600; }

.vs { color: #99a; font-weight: 700; }

/* Tabela de palpites estilo planilha */
.tabela-palpites td, .tabela-palpites th { vertical-align: middle; }
.linha-travada { background: #f8f9fa; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-aberto { background: var(--verde); }
.dot-travado { background: #dc3545; }
.dot-salvo { background: #0d6efd; }

.pontos-badge { font-variant-numeric: tabular-nums; }

/* ===== Navbar: titulo quebra em vez de sair da tela no mobile ===== */
.navbar-brand {
    white-space: normal;   /* Bootstrap usa nowrap; aqui deixamos quebrar */
    line-height: 1.15;
    min-width: 0;          /* permite encolher dentro do flex */
}
@media (max-width: 575.98px) {
    .navbar-brand { font-size: 1rem; }
}

/* Login */
.login-card { max-width: 460px; margin: 5vh auto; }
/* No card de login o titulo tambem quebra com folga no mobile */
.login-card h1 { overflow-wrap: break-word; }