body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding-top: 40px;
}


/* Overlay full screen para mobile */
.overlay-menu {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 0px);
    background-color: rgba(0,0,0,0.9);
    z-index: 9999999999999;
    display: none; /* escondido por default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Mostra overlay quando aberto */
.overlay-menu.show {
    display: flex;
}

.navbar-nav {
    width: 100%;
}

        /* Links centralizados e maiores */
.overlay-menu .nav-link {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: #fff !important;
    text-align:center;
}

/* Switch de tema */
.overlay-menu .form-check-label {
    color: #fff !important;
}

/* Dark/Light mode */
.dark-mode #mainNavbar {
    background-color: #0d6efd; /* barra azul */
}

.light-mode #mainNavbar {
    background-color: #0d6efd; /* mesma barra azul */
}

.dark-mode .overlay-menu {
    background-color: rgba(0,0,0,0.95);
}

.light-mode .overlay-menu {
    background-color: rgba(0,0,0,0.95);
}

/* Header/Navbar */
/* Header/Navbar */
.navbar {
    background-color: #1e272e; /* tom escuro profissional */
    height: 90px; /* altura maior */
    padding: 0 2rem; /* espaçamento lateral */
    font-size: 1.1rem; /* fonte ligeiramente maior */
    z-index: 1030;
}

    /* Alinhar logo verticalmente */
    .navbar .navbar-brand {
        line-height: 70px; /* igual à altura da navbar */
        font-weight: bold;
        color: #ffffff;
    }

    /* Alinhar os links verticalmente */
    .navbar .nav-link {
        line-height: 70px; /* centraliza verticalmente */
        color: #ffffff;
    }

        .navbar .nav-link:hover {
            color: #f1c40f; /* destaque ao passar o mouse */
        }

/* Botão de toggle (mobile) */
.navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.navbar-toggler-icon {
    filter: invert(1); /* inverte a cor do ícone, útil para fundo escuro */
}

/* Main container flexível */
main.container {
    width: 100%;
    max-width: 100%;
    padding: 20px 40px;
}


/* Overlay full screen só em <992px (lg) */
@media (max-width: 991.98px) {
    .overlay-menu {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.95);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 3rem;
        z-index: 9999;
    }

        /* Links centralizados verticalmente */
        .overlay-menu .nav-link {
            font-size: 1.5rem;
            margin: 0.5rem 0;
        }

        /* Dark/Light switch centrado */
        .overlay-menu .form-check {
            margin-top: 2rem;
        }
}

/* Desktop: menu normal horizontal */
@media (min-width: 992px) {
    .overlay-menu {
        position: static !important;
        height: auto;
        background-color: transparent !important;
        flex-direction: row;
        padding: 0 !important;
    }

        .overlay-menu .nav-link {
            font-size: 1rem;
            margin: 0 0.5rem;
        }

        .overlay-menu .form-check {
            margin-top: 0;
        }
}

/* Cards para separar conteúdo */
.card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Tabela full-width, profissional */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

    .table th {
        background-color: #1e272e;
        color: #ffffff;
        font-weight: 600;
        padding: 12px 15px;
        text-align: left;
    }

    .table td {
        padding: 12px 15px;
        border-bottom: 1px solid #dee2e6;
    }

    .table tr:nth-child(even) {
        background-color: #f9fafb;
    }

/* Botões */
.btn-primary {
    background-color: #1e272e;
    border-color: #1e272e;
}

    .btn-primary:hover {
        background-color: #162026;
        border-color: #162026;
    }

/* Footer fixo */
footer {
    background-color: #1e272e;
    color: #d1d5db;
    padding: 15px 0;
    text-align: center;
}

/* Headings */
h1 {
    color: #1e272e;
    margin-bottom: 25px;
    font-size: 27px;
}

/* Formulários e inputs */
.form-control {
    border-radius: 4px;
}

/* Layout geral flexível */
body.d-flex {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.flex-grow-1 {
    flex-grow: 1;
}

/* Card moderno */
.card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Botões pequenos */
.table .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Badges de status */
.badge {
    font-size: 0.85rem;
}

/* Tabela hover */
.table-hover tbody tr:hover {
    background-color: #f1f3f5;
}




/* light mode padrão */
body.light-mode {
    background-color: #f8f9fa;
    color: #212529;
}

/* Navbar estilo “azul profissional” */
.navbar.light-mode {
    background-color: #1a3b5d; /* azul escuro */
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

    /* Links */
    .navbar.light-mode .nav-link {
        color: #ffffff;
    }

        .navbar.light-mode .nav-link:hover {
            color: #4da1ff; /* azul claro no hover */
        }

    .navbar.light-mode .navbar-brand {
        color: #ffffff;
    }

/* dark mode */
body.dark-mode {
    background-color: #1e272e;
    color: #f1f2f6;
}

.navbar.dark-mode {
    background-color: #11181a;
    color: #f1f2f6;
}

/* Cards */
.card.light-mode {
    background-color: #ffffff;
    color: #212529;
}

.card.dark-mode {
    background-color: #2f3640;
    color: #f1f2f6;
}

/* Tabela */
.table-dark-mode {
    background-color: #2f3640;
    color: #f1f2f6;
}

    .table-dark-mode th,
    .table-dark-mode td {
        border-color: #444;
    }


    .table-dark-mode thead {
        background-color: #1e272e;
        color: #f1f2f6;
    }

    .table-dark-mode tbody tr {
        background-color: #2f3640;
        color: #f1f2f6;
    }

.table-light-mode thead {
    background-color: #f1f2f6;
    color: #212529;
}

.table-light-mode tbody tr {
    background-color: #ffffff;
    color: #212529;
}