/* ==========================================================================
   Variáveis globais e configurações de tema
   ========================================================================== */
:root {
    --moc-primary: #5DAAB3;
    --tblr-primary: var(--moc-primary);
    --primary-alpha-05: rgba(93, 170, 179, 0.05);
    --primary-alpha-10: rgba(93, 170, 179, 0.1);
    --primary-alpha-20: rgba(93, 170, 179, 0.2);
}

.form-colorinput-light .form-colorinput-color::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%231f2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
    /* Filtros para converter preto para a cor --moc-primary (#5DAAB3) */
    filter: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(1218%) hue-rotate(135deg) brightness(93%) contrast(88%);
}

/* ==========================================================================
   Componentes base
   ========================================================================== */
.btn-primary,
.form-check-input:checked {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
    color: white;
}

a,
a:visited,
#privacyPolicyLink {
    color: var(--tblr-primary);
}

.input-group-text {
    display: flex !important;
}

.title-container .vr {
    border-left: 4px solid var(--tblr-primary);
}

.title-container h1 {
    margin: 0 24px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem var(--primary-alpha-20);
}

/* ==========================================================================
   Estilos para tabelas
   ========================================================================== */
.padroniza-estilo-tabela thead th {
    text-align: center !important;
    background-color: var(--tblr-primary);
    color: white;
    font-weight: 600;
    vertical-align: middle;
    padding: 0.75rem;
}

table.dataTable,
.padroniza-estilo-tabelas {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.padroniza-estilo-tabela th,
.padroniza-estilo-tabela td {
    text-align: center;
    vertical-align: middle;
    padding: 0.75rem;
}

/* Linhas alternadas */
table tbody tr:nth-child(even),
.camposDadosParcelamento input {
    background-color: var(--primary-alpha-05);
}

/* Estados interativos para tabela de débitos */
table tr.selected td {
    background-color: var(--primary-alpha-20) !important;
}

table tbody tr:hover {
    background-color: var(--primary-alpha-10);
}


/* ==========================================================================
   Componentes de interface
   ========================================================================== */
.button-home button:hover,
.button-home.btn:hover,
.button-home button:hover a {
    background-color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
    color: white !important;
    text-decoration: none !important;
}

.accordion-button-toggle.destaque {
    background-color: var(--tblr-primary) !important;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    width: 2rem !important;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion-tabs {
    border: 1px solid var(--tblr-primary);
    border-radius: 0.5rem;
}

/* ==========================================================================
   Estilos Responsivos
   ========================================================================== */
@media screen and (max-width: 768px) {
    .header-fragment {
        flex-direction: column;
        align-items: flex-start;
        margin: 1rem !important;
        text-align: center !important;
    }

    .header-fragment img {
        width: 200px !important;
        max-width: 80vw;
        height: auto;
    }

    .header-fragment h1 {
        font-size: 2rem !important;
        margin-top: 1rem !important;
    }

    .button-home {
        white-space: normal;
        word-break: break-word;
    }

    .container-xl {
        padding: 0.5rem !important;
    }

    .card {
        margin: 0.5rem !important;
    }



    .navbar-brand .h1 {
        font-size: 1.2rem !important;
    }

    .name-user-logged {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .header-fragment {
        margin: 0.5rem !important;
    }

    .header-fragment img {
        width: 150px !important;
        max-width: 70vw;
    }

    .header-fragment h1 {
        font-size: 1.5rem !important;
        margin-top: 0.5rem !important;
    }

    .btn.w-50 {
        width: 95% !important;
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }

    .card {
        margin: 0.25rem !important;
        padding: 1rem !important;
    }

    .navbar-brand .h1 {
        font-size: 1rem !important;
    }

    .nav-link .ps-2 div {
        font-size: 0.8rem !important;
    }
}