html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.expired-text {
    color: darkorange !important;
    font-weight: bold;
}

.pending-text {
    color: coral !important;
    font-weight: bold;
}

.active-text {
    color: green !important;
    font-weight: bold;
}

.locked-text {
    color: red !important;
    font-weight: bold;
}

/* Estilos padrão (para telas maiores) */
.responsive-btn-group .pump-toggle {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    margin: 0.1rem;
}

#pumpToggleGroup {
    gap: 0.1rem; /* Espaço mínimo entre os botões */
}

#commandBtnGroup {
    gap: 0.3rem; /* Espaço mínimo entre os botões */
}

/* Ajuste para smartphones (telas até 576px) */
@media (max-width: 576px) {
    /* Permite que os botões se alinhem em múltiplas linhas */
    #pumpToggleGroup,
    #commandBtnGroup {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem; /* Espaço mínimo entre os botões */
    }

    /* Define tamanho mais compacto para os botões */
    #pumpToggleGroup .pump-toggle {
        font-size: 0.9rem; /* Fonte um pouco menor */
        padding: 0.3rem 0.5rem; /* Menor espaçamento interno */
        margin: 0; /* Remove margens extras */
        width: auto; /* O botão ocupa o espaço necessário */
    }
}

.titleBar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 40px);
    -webkit-app-region: drag;
    app-region: drag;
}

/*
    ============================================================
    BOTÃO LILÁS CUSTOMIZADO (ABORDAGEM DIRETA)
    ============================================================
*/

/* É ESSENCIAL ter .btn e .btn-lilac no seu HTML */
.btn-lilac {
    color: #ffffff;
    background-color: #8e44ad;
    border-color: #8e44ad;
}

/* Estado Hover (mouse em cima) */
.btn-lilac:hover {
    color: #ffffff;
    background-color: #7d3c98;
    border-color: #7d3c98;
}

/* Estado Focus (navegação por TAB) */
.btn-lilac:focus,
.btn-lilac.focus {
    color: #ffffff;
    background-color: #7d3c98;
    border-color: #7d3c98;
    /* O valor RGB de #8e44ad é 142, 68, 173 */
    box-shadow: 0 0 0 0.25rem rgba(142, 68, 173, 0.5);
}

/* Estado Active (clicado) */
.btn-lilac:active,
.btn-lilac.active {
    color: #ffffff;
    background-color: #6c3483;
    border-color: #6c3483;
}

.navbar .nav-link,
.navbar .dropdown-item {
    color: lightgray !important;
}

.navbar .nav-link:hover,
.navbar .nav-item .nav-link:hover,
.navbar .dropdown-item:hover {
    color: white !important;
}

select {
    cursor: pointer;
}

select:disabled {
    cursor: not-allowed;
}

select option {
    background-color: #343a40;
    color: #fff;
}

/* -------------> Select2 */

.select2-container--default .select2-results__option {
    background-color: #343a40 !important; /* Cor de fundo desejada */
    color: #fff !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: #343a40 !important; /* Cor de fundo desejada */
    color: gray !important;
}

.select2-container--default .select2-results__option:hover {
    background-color: #1967d2 !important; /* Cor de fundo desejada */
    color: #fff !important;
}

.select2-container--default .select2-results__option--selected:hover {
    background-color: #343a40 !important; /* Cor de fundo desejada */
    color: gray !important;
}

/* 1. Aplica a cor de fundo no container inteiro da tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #343a40 !important; /* Cor escura desejada */
    color: #fff;
    padding: 0; /* Ajusta o respiro interno */
}

/* 2. Garante que o texto e o botão de fechar não tenham fundos próprios */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent !important;
    color: #fff !important;
}

/* 3. Ajuste opcional: Efeito de hover no botão de fechar (o X) */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: #495057 !important; /* Um cinza um pouco mais claro ao passar o mouse */
    color: #fff !important;
}

/* Botão de "X" para remover a tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    padding: 0 8px;
    margin-right: 0;
    border-right: 1px solid #495057 !important; /* Adiciona uma divisória sutil se desejar */
}