/* Bracket layout */
.br-wrap { padding-bottom: .25rem; }
.br-col { min-width: 340px; }
.br-title { font-weight: 700; margin-bottom: .6rem; }

/* Card */
.br-card{
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    background: var(--card-bg, #fff);
    color: var(--body-color, rgba(0,0,0,.78));
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.06));
    padding: 12px;
    display: grid;
    gap: 8px;
}

/* Status */
.br-status{
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    display: inline-flex;
}
.status-pending   { background: color-mix(in srgb, var(--primary, #0d6efd) 10%, transparent); color: var(--primary, #0d6efd); }
.status-finished  { background: color-mix(in srgb, var(--success, #28c76f) 10%, transparent); color: var(--success, #28c76f); }
.status-walkover  { background: color-mix(in srgb, var(--warning, #ff9f43) 16%, transparent); color: var(--warning, #ff9f43); }
.status-scheduled { background: color-mix(in srgb, #6c757d 12%, transparent); color: #6c757d; }

.br-vs{
    text-align:center;
    font-size: 12px;
    color: var(--muted-color, rgba(0,0,0,.55));
    margin: 2px 0;
}

/* Player chip */
.br-player{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    background: color-mix(in srgb, var(--card-bg, #fff) 92%, transparent);
}

.br-player.is-winner{
    border-color: color-mix(in srgb, var(--success, #28c76f) 45%, var(--border-color, rgba(0,0,0,.12)));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #28c76f) 15%, transparent);
}
.br-player.is-loser{ opacity: .75; }
.br-player.is-placeholder{ border-style: dashed; opacity: .9; }

.br-avatar{
    width: 34px;
    height: 34px;
    border-radius: 999px;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background: color-mix(in srgb, var(--body-color, rgba(0,0,0,.78)) 6%, transparent);
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    flex: 0 0 34px;
}

.br-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.br-ini{ font-weight: 800; font-size: 12px; color: var(--heading-color, rgba(0,0,0,.82)); }

.br-name{
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--heading-color, rgba(0,0,0,.82));
}

/* Sets */
.br-set{
    display:inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    font-size: 12px;
    color: var(--muted-color, rgba(0,0,0,.65));
    background: color-mix(in srgb, var(--body-color, rgba(0,0,0,.78)) 4%, transparent);
}
/* =========================================================
   BRACKET THEME TOKENS (default = LIGHT)
   ========================================================= */
:root {
    --br-card-bg: #fff;
    --br-card-text: rgba(0,0,0,.78);
    --br-heading: rgba(0,0,0,.86);
    --br-muted: rgba(0,0,0,.55);
    --br-border: rgba(0,0,0,.12);
    --br-chip-bg: rgba(0,0,0,.02);
    --br-avatar-bg: rgba(0,0,0,.06);
}

/* =========================================================
   DARK MODE HOOKS (cobre Materio / Bootstrap / Materialize)
   - Materio costuma usar: html.dark-style
   - Bootstrap 5.3+: [data-bs-theme="dark"]
   - Alguns templates: [data-theme="dark"], body.dark, .dark-layout, .theme-dark
   ========================================================= */
html.dark-style,
[data-theme="dark"],
[data-bs-theme="dark"],
body.dark,
body.dark-layout,
.theme-dark {
    --br-card-bg: rgba(255,255,255,.06);
    --br-card-text: rgba(255,255,255,.88);
    --br-heading: rgba(255,255,255,.92);
    --br-muted: rgba(255,255,255,.60);
    --br-border: rgba(255,255,255,.14);
    --br-chip-bg: rgba(255,255,255,.08);
    --br-avatar-bg: rgba(255,255,255,.12);
}

/* =========================================================
   APPLY TOKENS (força a parar de ficar branco no dark)
   ========================================================= */
.br-card{
    background: var(--br-card-bg) !important;
    color: var(--br-card-text) !important;
    border-color: var(--br-border) !important;
}

.br-title{ color: var(--br-heading) !important; }

.br-player{
    background: var(--br-chip-bg) !important;
    border-color: var(--br-border) !important;
    color: var(--br-card-text) !important;
}

.br-name{ color: var(--br-heading) !important; }
.br-vs{ color: var(--br-muted) !important; }

.br-avatar{
    background: var(--br-avatar-bg) !important;
    border-color: var(--br-border) !important;
}
.br-ini{ color: var(--br-heading) !important; }

.br-set{
    background: var(--br-chip-bg) !important;
    border-color: var(--br-border) !important;
    color: var(--br-muted) !important;
}
/* =========================
   MOBILE MENU OVERRIDE
========================= */

/* Esconde sidebar no mobile */
@media (max-width: 768px){
    #layout-menu{
        display: none !important;
    }
}

/* =========================
   MOBILE BOTTOM NAV
========================= */

.mobile-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Item */
.mobile-nav-item{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: var(--bs-secondary-color);
    font-size: 11px;
    transition: color .15s ease, background .15s ease;
}

/* Ícone */
.mobile-nav-item i{
    font-size: 22px;
    line-height: 1;
}

/* Ativo */
.mobile-nav-item.active{
    color: var(--bs-primary);
}

/* Feedback de toque */
.mobile-nav-item:active{
    background: rgba(13,110,253,.08);
}

/* Espaço para o conteúdo não ficar escondido */
@media (max-width: 768px){
    body{
        padding-bottom: 72px;
    }
}

/* Remove menu sanduíche no mobile */
@media (max-width: 768px){
    .layout-menu-toggle{
        display: none !important;
    }
}