/* ==========================================================================
   PUBLIC/ASSETS/CSS/COMPONENTS/SELETOR-RODADA.CSS
   COMPONENTE OFICIAL DE SELEÇÃO E CONTEXTO DE RODADA
   ========================================================================== */

/* ==========================================================================
   RAIZ DO COMPONENTE
   ========================================================================== */

.seletor-rodada_xsr {
    width: 100%;
}

/* ==========================================================================
   BARRA DE CONTEXTO DA RODADA
   ========================================================================== */

.rodada-context-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #f8fbff;
}

.rodada-context-bar__left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.rodada-context-bar__info {
    min-width: 0;
}

.rodada-context-bar__label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #5f6b7a;
}

.rodada-context-bar__value {
    font-size: 1rem;
    font-weight: 700;
    color: #16324f;
    line-height: 1.25;
}

.rodada-context-bar__periodo {
    display: block;
    margin-top: .20rem;
    font-size: .90rem;
    font-weight: 600;
    color: #5f6b7a;
}

.rodada-context-empty {
    color: #8a94a3;
    font-style: italic;
}

/* ==========================================================================
   MODAL
   ========================================================================== */

.seletor-rodada_xsr .modal-content {
    overflow: hidden;
}

.seletor-rodada_xsr [data-xsr-grid] tbody tr[data-xsr-row] {
    cursor: pointer;
    transition:
        background-color .15s ease,
        box-shadow .15s ease;
}

.seletor-rodada_xsr [data-xsr-grid] tbody tr[data-xsr-row]:hover {
    background: #f2f7fc;
}

.seletor-rodada_xsr [data-xsr-grid] tbody tr[data-xsr-row].table-primary {
    background: #dcecff;
    box-shadow: inset 0 0 0 1px rgba(38, 103, 217, .22);
}

.seletor-rodada_xsr [data-xsr-grid] tbody tr[data-xsr-row] td {
    vertical-align: middle;
}

.seletor-rodada_xsr [data-xsr-grid] input[type="radio"] {
    cursor: pointer;
}

/* ==========================================================================
   FILTRO
   ========================================================================== */

.seletor-rodada_xsr [data-xsr-filter] {
    min-height: 38px;
}

.seletor-rodada_xsr [data-xsr-filter-clear-wrap] {
    align-items: center;
}

/* ==========================================================================
   MENSAGENS
   ========================================================================== */

.rodada-modal-msg {
    min-height: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    opacity: 1;
    transition: opacity 1.4s ease;
}

.rodada-modal-msg.fade-out {
    opacity: 0;
}

/* ==========================================================================
   ESTADOS
   ========================================================================== */

.seletor-rodada_xsr [data-xsr-clear-wrap] {
    flex: 0 0 auto;
}

.seletor-rodada_xsr [data-xsr-empty-row] {
    cursor: default;
}

.seletor-rodada_xsr [data-xsr-empty-row]:hover {
    background: transparent;
}

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

.seletor-rodada_xsr [data-xsr-row]:focus-within {
    outline: 2px solid rgba(38, 103, 217, .32);
    outline-offset: -2px;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 767.98px) {
    .rodada-context-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .rodada-context-bar__left {
        flex-direction: column;
        align-items: flex-start;
    }

    .seletor-rodada_xsr [data-xsr-clear-wrap] {
        align-self: flex-start;
    }

    .seletor-rodada_xsr .modal-body {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .seletor-rodada_xsr [data-xsr-filter] {
        margin-bottom: .65rem;
    }

    .seletor-rodada_xsr [data-xsr-grid] {
        min-width: 760px;
    }
}