/* assets/css/style.css */

/* 1. Cores e Tema
--------------------------------- */
:root {
    /* AZUL MODERNO */
    --bs-primary: #0A78F0; 
    --bs-primary-rgb: 10, 120, 240;
    --bs-primary-darker: #0056b3; 
    
    --bs-secondary: #6B7280; 
    --bs-success: #10B981; 
    --bs-danger: #EF4444; 
    --bs-warning: #F59E0B; 
    
    /* LARGURAS DO SIDEBAR */
    --sidebar-width: 270px; 
    --sidebar-width-collapsed: 80px; 
}

/* Gradiente Vibrante para Sidebar e Header Mobile */
.bg-primary-dark-grad {
    background: linear-gradient(180deg, var(--bs-primary-darker) 0%, var(--bs-primary) 100%);
}

body {
    background-color: #f8f9fa; 
    /* Melhoria: Fonte base mais limpa e legível */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* 2. Layout (Sidebar e Conteúdo)
--------------------------------- */

.sidebar-nav {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--bs-primary-darker) 0%, var(--bs-primary) 100%);
    border-right: none;
    transition: width 0.3s ease-in-out;
}

.sidebar-logo {
    max-width: 80%;
    height: auto;
    opacity: 0.9; 
    transition: all 0.3s ease-in-out;
}

body.sidebar-collapsed .sidebar-logo {
    max-width: 60%;
}


.main-content {
    transition: margin-left 0.3s ease-in-out;
    padding: 1.5rem;
}

.flash-message-container {
    position: relative;
    z-index: 10;
}

@media (min-width: 992px) {
    
    .main-content {
        margin-left: var(--sidebar-width);
    }
    .sidebar-nav.offcanvas-lg {
        width: var(--sidebar-width); 
        transform: none; 
        visibility: visible !important; 
        height: 100vh;
        position: fixed;
        display: flex;
        flex-direction: column;
    }

    /* * CORREÇÃO DE SCROLL (NÍVEL 1): 
     * O 'offcanvas-body' cresce (flex-grow) e precisa 
     * de 'min-height: 0' para permitir que seu filho encolha.
     */
    .sidebar-nav.offcanvas-lg .offcanvas-body {
        flex-grow: 1; /* Faz o corpo preencher o espaço vertical */
        display: flex;
        overflow: hidden; /* Evita que este container tenha scroll, a rolagem será no filho */
        min-height: 0; /* <-- CORREÇÃO 1 */
    }

    /* * CORREÇÃO DE SCROLL (NÍVEL 2):
     * O container dos links do menu deve ter a rolagem.
     */
    .sidebar-content {
        overflow-y: auto;
    }

    body.sidebar-collapsed .main-content {
        margin-left: var(--sidebar-width-collapsed);
    }
    body.sidebar-collapsed .sidebar-nav.offcanvas-lg {
        width: var(--sidebar-width-collapsed);
    }

    /* When a sidebar group is expanded, slightly increase sidebar width for visual emphasis */
    body:not(.sidebar-collapsed).sidebar-expanded-group .sidebar-nav.offcanvas-lg {
        width: 285px; /* small expansion from 270px */
    }
    body:not(.sidebar-collapsed).sidebar-expanded-group .main-content {
        margin-left: 285px;
    }
    body.sidebar-collapsed .sidebar-link-text,
    body.sidebar-collapsed .sidebar-brand-text {
      display: none;
    }

    /* * ============================================
     * INÍCIO DA CORREÇÃO 1 (Hover do Menu Recolhido)
     * ============================================
     */
    
    /* * MODIFICADO: Adiciona o padding horizontal aos links <a>
     * para que o fundo do hover preencha a sidebar inteira.
     */
    body.sidebar-collapsed .sidebar-nav .nav-link {
        padding-left: 0.75rem; /* Adiciona padding ao item */
        padding-right: 0.75rem; /* Adiciona padding ao item */
        text-align: center;
        justify-content: center; /* Centraliza o ícone horizontalmente */
        
        /* ADICIONADO: Restaura o border-radius quando recolhido */
        border-radius: 0.375rem;
    }
    /* ============================================
     * FIM DA CORREÇÃO 1
     * ============================================
     */

    /* CORREÇÃO APLICADA: Remove margem para centralizar o ícone */
    body.sidebar-collapsed .sidebar-nav .nav-link i {
        margin-right: 0;
        width: auto; /* Deixa o ícone ocupar o espaço natural */
    }
    body.sidebar-collapsed .sidebar-nav .offcanvas-header {
        justify-content: center; 
    }
    body.sidebar-collapsed .sidebar-nav .offcanvas-header .navbar-brand {
        margin-right: 0;
    }
    body.sidebar-collapsed .sidebar-nav .mt-auto {
        text-align: center;
    }
    
     body.sidebar-collapsed .sidebar-nav .mt-auto .dropdown-toggle {
         justify-content: center;
     }
     
     /* NOVO: Esconde a logo do mobile no desktop */
     #mobile-login-logo {
         display: none !important;
     }
}

/* 3. Estilos do Menu (Sidebar)
--------------------------------- */
.sidebar-nav .offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
}

.sidebar-nav .navbar-brand {
    font-size: 1.5rem;
    letter-spacing: .5px;
}

#desktop-sidebar-toggle {
    transition: all 0.3s ease-in-out;
}

.sidebar-nav .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
}

.sidebar-nav .navbar-nav {
    flex-grow: 1;
}

.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.sidebar-nav .nav-link:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-nav .nav-link.active {
    color: #ffffff;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.15);
}

.sidebar-nav .nav-link i {
    font-size: 1.25rem;
    width: 30px;
    text-align: center;
    margin-right: 0.75rem;
    transition: margin 0.3s ease-in-out;
}

/* Make group toggle buttons visually identical to nav links on hover/focus */
.sidebar-nav .btn-toggle {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
}

.sidebar-nav .btn-toggle:hover,
.sidebar-nav .btn-toggle:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-nav .btn-toggle i {
    font-size: 1.25rem;
    width: 30px;
    text-align: center;
    margin-right: 0.75rem;
}

.nav-item-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 1rem 0;
}

.sidebar-nav .mt-auto .dropdown-toggle {
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav .mt-auto .dropdown-toggle:hover {
    color: #fff;
}

.sidebar-nav .dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sidebar-nav .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
}

.sidebar-nav .dropdown-menu .dropdown-item i {
    width: 25px;
    text-align: center;
}


/* 4. Estilos de Card (Modernos)
--------------------------------- */
.card {
    border: none; 
    /* Sombra um pouco mais suave e profissional */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); 
    border-radius: 0.75rem; 
    height: 100%; 
}
.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef; /* Linha de separação mais sutil */
    font-weight: 600;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    font-size: 1.1rem; /* Título um pouco maior */
}

/* Estilos de Métrica (Dashboard) */
.card-metric {
    position: relative;
    overflow: hidden; 
    padding: 1.5rem;
}
.card-metric-icon {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 6rem;
    color: rgba(0, 0, 0, 0.05);
    line-height: 1;
}
.card-metric .metric-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.card-metric .metric-value {
        /* Tamanhos explícitos por breakpoint: mobile/tablet/desktop (aumentado apenas para mobile) */
        font-size: 1rem; /* mobile default (~16px) - aumentado conforme solicitado */
    font-weight: 700;
    color: #212529;
}

    /* Tablet: aumentar o tamanho das métricas */
    @media (min-width: 576px) and (max-width: 991.98px) {
        .card-metric .metric-value {
            font-size: 1.1rem; /* tablet (~18px) - reduzido levemente */
        }
    }

    /* Desktop: maior destaque, porém menor que antes */
    @media (min-width: 992px) {
        .card-metric .metric-value {
            font-size: 1.5rem; /* desktop (~24px) - reduzido levemente */
        }
    }

/* 6. Dashboard Sections: tópicos separados para Lançamentos e Cobranças */
.dashboard-section {
    margin-bottom: 1.5rem;
}
.dashboard-section .section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    /* garante que o header tenha fundo e padding consistentes mesmo quando dentro de um card */
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
}

/* Backgrounds específicos por tópico para destacar os cabeçalhos */
.dashboard-section-lancamentos .section-header {
    background-color: rgba(var(--bs-primary-rgb), 0.06); /* leve tom do primary */
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
}
.dashboard-section-cobrancas .section-header {
    background-color: rgba(245, 158, 11, 0.06); /* leve tom do warning */
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
}
.dashboard-section-atividade .section-header,
.dashboard-section-atividade-lancamentos .section-header,
.dashboard-section-atividade-cobrancas .section-header {
    background-color: rgba(107, 114, 128, 0.04); /* leve tom neutro */
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
}
.dashboard-section .section-header .title {
    font-size: 1.05rem;
    font-weight: 700;
}
.dashboard-section .section-header .subtitle {
    color: var(--bs-secondary);
    font-size: 0.9rem;
}
.dashboard-section-lancamentos .card-metric .metric-title {
    color: var(--bs-primary);
}
.dashboard-section-cobrancas .card-metric .metric-title {
    color: var(--bs-warning);
}
.dashboard-section .section-body {
    padding: 0.25rem 0;
}
.dashboard-section .section-header .badge-topic {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
}

/* Collapse behavior for dashboard sections */
.dashboard-section.collapsed .section-body {
    display: none;
}

/* Smooth collapse: we'll animate height via JS but provide sensible defaults */
.dashboard-section .section-body {
    overflow: hidden;
    transition: height 240ms ease;
}
.dashboard-section.collapsed .section-body {
    height: 0 !important;
}

.section-toggle {
    color: var(--bs-secondary);
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
}
.section-toggle .bi {
    transition: transform 0.18s ease;
    font-size: 1.05rem;
    display: inline-block;
}
.section-toggle[aria-expanded="false"] .bi {
    transform: rotate(-90deg);
}

/* Make toggle icon blue to match primary color */
.section-toggle { color: var(--bs-primary); }
.section-toggle .bi { color: var(--bs-primary); }

/* Estilos para a Tabela de Atividade Recente */
.list-group-item {
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.list-group-item:hover {
    background-color: #f5f5f5;
    border-left-color: var(--bs-primary);
}


/* 5. Tela de Login (Split-Screen)
--------------------------------- */
.login-wrapper {
    /* Por padrão, escondemos overflow em desktop para o layout split-screen ficar limpo */
    overflow: hidden;
}

/* Em telas pequenas, permitir rolagem caso o conteúdo exceda a altura da viewport */
@media (max-width: 991.98px) {
    .login-wrapper {
        overflow: auto; /* permite scroll vertical em celulares */
        -webkit-overflow-scrolling: touch; /* suaviza o scroll em iOS */
    }
}

.login-form-side {
    display: flex;
    flex-direction: column; /* empilha conteúdo (card + footer) verticalmente) */
    align-items: center; 
    justify-content: center;
    background-color: #f8f9fa;
    padding: 2rem;
    min-height: auto; /* permite que o conteúdo cresça em telas pequenas */
    gap: 1rem; /* espaço entre o card e o footer */
}

@media (min-width: 992px) {
    .login-form-side {
        min-height: 100vh; /* mantém o split-screen alto em desktop */
    }
}

/* Ajustes adicionais para melhorar legibilidade em telas pequenas */
@media (max-width: 575.98px) {
    .login-form-side {
        padding: 1rem; /* reduz padding para caber mais conteúdo */
    }
    .login-form-side {
        /* Não forçar 100vh nem alinhamento à esquerda aqui —
           manter a centralização definida anteriormente e permitir
           que o conteúdo se ajuste proporcionalmente em telas maiores */
        min-height: auto;
        align-items: center; /* centraliza horizontalmente */
        justify-content: center; /* centraliza verticalmente */
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        gap: 1rem;
    }
    .login-card .card-body {
        padding: 1rem;
    }
    /* reduz altura dos input-group-lg para mobile */
    .input-group.input-group-lg .form-control,
    .input-group.input-group-lg .input-group-text {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        font-size: 0.95rem;
    }
    /* mobile logo menor */
    #mobile-login-logo {
        max-width: 120px;
        margin-bottom: 1rem;
        display: block !important;
    }
    /* garantir botão visível e não ocupar espaço demais */
    .login-card .d-grid .btn {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        font-size: 1rem;
    }
}

/* ==========================
   Footer styles
   ========================== */
.app-footer {
    background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(255,255,255,0.02));
    border-top: 1px solid rgba(0,0,0,0.04);
    margin-top: 2rem;
    display: flex; /* garante que o footer alinhe seu conteúdo verticalmente */
    align-items: center; /* centraliza no eixo Y */
}
.app-footer .footer-link {
    color: var(--bs-secondary);
    text-decoration: none;
    font-weight: 600;
}
.app-footer .footer-link:hover {
    text-decoration: underline;
    color: var(--bs-primary);
}
.app-footer .social-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}
.app-footer .social-btn i { font-size: 1rem; }
.app-footer .footer-version {
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .app-footer .footer-nav { text-align: center; }
    .app-footer .footer-version { display: none; }
}

/* Força centralização vertical dos conteúdos do footer */
.app-footer .container-fluid {
    display: flex;
    align-items: center;
    padding-top: 0; /* remove padding extra que desloca visualmente o conteúdo */
    padding-bottom: 0;
}
.app-footer .row {
    align-items: center;
    width: 100%;
}
.app-footer .col-md-4 {
    display: flex;
    align-items: center;
}
.app-footer .col-md-4.d-flex.flex-column {
    justify-content: center; /* centraliza verticalmente quando é coluna */
}

/* Logo do footer */
.app-footer .footer-logo {
    width: 48px;
    height: 48px;
    border-radius: 100%; /* tornar circular (100% requested) */
    object-fit: cover; /* mantém proporção e preenche a área */
    display: inline-block;
}

@media (max-width: 767.98px) {
    .app-footer .footer-logo {
        width: 36px;
        height: 36px;
    }
}

.login-image-side {
    position: relative;
    background-image: url('../img/background.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
}

.login-branding-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 86, 179, 0.85), rgba(10, 120, 240, 0.85));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}
.login-card {
    max-width: 450px;
    width: 100%;
    background: #ffffff; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: none;
    border-radius: 0.75rem;
}

/* Regras para Desktop */
@media (min-width: 992px) {
    .login-card {
        background: transparent; 
        box-shadow: none;      
        padding: 0 !important;   
        max-width: 100%; 
    }
    
    .login-form-side .login-card .card-body {
        padding: 0; 
    }
}


.login-form-side .form-control,
.login-form-side .input-group-text {
    border-radius: 0.5rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}
.login-form-side .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    border-color: var(--bs-primary);
}
.login-form-side .form-control.bg-light,
.login-form-side .input-group-text.bg-light {
    border: 1px solid #dee2e6;
}
.login-form-side .form-control.bg-light:focus {
    background-color: #fff !important;
}


/* 6. Responsividade (Mobile)
--------------------------------- */
@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0;
    }
    .login-form-side {
        /* Em mobile queremos o card centralizado horizontalmente e verticalmente */
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center; /* centra horizontalmente (eixo cruzado) */
        justify-content: center; /* centra verticalmente (eixo principal) */
        padding-top: 1.5rem; /* espaçamento mais leve no topo */
        padding-bottom: 1.5rem;
        gap: 1rem;
    }
    .login-card {
        box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
        background: #ffffff; 
    }
    .login-card .card-body {
        padding: 1.5rem; 
    }
    

/* Botão Desfazer Pagamento - versão compacta e alinhada */
.btn-desfazer {
    padding: 0.28rem 0.4rem; /* menor padding para botão compacto */
    font-size: 0.9rem; /* ligeiramente menor */
    line-height: 1; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
}
.btn-desfazer i {
    font-size: 1rem; /* ícone visível e proporcional */
    margin: 0; /* remove gap que amplia o botão */
}
.btn-desfazer:hover {
    transform: translateY(-1px);
}

/* Em telas muito pequenas, reduz um pouco o tamanho do ícone */
@media (max-width: 576px) {
    .btn-desfazer { padding: 0.2rem 0.36rem; }
    .btn-desfazer i { font-size: 0.95rem; }
}

/* Classe genérica para botões compactos (ícone-only) */
.btn-compact {
    padding: 0.28rem 0.4rem;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
}
.btn-compact i { font-size: 1rem; margin: 0; }
.btn-compact:hover { transform: translateY(-1px); }

@media (max-width: 576px) {
    .btn-compact { padding: 0.2rem 0.36rem; }
    .btn-compact i { font-size: 0.95rem; }
}
     #mobile-login-logo {
         display: block !important;
         max-width: 150px;
         margin: 0 auto 1.5rem;
     }
}

/* Botão de download do template CSV - destaque visual */
.btn-download-template {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(180deg, #16a34a 0%, #10b981 100%); /* verde agradável */
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(16,185,129,0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.btn-download-template i { font-size: 1.05rem; }
.btn-download-template:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(16,185,129,0.16);
    opacity: 0.98;
}
.btn-download-template:focus,
.btn-download-template:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
}

@media (max-width: 575.98px) {
    .btn-download-template { padding: 0.4rem 0.6rem; font-size: 0.95rem; }
}


/* 7. Estilos do Rodapé (Footer) - FIXO, CENTRALIZADO E MINIMALISTA
--------------------------------- */
.app-footer {
    /* POSICIONAMENTO FIXO (mantido) */
    position: fixed;
    bottom: 0;
    left: 0; 
    width: 100%; 
    z-index: 1000; 

    /* ESTILO CLEAN & TAMANHO */
    background-color: #ffffff;
    border-top: 1px solid #e9ecef;
    font-size: 0.8rem;
    color: #6c757d; 
    
    /* CONTROLADOR DE ALTURA E ALINHAMENTO */
    padding: 0 1.5rem; 
    height: 45px; 
}

/* Override para footer público quando usado na tela de login (não deve ficar fixo) */
.public-footer {
    /* base: neutral, inline footer for public pages (login) */
    position: static;
    width: auto;
    display: block;
    background: transparent;
    border-top: none;
    padding: 0.5rem 0;
}

/* Garantir que a logo usada no footer público também fique arredondada */
.public-footer .footer-logo,
.login-form-side .public-footer .footer-logo {
    border-radius: 100%;
    object-fit: cover;
    display: inline-block;
}

/* When placed inside the login column, make it compact and aligned */
.login-form-side .public-footer {
    padding-left: 0;
    padding-right: 0;
    margin-top: 1.25rem;
}

.login-form-side .public-footer .footer-logo { width: 36px; height: 36px; }
.login-form-side .public-footer .footer-version { display: none; }

/* Ensure the public footer's internal layout is flexible and mobile-friendly */
.public-footer .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Garante que o div interno do container use a altura total para a centralização Flexbox */
.app-footer .container-fluid > div {
    height: 100%;
}

/* Mobile: evitar footer fixo/altura fixa que quebre o layout em telas pequenas */
@media (max-width: 767.98px) {
    .app-footer {
        position: static; /* deixa o footer em fluxo normal para quebrar linhas */
        height: auto;
        padding: 1rem;
    }

    .app-footer .container-fluid > div {
        height: auto;
    }

    .app-footer .row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .app-footer .col-md-4 {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 0.25rem 0;
    }

    .app-footer .footer-nav {
        margin-top: 0.25rem;
    }
}

/* Espaçamento do Rodapé para Respeitar o Sidebar (DESKTOP) */
@media (min-width: 992px) {
    .app-footer {
        left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        padding-left: 1.5rem !important; 
        padding-right: 1.5rem !important;
    }

    /* Ajuste para o Sidebar Recolhido */
    body.sidebar-collapsed .app-footer {
        left: var(--sidebar-width-collapsed);
        width: calc(100% - var(--sidebar-width-collapsed));
    }
}

/* IMPORTANTE: Garante que o conteúdo não fique escondido atrás do rodapé fixo */
.main-content {
    padding-bottom: 60px; 
}


/* ESTILOS DOS ELEMENTOS INTERNOS */
.app-copyright {
    color: #6c757d;
    line-height: 1.2;
    /* FORÇA O FLEXBOX NO CONTAINER DE COPYRIGHT PARA CENTRALIZAR O TEXTO */
    display: flex;
    align-items: center; 
    margin: 0 !important; /* Remove qualquer margem conflitiva */
}

/* Garante que o ícone também tenha alinhamento centralizado no lado direito */
.social-icons {
     display: flex;
     align-items: center;
     height: 100%; /* Opcional, mas garante que o Flexbox do pai funcione */
}

.social-icons .social-link {
    display: inline-block;
    color: #6c757d; 
    font-size: 1.1rem;
    margin-left: 10px;
    transition: color 0.2s ease-in-out;
}

.social-icons .social-link:hover {
    color: var(--bs-primary); 
    text-decoration: none;
}

/* 8. Estilos dos Cards de Cobrança
--------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

.cobranca-card .card-body {
    padding: 1.5rem;
}

.status-bar {
    height: 6px;
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.bg-orange {
    background-color: #fd7e14 !important;
}

.cobranca-card .valor {
    font-size: 2rem;
    font-weight: 700;
}

.cobranca-card .barcode-font {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 3rem;
    line-height: 1;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    color: #343a40;
    background-color: #fff;
    padding: 10px 0;
    border-radius: 5px;
}

.cobranca-card .copy-btn {
    cursor: pointer;
}