/* Ajustes no layout do formulário */
body {
    background-color: #2c3e50;
    font-family: 'Poppins', sans-serif;
}

.bg-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: transform 0.3s ease-in-out;
}

.bg-content:hover {
    transform: translateY(-5px);
}

.bg-primary {
    background-color: #007bff;
}

.text-primary {
    color: #007bff;
}

.hover\:bg-primary-dark:hover {
    background-color: #0056b3;
}

input[type="text"], input[type="password"] {
    border: 2px solid #e3e3e3;
    border-radius: 0.75rem;
    padding: 0.75rem;
    width: 100%;
    transition: border 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

button[type="submit"] {
    background-color: #ff5722;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem;
    width: 100%;
    font-size: 1rem;
    color: white;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #e64a19;
    cursor: pointer;
}

a {
    color: #007bff;
    transition: color 0.3s ease;
}

a:hover {
    color: #0056b3;
}

/* Responsividade */
@media (max-width: 768px) {
    .bg-content {
        width: 90%;
        margin: 0 auto;
        padding: 1.5rem;
    }
}

#eyeIcon {
    right: 200px !important;
}

.modal-content-sistemas {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  background-color: white;
}


/* General Styles */
body {
    background-color: #f3f4f6;
    font-family: 'Inter', sans-serif;
}

header {
    background-color: #1f2937;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

header img {
    height: 48px;
}

#logoutButton {
    position: absolute;
    left: 16px;
}

.header-center {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* Button Styles */
.btn {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: #4f46e5;
    color: white;
}

.btn-primary:hover {
    background-color: #4338ca;
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

.btn-remove {
    background-color: red;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-remove i {
    font-size: 14px;
}

.btn-remove:hover {
    background-color: darkred;
}



/* Main Content */
main {
    padding: 32px;
}

/* Obras Container */
#obrasContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Obra Card */
.obra-card {
    position: relative;
    background-color: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: calc(33.333% - 16px);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.obra-card:hover {
    transform: translateY(-5px);
}

.obra-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.obra-card h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333333;
    margin-bottom: 24px;
    text-align: center;
}

/* Close Button */
#closeModalButton {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ef4444;
    color: white;
    border: none;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 10;
}

#closeModalButton:hover {
    background-color: #dc2626;
}

/* Inputs and Selects */
input, select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background-color: #f9fafb;
    margin-top: 4px;
    font-size: 1rem;
}



#deleteObraButton {
    background-color: #ef4444;
    color: white;
}

#deleteObraButton:hover {
    background-color: #dc2626;
}






.swiper-button-next, .swiper-button-prev, .swiper-pagination-bullet {
    color: #000;
}

.swiper-pagination-bullet {
    background-color: #000;
}



.modal-content {
    width: 90%; /* Definir um percentual ou tamanho fixo */
    max-width: 1200px; /* Limitar a largura máxima */
    height: auto; /* Para evitar expansão vertical */
    max-height: 80vh; /* Limitar a altura máxima */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Três colunas iguais */
    gap: 16px;
    overflow: hidden; /* Prevenir overflow inesperado */
    padding: 24px;
    box-sizing: border-box; /* Garantir que padding/margin não cause expansão */
}

@media (max-width: 768px) {
    .modal-content {
        grid-template-columns: 1fr; /* Uma coluna para telas menores */
        max-width: 100%; /* Garantir que se ajuste na tela */
    }
}

.modal-content input,
.modal-content select,
.modal-content button {
    max-width: 100%; /* Evita que ultrapassem a largura do pai */
    width: 100%; /* Largura total do espaço disponível */
    box-sizing: border-box; /* Inclui padding e border no tamanho total */
}

.swiper-container {
    width: 100%;
    max-height: 50%;
    overflow: hidden;
    margin-top: 16px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* Modal Buttons */
#addImageBtn, #deleteObraButton {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
}

#addImageBtn {
    background-color: #4f46e5;
    color: white;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
}

#addImageBtn:hover {
    background-color: #4338ca;
}



/* Estilos da Tabela de Materiais */
#materiaisTableContainer {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%; /* Garante que o contêiner use toda a largura disponível */
    height: 400px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    overflow: hidden; /* Evita que qualquer conteúdo saia do contêiner */
    position: relative; /* Para evitar problemas de layout */
}


#materiaisTable {
    width: 100%;
    height: 100%;
    border-collapse: separate; /* Evita que bordas entre header e conteúdo colidam */
    table-layout: fixed; /* Faz com que a tabela respeite as larguras das colunas */
    overflow: auto; /* Garante que não ocorra estouro */
}


.tabulator-header {
    width: 100%;
    background-color: #f3f4f6;
    color: #374151;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #d1d5db;
    position: sticky; /* Mantém o header fixo durante o scroll */
    top: 0;
    z-index: 2; /* Garante que o header esteja acima das linhas */
}


.tabulator-row {
    width: 100%;
    border-bottom: 1px solid #d1d5db;
}

.tabulator-cell {
    white-space: nowrap; /* Evita quebra de texto */
    overflow: hidden; /* Esconde o conteúdo que ultrapassar */
    text-overflow: ellipsis; /* Adiciona "..." para conteúdo muito longo */
    padding: 8px; /* Adiciona espaço interno */
    box-sizing: border-box; /* Garante que padding não quebre o layout */
}


.tabulator-footer {
    background-color: #f3f4f6;
    border-top: 1px solid #d1d5db;
    text-align: center;
    padding: 10px;
}

.tabulator-pagination button {
    background-color: #3b82f6;
    border: none;
    color: white;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.tabulator-pagination button:hover, .tabulator-pagination .active {
    background-color: #2563eb;
    font-weight: bold;
}


/* Estilo para habilitar rolagem em modais */
.modal-scrollable {
    overflow-y: auto;
    max-height: 100vh;
    padding-right: 1rem; /* Espaço para a barra de rolagem */
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}


/* Unique styles for total tables */
#totalMateriaisTableContainer,
#totalRefeicoesTableContainer,
#totalTransporteTableContainer {
    display: block; /* Changed from flex to block */
    width: 100%;
    min-height: 100px;
    background-color: #1E3A8A;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 0;
}

/* Ensure rows in the total tables align properly */
#totalMateriaisTableContainer .tabulator-row,
#totalRefeicoesTableContainer .tabulator-row,
#totalTransporteTableContainer .tabulator-row {
    background-color: #1E3A8A;
    color: white;
    font-weight: bold;
    height: 50px;
    text-align: center; /* Removed flex-related properties */
}

/* Customize cell styles */
#totalMateriaisTableContainer .tabulator-cell,
#totalRefeicoesTableContainer .tabulator-cell,
#totalTransporteTableContainer .tabulator-cell {
    border: none;
    text-align: center;
}

/* Ensure the aside starts small and expands only when hovered */
#sidebar {
    width: 64px;
    transition: all 0.3s ease;
}

#sidebar:hover {
    width: 256px; /* Adjust to accommodate text and icons */
}

/* Add padding to the main content */
main {
    margin-left: 64px; /* Matches the collapsed width of aside */
    transition: margin-left 0.3s ease;
}

#sidebar:hover + main {
    margin-left: 256px; /* Matches the expanded width of aside */
}



/* Container da tabela de clientes */
#clientesContainer.custom-clientes-table {
    overflow-x: hidden !important; /* Remove rolagem horizontal */
    box-sizing: border-box; /* Garante que padding e bordas sejam considerados */
    width: 100%; /* Garante que o container ocupe todo o espaço disponível */
}

/* Cabeçalho da tabela */
#clientesContainer.custom-clientes-table .tabulator-header {
    width: 100% !important; /* Alinha o cabeçalho ao corpo */
    box-sizing: border-box;
    overflow-x: hidden; /* Remove qualquer possibilidade de overflow */
}

/* Corpo da tabela */
#clientesContainer.custom-clientes-table .tabulator-tableholder {
    width: 100% !important; /* Garante alinhamento com o cabeçalho */
    overflow-x: hidden !important; /* Remove rolagem horizontal */
}

/* Ajuste das colunas */
#clientesContainer.custom-clientes-table .tabulator-col {
    max-width: none !important; /* Garante que as colunas não ultrapassem os limites */
    white-space: nowrap; /* Impede quebra de linha no conteúdo */
}

/* Ajuste das ações */
#clientesContainer.custom-clientes-table .btn-danger {
    background-color: #ff5c5c; /* Cor personalizada do botão */
    border-radius: 4px; /* Bordas arredondadas */
    color: #fff;
    padding: 5px 10px;
}

/* Container da Tabela de Relatório */
#relatorioMateriaisTableContainer,
#relatorioRefeicoesTableContainer,
#relatorioTransporteTableContainer {
    overflow-x: hidden; /* Remove rolagem horizontal */
    box-sizing: border-box; /* Garante alinhamento */
    width: 100%; /* Preenche todo o espaço disponível */

}

/* Header da Tabela */
#relatorioMateriaisTableContainer .tabulator-header,
#relatorioRefeicoesTableContainer .tabulator-header,
#relatorioTransporteTableContainer .tabulator-header {
    width: 100% !important; /* Alinha o cabeçalho ao corpo */
    box-sizing: border-box;
}

/* Corpo da Tabela */
#relatorioMateriaisTableContainer .tabulator-tableholder,
#relatorioRefeicoesTableContainer .tabulator-tableholder,
#relatorioTransporteTableContainer .tabulator-tableholder {
    width: 100% !important; /* Preenche o container */
    overflow-x: hidden !important; /* Evita overflow horizontal */
}

/* Ajuste das Colunas */
#relatorioMateriaisTableContainer .tabulator-col,
#relatorioRefeicoesTableContainer .tabulator-col,
#relatorioTransporteTableContainer .tabulator-col {
    white-space: nowrap; /* Impede quebra de linha */
}

/* Paginador */
#relatorioMateriaisTableContainer .tabulator-paginator,
#relatorioRefeicoesTableContainer .tabulator-paginator,
#relatorioTransporteTableContainer .tabulator-paginator {
    text-align: center;
    margin-top: 10px;
}

/* Ajuste de altura para as tabelas principais */
#relatorioMateriaisTableContainer,
#relatorioRefeicoesTableContainer,
#relatorioTransporteTableContainer {
    max-height: 300px; /* Limita a altura máxima da tabela */
    overflow-y: auto; /* Adiciona rolagem vertical, se necessário */
    box-sizing: border-box; /* Garante alinhamento com padding e borda */
    width: 100%; /* Ocupa toda a largura do container */
}

/* Responsividade opcional para telas menores */
@media (max-width: 768px) {
    #relatorioMateriaisTableContainer,
    #relatorioRefeicoesTableContainer,
    #relatorioTransporteTableContainer {
        max-height: 50vh; /* Altura máxima ajustada ao tamanho da tela */
    }
}

/* Corrige desalinhamento dos cabeçalhos */
#relatorioMateriaisTableContainer .tabulator-header,
#relatorioRefeicoesTableContainer .tabulator-header,
#relatorioTransporteTableContainer .tabulator-header {
    width: 100%; /* Garante que os cabeçalhos ocupem toda a largura */
    box-sizing: border-box;
}

/* Ajuste de altura para as tabelas principais */
#relatorioMateriaisTableContainer,
#relatorioRefeicoesTableContainer,
#relatorioTransporteTableContainer {
    max-height: 300px; /* Limita a altura máxima da tabela */
    overflow-y: auto; /* Adiciona rolagem vertical, se necessário */
    box-sizing: border-box; /* Garante alinhamento com padding e borda */
    width: 100%; /* Ocupa toda a largura do container */
}

/* Responsividade opcional para telas menores */
@media (max-width: 768px) {
    #relatorioMateriaisTableContainer,
    #relatorioRefeicoesTableContainer,
    #relatorioTransporteTableContainer {
        max-height: 50vh; /* Altura máxima ajustada ao tamanho da tela */
    }
}

/* Corrige desalinhamento dos cabeçalhos */
#relatorioMateriaisTableContainer .tabulator-header,
#relatorioRefeicoesTableContainer .tabulator-header,
#relatorioTransporteTableContainer .tabulator-header {
    width: 100%; /* Garante que os cabeçalhos ocupem toda a largura */
    box-sizing: border-box;
}

#relatorioMateriaisTableContainer,
#relatorioRefeicoesTableContainer,
#relatorioTransporteTableContainer {
    max-height: 300px; /* Limita a altura máxima da tabela */
    overflow-y: auto; /* Adiciona rolagem vertical, se necessário */
    width: 100%; /* Ocupa toda a largura do container */
    background-color: #ffffff; /* Fundo branco */
    border: 1px solid #d1d5db; /* Borda para destacar a tabela */
    box-sizing: border-box; /* Inclui padding e bordas no tamanho total */
}

#totalGeralTableContainer {
    min-height: 70px;
}

/* Ajuste específico para as tabelas totais */
#totalMateriaisTableContainer,
#totalRefeicoesTableContainer,
#totalTransporteTableContainer,
#totalGeralTableContainer {
    overflow: hidden; /* Remove a barra de rolagem */
    width: 100%; /* Garante que a tabela ocupe toda a largura disponível */
    height: auto; /* Ajusta a altura automaticamente */
    box-sizing: border-box; /* Inclui bordas e padding no cálculo do tamanho */
}

/* Garantir alinhamento dos headers e células */
#totalMateriaisTableContainer .tabulator-header,
#totalRefeicoesTableContainer .tabulator-header,
#totalTransporteTableContainer .tabulator-header,
#totalGeralTableContainer .tabulator-header {
    text-align: center;
    height: auto;
}

#totalMateriaisTableContainer .tabulator-cell,
#totalRefeicoesTableContainer .tabulator-cell,
#totalTransporteTableContainer .tabulator-cell,
#totalGeralTableContainer .tabulator-cell {
    text-align: center;
    white-space: nowrap; /* Evita quebra de linha */
    overflow: hidden;
    text-overflow: ellipsis; /* Mostra "..." para conteúdo que exceda */
}

/* Overlay Background */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Dark background with opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure modal is on top */
}

/* Modal Content */
.modal-content-sistemas {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* System Buttons Container */
.modal-grid {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px; /* Space between buttons and footer */
}

/* Modal Button */
.modal-button {
    background-color: #f3f4f6;
    color: #ffffff;
    font-weight: 600;
    padding: 16px;
    border-radius: 8px;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}

.modal-button:hover {
    opacity: 0.9;
}

/* Custom Button Colors */
.obras-button {
    background-color: #fbbf24; /* Yellow */
}

.obras-button:hover {
    background-color: #866512; /* Darker Yellow */
}

.financeiro-button {
    background-color: #2c5598; /* Dark Blue */
}

.financeiro-button:hover {
    background-color: #243e67; /* Darker Blue */
}

.administracao-button {
    background-color: #10b981; /* Green */
}

.administracao-button:hover {
    background-color: #12563f; /* Darker Green */
}

/* Tecnologia Button */
.tecnologia-button {
    background-color: #3d94c3; /* Turquoise */
    color: #ffffff;
}

.tecnologia-button:hover {
    background-color: #254f79; /* Darker Turquoise */
}

/* Facilities Button */
.facilities-button {
    background-color: #4b55b5; /* Purple */
    color: #ffffff;
}

.facilities-button:hover {
    background-color: #313668; /* Darker Purple */
}

/* Login Button */
.icon-login::before {
    content: "\1F6AA"; /* Door Emoji */
    font-size: 32px; /* Icon Size */
    display: block;
    margin-bottom: 8px;
    color: inherit; /* Inherit text color */
}

.icon-obras::before {
    content: "\1F528"; /* Hammer Icon */
}

.icon-financeiro::before {
    content: "\1F4B8"; /* Money Icon */
}

.icon-administracao::before {
    content: "\1F4C8"; /* Ícone de gráfico para Administração */
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
}

.icon-tecnologia::before {
    content: "\1F4BB"; /* Laptop Icon */
    font-size: 32px;
    margin-bottom: 8px;
}

.icon-facilities::before {
    content: "\1F9F9"; /* Bucket Icon */
    font-size: 32px;
    margin-bottom: 8px;
}

/* Footer Close Button */
.modal-footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.close-button {
    background-color: #ef4444; /* Red */
    color: white;
    font-weight: 600;
    padding: 8px 16px; /* Comfortable Spacing */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover {
    background-color: #dc2626; /* Darker Red */
}

/* Hidden Elements */
.hidden { 
    display: none;
}

/* Modal Content */
.modal-content-sistemas {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    width: 95%; /* Aumenta a largura para acomodar os botões em uma linha */
    max-width: 1200px; /* Permite mais espaço horizontal */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* System Buttons Container */
.modal-grid {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: nowrap; /* Impede quebra de linha */
    overflow-x: auto; /* Adiciona rolagem horizontal se necessário */
    margin-bottom: 16px; /* Espaçamento entre botões e o botão de "Fechar" */
}

/* Button Close in Footer */
.modal-footer {
    display: flex;
    justify-content: center;
    margin-top: 16px; /* Espaçamento entre os botões e o botão de "Fechar" */
}

#modalEscolhaSistema {
    z-index: 10000;
}


/* Alert Section */
.alert-section {
    background-color: #b91c1c;
    color: white;
    padding: 16px;
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
    border-radius: 8px;
}

.spinner {
    border-style: solid;
    border-radius: 50%;
    border-width: 4px;
    border-color: #e2e8f0; /* Cinza claro */
    border-top-color: #dc2626; /* Vermelho (usado para o efeito giratório) */
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

/* Animação de rotação */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* styles.css */

/* Core color palette */
:root {
    --bg-page: #f3f4f6;
    --bg-content: #ffffff;
    --primary-color: #3498db;
    --error-color: #e53e3e;
}

/* Cor de fundo personalizada para a página */
.bg-page {
    background-color: var(--bg-page);
}

/* Cor de fundo personalizada para o conteúdo */
.bg-content {
    background-color: var(--bg-content);
}

/* Loader personalizado */
.loader {
    border: 4px solid #f3f3f3; /* Cor de fundo */
    border-top: 4px solid var(--primary-color); /* Cor de destaque */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}

/* Animação do loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsividade adicional */
@media (min-width: 640px) {
    .bg-content {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .max-w-md {
        max-width: 28rem;
    }
}

/* Sidebar styles */
.sidebar-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.sidebar-item:hover {
    background-color: #3b82f6;
}

.sidebar-item i {
    font-size: 1.5rem;
}

.sidebar-item span {
    display: none;
}

#sidebar:hover .sidebar-item span,
#sidebar:hover #logoutButton span {
    display: inline-block;
}

#logoutButton i {
    font-size: 1.5rem;
}

#logoutButton:hover {
    background-color: #dc2626; /* Red color on hover */
}

/* Main content styles */
main {
    padding: 1rem;
}

/* Responsive adjustments */
@media (min-width: 768px) {
    #sidebar:hover {
        width: 16rem;
    }
}



/* Estilo do botão de salvar alterações */
#saveChanges {
    background-color: #4CAF50; /* Verde */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#saveChanges:hover {
    background-color: #45a049; /* Verde mais escuro */
}

/* Estilo do botão de cancelar */
#cancelChanges {
    background-color: #f44336; /* Vermelho */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

#cancelChanges:hover {
    background-color: #d32f2f; /* Vermelho mais escuro */
}

/* Estilo do botão de editar na tabela */
.button-edit {
    background-color: #2196F3; /* Azul */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button-edit:hover {
    background-color: #1976D2; /* Azul mais escuro */
}

/* Estilo do botão de deletar na tabela */
.button-delete {
    background-color: #f44336; /* Vermelho */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 5px;
}

.button-delete:hover {
    background-color: #d32f2f; /* Vermelho mais escuro */
}

/* Estilo para o modal de edição */
#modalEditarUnidade {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modal container estilizado */
.modal-container {
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    background-color: #f9fafb; /* Fundo levemente cinza para diferenciar dos inputs */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    position: relative;
}

/* Estilo dos campos de input */
.modal-container input[type="text"],
.modal-container input[type="email"],
.modal-container input[type="date"],
.modal-container input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db; /* Cor da borda dos inputs */
    border-radius: 6px;
    background-color: #ffffff; /* Fundo branco */
    color: #111827; /* Cor do texto */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo dos campos de input quando focados */
.modal-container input[type="text"]:focus,
.modal-container input[type="email"]:focus,
.modal-container input[type="date"]:focus,
.modal-container input[type="number"]:focus {
    border-color: #2563eb; /* Cor da borda ao focar (azul) */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); /* Sombra ao focar */
    outline: none; /* Remove a outline padrão */
}

/* Estilo para os labels */
.modal-container label {
    font-weight: 500;
    color: #374151; /* Cor do texto dos labels */
}

/* Estilo dos botões */
.modal-container .bg-green-600 {
    background-color: #10b981; /* Verde escuro para o botão salvar */
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.modal-container .bg-green-600:hover {
    background-color: #059669; /* Verde mais escuro no hover */
}

.modal-container .bg-red-600 {
    background-color: #ef4444; /* Vermelho para o botão cancelar */
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.modal-container .bg-red-600:hover {
    background-color: #dc2626; /* Vermelho mais escuro no hover */
}

/* Estilo do botão de fechar no canto superior direito */
#closeModalBtn {
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 12px;
    color: #6b7280; /* Cor cinza escuro */
    transition: color 0.3s ease;
}

#closeModalBtn:hover {
    color: #111827; /* Cor mais escura no hover */
}

/* Responsividade */
@media (min-width: 640px) {
    .modal-container {
        padding: 24px;
    }
}

@media (min-width: 1024px) {
    .modal-container {
        max-width: 60%;
        max-height: 70vh;
    }
}

.hidden {
    display: none !important;
}

/* Estilo base para os botões na tabela */
.selecionar-btn {
    background-color: #3498db; /* Cor de fundo azul */
    color: white; /* Cor do texto/ícone */
    border: none;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: auto; /* Centraliza o botão horizontalmente */
}

/* Efeito de hover para os botões */
.selecionar-btn:hover {
    background-color: #2980b9; /* Cor azul mais escura */
}

/* Ajustes de ícone para centralizar */
.selecionar-btn i {
    font-size: 16px;
}

.loader {
    border: 2px solid rgba(0, 0, 0, 0.1); /* Background da borda */
    border-radius: 50%; /* Deixa circular */
    border-top: 2px solid #3498db; /* Azul da borda giratória */
    width: 24px;
    height: 24px;
    -webkit-animation: spin 1s linear infinite; /* Animação de rotação */
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tab-button {
    transition: all 0.3s;
}

.tab-button.text-blue-600 {
    color: #2563eb; /* Azul */
    border-bottom-width: 4px;
}

.content-section.hidden {
    display: none;
}

/* Limita a largura do contêiner ao tamanho da viewport */
#tabelaContainer {
    max-width: 90vw;
}

.notification-container {
    width: 94vw;                /* 90% da largura da viewport */
    max-width: 94vw;
    overflow-x: auto;           /* Habilita rolagem horizontal */
    display: flex;
    flex-wrap: nowrap;          /* Impede quebra de linha */
    gap: 1rem;                  /* Espaçamento entre os cartões */
    padding: 1rem;
    box-sizing: border-box;
  }
  
  .notification-card {
    flex: 0 0 200px;            /* Largura fixa de 200px para cada cartão */
    border: 1px solid #ddd;     /* Borda clara */
    border-radius: 8px;         /* Bordas arredondadas */
    padding: 1rem;              /* Espaçamento interno */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Sombra sutil para destaque */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }