/* Reset básico e Cores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Estilos Gerais e Header --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #737373;
}

.header {
    width: 970px;
    margin: auto;
    background-color: #fff;
    padding: 20px;
    text-align: center;
    
}

.header_content {
    display: flex;             /* Ativa o modo lado a lado */
    justify-content: center;   /* Centraliza as imagens no meio da tela */
    align-items: center;       /* Alinha verticalmente (centro) */
    gap: 30px;                 /* Espaço entre a imagem da esquerda e da direita */
    padding: 20px;
}

.img_header_left img, 
.img_header_right img {
    max-height: 80px;          /* Ajuste a altura conforme sua necessidade */
    width: auto;               /* Mantém a proporção */
    display: block;
}

/* --- Página principal --- */
.mid_container {
    width: 100%;
    min-height: 600px;
    background-color: #ffffff; /* Fundo do banner */
    overflow: hidden;
}

.banner_content {
    position: relative;
    max-width: 970px;
    margin: 0 auto;
    height: 680px;
    display: flex;
    align-items: center;
}

/* Selecionando a classe personalizada */
.panel-form {
    background-color: #f8f9fa; /* Cor de fundo (ex: cinza bem claro) */
    color: #000;
    border-radius: 10px;        /* Arredondamento das bordas */
}


/* Texto que ficará sobre a imagem em telas grandes */
.banner_text_wrapper {
    position: absolute;
    left: 20px;
    z-index: 10;
    max-width: 500px;
    pointer-events: none; /* Garante que o texto não atrapalhe cliques */
}

.banner_mid {
    font-family: "Roboto", sans-serif;
    color: #2c3e50;
    font-size: 2.2rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.4;
}

.banner_mid_autor {
    margin-top: 15px;
    font-size: 2rem;
    letter-spacing: 0.1em;
    color: #737373;
    text-transform: uppercase;
}

/* Container da Imagem */
.image_wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
}

.image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right; /* Garante que a direita da foto (os rostos) apareça */
}

/* --- LOGICA DE REDIMENSIONAMENTO (Abaixo de 990px) --- */
@media (max-width: 970px) {
    .header {
        width: auto;
    }

    .mid_container {
        height: auto; /* Deixa o container crescer conforme o conteúdo */
        min-height: auto;
    }

    .banner_content {
        display: block; /* Para de tentar alinhar lado a lado */
        height: auto;
        background: #ffffff; /* Fundo sólido para o texto */
    }

    .banner_text_wrapper {
        position: relative; /* Garante que ele ocupe espaço físico */
        width: 100%;
        padding: 10px 20px; /* Espaçamento interno para o texto não colar nas bordas */
        text-align: center;
        z-index: 2;
    }

    .banner_mid {
        position: static; /* Remove qualquer posicionamento absoluto residual */
        max-width: 100%;
        margin: 0 auto;
        font-size: 2rem; /* Ajuste opcional para mobile */
    }

    .banner_mid_autor {
        position: static;
        margin: 20px auto 0;
    }

    /* Container da Imagem */
    .image_wrapper {
        position: relative;
        width: 100%;
        height: 550px; /* Altura que você definiu */
        overflow: hidden; /* Corta o que sobrar */
        display: flex;
        justify-content: flex-end; /* Alinha a imagem à direita para sumir à esquerda */
    }

    .image_wrapper img {
        width: auto;
        min-width: 990px; /* Força a imagem a ser maior que a tela para gerar o corte */
        height: 100%;
        object-fit: cover;
        object-position: right center;
        flex-shrink: 0;
    }
    .user-bar{
        width: auto;
    }
}

/* --- Navbar (O Coração do Menu Colapsável) --- */
.navbar {
    background-color: #737373;
    color: white;
    padding: 0 15px;
}

.container {
    max-width: 970px;
    margin: 0 auto;
    color: rgb(0, 0, 0);
    background-color: gray;

}

.panel-body {
        overflow: visible !important;
    }

    /* 2. Faz com que a célula da tabela permita elementos saindo dela */
    #tabelaMensalidades td {
        overflow: visible !important;
        position: relative;
    }


/* Estilo da lista de links */
.nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    transition: background 0.3s;
}

.nav li a:hover {
    background-color: #34495e;
}

/* --- Lógica para Mobile --- */

/* Esconde o conteúdo do menu no mobile por padrão */
.navbar-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

/* Estilização do botão "Hambúrguer" */
.navbar-toggle {
    
    display: block;
    padding: 15px 10px;
    cursor: pointer;
    width: 30px;
}

.icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    border-radius: 2px;
}

/* A MÁGICA: Quando o checkbox estiver marcado, expande a div #navbar */
#menu-toggle-check:checked ~ #navbar {
    max-height: 300px; /* Altura suficiente para os 3 links */
}

/* --- Responsividade para Desktop --- */
@media (min-width: 768px) {
    .navbar-header {
        display: none; /* Esconde o botão hambúrguer no PC */
    }

    .navbar-collapse {
        max-height: none !important; /* Sempre visível no PC */
        display: flex;
        justify-content: flex-end;
    }

    .nav {
        display: flex; /* Links lado a lado */
    }
}

/** ESTILO DA PÁGINA ADMIN**/
.user-bar {
    max-width: 970px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil */
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-family: 'Segoe UI', sans-serif;
}

.user-info {
    font-size: 1rem;
}

.btn-logout {
    background-color: #e74c3c;
    color: white;
    padding: 6px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-logout:hover {
    background-color: #c0392b;
    color: #fff;
    text-decoration: none;
}

.container_admin {
    margin: auto;
    background-color: white;
    max-width: 970px;
    color: #000;
    padding: 15px;
    width: 970px;
}

.card-receitas {
    background-color: #025f29;
    color: #fff;
}

.card-despesas {
    background-color: #662d2d;
    color: #fff;
}

.card-saldo {
    color: #fff;
}

/* --- Estilo da Nav Administrativa --- */
.admin-menu {
    max-width: 970px;
    margin: 0 auto;    
    background-color: #737373; /* Um tom mais claro que o body para dar destaque */
    border-bottom: 2px solid #3498db;
    margin-bottom: 20px;
}

.nav-links {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    flex-wrap: wrap; /* Garante que quebre linha em telas pequenas */
}

.nav-links li a {
    display: block;
    padding: 15px 20px;
    color: #ecf0f1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.nav-links li a i {
    margin-right: 8px;
    color: #3498db; /* Ícones em azul */
}

.nav-links li a:hover {
    background-color: #565656;
    color: #3498db;
}

.nav-links li.active a {
    background-color: #565656;
    border-bottom: 3px solid #ffffff;
    color: #ffffff;
}

/* Responsividade para o menu */
@media (max-width: 970px) {
    .nav-links {
        justify-content: center;
    }
    .nav-links li a {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
}

/* --- Estilos da Tabela Modernizada --- */
.table-responsive {
    margin: 30px 0;
    background: #ffffff;
    padding: 10px;
    border-radius: 15px; /* Bordas mais arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra mais suave e profunda */
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.table {
    width: 100%;
    border-collapse: separate; /* Permite arredondar cantos internos */
    border-spacing: 0;
    color: #333;
}

/* Cabeçalho da Tabela */
.myHead {
    background-color: #2c3e50;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.table th {
    padding: 18px 15px;
    font-weight: 600;
    border: none;
}

/* Arredondar cantos do cabeçalho */
.table th:first-child { border-radius: 10px 0 0 0; }
.table th:last-child { border-radius: 0 10px 0 0; }

/* Linhas e Células */
.table td {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

/* Efeito Zebra Suave */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fcfcfc;
}

/* Efeito ao passar o mouse */
.table-hover tbody tr:hover {
    background-color: #f8f9fa !important;
    transform: scale(1.002); /* Levíssimo zoom */
}

/* Estilo para as Labels de Status (Ativo/Inativo) */
.label {
    padding: 5px 12px;
    border-radius: 50px; /* Estilo pílula */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.label-success { background-color: #27ae60; color: white; }
.label-danger { background-color: #e74c3c; color: white; }

/* Ajuste nos Botões da Tabela */
.btn-xs {
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    margin: 2px;
}

/* Remove a borda dupla quando o detalhe abre */
.collapse td {
    border-top: none !important;
}

/* Estiliza o conteúdo interno do detalhe */
.collapse div.row {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Destaque para o botão Detalhes */
.btn-info {
    background-color: #3498db;
    border-color: #2980b9;
    color: white;
}

.btn-danger { background-color: #e74c3c; }
.btn-success { background-color: #2ecc71; }

.btn-xs:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Estilo BADGE --- */
.badge {
    background-color: #ffffff;
    color: #000;
    padding: 8px 15px;
    font-size: 1.1rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

/* --- Estilo footer --- */
.links {
    border-top: 2px solid #ffffff;;
    margin-top: 20px;
    padding-top: 20px;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color:#ffffff;
    text-align: center;
}

.endereco {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color:#ffffff;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 50px;
}

/* --- Estilo Formulários --- */
/* Estilo Base / Container do Formulário */
.form-horizontal {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff; /* Preto suave */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #e0e0e0;
}

.form_title {
    font-family: "Roboto", sans-serif;
    color:#414141;
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
}   

/* Grupos de formulário */
.form-group {
    margin-bottom: 20px;
}

/* Labels */
.label_form {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #414141; /* Cinza claro */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Campos de Input */
.form-control {
    width: 100%;
    padding: 12px 15px;
    background-color: #ffffff !important; /* Força o fundo branco */
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #333333 !important; /* Força o texto escuro para dar contraste */
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Efeito de Foco nos Inputs */
.form-control:focus {
    outline: none;
    border-color: #3498db; /* Azul suave ao focar */
    background-color: #ffffff !important; /* Mantém branco ao entrar */
    color: #000000 !important;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

/* Placeholder */
.form-control::placeholder {
    color: #999999;
    opacity: 1;
}

/* Estilização do Input de Data (Calendário) */
input[type="date"].form-control {
    background-color: #ffffff !important;
    color: #333333 !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8); /* Torna o ícone do calendário visível no dark mode */
    cursor: pointer;
}

/* Botão Enviar */
.btn-info {
    background-color: #f5f5f5; /* Branco/Cinza quase branco */
    color: #121212;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    width: auto;
    float: right; /* Mantém o alinhamento do seu HTML original */
}

.btn-info:hover {
    background-color: #cccccc;
    transform: translateY(-1px);
}

.btn-info:active {
    transform: translateY(0);
}

/* Limpar o float do botão */
.form-horizontal::after {
    content: "";
    display: table;
    clear: both;
}

/* 1. Garante que o container da tabela não corte o menu */
.table-responsive {
    overflow: visible !important; /* Essencial para o menu "vazar" da tabela */
    padding-bottom: 50px;       /* Opcional: margem de segurança caso a tabela seja curta */
}

/* 2. Força a célula da tabela a permitir conteúdo flutuante */
.table td {
    overflow: visible !important;
    position: relative; /* Mantém o alinhamento do dropdown */
}

/* 3. Garante que o menu fique acima de tudo e não herde cortes de containers pai */
.dropdown-menu {
    display: none; /* Mantido pelo JS do Bootstrap */
    position: absolute;
    z-index: 1051 !important; /* Acima de modais e cabeçalhos */
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

/* 4. Verifique se o .mid_container não está cortando o menu */
.mid_container {
    overflow: visible !important; /* Mudado de hidden para visible */
}

input[type="date"].form-control {
    width: 170px;
}