/* ============================================================
   CIEBP – Tabela & Chaveamento Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap');

body { font-family: 'DM Sans', sans-serif; background: #F4F6FB; color: #1B1464; overflow-x: hidden; }

/* Modal */
.modal-overlay { display: none; }
.modal-overlay.open { display: flex; }

/* Status Badges e Botões Tabela */
.badge-ativo { background: #e8f9f0; color: #1a7a48; padding: 4px 12px; border-radius: 99px; font-weight: bold; font-size: 12px; }
.progress-bar { background: linear-gradient(90deg, #E91E8C, #C471D0); height: 6px; border-radius: 99px; }
.cat-pill { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: bold; }

/* ============================================================
   CHAVEAMENTO - Custom Scroll & Flexbox
   ============================================================ */
.custom-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #EEF0F8; border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1B1464; border-radius: 8px; }

.bracket-container {
    position: relative; /* Necessário para o SVG ficar no fundo */
    display: flex;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
}

.bracket-column {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    min-width: 200px;
    z-index: 10;
}

.match-box {
    background: #FFFFFF;
    border: 2px solid #EEF0F8;
    border-radius: 8px;
    width: 100%;
    box-shadow: 0 4px 6px rgba(27, 20, 100, 0.05);
    position: relative;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.match-header {
    background: #1B1464; color: #FFFFFF;
    font-size: 0.7rem; padding: 0.3rem; text-align: center;
    font-weight: 700; border-top-left-radius: 6px; border-top-right-radius: 6px;
}

.team-slot {
    padding: 0.6rem 1rem; border-bottom: 1px solid #EEF0F8;
    font-size: 0.85rem; font-weight: 600; color: #1B1464;
    cursor: pointer; display: flex; justify-content: space-between;
    user-select: none; transition: background 0.2s;
}
.team-slot:last-child { border-bottom: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.team-slot:hover:not(.tbd) { background: rgba(233, 30, 140, 0.1); color: #E91E8C; }
.team-slot.winner { background: #0C87D1; color: #FFFFFF; }
.team-slot.tbd { color: #9898B8; font-style: italic; cursor: default; }
.spacer { visibility: hidden; pointer-events: none; }

/* Scroll arrastável */
#scroll-wrapper {
    cursor: grab;
    overflow: auto;
}

#scroll-wrapper.dragging {
    cursor: grabbing;
    user-select: none;
}