@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ========================================= */
/* ESTILOS GLOBAIS (Base Original)           */
/* ========================================= */
@font-face {
    font-family: 'Revue';
    src: url('/static/REVUEN.TTF') format('truetype');
    font-display: swap;
}

/* --- CONFIGURAÇÕES GERAIS --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1,
h2 {
    font-family: 'Revue', sans-serif !important;
}

body {
    background-color: #F5F5F5;
    color: #212121;
    line-height: 1.6;
}

/* --- TELA DE LOGIN --- */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('/static/fachada.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

/* Mobile: background-attachment:fixed não funciona bem no iOS/Android — usar scroll */
@media (max-width: 768px) {
    .login-body {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
        min-height: 100dvh; /* dynamic viewport height — cobre tela inteira inclusive barra do browser */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 100%;
    max-width: 380px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.8s ease-out;
}

.login-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
}

.login-container input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.login-container button {
    width: 100%;
    padding: 12px;
    background-color: #FFD700;
    border: none;
    color: #000;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

/* --- DASHBOARD / CONTAINER PRINCIPAL --- */
.container {
    max-width: 98% !important;
    margin: 15px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* Cabeçalho */
.header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 15px;
}

.user-info {
    display: inline-flex !important;
    align-items: center !important;
}

.title-with-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo {
    height: 60px;
    width: auto;
}

.btn-logout {
    color: #dc3545;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

.module-icon-header {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-bottom: 5px;
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- FORMULÁRIO (ORGANIZAÇÃO EM LINHAS) --- */
.form-section h2 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: #212121;
}

.add-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    align-items: center;
}

/* Linhas com 2 campos */
.form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

/* Linhas com 3 campos (Número, Complemento, Cidade) */
.form-row-triple {
    display: flex;
    gap: 15px;
    width: 100%;
}

/* Grupo de campo + label */
.field-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.field-group label {
    font-size: 11px;
    font-weight: bold;
    color: #212121;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Inputs */
.input-large,
.input-small {
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    font-size: 13px;
    transition: border-color 0.3s;
    background-color: #fff;
    display: block;
}

select.input-large,
select.input-small {
    padding: 0 10px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

.input-large:focus,
.input-small:focus {
    border-color: #ffc107;
    outline: none;
}

/* Botão Principal (Cadastrar/Salvar) */
.btn-main {
    padding: 10px 40px;
    background-color: #FFD700;
    color: #000;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    width: auto;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-main:hover {
    background-color: #e6c200;
}

.btn-cancel {
    margin-top: 10px;
    color: #888;
    text-decoration: none;
    font-size: 14px;
}

.btn-secondary {
    padding: 8px 18px;
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: 0.3s;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: #e2e6ea;
    border-color: #ccc;
}

/* --- TABELA DE CLIENTES --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

th {
    background-color: #f8f9fa;
    color: #555;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}

tr:hover {
    background-color: #fcfcfc;
}

td small {
    color: #888;
    font-size: 11px;
}

/* --- RESPONSIVIDADE DE TABELA --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* --- ESTILOS ESPECÍFICOS PARA TABELAS COMPACTAS (ORDENS / ORÇAMENTOS) --- */
#ordersTable,
#orcTable {
    font-size: 13px;
    /* Fonte levemente menor para caber mais dados */
}

#ordersTable th,
#ordersTable td,
#orcTable th,
#orcTable td {
    padding: 8px 4px;
    /* Padding reduzido para economizar espaço horizontal */
    white-space: normal;
    /* Permitir quebra de linha por padrão para evitar overflow */
    vertical-align: middle;
    border-right: 1px solid #ddd;
    text-align: center !important;
}

#ordersTable th:last-child,
#ordersTable td:last-child,
#orcTable th:last-child,
#orcTable td:last-child {
    border-right: none;
}

#ordersTable td.wrap-text,
#orcTable td.wrap-text {
    white-space: normal;
    /* Permite quebra apenas onde desejado */
    min-width: 120px;
}

#ordersTable .btn-edit,
#ordersTable .btn-del,
#ordersTable .btn-main,
#orcTable .btn-edit,
#orcTable .btn-del,
#orcTable .btn-main {
    padding: 4px 8px;
    font-size: 11px;
    transition: filter 0.2s;
}

#ordersTable .btn-edit:hover,
#ordersTable .btn-del:hover,
#ordersTable .btn-main:hover,
#orcTable .btn-edit:hover,
#orcTable .btn-del:hover,
#orcTable .btn-main:hover {
    filter: brightness(0.85);
}

/* --- BOTÕES DE AÇÃO NA TABELA --- */
.btn-edit {
    background-color: #ffc107;
    color: #000;
    padding: 5px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 6px;
    display: inline-block;
}

.btn-edit:hover {
    background-color: #e6c200;
}

.btn-del {
    background-color: #dc3545;
    color: white;
    padding: 5px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 11px;
    display: inline-block;
}

.btn-del:hover {
    background-color: #c82333;
}

.btn-exit {
    background-color: #dc3545;
    /* Vermelho padrão */
    color: white !important;
    /* Força a cor branca no texto */
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    margin-left: 10px;
    transition: 0.3s;
    display: inline-block;
}

.btn-exit:hover {
    background-color: #c82333;
    /* Vermelho mais escuro no hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-exit-outline {
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 5px 12px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    transition: 0.3s;
}

.btn-exit-outline:hover {
    background-color: #dc3545;
    color: white;
}

/* --- ALERTAS --- */
.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    border-left: 5px solid #dc3545;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    border-left: 5px solid #28a745;
}

/* --- PASSWORD VISIBILITY TOGGLE --- */
.password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-wrapper input {
    display: block !important;
    width: 100% !important;
    padding-right: 45px !important;
    margin-bottom: 0 !important;
}

.login-container .toggle-password {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 32px !important;
    box-shadow: none !important;
}

.toggle-password:hover {
    color: #212121 !important;
}

/* Badges de Usuário */
.badge-user {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

.badge-master {
    background: linear-gradient(135deg, #1a1a1a, #444);
    color: #FFD700;
    border: 1px solid #FFD700;
    font-weight: bold;
}

.badge-admin {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    font-weight: bold;
}

.badge-financeiro {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #17a2b8;
    font-weight: bold;
}

.badge-comum {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #4caf50;
}

.badge-caixa {
    background-color: #f3e5f5;
    color: #4a148c;
    border: 1px solid #9c27b0;
    font-weight: bold;
}

/* --- CARDS DO DASHBOARD --- */
.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 35px;
    padding-bottom: 40px;
}

.dashboard-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    width: 100%;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 180px;
    background-color: #fff;
    border: 2px solid #eee;
    border-radius: 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 15px;
}

.dashboard-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.dashboard-card div:first-child {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-card div:last-child {
    height: 60px !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}

/* Variantes de cores para o hover dos cards */
.card-blue:hover {
    border-color: #007bff;
}

.card-yellow:hover {
    border-color: #ffc107;
}

.card-green:hover {
    border-color: #28a745;
}

.card-purple:hover {
    border-color: #6f42c1;
}

.card-red:hover {
    border-color: #dc3545;
}

.card-cyan:hover {
    border-color: #17a2b8;
}

.card-dark:hover {
    border-color: #343a40;
}

.dashboard-card-icon {
    font-size: 60px !important;
    margin: 0 !important;
}

.dashboard-card-img {
    width: 65px !important;
    height: 65px !important;
    object-fit: contain;
    margin: 0 !important;
}

/* --- ÁREA DE FILTROS E PESQUISA --- */
.filter-search-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 20px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.search-container {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    flex: 1;
    max-width: 600px;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.search-input-wrapper input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 13px;
}

.rows-per-page-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid #eee;
    padding-left: 15px;
}

.rows-per-page-wrapper label {
    font-size: 11px;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- PAGINAÇÃO --- */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 5px;
    border: 1px solid #eee;
}

.pagination-info {
    color: #666;
    font-size: 14px;
}

.pagination-buttons {
    display: flex;
    gap: 5px;
    align-items: center;
}

.btn-pagination {
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.btn-pagination:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- BADGES GERAIS --- */
.badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

/* --- UTILITÁRIOS DE FORMULÁRIO E TABELA --- */
/* ---- Permission Controls Layout ---- */
.perm-controls {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.05rem;
}

.perm-controls .col-checks {
    flex: 1.5;
    min-width: 0;
}

.perm-controls .col-scope {
    display: flex;
    flex-direction: column;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: normal !important;
    font-size: 13px !important;
    text-transform: none !important;
    cursor: pointer;
    background: #f0f7ff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #cce5ff;
    margin: 15px 0;
}

.checkbox-label input {
    width: auto;
    transform: scale(1.3);
}

.form-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.vip-config {
    margin-top: 20px;
    border-left: 5px solid #FFD700;
    background: #fffdf0;
}

.vip-form {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-save-vip {
    margin: 0;
    padding: 10px;
    background: #000 !important;
    color: #FFD700 !important;
    width: 80%;
    margin-top: 0;
}

.title-with-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-export-xlsx {
    padding: 6px 12px;
    border: 1px solid #28a745;
    background: #fff;
    color: #28a745;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.btn-export-pdf {
    padding: 6px 12px;
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.action-cell {
    text-align: center;
}

.lgpd-actions {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.btn-lgpd-export {
    background-color: #6f42c1 !important;
    color: white !important;
    padding: 4px 8px;
    font-size: 10px;
    width: auto;
}

.btn-lgpd-del {
    background-color: #343a40 !important;
    color: white !important;
    padding: 4px 8px;
    border: none;
    font-size: 10px;
    cursor: pointer;
    width: auto;
}

.page-indicator {
    margin: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* --- SELECT2 CUSTOMIZADO --- */
.select2-container .select2-selection--single {
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px !important;
    padding-left: 12px !important;
    font-size: 14px !important;
    color: #212121 !important;
}

/* Zebra stripes na tabela de OS / Ordens */
.order-row:nth-child(odd) {
    background-color: #ffffff;
}

.order-row:nth-child(even) {
    background-color: #f5f5f5;
}

.order-row:hover {
    background-color: #fff9e6 !important;
}

/* --- ÍCONE COMPOSTO CAIXA DIÁRIO --- */
.composite-icon-wrapper {
    position: relative;
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.composite-icon-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.icon-arrow-up {
    position: absolute;
    font-size: 18px;
    color: #28a745;
    top: -2px;
    right: -8px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.icon-arrow-down {
    position: absolute;
    font-size: 18px;
    color: #dc3545;
    bottom: -2px;
    left: -8px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* --- CARDS DE MENU (CAIXA / FINANCEIRO) --- */
.menu-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin-top: 40px;
}

.menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 180px;
    background-color: #fff;
    border: 2px solid #eee;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 15px;
}

.menu-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.menu-card small {
    font-weight: normal;
    font-size: 11px;
    color: #666;
    margin-top: 8px;
}

/* --- TABELA DO CAIXA DIÁRIO --- */
#tabelaCaixa th,
#tabelaCaixa td {
    white-space: nowrap !important;
    padding: 3px 5px !important;
    text-align: center !important;
    border-right: 1px solid #ddd !important;
}

#tabelaCaixa th:last-child,
#tabelaCaixa td:last-child {
    border-right: none !important;
}

#tabelaCaixa tbody tr:nth-child(even) {
    background-color: #f2f2f2 !important;
}

.col-cliente {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

/* Cores variadas para Pares de Entrada + Pagamento Final */
.par-0 {
    background-color: #fff3cd !important;
    border-left: 5px solid #fd7e14 !important;
    outline: 1px solid #fd7e14;
}

.par-1 {
    background-color: #d1ecf1 !important;
    border-left: 5px solid #17a2b8 !important;
    outline: 1px solid #17a2b8;
}

.par-2 {
    background-color: #d4edda !important;
    border-left: 5px solid #28a745 !important;
    outline: 1px solid #28a745;
}

.par-3 {
    background-color: #e2e3e5 !important;
    border-left: 5px solid #6c757d !important;
    outline: 1px solid #6c757d;
}

.par-4 {
    background-color: #f8d7da !important;
    border-left: 5px solid #dc3545 !important;
    outline: 1px solid #dc3545;
}

.mov-row.par-row:hover {
    filter: brightness(0.95);
}

/* Utilitários de ícone pequeno para cabeçalho */
.header-icon-small-up {
    position: absolute;
    font-size: 14px;
    color: #28a745;
    top: -5px;
    right: -5px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.header-icon-small-down {
    position: absolute;
    font-size: 14px;
    color: #dc3545;
    bottom: -5px;
    left: -5px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* --- COMPONENTES DE FECHAMENTO DE CAIXA --- */
.fechamento-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.status-aberto {
    color: #28a745;
    font-weight: bold;
}

.status-fechado {
    color: #6c757d;
    font-weight: bold;
}

.btn-novo {
    background-color: #28a745;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 20px;
    transition: background 0.3s;
}

.btn-novo:hover {
    background-color: #218838;
}

/* --- CORES DE VALORES FINANCEIROS --- */
.saldo-positivo,
.entrada-valor {
    color: #28a745;
    font-weight: bold;
}

.saldo-negativo,
.saida-valor {
    color: #dc3545;
    font-weight: bold;
}

/* --- ESTILOS DE HIERARQUIA (PLANO DE CONTAS) --- */
.hierarchy-1 {
    background-color: #ffffff;
    font-weight: bold;
    border-top: 2px solid #eee;
}

.hierarchy-2 {
    background-color: #fcfcfc;
}

.hierarchy-3 {
    background-color: #ffffff;
    color: #555;
}

.hierarchy-4 {
    background-color: #f9f9f9;
    color: #777;
    font-style: italic;
}

.plano-table td {
    border-bottom: 1px solid #f1f1f1;
    padding: 8px 10px;
}

.btn-edit {
    color: black;
    text-decoration: none;
    margin-right: 10px;
    font-weight: bold;
}

.btn-del {
    color: #dc3545;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.radio-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.radio-group label {
    font-weight: normal;
    cursor: pointer;
}

/* --- ESTILOS DE DOCUMENTOS (OS / NF / RESUMO) --- */
.invoice-box {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    border-radius: 8px;
    color: #333;
    text-align: left;
}

.invoice-box .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.invoice-box h1 {
    margin: 0;
    font-size: 28px;
    color: #000;
}

.invoice-box h2 {
    margin: 0;
    font-size: 20px;
}

.invoice-box p {
    margin: 5px 0;
    font-size: 14px;
}

.invoice-details {
    text-align: right;
}

.invoice-details h2 {
    color: #28a745;
}

.invoice-details.nf h2 {
    color: #007bff;
}

.section-title-doc {
    background-color: #f8f9fa;
    padding: 8px 12px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    border-left: 4px solid #28a745;
    margin: 20px 0 10px 0;
}

.section-title-doc.nf {
    border-left-color: #007bff;
}

.info-grid-doc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.info-item-doc label {
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: bold;
}

.info-item-doc span {
    font-size: 15px;
    font-weight: 500;
}

.invoice-box table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.invoice-box table th {
    background-color: #000;
    color: #fff;
    text-align: left;
    padding: 12px;
    font-size: 12px;
    text-transform: uppercase;
}

.invoice-box table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.totals-doc {
    margin-top: 30px;
    text-align: right;
    border-top: 2px solid #eee;
    padding-top: 10px;
}

.total-row-doc {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.total-row-doc label {
    width: 150px;
    font-size: 14px;
    color: #666;
    text-align: right;
    padding-right: 15px;
}

.total-row-doc span {
    width: 140px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
}

.grand-total-doc {
    background-color: #007bff;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    margin-top: 10px;
}

.grand-total-doc label {
    color: #fff;
    font-size: 16px;
}

.grand-total-doc span {
    font-size: 22px;
}

.no-print-area {
    max-width: 800px;
    margin: 20px auto;
    display: flex;
    gap: 10px;
}

.btn-doc {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    border: none;
    color: #fff;
}

.btn-doc-print {
    background-color: #007bff;
}

.btn-doc-save {
    background-color: #28a745;
}

.btn-doc-back {
    background-color: #000;
    color: #ffc107;
}

.btn-doc-email {
    background-color: #17a2b8;
}

.btn-doc-gov {
    background-color: #6f42c1;
}

/* --- AGENDA E CALENDÁRIO --- */
.agenda-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.calendar-box {
    width: 300px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: fit-content;
}

.schedule-box {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    max-height: 80vh;
}

.month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
}

.month-header button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #555;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 5px;
}

.days-grid div {
    padding: 8px 0;
    font-size: 14px;
}

.day-label {
    font-weight: bold;
    color: #888;
    font-size: 12px !important;
}

.day-cell {
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s;
    position: relative;
}

.day-cell:hover {
    background: #eee;
}

.day-cell.selected {
    background: #ff9800;
    color: #fff;
    font-weight: bold;
}

.day-cell.today {
    border: 1px solid #ff9800;
}

.day-cell.has-event::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #6f42c1;
    border-radius: 50%;
}

.timeline {
    position: relative;
    margin-top: 20px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.time-row {
    display: flex;
    border-bottom: 1px solid #eee;
    height: 50px;
}

.time-label {
    width: 60px;
    font-size: 12px;
    color: #777;
    text-align: right;
    padding-right: 15px;
    border-right: 1px solid #ddd;
    padding-top: 5px;
}

.time-slot {
    flex: 1;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.time-slot:hover {
    background: #f9f9f9;
}

.event-block {
    position: absolute;
    left: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    z-index: 10;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left-width: 4px;
    border-left-style: solid;
}

.event-block:hover {
    z-index: 20;
    white-space: normal;
    filter: brightness(0.95);
}

.event-block .event-time {
    font-size: 10px;
    opacity: 0.8;
    font-weight: normal;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1055 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop {
    z-index: 1050 !important;
}

.modal-content .btn-main,
.modal-content .btn-secondary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.modal-content .btn-main {
    flex: 1;
    background-color: #FFD700;
    color: #000;
}

.modal-content .btn-secondary {
    flex: 1;
    background-color: #6c757d;
    color: #fff;
}

.modal-content {
    background: #fff;
    margin: 5% auto;
    padding: 25px;
    border-radius: 8px;
    width: 450px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-height: 85vh;
    overflow-y: auto;
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover {
    color: #000;
}

/* --- PERMISSÕES E PERFIS --- */
.module-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 4px;
    overflow: hidden;
}

.module-header {
    background: linear-gradient(90deg, #343a40 0%, #495057 100%);
    color: #fff;
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.module-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.sub-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    margin: 14px;
    overflow: hidden;
}

.sub-header {
    background: #e9ecef;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.82rem;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.perm-controls {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.05rem;
    /* minimal spacing between columns */
}



.col-checks {
    padding: 14px 4px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.col-scope {
    padding: 14px 16px 14px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
}

.col-scope .perm-radio-item {
    width: 100%;
    max-width: 200px;
    box-sizing: border-box;
}

.perm-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid #e9ecef;
    background: #fff;
    transition: all 0.15s;
    cursor: pointer;
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
    line-height: 1.2;
}

.status-perm-item {
    max-width: 320px !important;
}

.global-perm-item {
    max-width: 550px !important;
}

.perm-check-item:hover {
    background: #eef4ff;
    border-color: #0d6efd;
}

.perm-check-item.active-check {
    background: #e7f1ff;
    border-color: #0d6efd;
}

.perm-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid #e9ecef;
    background: #fff;
    transition: all 0.15s;
    cursor: pointer;
}

.perm-radio-item.radio-all {
    border-color: #dc354533;
    background: #fff5f5;
}

.perm-radio-item.radio-all:hover {
    background: #ffe0e0;
    border-color: #dc3545;
}

.perm-radio-item.radio-linked {
    border-color: #ffc10733;
    background: #fffdf0;
}

.perm-radio-item.radio-linked:hover {
    background: #fff3cd;
    border-color: #ffc107;
}

.perm-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #212529;
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}

.perm-label small {
    display: block;
    color: #6c757d;
    font-weight: 400;
    font-size: 0.7rem;
}

.sticky-bottom-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0;
    border-top: 1px solid #ddd;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
    z-index: 1000;
}

.btn-save-custom {
    background-color: #ffc107;
    color: #000;
    border: none;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.btn-save-custom:hover {
    background-color: #e0a800;
    color: #000;
}

.toggle-all-sub {
    font-size: 0.7rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    text-transform: none;
    font-weight: normal;
}

.toggle-all-sub input {
    width: 13px;
    height: 13px;
}

.col-checks .group-label {
    font-size: 0.68rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-top: 4px;
}

[data-bs-toggle="collapse"].collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* --- GESTÃO DE PERFIS (DISTINTIVOS / CRONÔMETRO) --- */
.badge-info-label {
    background-color: #e3f2fd;
    color: #0d6efd;
    border: 1px solid #0d6efd;
    font-size: 0.75rem;
}

.badge-option {
    transition: all 0.2s;
    cursor: pointer;
}

.badge-option:hover {
    background-color: #fff;
    border-color: #ffc107 !important;
    transform: scale(1.1);
}

.badge-option.active {
    background-color: #fff;
    border-color: #ffc107 !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

.color-option {
    transition: all 0.2s;
    cursor: pointer;
}

.color-option:hover {
    transform: scale(1.1);
    border-color: #fff !important;
}

.color-option.active {
    border-color: #000 !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

@media print {

    .no-print-area,
    .hide-on-print {
        display: none !important;
    }

    body {
        background-color: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .invoice-box {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    .section-title-doc {
        margin: 10px 0 5px 0;
        padding: 5px 10px;
        font-size: 11px;
    }

    .info-grid-doc {
        gap: 10px;
        margin-bottom: 10px;
    }

    .info-item-doc span {
        font-size: 13px;
    }

    .invoice-box table td,
    .invoice-box table th {
        padding: 8px;
        font-size: 12px;
    }

    .totals-doc {
        margin-top: 15px;
    }

    .total-row-doc label,
    .total-row-doc span {
        font-size: 13px;
    }
}

/* Card Temático Visual Produções (Amarelo e Preto) */
.card-vp {
    background-color: #ffc107 !important;
    color: #000000 !important;
    border-color: #e0a800 !important;
}

.card-vp:hover {
    background-color: #ffd043 !important;
    border-color: #000000 !important;
    color: #000000 !important;
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================= */
/* MÓDULO: bancos.html (page-bancos) */
/* ========================================= */
.page-bancos .modal-bnc-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeInOverlayBnc 0.3s
}

.page-bancos .modal-bnc-overlay.active {
    display: block
}

@keyframes fadeInOverlayBnc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownBnc {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-bancos .modal-bnc-container {
    background-color: #fcfcfc;
    margin: 4vh auto;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownBnc 0.3s ease;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-bancos .modal-bnc-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-bancos .modal-bnc-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-bancos .modal-bnc-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-bancos .modal-bnc-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-bancos .modal-bnc-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-bancos .modal-bnc-body {
    padding: 22px 26px 28px
}

.page-bancos .btn-cadastrar-bnc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
    color: #000;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
    transition: all 0.2s ease;
    text-decoration: none
}

.page-bancos .btn-cadastrar-bnc:hover {
    transform: translatey(-2px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%)
}



/* ========================================= */
/* MÓDULO: cadastro_lancamentos.html (page-cadastro-lancamentos) */
/* ========================================= */
.page-cadastro-lancamentos select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px
}

.page-cadastro-lancamentos .toggle-icon {
    display: inline-block;
    width: 12px;
    transition: transform 0.2s;
    color: #888;
    font-size: 10px
}

.page-cadastro-lancamentos .branch-row:hover {
    background-color: #f0f0f0 !important
}

.page-cadastro-lancamentos .collapsed-child,
.page-cadastro-lancamentos .branch-hidden {
    display: none !important
}



/* ========================================= */
/* MÓDULO: change_password.html (page-change-password) */
/* ========================================= */
.page-change-password .password-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.page-change-password .password-wrapper input {
    padding-right: 40px !important
}

.page-change-password .toggle-password {
    position: absolute;
    right: 10px;
    top: 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    z-index: 2
}



/* ========================================= */
/* MÓDULO: clientes.html (page-clientes) */
/* ========================================= */
/* ── Modal de Cadastro de Cliente ── */
.page-clientes .modal-cliente-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: fadeInOverlayC 0.25s ease
}

.page-clientes .modal-cliente-overlay.active {
    display: block
}

@keyframes fadeInOverlayC {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownC {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-clientes .modal-cliente-container {
    background: #fff;
    margin: 28px auto;
    padding: 0;
    border-radius: 14px;
    width: 94%;
    max-width: 1000px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownC 0.3s ease;
    max-height: 92vh;
    overflow-y: auto
}

.page-clientes .modal-cliente-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #ffc107;
    background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-clientes .modal-cliente-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-clientes .modal-cliente-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-clientes .modal-cliente-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: none;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-clientes .modal-cliente-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-clientes .modal-cliente-body {
    padding: 22px 26px 28px
}

/* Botão Cadastrar */
.page-clientes .btn-cadastrar-cliente {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffc107, #ffb300);
    color: #000;
    font-weight: bold;
    font-size: 13px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.4px
}

.page-clientes .btn-cadastrar-cliente:hover {
    transform: translatey(-1px);
    box-shadow: 0 5px 16px rgba(255, 193, 7, 0.5)
}

.page-clientes .btn-cadastrar-cliente i {
    font-size: 15px
}

/* Separador de seção interna do modal */
.page-clientes .modal-section-title {
    font-size: 12px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee
}



/* ========================================= */
/* MÓDULO: documentos_funcionario.html (page-documentos-funcionario) */
/* ========================================= */
/* Premium style override with Outfit font */
body.page-documentos-funcionario {
    font-family: "Outfit", sans-serif !important;
    background-color: #f4f6f8;
    color: #2b2b2b
}

.page-documentos-funcionario .container {
    max-width: 1200px !important;
    margin: 15px auto;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid #eaeaea
}

.page-documentos-funcionario .header-area {
    border-bottom: 2px solid #ffc107 !important;
    padding-bottom: 20px;
    margin-bottom: 25px
}

.page-documentos-funcionario .title-with-logo h1 {
    font-size: 26px;
    margin: 0;
    color: #111
}

/* Employee Information Card */
.page-documentos-funcionario .employee-info-card {
    background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
    border-radius: 12px;
    padding: 16px 20px;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1)
}

.page-documentos-funcionario .employee-info-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 193, 7, 0.05);
    border-radius: 50%;
    pointer-events: none
}

.page-documentos-funcionario .employee-details {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.page-documentos-funcionario .employee-name {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #ffc107;
    letter-spacing: -0.5px
}

.page-documentos-funcionario .employee-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #ccc;
    margin-top: 5px
}

.page-documentos-funcionario .employee-meta span strong {
    color: #fff
}

.page-documentos-funcionario .employee-status-badge {
    background-color: #28a745;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3)
}

.page-documentos-funcionario .status-afastado {
    background-color: #ffc107;
    color: #000;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3)
}

.page-documentos-funcionario .status-desativado {
    background-color: #dc3545;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3)
}

/* Responsive Columns */
.page-documentos-funcionario .docs-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px
}

@media (max-width: 992px) {
    .docs-grid {
        grid-template-columns: 1fr
    }
}

/* Document list area */
.page-documentos-funcionario .section-box {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01)
}

.page-documentos-funcionario .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px
}

/* Document list cards */
.page-documentos-funcionario .doc-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 5px
}

.page-documentos-funcionario .doc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #fdfdfd;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    transition: all 0.25s ease;
    position: relative
}

.page-documentos-funcionario .doc-card:hover {
    transform: translatey(-2px);
    border-color: #ffc107;
    background: #fffdf5;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03)
}

.page-documentos-funcionario .doc-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0
}

.page-documentos-funcionario .doc-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: background 0.3s
}

.page-documentos-funcionario .doc-card:hover .doc-icon-wrapper {
    background: #fff3cd
}

.page-documentos-funcionario .icon-pdf {
    color: #dc3545
}

.page-documentos-funcionario .icon-zip {
    color: #fd7e14
}

.page-documentos-funcionario .icon-img {
    color: #28a745
}

.page-documentos-funcionario .icon-other {
    color: #007bff
}

.page-documentos-funcionario .doc-meta {
    min-width: 0;
    flex: 1
}

.page-documentos-funcionario .doc-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.page-documentos-funcionario .doc-submeta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    flex-wrap: wrap
}

.page-documentos-funcionario .doc-submeta span strong {
    color: #555
}

.page-documentos-funcionario .doc-badge {
    background: #f1f3f5;
    color: #495057;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500
}

.page-documentos-funcionario .doc-badge-legacy {
    background: #ffeeba;
    color: #856404
}

.page-documentos-funcionario .doc-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.page-documentos-funcionario .btn-action-round {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    text-decoration: none;
    color: #495057
}

.page-documentos-funcionario .btn-action-round:hover {
    border-color: #ffc107;
    background: #fffdf5;
    color: #b78a00;
    transform: scale(1.08)
}

.page-documentos-funcionario .btn-action-delete:hover {
    border-color: #dc3545;
    background: #fff5f5;
    color: #dc3545
}

/* Drag & Drop Upload Zone */
.page-documentos-funcionario .upload-container {
    border: 2px dashed #ffc107;
    background: #fffdf6;
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden
}

.page-documentos-funcionario .upload-container:hover,
.page-documentos-funcionario .upload-container.dragover {
    background: #fff9e7;
    border-color: #e0a800
}

.page-documentos-funcionario .upload-cloud-icon {
    font-size: 48px;
    color: #ffc107;
    margin-bottom: 12px;
    transition: transform 0.3s ease
}

.page-documentos-funcionario .user-tooltip-container:hover .user-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Circle icon for user tooltip */
.user-tooltip-circle {
    width: 16px;
    height: 16px;
    background-color: #e0e0e0;
    /* gray background */
    border: 1px solid #000;
    /* black border */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #000;
    /* black icon */
    cursor: pointer;
    margin-left: 4px;
}

transform: translatey(-5px)
}

.page-documentos-funcionario .upload-text {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px
}

.page-documentos-funcionario .upload-hint {
    font-size: 12px;
    color: #777;
    margin-bottom: 16px
}

/* Style multi-file selection display */
.page-documentos-funcionario .selected-files-list {
    margin-top: 15px;
    text-align: left;
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid #f1f1f1;
    padding-top: 10px;
    display: none
}

.page-documentos-funcionario .selected-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #555;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-bottom: 5px
}

.page-documentos-funcionario .selected-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%
}

/* Loading Spinner */
.page-documentos-funcionario .loading-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 100;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px
}

.page-documentos-funcionario .spinner {
    width: 45px;
    height: 45px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ffc107;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

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

    100% {
        transform: rotate(360deg);
    }
}

.page-documentos-funcionario .loading-text {
    font-size: 14px;
    font-weight: 600;
    color: #333
}



/* ========================================= */
/* MÓDULO: edit.html (page-edit) */
/* ========================================= */
.page-edit .modal-cli-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit .modal-cli-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit .modal-cli-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit .modal-cli-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit .modal-cli-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit .modal-cli-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit .modal-cli-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit .modal-cli-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_banco.html (page-edit-banco) */
/* ========================================= */
.page-edit-banco .modal-bnc-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-banco .modal-bnc-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-banco .modal-bnc-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-banco .modal-bnc-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-banco .modal-bnc-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-banco .modal-bnc-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-banco .modal-bnc-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-banco .modal-bnc-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_filial.html (page-edit-filial) */
/* ========================================= */
.page-edit-filial .modal-fil-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-filial .modal-fil-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-filial .modal-fil-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-filial .modal-fil-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-filial .modal-fil-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-filial .modal-fil-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-filial .modal-fil-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-filial .modal-fil-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_fornecedor.html (page-edit-fornecedor) */
/* ========================================= */
.page-edit-fornecedor .modal-frn-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-fornecedor .modal-frn-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-fornecedor .modal-frn-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-fornecedor .modal-frn-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-fornecedor .modal-frn-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-fornecedor .modal-frn-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-fornecedor .modal-frn-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-fornecedor .modal-frn-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_orcamento.html (page-edit-orcamento) */
/* ========================================= */
.page-edit-orcamento .modal-orc-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-orcamento .modal-orc-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 1300px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-orcamento .modal-orc-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-orcamento .modal-orc-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-orcamento .modal-orc-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-orcamento .modal-orc-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-orcamento .modal-orc-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-orcamento .modal-orc-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_ordem.html (page-edit-ordem) */
/* ========================================= */
.page-edit-ordem .modal-os-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-ordem .modal-os-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 1300px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-ordem .modal-os-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-ordem .modal-os-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-ordem .modal-os-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-ordem .modal-os-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-ordem .modal-os-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-ordem .modal-os-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_servico.html (page-edit-servico) */
/* ========================================= */
.page-edit-servico .modal-svc-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-servico .modal-svc-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-servico .modal-svc-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-servico .modal-svc-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-servico .modal-svc-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-servico .modal-svc-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-servico .modal-svc-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-servico .modal-svc-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: edit_user.html (page-edit-user) */
/* ========================================= */
.page-edit-user .modal-usr-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000
}

.page-edit-user .modal-usr-container {
    background-color: #fcfcfc;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-edit-user .modal-usr-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-edit-user .modal-usr-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-edit-user .modal-usr-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-edit-user .modal-usr-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none
}

.page-edit-user .modal-usr-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-edit-user .modal-usr-body {
    padding: 22px 26px 28px
}



/* ========================================= */
/* MÓDULO: filiais.html (page-filiais) */
/* ========================================= */
.page-filiais .modal-fil-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeInOverlayFil 0.3s
}

.page-filiais .modal-fil-overlay.active {
    display: block
}

@keyframes fadeInOverlayFil {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownFil {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-filiais .modal-fil-container {
    background-color: #fcfcfc;
    margin: 4vh auto;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownFil 0.3s ease;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-filiais .modal-fil-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-filiais .modal-fil-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-filiais .modal-fil-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-filiais .modal-fil-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-filiais .modal-fil-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-filiais .modal-fil-body {
    padding: 22px 26px 28px
}

.page-filiais .btn-cadastrar-fil {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
    color: #000;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
    transition: all 0.2s ease;
    text-decoration: none
}

.page-filiais .btn-cadastrar-fil:hover {
    transform: translatey(-2px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%)
}



/* ========================================= */
/* MÓDULO: fornecedores.html (page-fornecedores) */
/* ========================================= */
.page-fornecedores .modal-forn-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeInOverlayForn 0.3s
}

.page-fornecedores .modal-forn-overlay.active {
    display: block
}

@keyframes fadeInOverlayForn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownForn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-fornecedores .modal-forn-container {
    background-color: #fcfcfc;
    margin: 4vh auto;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownForn 0.3s ease;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-fornecedores .modal-forn-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-fornecedores .modal-forn-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-fornecedores .modal-forn-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-fornecedores .modal-forn-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-fornecedores .modal-forn-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-fornecedores .modal-forn-body {
    padding: 22px 26px 28px
}

.page-fornecedores .btn-cadastrar-forn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
    color: #000;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
    transition: all 0.2s ease;
    text-decoration: none
}

.page-fornecedores .btn-cadastrar-forn:hover {
    transform: translatey(-2px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%)
}



/* ========================================= */
/* MÓDULO: funcionarios.html (page-funcionarios) */
/* ========================================= */
/* Modal Popup for Edit Form */
.page-funcionarios .modal-edit-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: fadeInOverlay 0.25s ease
}

.page-funcionarios .modal-edit-overlay.active {
    display: block
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-funcionarios .modal-edit-container {
    background-color: #fff;
    margin: 15px auto;
    padding: 0;
    border-radius: 14px;
    width: 92%;
    max-width: 1100px;
    box-shadow: 0 12px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid #e0e0e0;
    animation: slideDown 0.3s ease;
    max-height: 96vh;
    overflow-y: auto
}

.page-funcionarios .modal-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    border-bottom: 2px solid #f1f1f1;
    background: #f8f9fa;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-funcionarios .modal-edit-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px
}

.page-funcionarios .modal-edit-close {
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
    border: none;
    background: none
}

.page-funcionarios .modal-edit-close:hover {
    color: #dc3545
}

.page-funcionarios .modal-edit-body {
    padding: 20px 25px 25px 25px
}

/* Modern Tab System styling */
.page-funcionarios .tab-system {
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    width: 100%
}

.page-funcionarios .tab-header {
    display: flex;
    background: #f1f1f1;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap
}

.page-funcionarios .tab-btn {
    padding: 12px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    transition: background 0.2s, color 0.2s;
    font-size: 12px;
    text-transform: uppercase;
    outline: none
}

.page-funcionarios .tab-btn:hover {
    background: #e9e9e9
}

.page-funcionarios .tab-btn.active {
    background: #fff;
    color: #000;
    border-bottom: 3px solid #dc3545;
    /* Brand color or standard accent */
}

.page-funcionarios .tab-content {
    display: none;
    padding: 20px
}

.page-funcionarios .tab-content.active {
    display: block
}

.page-funcionarios .dynamic-table-container {
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 10px;
    background: #fff
}

.page-funcionarios .dynamic-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px
}

.page-funcionarios .dynamic-table th,
.page-funcionarios .dynamic-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    text-align: left
}

.page-funcionarios .dynamic-table th {
    background-color: #f8f9fa;
    font-size: 11px;
    color: #666;
    text-transform: uppercase
}

.page-funcionarios .btn-add-row {
    background-color: #28a745;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px
}

.page-funcionarios .btn-add-row:hover {
    background-color: #218838
}

.page-funcionarios .btn-remove-row {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px
}

.page-funcionarios .btn-remove-row:hover {
    background-color: #c82333
}

.page-funcionarios .badge-status {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase
}

.page-funcionarios .status-ativo {
    background-color: #d4edda;
    color: #155724
}

.page-funcionarios .status-afastado {
    background-color: #fff3cd;
    color: #856404
}

.page-funcionarios .status-desativado {
    background-color: #f8d7da;
    color: #721c24
}



/* ========================================= */
/* MÓDULO: orcamentos.html (page-orcamentos) */
/* ========================================= */
/* ══════════════ MODAL PREMIUM DE ORÇAMENTO ══════════════ */
.page-orcamentos .modal-orc-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: fadeInOverlayOrc 0.3s ease
}

.page-orcamentos .modal-orc-overlay.active {
    display: block
}

@keyframes fadeInOverlayOrc {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownOrc {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-orcamentos .modal-orc-container {
    background-color: #fcfcfc;
    margin: 4vh auto;
    border-radius: 14px;
    width: 96%;
    max-width: 1100px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownOrc 0.3s ease;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-orcamentos .modal-orc-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-orcamentos .modal-orc-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-orcamentos .modal-orc-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-orcamentos .modal-orc-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-orcamentos .modal-orc-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-orcamentos .modal-orc-body {
    padding: 22px 26px 28px
}

.page-orcamentos .btn-cadastrar-orc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
    color: #000;
    border: none;
    padding: 10px 22px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.4px
}

.page-orcamentos .btn-cadastrar-orc:hover {
    transform: translatey(-1px);
    box-shadow: 0 5px 16px rgba(255, 193, 7, 0.5)
}

.page-orcamentos .btn-cadastrar-orc i {
    font-size: 15px
}



/* ========================================= */
/* MÓDULO: ordens.html (page-ordens) */
/* ========================================= */
.page-ordens .status-atraso {
    background-color: #dc3545;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    animation: pulse-red 2s infinite
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* ── Modal de Nova OS ── */
.page-ordens .modal-os-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: fadeInOverlayOS 0.25s ease
}

.page-ordens .modal-os-overlay.active {
    display: block
}

@keyframes fadeInOverlayOS {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownOS {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-ordens .modal-os-container {
    background: #fff;
    margin: 28px auto;
    padding: 0;
    border-radius: 14px;
    width: 96%;
    max-width: 1100px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownOS 0.3s ease;
    max-height: 92vh;
    overflow-y: auto
}

.page-ordens .modal-os-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 2px solid #ffc107;
    background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-ordens .modal-os-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-ordens .modal-os-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-ordens .modal-os-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: none;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-ordens .modal-os-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-ordens .modal-os-body {
    padding: 22px 26px 28px
}

.page-ordens .btn-cadastrar-os {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffc107, #ffb300);
    color: #000;
    font-weight: bold;
    font-size: 13px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.4px
}

.page-ordens .btn-cadastrar-os:hover {
    transform: translatey(-1px);
    box-shadow: 0 5px 16px rgba(255, 193, 7, 0.5)
}

.page-ordens .btn-cadastrar-os i {
    font-size: 15px
}

/* Separador de seção interna do modal */
.page-ordens .modal-section-title {
    font-size: 12px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eee
}



/* ========================================= */
/* MÓDULO: separador_holerites.html (page-separador-holerites) */
/* ========================================= */
body.page-separador-holerites {
    background-color: #f4f6f9 !important;
    color: #333 !important
}

.page-separador-holerites .header-area {
    border-bottom: 2px solid #ffc107 !important;
    margin-bottom: 20px;
    padding-bottom: 10px
}

.page-separador-holerites .header-area h1 {
    color: #000 !important
}

.page-separador-holerites .module-icon-header {
    width: 42px !important;
    height: 42px !important;
    margin-left: 10px;
    vertical-align: middle
}

.page-separador-holerites .user-info {
    color: #333 !important
}

.page-separador-holerites .pdf-container {
    max-width: 1200px;
    margin: 6px auto;
    padding: 12px;
    background: #fff !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #eef0f2
}

.page-separador-holerites .upload-section {
    border: 2px dashed #ffc107 !important;
    padding: 10px 15px;
    text-align: center;
    border-radius: 12px;
    background: #fffdf5 !important;
    margin-bottom: 14px;
    transition: all 0.3s ease;
    color: #333 !important
}

.page-separador-holerites .upload-section:hover {
    background: #fff9e6 !important;
    border-color: #e0a800 !important
}

.page-separador-holerites .upload-icon {
    font-size: 42px;
    color: #ffc107 !important;
    margin-bottom: 4px
}

.page-separador-holerites .cnpj-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 20px
}

@media (max-width: 992px) {
    .cnpj-columns {
        grid-template-columns: 1fr
    }
}

.page-separador-holerites .cnpj-column {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.page-separador-holerites .cnpj-header {
    padding: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.page-separador-holerites .cnpj-header.cnpj-dynamic {
    background: #000 !important;
    color: #ffc107 !important;
    cursor: pointer;
    user-select: none
}

.page-separador-holerites .cnpj-header.cnpj-dynamic:hover {
    background: #1a1a1a !important
}

.page-separador-holerites .cnpj-header.cnpj-outros {
    background: #333 !important;
    color: #fff !important;
    cursor: pointer;
    user-select: none
}

.page-separador-holerites .cnpj-header.cnpj-outros:hover {
    background: #444 !important
}

.page-separador-holerites .cnpj-header .toggle-icon {
    transition: transform 0.3s ease;
    font-size: 14px
}

.page-separador-holerites .cnpj-header .toggle-icon.collapsed {
    transform: rotate(-90deg)
}

.page-separador-holerites .cnpj-body.collapsed {
    display: none !important
}

.page-separador-holerites .cnpj-header .badge-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px
}

.page-separador-holerites .cnpj-body {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 600px;
    overflow-y: auto
}

.page-separador-holerites .holerith-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 12px;
    background: #fbfbfb;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.page-separador-holerites .holerith-card:hover {
    border-color: #d32f2f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    background: #fff
}

.page-separador-holerites .holerith-info {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.page-separador-holerites .holerith-emp {
    font-weight: bold;
    color: #333;
    font-size: 14px
}

.page-separador-holerites .holerith-meta {
    font-size: 12px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 10px
}

.page-separador-holerites .holerith-actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.page-separador-holerites .btn-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: transform 0.2s ease, filter 0.2s ease;
    border: none;
    cursor: pointer
}

.page-separador-holerites .btn-action:hover {
    transform: scale(1.1);
    filter: brightness(0.9)
}

.page-separador-holerites .btn-wa {
    background-color: #25d366
}

.page-separador-holerites .btn-mail {
    background-color: #007bff
}

.page-separador-holerites .btn-dl {
    background-color: #e83e8c
}

.page-separador-holerites .btn-del-hl {
    background-color: #dc3545
}

.page-separador-holerites .empty-column {
    text-align: center;
    padding: 40px 15px;
    color: #aaa;
    font-size: 14px;
    border: 2px dashed #eee;
    border-radius: 8px;
    margin: 10px 0
}

.page-separador-holerites .badge-ref {
    background: #ffc107 !important;
    color: #000 !important;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 11px
}



/* ========================================= */
/* MÓDULO: servicos.html (page-servicos) */
/* ========================================= */
.page-servicos .modal-srv-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeInOverlaySrv 0.3s
}

.page-servicos .modal-srv-overlay.active {
    display: block
}

@keyframes fadeInOverlaySrv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownSrv {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-servicos .modal-srv-container {
    background-color: #fcfcfc;
    margin: 8vh auto;
    border-radius: 14px;
    width: 96%;
    max-width: 800px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownSrv 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
    position: relative
}

.page-servicos .modal-srv-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-servicos .modal-srv-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-servicos .modal-srv-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-servicos .modal-srv-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-servicos .modal-srv-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-servicos .modal-srv-body {
    padding: 22px 26px 28px
}

.page-servicos .btn-cadastrar-srv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
    color: #000;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
    transition: all 0.2s ease;
    text-decoration: none
}

.page-servicos .btn-cadastrar-srv:hover {
    transform: translatey(-2px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%)
}



/* ========================================= */
/* MÓDULO: usuarios.html (page-usuarios) */
/* ========================================= */
.page-usuarios .modal-usr-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeInOverlayUsr 0.3s
}

.page-usuarios .modal-usr-overlay.active {
    display: block
}

@keyframes fadeInOverlayUsr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDownUsr {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.page-usuarios .modal-usr-container {
    background-color: #fcfcfc;
    margin: 4vh auto;
    border-radius: 14px;
    width: 96%;
    max-width: 900px;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
    border: 1px solid #e0e0e0;
    animation: slideDownUsr 0.3s ease;
    max-height: 92vh;
    overflow-y: auto;
    position: relative
}

.page-usuarios .modal-usr-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px 14px 0 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.page-usuarios .modal-usr-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 9px
}

.page-usuarios .modal-usr-header h2 i {
    color: #ffc107;
    font-size: 20px
}

.page-usuarios .modal-usr-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s
}

.page-usuarios .modal-usr-close:hover {
    color: #dc3545;
    transform: scale(1.15)
}

.page-usuarios .modal-usr-body {
    padding: 22px 26px 28px
}

.page-usuarios .btn-cadastrar-usr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
    color: #000;
    padding: 12px 25px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3);
    transition: all 0.2s ease;
    text-decoration: none
}

.page-usuarios .btn-cadastrar-usr:hover {
    transform: translatey(-2px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4);
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%)
}

.flatpickr-calendar {
    z-index: 99999 !important;
}

.page-ordens #ordersTable th,
.page-ordens #ordersTable td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* --- USER TOOLTIP STYLES --- */
.user-tooltip-container {
    position: relative;
    display: inline-block;
    z-index: 1;
    /* ensure tooltip sits above flex items */
}

.user-tooltip-container .user-tooltip-text {
    visibility: hidden;
    width: 160px;
    background-color: #212529;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 14px;
    position: absolute;
    z-index: 10000;
    top: 140%;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    font-size: 11px;
    line-height: 1.5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #343a40;
}

.user-tooltip-container .user-tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 12px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #212529 transparent;
}

.user-tooltip-container:hover .user-tooltip-text {
    visibility: visible;
    opacity: 1;
}

.user-tooltip-circle {
    width: 16px;
    height: 16px;
    background-color: #e0e0e0;
    border: 1px solid #000;
    border-radius: 50%;
    display: inline-flex !important;
    /* ensure centered content */
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #000;
    cursor: pointer;
    margin-left: 4px;
}

/* --- ORDENS TABLE STYLES --- */
#ordersTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 1rem;
}

#ordersTable th,
#ordersTable td {
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

#ordersTable th {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* ==========================================================================
   PAINEL DE MONITORAMENTO (Exclusivo Master)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

.monitor-body {
    background: radial-gradient(circle at 50% 0%, #0f1d30 0%, #070c14 100%) !important;
    color: #e0f7ff !important;
    font-family: 'Outfit', sans-serif !important;
    min-height: 100vh;
}

.monitor-container {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: transparent !important;
    box-shadow: none !important;
}

.monitor-header-area {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 50px !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
    padding-bottom: 20px !important;
}

.monitor-title-with-logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.monitor-header-logo {
    height: 45px !important;
    width: auto !important;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4)) !important;
}

.monitor-h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    background: linear-gradient(90deg, #00d4ff, #0077ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
    font-family: 'Outfit', sans-serif !important;
}

.btn-monitor-back {
    color: #e0f7ff !important;
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.05) !important;
}

.btn-monitor-back:hover {
    background: #00d4ff !important;
    color: #070c14 !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

.monitor-subtitle {
    color: #8fa3b7 !important;
    font-size: 16px !important;
    margin-bottom: 40px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
}

.monitor-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 30px !important;
    margin-top: 20px !important;
}

@media (max-width: 768px) {
    .monitor-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

.monitor-card {
    background: rgba(13, 27, 42, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: inherit !important;
}

.monitor-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.15), transparent 70%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.monitor-card.card-logs::before {
    background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.2), transparent 70%) !important;
}

.monitor-card.card-acessos::before {
    background: radial-gradient(circle at 50% 0%, rgba(40, 167, 69, 0.2), transparent 70%) !important;
}

.monitor-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    box-shadow: 0 12px 30px rgba(0, 212, 255, 0.15) !important;
}

.monitor-card.card-logs:hover {
    border-color: rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 12px 30px rgba(168, 85, 247, 0.15) !important;
}

.monitor-card.card-acessos:hover {
    border-color: rgba(40, 167, 69, 0.4) !important;
    box-shadow: 0 12px 30px rgba(40, 167, 69, 0.15) !important;
}

.monitor-card:hover::before {
    opacity: 1 !important;
}

.monitor-card-icon {
    font-size: 55px !important;
    margin-bottom: 25px !important;
    filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.3)) !important;
    transition: transform 0.4s ease !important;
}

.monitor-card.card-logs .monitor-card-icon {
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.3)) !important;
}

.monitor-card.card-acessos .monitor-card-icon {
    filter: drop-shadow(0 0 12px rgba(40, 167, 69, 0.3)) !important;
}

.monitor-card:hover .monitor-card-icon {
    transform: scale(1.1) !important;
}

.monitor-card-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
}

.monitor-card-desc {
    font-size: 14px !important;
    color: #8fa3b7 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: center !important;
}

.monitor-badge-master {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: linear-gradient(90deg, #00d4ff, #0077ff) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
}

/* ==========================================================================
   CENTRAL DE LOGS (Exclusivo Master)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Outfit:wght@300;400;600;700&display=swap');

.logs-body {
    background: radial-gradient(circle at 50% 0%, #0f1d30 0%, #070c14 100%) !important;
    color: #e0f7ff !important;
    font-family: 'Outfit', sans-serif !important;
    min-height: 100vh;
}

.logs-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
}

.logs-header-area {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 30px !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
    padding-bottom: 15px !important;
}

.logs-title-with-logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.logs-header-logo {
    height: 40px !important;
    width: auto !important;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)) !important;
}

.logs-h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    background: linear-gradient(90deg, #a855f7, #6366f1) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-family: 'Outfit', sans-serif !important;
}

.btn-logs-back {
    color: #e0f7ff !important;
    background: rgba(168, 85, 247, 0.1) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    padding: 8px 18px !important;
    text-decoration: none !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-logs-back:hover {
    background: #a855f7 !important;
    color: #070c14 !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Layout Grid */
.logs-workspace {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 25px !important;
    margin-top: 10px !important;
}

@media (max-width: 900px) {
    .logs-workspace {
        grid-template-columns: 1fr !important;
    }
}

/* Sidebar */
.logs-sidebar {
    background: rgba(13, 27, 42, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(168, 85, 247, 0.15) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    height: fit-content !important;
}

.logs-sidebar-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #a855f7 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.1) !important;
    padding-bottom: 8px !important;
}

.log-menu-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.log-item-btn {
    width: 100% !important;
    text-align: left !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
    color: #8fa3b7 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.log-item-btn:hover {
    background: rgba(168, 85, 247, 0.08) !important;
    border-color: rgba(168, 85, 247, 0.25) !important;
    color: #fff !important;
}

.log-item-btn.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
    border-color: rgba(168, 85, 247, 0.45) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.15) !important;
}

.log-item-btn i {
    font-size: 15px !important;
}

.btn-clear-all {
    width: 100% !important;
    text-align: center !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
    color: #fca5a5 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
}

.btn-clear-all:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.25) !important;
}

/* Terminal Window */
.terminal-container {
    display: flex !important;
    flex-direction: column !important;
    background: rgba(13, 27, 42, 0.4) !important;
    border: 1px solid rgba(168, 85, 247, 0.15) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

/* Terminal Top Bar */
.terminal-topbar {
    background: rgba(20, 24, 33, 0.8) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.terminal-dots {
    display: flex !important;
    gap: 8px !important;
}

.dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
}

.dot-red {
    background-color: #ef4444 !important;
}

.dot-yellow {
    background-color: #eab308 !important;
}

.dot-green {
    background-color: #22c55e !important;
}

.terminal-title {
    font-family: 'Fira Code', monospace !important;
    font-size: 13px !important;
    color: #8fa3b7 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.terminal-actions {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.refresh-status {
    font-size: 12px !important;
    color: #22c55e !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.refresh-status.visible {
    opacity: 1 !important;
}

.refresh-status i {
    animation: spin 1s linear infinite !important;
}

/* Terminal Content Viewport */
.terminal-body {
    background: #05090f !important;
    padding: 20px !important;
    height: 380px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.terminal-pre {
    margin: 0 !important;
    font-family: 'Fira Code', 'Courier New', monospace !important;
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    color: #a9dfbf !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
}

/* Terminal Toolbar Controls */
.terminal-controls {
    background: rgba(20, 24, 33, 0.85) !important;
    padding: 15px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.control-group-left {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.control-group-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Action Buttons */
.btn-ctrl {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-ctrl:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-ctrl-purple {
    background: rgba(168, 85, 247, 0.2) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    color: #e0f7ff !important;
}

.btn-ctrl-purple:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.35) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25) !important;
}

.btn-ctrl:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Toggle Auto-Refresh */
.toggle-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    color: #8fa3b7 !important;
    cursor: pointer !important;
    user-select: none !important;
}

.toggle-checkbox {
    cursor: pointer !important;
    accent-color: #a855f7 !important;
    width: 16px !important;
    height: 16px !important;
}

/* --- BOTÃO NOVO SERVIÇO --- */
.btn-novo-servico {
    background-color: #FFD700 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
    margin-top: 15px;
}

.btn-novo-servico:hover {
    background-color: #e6c200 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);
}

/* ==========================================================================
   CADASTRO DE SERVIÇOS
   ========================================================================== */
.page-cadastro-servicos,
.page-cadastro-servicos input,
.page-cadastro-servicos select,
.page-cadastro-servicos textarea,
.page-cadastro-servicos button,
.page-cadastro-servicos h3,
.page-cadastro-servicos h4,
.page-cadastro-servicos h5,
.page-cadastro-servicos h6 {
    font-family: 'Outfit', 'Segoe UI', Roboto, sans-serif !important;
}

.page-cadastro-servicos {
    background-color: #f4f6f8 !important;
    color: #212121 !important;
}

.page-cadastro-servicos .card {
    background: #ffffff !important;
    border: 1px solid #eef1f5 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015) !important;
}

.page-cadastro-servicos .card h3 {
    font-size: 17px !important;
    color: #000000 !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    border-left: 4px solid #28a745 !important;
    padding-left: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 0 !important;
}

.page-cadastro-servicos .form-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.page-cadastro-servicos .form-group {
    display: flex !important;
    flex-direction: column !important;
}

.page-cadastro-servicos .form-group label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #212121 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.page-cadastro-servicos .form-group input,
.page-cadastro-servicos .form-group select,
.page-cadastro-servicos .form-group textarea {
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    color: #212121 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    outline: none !important;
}

.page-cadastro-servicos .form-group input:focus,
.page-cadastro-servicos .form-group select:focus,
.page-cadastro-servicos .form-group textarea:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}

.page-cadastro-servicos .nome-row input {
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    color: #212121 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    outline: none !important;
}

.page-cadastro-servicos .nome-row input:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}

.page-cadastro-servicos .nome-row .btn-del {
    padding: 10px 12px !important;
    font-size: 14px !important;
    color: #dc3545 !important;
    background: #fff5f5 !important;
    border-radius: 8px !important;
    border: 1px solid #dc3545 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

.page-cadastro-servicos .nome-row .btn-del:hover {
    background-color: #ffe5e5 !important;
}

.page-cadastro-servicos .btn-save {
    background-color: #28a745 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2) !important;
    margin-top: 15px !important;
}

.page-cadastro-servicos .btn-save:hover {
    background-color: #218838 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.3) !important;
}

.page-cadastro-servicos .modal-overlay {
    display: none !important;
    position: fixed !important;
    z-index: 2000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    animation: fadeInOverlay 0.25s ease !important;
}

.page-cadastro-servicos .modal-overlay.active {
    display: block !important;
}

.page-cadastro-servicos .modal-container {
    background: #fff !important;
    margin: 28px auto !important;
    padding: 0 !important;
    border-radius: 14px !important;
    width: 94% !important;
    max-width: 900px !important;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28) !important;
    border: 1px solid #e0e0e0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    animation: slideDown 0.3s ease !important;
}

.page-cadastro-servicos .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    border-bottom: 2px solid #FFE082 !important;
    background: #FFF9C4 !important;
    border-radius: 14px 14px 0 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.page-cadastro-servicos .modal-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #000000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
}

.page-cadastro-servicos .modal-close {
    color: #000000 !important;
    font-size: 28px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    background: none !important;
    line-height: 1 !important;
    transition: color 0.2s, transform 0.2s !important;
}

.page-cadastro-servicos .modal-close:hover {
    color: #dc3545 !important;
    transform: scale(1.15) !important;
}

.page-cadastro-servicos .modal-body {
    padding: 22px 26px 28px !important;
}

/* --- BOTÕES DO MODAL (NOVO SERVIÇO) --- */
.page-cadastro-servicos .btn-cadastrar-servico {
    background-color: #FFD700 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 46px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2) !important;
    margin-top: 0 !important;
}

.page-cadastro-servicos .btn-cadastrar-servico:hover {
    background-color: #e6c200 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3) !important;
}

.page-cadastro-servicos .btn-cancelar-servico {
    background-color: #6c757d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 46px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    margin-left: 10px !important;
    transition: all 0.2s ease-in-out !important;
    margin-top: 0 !important;
}

.page-cadastro-servicos .btn-cancelar-servico:hover {
    background-color: #5a6268 !important;
    transform: translateY(-1px) !important;
}

/* Animations */
@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   EDITAR SERVIÇO
   ========================================================================== */
.page-edit-servico,
.page-edit-servico input,
.page-edit-servico select,
.page-edit-servico textarea,
.page-edit-servico button,
.page-edit-servico h2,
.page-edit-servico h3,
.page-edit-servico h4,
.page-edit-servico h5,
.page-edit-servico h6 {
    font-family: 'Outfit', 'Segoe UI', Roboto, sans-serif !important;
}

.page-edit-servico {
    background-color: #f4f6f8 !important;
    color: #212121 !important;
}

.page-edit-servico .card {
    background: #ffffff !important;
    border: 1px solid #eef1f5 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    max-width: 800px !important;
    margin: 40px auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.page-edit-servico .card h2 {
    font-size: 18px !important;
    color: #000000 !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    border-left: 4px solid #28a745 !important;
    padding-left: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-top: 0 !important;
}

.page-edit-servico .form-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.page-edit-servico .form-group {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 200px !important;
}

.page-edit-servico .form-group label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #212121 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.page-edit-servico .form-group input,
.page-edit-servico .form-group select,
.page-edit-servico .form-group textarea {
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    color: #212121 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
    outline: none !important;
}

.page-edit-servico .form-group input:focus,
.page-edit-servico .form-group select:focus,
.page-edit-servico .form-group textarea:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}

.page-edit-servico .btn-save {
    background-color: #FFD700 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: none !important;
    height: 46px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2) !important;
    margin: 0 !important;
    align-self: center !important;
}

.page-edit-servico .btn-save:hover {
    background-color: #e6c200 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3) !important;
}

.page-edit-servico .btn-cancel {
    background-color: #6c757d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    height: 46px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    margin: 0 !important;
    align-self: center !important;
}

.page-edit-servico .btn-cancel:hover {
    background-color: #5a6268 !important;
    transform: translateY(-1px) !important;
}

/* --- MODAL FORM LAYOUTS (GRID & BUTTON CENTERING) --- */
.page-cadastro-servicos .modal-form-grid,
.page-edit-servico .modal-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: start !important;
}

.page-cadastro-servicos .modal-hierarchy-grid,
.page-edit-servico .modal-hierarchy-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

.page-cadastro-servicos .modal-hierarchy-grid .form-group,
.page-edit-servico .modal-hierarchy-grid .form-group {
    width: 100% !important;
}

.page-cadastro-servicos .modal-buttons-container,
.page-edit-servico .modal-buttons-container {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.page-cadastro-servicos .modal-form-row,
.page-edit-servico .modal-form-row {
    display: grid !important;
    grid-template-columns: 3fr 1fr !important;
    gap: 20px !important;
    width: 100% !important;
}

@media (max-width: 600px) {

    .page-cadastro-servicos .modal-form-row,
    .page-edit-servico .modal-form-row {
        grid-template-columns: 1fr !important;
    }
}

.page-cadastro-servicos .btn-add-outro-servico {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #f1f3f5 !important;
    color: #212529 !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 5px !important;
    width: fit-content !important;
    text-transform: uppercase !important;
    outline: none !important;
    transition: all 0.2s !important;
}

.page-cadastro-servicos .btn-add-outro-servico:hover {
    background-color: #e2e6ea !important;
}

/* Visibility helper class to override display: flex !important on form-group */
.page-cadastro-servicos .form-group.hidden-field,
.page-edit-servico .form-group.hidden-field,
.hidden-field {
    display: none !important;
}

/* Table Column Resizer */
.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    cursor: col-resize;
    user-select: none;
    height: 100%;
    z-index: 10;
}

.resizer:hover,
.resizing {
    border-right: 3px solid #ffc107 !important;
}

/* ========================================= */
/* MODO ESCURO (DARK MODE) OVERRIDES        */
/* ========================================= */

html.dark-mode {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --border-color: #334155;
    --card-bg: #1e293b;
    --input-bg: #1e293b;
    --input-border: #475569;
    --table-header-bg: #1e293b;
    --table-row-hover: #1e293b;
    --header-bg: #1e293b;
    --modal-bg: #1e293b;
    --modal-overlay-bg: rgba(0, 0, 0, 0.65);
    --text-muted: #94a3b8;
}

html.dark-mode body:not(.monitor-body):not(.logs-body):not(.logs-workspace) {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Container Principal */
html.dark-mode .container {
    background: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Cabeçalho */
html.dark-mode .header-area {
    border-bottom: 2px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .header-area h1 {
    color: rgb(248, 250, 252) !important;
}

html.dark-mode .user-info span,
html.dark-mode .user-info strong {
    color: #f8fafc !important;
}

/* Formulários */
html.dark-mode .add-form {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .field-group label,
html.dark-mode .form-section h2,
html.dark-mode .form-row label,
html.dark-mode .form-row-triple label {
    color: #f8fafc !important;
}

/* Inputs, Selects, Textareas */
html.dark-mode .input-large,
html.dark-mode .input-small,
html.dark-mode select.input-large,
html.dark-mode select.input-small,
html.dark-mode textarea {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .input-large:focus,
html.dark-mode .input-small:focus,
html.dark-mode textarea:focus {
    border-color: #ffc107 !important;
}

html.dark-mode select.input-large,
html.dark-mode select.input-small {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

/* Tabelas */
html.dark-mode table {
    border-color: #334155 !important;
}

html.dark-mode th {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 2px solid #334155 !important;
    border-color: #334155 !important;
}

html.dark-mode td {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155 !important;
    border-color: #334155 !important;
}

html.dark-mode tr:hover td {
    background-color: #0f172a !important;
}

html.dark-mode td small {
    color: #94a3b8 !important;
}

/* Botões Secundários */
html.dark-mode .btn-secondary {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .btn-secondary:hover {
    background-color: #1e293b !important;
}
/* Menu Cards */
html.dark-mode .menu-card {
    background-color: #1e293b !important;
    border: 2px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .menu-card small {
    color: #94a3b8 !important;
}

html.dark-mode .menu-card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4) !important;
}

/* Dashboard Cards */
html.dark-mode .dashboard-card {
    background-color: #1e293b !important;
    border: 2px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .dashboard-card div:last-child {
    color: #f8fafc !important;
}

html.dark-mode .dashboard-card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4) !important;
}

/* Modais / Overlays */
html.dark-mode .modal-usr-overlay,
html.dark-mode .modal-fil-overlay,
html.dark-mode .modal-frn-overlay,
html.dark-mode .modal-orc-overlay,
html.dark-mode .modal-os-overlay,
html.dark-mode .modal-svc-overlay,
html.dark-mode .modal-forn-overlay,
html.dark-mode .modal-edit-overlay,
html.dark-mode .modal-cliente-overlay,
html.dark-mode .modal-bnc-overlay,
html.dark-mode .modal-cli-overlay,
html.dark-mode .modal-overlay,
html.dark-mode .modal-usr-overlay.active,
html.dark-mode .modal-fil-overlay.active,
html.dark-mode .modal-forn-overlay.active,
html.dark-mode .modal-cliente-overlay.active,
html.dark-mode .modal-bnc-overlay.active,
html.dark-mode .modal-cli-overlay.active,
html.dark-mode .modal-overlay.active {
    background: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .modal-usr-container,
html.dark-mode .modal-fil-container,
html.dark-mode .modal-frn-container,
html.dark-mode .modal-orc-container,
html.dark-mode .modal-os-container,
html.dark-mode .modal-svc-container,
html.dark-mode .modal-forn-container,
html.dark-mode .modal-edit-container,
html.dark-mode .modal-cliente-container,
html.dark-mode .modal-bnc-container,
html.dark-mode .modal-cli-container,
html.dark-mode .modal-container {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .modal-usr-header,
html.dark-mode .modal-fil-header,
html.dark-mode .modal-frn-header,
html.dark-mode .modal-orc-header,
html.dark-mode .modal-os-header,
html.dark-mode .modal-svc-header,
html.dark-mode .modal-forn-header,
html.dark-mode .modal-edit-header,
html.dark-mode .modal-cliente-header,
html.dark-mode .modal-bnc-header,
html.dark-mode .modal-cli-header,
html.dark-mode .modal-visita-header,
html.dark-mode .modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom: 2px solid #334155 !important;
}

html.dark-mode .modal-usr-header h2,
html.dark-mode .modal-fil-header h2,
html.dark-mode .modal-frn-header h2,
html.dark-mode .modal-orc-header h2,
html.dark-mode .modal-os-header h2,
html.dark-mode .modal-svc-header h2,
html.dark-mode .modal-forn-header h2,
html.dark-mode .modal-edit-header h2,
html.dark-mode .modal-cliente-header h2,
html.dark-mode .modal-bnc-header h2,
html.dark-mode .modal-cli-header h2,
html.dark-mode .modal-visita-header h2,
html.dark-mode .modal-header h2 {
    color: #f8fafc !important;
}

html.dark-mode .modal-visita-close {
    color: #aaa !important;
}
html.dark-mode .modal-visita-close:hover {
    color: #f8fafc !important;
}

html.dark-mode .modal-usr-body,
html.dark-mode .modal-fil-body,
html.dark-mode .modal-frn-body,
html.dark-mode .modal-orc-body,
html.dark-mode .modal-os-body,
html.dark-mode .modal-svc-body,
html.dark-mode .modal-forn-body,
html.dark-mode .modal-edit-body,
html.dark-mode .modal-cliente-body,
html.dark-mode .modal-bnc-body,
html.dark-mode .modal-cli-body,
html.dark-mode .modal-body {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Rótulos e Checkboxes */
html.dark-mode .modal-usr-body label,
html.dark-mode .modal-fil-body label,
html.dark-mode .modal-frn-body label,
html.dark-mode .modal-orc-body label,
html.dark-mode .modal-os-body label,
html.dark-mode .modal-svc-body label,
html.dark-mode .modal-forn-body label,
html.dark-mode .modal-edit-body label,
html.dark-mode .modal-cliente-body label,
html.dark-mode .modal-bnc-body label,
html.dark-mode .modal-cli-body label,
html.dark-mode .modal-body label {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Tooltips */
html.dark-mode .user-tooltip-text {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .user-tooltip-circle {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* Textos e Títulos gerais */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode p,
html.dark-mode span,
html.dark-mode li {
    color: #f8fafc;
}

html.dark-mode p {
    color: #94a3b8;
}

/* Select2 Custom Styling para Dark Mode */
html.dark-mode .select2-container--default .select2-selection--single {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8fafc !important;
}

html.dark-mode .select2-dropdown {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected] {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Estilo do calendário flatpickr em Dark Mode */
html.dark-mode .flatpickr-calendar {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .flatpickr-day {
    color: #f8fafc !important;
}

html.dark-mode .flatpickr-day:hover,
html.dark-mode .flatpickr-day.prevMonthDay:hover,
html.dark-mode .flatpickr-day.nextMonthDay:hover {
    background-color: #334155 !important;
}

html.dark-mode .flatpickr-current-month,
html.dark-mode .flatpickr-current-month span.cur-month,
html.dark-mode span.flatpickr-weekday {
    color: #f8fafc !important;
    fill: #f8fafc !important;
}

html.dark-mode .flatpickr-day.selected {
    background-color: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
}

/* Ajustes finos adicionais de cores de texto secundário */
html.dark-mode .text-muted,
html.dark-mode small {
    color: #94a3b8 !important;
}

/* Busca e Paginação em Dark Mode */
html.dark-mode .search-container {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode #searchInput,
html.dark-mode #orderSearchInput,
html.dark-mode #orcSearchInput,
html.dark-mode #busca-servicos,
html.dark-mode .search-input-wrapper input {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .search-input-wrapper span {
    color: #f8fafc !important;
}

html.dark-mode .rows-per-page-wrapper {
    border-left-color: #334155 !important;
}

html.dark-mode .rows-per-page-wrapper label {
    color: #f8fafc !important;
}

html.dark-mode .rows-per-page-wrapper select {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .pagination-container {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .pagination-info,
html.dark-mode .page-indicator {
    color: #f8fafc !important;
}

html.dark-mode .btn-pagination {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .btn-pagination:hover:not(:disabled) {
    background-color: #334155 !important;
}

html.dark-mode .btn-pagination:disabled {
    opacity: 0.35 !important;
}

/* Ordem de Serviço Específica: orderPaginationControls */
html.dark-mode #orderPaginationControls {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode #orderPaginationControls div {
    color: #f8fafc !important;
}

html.dark-mode #orderPageIndicator {
    color: #f8fafc !important;
}

html.dark-mode #btnPrevOrder,
html.dark-mode #btnNextOrder {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode #btnPrevOrder:hover:not(:disabled),
html.dark-mode #btnNextOrder:hover:not(:disabled) {
    background-color: #334155 !important;
}

html.dark-mode #btnPrevOrder:disabled,
html.dark-mode #btnNextOrder:disabled {
    opacity: 0.35 !important;
}

/* ==========================================================================
   ADICIONADO PARA CORREÇÃO DOS CONTAINERES DE BUSCA E FILTROS EM DARK MODE
   ========================================================================== */

/* Sobrescrever contêineres de busca e filtros com estilos inline em Dark Mode */
html.dark-mode div:has(> div > #orderSearchInput),
html.dark-mode div:has(> div > #orcSearchInput),
html.dark-mode div:has(> div > .search-input-wrapper > #searchInput),
html.dark-mode div:has(> .search-input-wrapper > #searchInput),
html.dark-mode form:has(#searchInput),
html.dark-mode form:has(#orderSearchInput),
html.dark-mode form:has(#orcSearchInput),
html.dark-mode div:has(> div > div > #searchInput),
html.dark-mode div:has(> div > #searchInput) {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Sobrescrever wrapper interno do input de busca (como o de cadastro_lancamentos) */
html.dark-mode div:has(> span + #searchInput),
html.dark-mode div:has(> span + #orderSearchInput),
html.dark-mode div:has(> span + #orcSearchInput) {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Sobrescrever divisores internos (border-left) nas barras de filtros */
html.dark-mode div:has(> div > #orderSearchInput)>div,
html.dark-mode div:has(> div > #orcSearchInput)>div {
    border-left-color: #334155 !important;
}

/* Garante que select dropdowns e options fiquem com cores escuras no darkmode */
html.dark-mode select {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Textos e labels dentro da barra de busca e filtros de data */
html.dark-mode label,
html.dark-mode .search-container label,
html.dark-mode .rows-per-page-wrapper label,
html.dark-mode #currentMonthDisplay {
    color: #f8fafc !important;
}

/* Configuração de Clientes VIP em Dark Mode */
html.dark-mode .vip-config {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    border-left: 5px solid #FFD700 !important;
    color: #f8fafc !important;
}

html.dark-mode .vip-config h3,
html.dark-mode .vip-config p,
html.dark-mode .vip-config label {
    color: #f8fafc !important;
}

/* Checkboxes com fundo personalizado (LGPD, etc.) em Dark Mode */
html.dark-mode .checkbox-label {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

/* Linhas de serviços dinâmicos (.servico-row) e seus elementos em Dark Mode */
html.dark-mode .servico-row {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .servico-row label,
html.dark-mode .servico-row strong,
html.dark-mode .servico-row div {
    color: #f8fafc !important;
}

/* Garante que o subtotal verde seja mantido */
html.dark-mode .servico-row span[id^="subtotal_"] {
    color: #28a745 !important;
}

/* Estilo do botão de Observações */
html.dark-mode .servico-row button:not(.btn-remove-row) {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .servico-row button:not(.btn-remove-row):hover {
    background-color: #1e293b !important;
}

/* Se o botão de observação estiver ativado (estilo inline de fundo amarelo definido por JS) */
html.dark-mode .servico-row button[style*="background: rgb(255, 215, 0)"],
html.dark-mode .servico-row button[style*="background: rgb(255, 212, 59)"],
html.dark-mode .servico-row button[style*="background: #ffd700"],
html.dark-mode .servico-row button[style*="background-color: #ffd700"] {
    background-color: #ffd700 !important;
    color: #000000 !important;
}

/* Foco premium (borda amarela) nos wrappers de busca no Dark Mode */
html.dark-mode div:has(> div > #orderSearchInput):focus-within,
html.dark-mode div:has(> div > #orcSearchInput):focus-within,
html.dark-mode div:has(> div > .search-input-wrapper > #searchInput):focus-within,
html.dark-mode div:has(> .search-input-wrapper > #searchInput):focus-within,
html.dark-mode form:has(#searchInput):focus-within,
html.dark-mode div:has(> span + #searchInput):focus-within {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2) !important;
}

html.dark-mode #searchInput:focus,
html.dark-mode #orderSearchInput:focus,
html.dark-mode #orcSearchInput:focus,
html.dark-mode #busca-servicos:focus {
    outline: none !important;
    border-color: #ffc107 !important;
}

/* Correções para o painel de Estrutura de Serviços em Dark Mode */
html.dark-mode .page-cadastro-servicos .card,
html.dark-mode .page-edit-servico .card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .page-cadastro-servicos .card h3,
html.dark-mode .page-edit-servico .card h2 {
    color: #f8fafc !important;
}

/* Tabela de estrutura de serviços no darkmode */
html.dark-mode .plano-table {
    border-color: #334155 !important;
}

html.dark-mode .plano-table thead tr {
    background-color: #0f172a !important;
}

html.dark-mode .plano-table th {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 2px solid #334155 !important;
}

html.dark-mode .plano-table td {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155 !important;
}

html.dark-mode .plano-table tr:hover td {
    background-color: #0f172a !important;
}

/* Sobrescrever cores inline no corpo da tabela de serviços */
html.dark-mode .plano-table td,
html.dark-mode .plano-table td span,
html.dark-mode .plano-table td strong {
    color: #f8fafc !important;
}

html.dark-mode .plano-table td span[style*="color: #757575"],
html.dark-mode .plano-table td span[style*="font-size: 11.5px"],
html.dark-mode .plano-table td span[style*="font-size:11.5px"] {
    color: #94a3b8 !important;
}

/* Ajuste na cor de fundo das linhas de acordo com o nível/hierarquia */
html.dark-mode .plano-table tr.hierarchy-1 td {
    background-color: #1e293b !important;
}

html.dark-mode .plano-table tr.hierarchy-2 td {
    background-color: #1a2333 !important;
}

html.dark-mode .plano-table tr.hierarchy-3 td {
    background-color: #161e2b !important;
}

/* Custom adjustments for Cadastro de Serviços and Editar Serviço page backgrounds (entorno) */
html.dark-mode .page-cadastro-servicos,
html.dark-mode .page-edit-servico {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Custom adjustment for the table container border on services dashboard */
html.dark-mode .page-cadastro-servicos .table-container {
    border-color: #334155 !important;
}

/* Style dynamic delete buttons inside plano-table for dark mode */
html.dark-mode .plano-table .btn-del {
    background: #3b2022 !important;
    color: #f87171 !important;
    border: 1px solid #7f1d1d !important;
}

/* Specific Dark Mode overrides for the real-time calculation panel (#painel-calc) */
html.dark-mode #painel-calc {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* For OS/Ordens calculation panel, enforce gold border */
html.dark-mode .page-edit-ordem #painel-calc,
html.dark-mode .page-ordens #painel-calc {
    border-color: #ffd700 !important;
}

/* For Budgets/Orçamentos calculation panel, enforce cyan border */
html.dark-mode .page-edit-orcamento #painel-calc,
html.dark-mode .page-orcamentos #painel-calc {
    border-color: #17a2b8 !important;
}

/* Lighter labels and values inside #painel-calc left boxes */
html.dark-mode #painel-calc small {
    color: #94a3b8 !important;
}

html.dark-mode #painel-calc #disp_sub {
    color: #f8fafc !important;
}

/* Modais da página de Ordens e outros templates com a classe .modal */
html.dark-mode .modal {
    background: rgba(0, 0, 0, 0.75) !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .modal-content,
html.dark-mode .modal>div {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.5) !important;
}

/* Sobrescrever títulos escuros/pretos inline nos cabeçalhos de modais */
html.dark-mode .modal h3[style*="color: #212121"],
html.dark-mode .modal h3[style*="color:#212121"],
html.dark-mode .modal h3[style*="color: #000"],
html.dark-mode .modal h3[style*="color:#000"],
html.dark-mode .modal h3[style*="color: #333"],
html.dark-mode .modal h3[style*="color:#333"],
html.dark-mode .modal h4 {
    color: #f8fafc !important;
}

/* Cores de textos e rótulos gerais nos modais no darkmode */
html.dark-mode .modal p,
html.dark-mode .modal label,
html.dark-mode .modal span {
    color: #f8fafc !important;
}

/* Cores de textos explicativos/secundários nos modais no darkmode */
html.dark-mode .modal p[style*="color: #666"],
html.dark-mode .modal p[style*="color:#666"],
html.dark-mode .modal p[style*="color: #444"],
html.dark-mode .modal p[style*="color:#444"],
html.dark-mode .modal p[style*="color: #555"],
html.dark-mode .modal p[style*="color:#555"],
html.dark-mode .modal label[style*="color: #555"],
html.dark-mode .modal label[style*="color:#555"],
html.dark-mode .modal label[style*="color: #666"],
html.dark-mode .modal label[style*="color:#666"],
html.dark-mode .modal small {
    color: #94a3b8 !important;
}

/* Inputs, select, textarea e divisores internos no darkmode */
html.dark-mode .modal input,
html.dark-mode .modal select,
html.dark-mode .modal textarea {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .modal td {
    border-bottom: 1px solid #334155 !important;
}

/* Contêineres com fundo claro inline dentro dos modais */
html.dark-mode #containerAgrupar {
    background-color: #0f172a !important;
    border-color: #17a2b8 !important;
}

html.dark-mode #modalInfoParcelasContainer,
html.dark-mode #modalBoletoParcelasContainer {
    background-color: #0f172a !important;
}

/* Divisores de itens de serviços */
html.dark-mode .modal div[style*="border-bottom: 1px solid #eee"],
html.dark-mode .modal div[style*="border-bottom:1px solid #eee"] {
    border-bottom: 1px solid #334155 !important;
}

/* Emblemas de status e spans de fundo claro inline nos modais */
html.dark-mode .modal span[style*="background: #eee"],
html.dark-mode .modal span[style*="background:#eee"],
html.dark-mode .modal span[style*="background-color: #eee"],
html.dark-mode .modal span[style*="background-color:#eee"] {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* Botões fechar × */
html.dark-mode .modal span[onclick*="fecharModal"] {
    color: #f8fafc !important;
}

/* Orçamentos Específica: orcPaginationControls no Dark Mode */
html.dark-mode #orcPaginationControls {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode #orcPaginationControls div {
    color: #f8fafc !important;
}

html.dark-mode #orcPageIndicator {
    color: #f8fafc !important;
}

html.dark-mode #btnPrevOrc,
html.dark-mode #btnNextOrc {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode #btnPrevOrc:hover:not(:disabled),
html.dark-mode #btnNextOrc:hover:not(:disabled) {
    background-color: #334155 !important;
}

html.dark-mode #btnPrevOrc:disabled,
html.dark-mode #btnNextOrc:disabled {
    opacity: 0.35 !important;
}

/* Barra de ação de permissões (sticky-bottom-bar) no Dark Mode */
html.dark-mode .sticky-bottom-bar {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   MODAL CADASTRO SERVIÇO & TELA EDIT_SERVICO NO DARK MODE
   ========================================================================== */

/* Modal Novo Serviço (Cadastro de Serviços) */
html.dark-mode .page-cadastro-servicos .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

html.dark-mode .page-cadastro-servicos .modal-container {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .page-cadastro-servicos .modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-bottom: 2px solid #334155 !important;
}

html.dark-mode .page-cadastro-servicos .modal-header h2 {
    color: #f8fafc !important;
}

html.dark-mode .page-cadastro-servicos .modal-close {
    color: #f8fafc !important;
}

html.dark-mode .page-cadastro-servicos .modal-close:hover {
    color: #dc3545 !important;
}

html.dark-mode .page-cadastro-servicos .modal-body {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .page-cadastro-servicos .modal-body label,
html.dark-mode .page-cadastro-servicos .form-group label {
    color: #f8fafc !important;
}

/* Campos no Modal Novo Serviço */
html.dark-mode .page-cadastro-servicos .form-group input,
html.dark-mode .page-cadastro-servicos .form-group select,
html.dark-mode .page-cadastro-servicos .form-group textarea,
html.dark-mode .page-cadastro-servicos .nome-row input {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .page-cadastro-servicos .form-group input:focus,
html.dark-mode .page-cadastro-servicos .form-group select:focus,
html.dark-mode .page-cadastro-servicos .form-group textarea:focus,
html.dark-mode .page-cadastro-servicos .nome-row input:focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2) !important;
}

html.dark-mode .page-cadastro-servicos select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .page-cadastro-servicos .btn-add-outro-servico {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .page-cadastro-servicos .btn-add-outro-servico:hover {
    background-color: #1e293b !important;
}

html.dark-mode .page-cadastro-servicos .nome-row .btn-del {
    background: #3b2022 !important;
    color: #f87171 !important;
    border: 1px solid #7f1d1d !important;
}

html.dark-mode .page-cadastro-servicos .nome-row .btn-del:hover {
    background-color: #4c292b !important;
}

/* Tela de Edição de Serviços (Edit Serviço) */
html.dark-mode .page-edit-servico .form-group label {
    color: #f8fafc !important;
}

html.dark-mode .page-edit-servico .form-group input,
html.dark-mode .page-edit-servico .form-group select,
html.dark-mode .page-edit-servico .form-group textarea {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

html.dark-mode .page-edit-servico .form-group input:focus,
html.dark-mode .page-edit-servico .form-group select:focus,
html.dark-mode .page-edit-servico .form-group textarea:focus {
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2) !important;
}

html.dark-mode .page-edit-servico select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   PERFIS & EDIT_PERFIL HEADER-AREA ALIGNMENT & HEIGHT CORRECTIONS
   ========================================================================== */

.page-perfis .container,
.page-edit-perfil .container {
    max-width: 98% !important;
    margin: 15px auto !important;
    padding: 20px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
}

/* Alinhamento de cabeçalho e logo idêntico às outras páginas */
.page-perfis .header-area,
.page-edit-perfil .header-area {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f1f1f1 !important;
    padding-bottom: 15px !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}

.page-perfis .title-with-logo,
.page-edit-perfil .title-with-logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-perfis .title-with-logo a,
.page-edit-perfil .title-with-logo a {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-perfis .header-logo,
.page-edit-perfil .header-logo {
    height: 60px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-perfis .header-area h1,
.page-edit-perfil .header-area h1 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 2.18rem !important;
    font-family: 'Revue', sans-serif !important;
}

.page-perfis .module-icon-header,
.page-edit-perfil .module-icon-header {
    font-size: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
}

/* Estilo do user-info e seus elementos internos */


/* Modo escuro para os containers de Perfis */
html.dark-mode .page-perfis .container,
html.dark-mode .page-edit-perfil .container {
    background: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .page-perfis .header-area,
html.dark-mode .page-edit-perfil .header-area {
    border-bottom: 2px solid #334155 !important;
    color: #f8fafc !important;
}

/* Modo escuro para a tabela e card de Perfis */
html.dark-mode .page-perfis .card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .page-perfis .card-body {
    background-color: #1e293b !important;
}

html.dark-mode .page-perfis .table {
    --bs-table-bg: #1e293b !important;
    --bs-table-color: #f8fafc !important;
    --bs-table-hover-color: #f8fafc !important;
    --bs-table-hover-bg: #0f172a !important;
    --bs-table-border-color: #334155 !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .page-perfis th,
html.dark-mode .page-perfis td {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .page-perfis .table-light,
html.dark-mode .page-perfis thead.table-light th {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .page-perfis .text-dark {
    color: #f8fafc !important;
}

html.dark-mode .page-perfis .text-secondary {
    color: #94a3b8 !important;
}

html.dark-mode .page-perfis td div[style*="color: #666"],
html.dark-mode .page-perfis td div[style*="color:#666"] {
    color: #94a3b8 !important;
}

html.dark-mode .page-perfis td span.badge[style*="background-color: #f0f0f0"],
html.dark-mode .page-perfis td span.badge[style*="background-color:#f0f0f0"] {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

html.dark-mode .page-perfis .table-hover tbody tr:hover td {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Modais de Perfis (Novo Perfil e Badges) no Dark Mode */
html.dark-mode .page-perfis .modal-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 14px 55px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .page-perfis .modal-header {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-bottom: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-perfis .modal-header h5,
html.dark-mode .page-perfis .modal-header .modal-title {
    color: #f8fafc !important;
}

html.dark-mode .page-perfis .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

html.dark-mode .page-perfis .modal-body {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .page-perfis .modal-footer {
    background-color: #1e293b !important;
    border-top: 1px solid #334155 !important;
}

/* Opções de Seleção de Badges e Cores no Dark Mode */
html.dark-mode .page-perfis .modal-body .bg-white,
html.dark-mode .page-perfis .modal-body .bg-light {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-perfis .badge-option {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-perfis .badge-option:hover {
    background-color: #334155 !important;
    border-color: #ffc107 !important;
}

html.dark-mode .page-perfis .badge-option.active {
    background-color: #334155 !important;
    border-color: #ffc107 !important;
}

html.dark-mode .page-perfis .color-option.active {
    border-color: #f8fafc !important;
}

html.dark-mode .page-perfis .form-control-color {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Inputs de formulários no modal de perfis */
html.dark-mode .page-perfis .form-control,
html.dark-mode .page-edit-perfil .form-control {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.dark-mode .page-perfis .form-control:focus,
html.dark-mode .page-edit-perfil .form-control:focus {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #ffc107 !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25) !important;
}

/* Permissões - Colapso e Sub-módulos no Dark Mode */
html.dark-mode .page-edit-perfil .module-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .page-edit-perfil .sub-card {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .page-edit-perfil .sub-header {
    background: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .page-edit-perfil .perm-check-item,
html.dark-mode .page-edit-perfil .perm-radio-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .page-edit-perfil .perm-check-item:hover,
html.dark-mode .page-edit-perfil .perm-radio-item:hover {
    background-color: #334155 !important;
    border-color: #ffc107 !important;
}

html.dark-mode .page-edit-perfil .perm-check-item.active-check {
    background-color: #1e3a8a !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .page-edit-perfil .perm-radio-item.radio-all {
    background-color: #451a1d !important;
    border-color: #991b1b !important;
}

html.dark-mode .page-edit-perfil .perm-radio-item.radio-all:hover {
    background-color: #7f1d1d !important;
    border-color: #dc3545 !important;
}

html.dark-mode .page-edit-perfil .perm-radio-item.radio-linked {
    background-color: #453411 !important;
    border-color: #854d0e !important;
}

html.dark-mode .page-edit-perfil .perm-radio-item.radio-linked:hover {
    background-color: #713f12 !important;
    border-color: #eab308 !important;
}

html.dark-mode .page-edit-perfil .perm-label,
html.dark-mode .page-edit-perfil .group-label {
    color: #f8fafc !important;
}

html.dark-mode .page-edit-perfil .perm-label small {
    color: #94a3b8 !important;
}

html.dark-mode .page-edit-perfil .bg-light {
    background-color: #0f172a !important;
}

html.dark-mode .page-edit-perfil .border {
    border-color: #334155 !important;
}

/* Tela de Usuários (Usuarios Page) & Edit User */

.badge-filial {
    font-size: 12px;
    background-color: #e8f5e9;
    color: #2e7d32;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #4caf50;
    display: inline-block;
    margin: 2px;
}

html.dark-mode .badge-filial {
    background-color: #1b4332 !important;
    background: #1b4332 !important;
    color: #d8f3dc !important;
    border-color: #2d6a4f !important;
}

/* Novo Usuário Modal: Wrappers de Filiais e Perfis */
html.dark-mode .page-usuarios .modal-usr-body .field-group[style*="background: #f8f9fa"],
html.dark-mode .page-usuarios .modal-usr-body .field-group[style*="background:#f8f9fa"] {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .page-usuarios .modal-usr-body .field-group label[style*="color: #555"],
html.dark-mode .page-usuarios .modal-usr-body .field-group label[style*="color:#555"] {
    color: #f8fafc !important;
}

html.dark-mode .page-usuarios .modal-usr-body .field-group label {
    color: #f8fafc !important;
}

html.dark-mode .page-usuarios .modal-usr-body .field-group label[style*="background: #fff"],
html.dark-mode .page-usuarios .modal-usr-body .field-group label[style*="background:#fff"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Evitar fundo escuro em rótulos de campos comuns */
html.dark-mode .page-usuarios .modal-usr-body .field-group>label,
html.dark-mode .page-edit-user .modal-usr-body .field-group>label {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: #f8fafc !important;
}

/* Editar Usuário específicos para dark mode */
html.dark-mode .page-edit-user .modal-usr-body .field-group label[style*="background: #f9f9f9"],
html.dark-mode .page-edit-user .modal-usr-body .field-group label[style*="background:#f9f9f9"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-edit-user .modal-usr-body .field-group label[style*="background: #fff"],
html.dark-mode .page-edit-user .modal-usr-body .field-group label[style*="background:#fff"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-usuarios .modal-usr-close,
html.dark-mode .page-edit-user .modal-usr-close {
    color: #f8fafc !important;
}

html.dark-mode .page-usuarios .modal-usr-close:hover,
html.dark-mode .page-edit-user .modal-usr-close:hover {
    color: #dc3545 !important;
}

/* Perfis: label Marcar Todas as Ações em letras claras */
html.dark-mode .page-edit-perfil .toggle-all-sub span {
    color: #f8fafc !important;
}

/* Padronização de botões Voltar (btn-secondary) na área user-info */
.user-info .btn-secondary {
    padding: 8px 14px !important;
    background-color: #000 !important;
    color: #ffc107 !important;
    border: 1px solid #000 !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 13px !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    transition: 0.3s !important;
    display: inline-block !important;
    text-align: center !important;
    text-decoration: none !important;
}

.user-info .btn-secondary:hover,
.user-info .btn-secondary:focus,
.user-info .btn-secondary:active,
.user-info .btn-secondary.active {
    background-color: #222 !important;
    color: #ffc107 !important;
    border-color: #222 !important;
    box-shadow: none !important;
}

/* Novo Usuário Modal: Classes customizadas para evitar estilos inline e garantir dark mode */
.field-group-box {
    flex: 1;
    min-width: 250px;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.perfil-selection-label {
    font-weight: normal;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    width: 100%;
}

html.dark-mode .field-group-box {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .perfil-selection-label {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   ESTILOS DE FILIAIS E BANCOS (PÁGINAS DE CADASTROS)
   ========================================================================== */
.empty-state {
    text-align: center;
    padding: 30px;
    color: #888;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px dashed #ccc;
}

.filial-card {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 20px;
    transition: border-color 0.2s, background-color 0.2s;
    display: flex;
    flex-direction: column;
}

.filial-card:hover {
    border-color: #ffc107;
}

.filial-card h3 {
    margin: 0 0 5px 0;
    color: #333;
}

.filial-card h3 span {
    color: #666;
    font-size: 16px;
}

.filial-card p {
    margin: 3px 0;
    color: #666;
    font-size: 14px;
}

.filial-card details {
    padding-top: 12px;
    border-top: 1px solid #eee;
    cursor: pointer;
}

.filial-card details.usuarios-detalhes {
    margin-top: 15px;
}

.filial-card details.funcionarios-detalhes {
    margin-top: 10px;
}

.filial-card summary {
    font-size: 13px;
    color: #555;
    text-transform: uppercase;
    font-weight: bold;
    outline: none;
}

.filial-card details p.no-data {
    color: #aaa;
    font-size: 13px;
    margin-top: 8px;
}

.badge-func {
    background-color: #e9ecef;
    color: #333;
    border: 1px solid #ccc;
}

.badge-func small {
    color: #666;
    font-size: 11px;
}

/* Contas Bancárias */
.bancos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
}

.banco-card {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 20px;
    transition: border-color 0.2s, background-color 0.2s;
    display: flex;
    flex-direction: column;
}

.banco-card.inactive {
    border-color: #f8d7da;
}

.banco-card:hover {
    border-color: #28a745;
}

.banco-card.inactive:hover {
    border-color: #dc3545;
}

.banco-card .card-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
    flex: 1;
}

.banco-card .card-info {
    flex: 1;
    min-width: 250px;
}

.banco-card h3 {
    margin: 0 0 5px 0;
    color: #333;
}

.banco-card.inactive h3 {
    color: #aaa;
}

.banco-card p {
    margin: 3px 0;
    color: #666;
    font-size: 14px;
}

.banco-card .card-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
    margin-top: 10px;
}

.banco-card .card-actions .btn-edit {
    background-color: transparent;
    padding: 5px;
    font-size: 16px;
    display: inline-block;
}

.banco-card .card-actions .btn-edit i {
    color: rgb(255, 212, 59);
    -webkit-text-stroke: 0.6px black;
}

.banco-card .card-actions .btn-del {
    background-color: transparent;
    color: #dc3545;
    padding: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: inline-block;
}

.badge-caixa {
    font-size: 11px;
    background: #6f42c1;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
}

.badge-inativo {
    font-size: 11px;
    background: #dc3545;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
}

/* Modo Escuro (Dark Mode) Overrides para Filiais e Bancos */
html.dark-mode .empty-state {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .filial-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .filial-card:hover {
    border-color: #ffc107 !important;
}

html.dark-mode .filial-card h3 {
    color: #f8fafc !important;
}

html.dark-mode .filial-card h3 span {
    color: #94a3b8 !important;
}

html.dark-mode .filial-card p {
    color: #94a3b8 !important;
}

html.dark-mode .filial-card details {
    border-top-color: #334155 !important;
}

html.dark-mode .filial-card summary {
    color: #f8fafc !important;
}

html.dark-mode .filial-card details p.no-data {
    color: #64748b !important;
}

html.dark-mode .badge-func,
html.dark-mode .badge-comum,
html.dark-mode .badge-mantenedor {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

html.dark-mode .badge-func small {
    color: #94a3b8 !important;
}

/* Dark Mode para Bancos */
html.dark-mode .banco-card {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .banco-card.inactive {
    border-color: #7f1d1d !important;
}

html.dark-mode .banco-card:hover {
    border-color: #28a745 !important;
}

html.dark-mode .banco-card.inactive:hover {
    border-color: #dc3545 !important;
}

html.dark-mode .banco-card h3 {
    color: #f8fafc !important;
}

html.dark-mode .banco-card.inactive h3 {
    color: #64748b !important;
}

html.dark-mode .banco-card p {
    color: #94a3b8 !important;
}

/* ==========================================================================
   ESTILOS DE FUNCIONÁRIOS, DOCUMENTOS E AFASTAMENTOS (DARK MODE E AJUSTES)
   ========================================================================== */

/* Histórico Button e Icon */
html.dark-mode .btn-history img {
    filter: invert(1) !important;
}

/* Botão Voltar Personalizado (Sem Hover, Fundo Preto, Letra Amarela) */
.btn-back-custom,
html.dark-mode .btn-back-custom {
    background-color: #000 !important;
    color: #ffc107 !important;
    border: 1px solid #000 !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    font-size: 13px !important;
    display: inline-block !important;
    font-family: inherit !important;
    transition: none !important;
}

.btn-back-custom:hover,
html.dark-mode .btn-back-custom:hover {
    background-color: #000 !important;
    color: #ffc107 !important;
    border-color: #000 !important;
}

/* Gestão de Documentos (Página/Modal de Documentos) */
html.dark-mode body.page-documentos-funcionario {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .title-with-logo h1 {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .container {
    background: #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .page-documentos-funcionario .header-area {
    border-bottom: 2px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .header-area span {
    color: #94a3b8 !important;
}

html.dark-mode .page-documentos-funcionario .employee-info-card {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .employee-name {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .employee-meta span {
    color: #94a3b8 !important;
}

html.dark-mode .page-documentos-funcionario .employee-meta span strong {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .section-box {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .section-title {
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .page-documentos-funcionario .doc-card {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .page-documentos-funcionario .doc-card:hover {
    background: #1e293b !important;
    border-color: #ffc107 !important;
}

html.dark-mode .page-documentos-funcionario .doc-icon-wrapper {
    background: #1e293b !important;
}

html.dark-mode .page-documentos-funcionario .doc-card:hover .doc-icon-wrapper {
    background: #334155 !important;
}

html.dark-mode .page-documentos-funcionario .doc-name {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .doc-submeta {
    color: #94a3b8 !important;
}

html.dark-mode .page-documentos-funcionario .doc-submeta span strong {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .doc-badge {
    background: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .btn-action-round {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .btn-action-round:hover {
    background: #1e293b !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}

html.dark-mode .page-documentos-funcionario .btn-action-delete:hover {
    background: #3b2022 !important;
    border-color: #dc3545 !important;
    color: #f87171 !important;
}

html.dark-mode .page-documentos-funcionario .upload-container {
    background: #0f172a !important;
    border-color: #ffc107 !important;
}

html.dark-mode .page-documentos-funcionario .upload-container:hover,
html.dark-mode .page-documentos-funcionario .upload-container.dragover {
    background: #1e293b !important;
    border-color: #e0a800 !important;
}

html.dark-mode .page-documentos-funcionario .upload-text {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .upload-hint {
    color: #94a3b8 !important;
}

html.dark-mode .page-documentos-funcionario .selected-files-list {
    border-color: #334155 !important;
}

html.dark-mode .page-documentos-funcionario .selected-file-item {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .selected-file-name {
    color: #f8fafc !important;
}

html.dark-mode .page-documentos-funcionario .loading-overlay {
    background: rgba(15, 23, 42, 0.85) !important;
}

html.dark-mode .page-documentos-funcionario div[style*="background: #fafafa"],
html.dark-mode .page-documentos-funcionario div[style*="background:#fafafa"] {
    background-color: #0f172a !important;
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Modal Gerencial Afastamento: Tabela e Componentes */
.afastamentos-table-container {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fafafa;
    margin-bottom: 15px;
}

.afastamentos-table-container .data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.afastamentos-table-container .data-table thead tr {
    background-color: #f1f3f5;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 1;
}

.afastamentos-table-container .data-table th {
    padding: 10px;
    font-weight: 600;
    color: #495057;
    font-size: 12px;
}

.afastamentos-table-container .data-table td {
    padding: 10px;
    font-size: 13px;
    border-bottom: 1px solid #dee2e6;
}

.afastamentos-table-container .no-data {
    text-align: center;
    padding: 20px;
    color: #888;
}

/* Afastamentos: Dark Mode */
html.dark-mode .afastamentos-table-container {
    border-color: #334155 !important;
    background-color: #0f172a !important;
}

html.dark-mode .afastamentos-table-container .data-table thead tr {
    background-color: #1e293b !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .afastamentos-table-container .data-table th {
    color: #f8fafc !important;
    background-color: #1e293b !important;
}

html.dark-mode .afastamentos-table-container .data-table td {
    border-bottom-color: #334155 !important;
    color: #f8fafc !important;
    background-color: #0f172a !important;
}

html.dark-mode .afastamentos-table-container .no-data {
    color: #94a3b8 !important;
}

/* Modais de Cadastro / Edição de Funcionários: Dark Mode para Abas */
html.dark-mode .page-funcionarios .tab-header {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .page-funcionarios .tab-btn {
    color: #94a3b8 !important;
}

html.dark-mode .page-funcionarios .tab-btn:hover {
    background: #1e293b !important;
}

html.dark-mode .page-funcionarios .tab-btn.active {
    background: #1e293b !important;
    color: #ffc107 !important;
    border-bottom-color: #ffc107 !important;
}

html.dark-mode .page-funcionarios .tab-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark-mode .modal-edit-body label {
    background-color: transparent !important;
    border: none !important;
    color: #f8fafc !important;
}

html.dark-mode .checkbox-user-label {
    color: #f8fafc !important;
}

/* Tabelas Dinâmicas nas Abas */
html.dark-mode .page-funcionarios .dynamic-table-container {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .page-funcionarios .dynamic-table-container h4 {
    color: #f8fafc !important;
}

html.dark-mode .page-funcionarios .dynamic-table th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .page-funcionarios .dynamic-table td {
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .page-funcionarios .btn-add-row {
    background-color: #1b4332 !important;
    color: #d8f3dc !important;
    border: 1px solid #2d6a4f !important;
}

html.dark-mode .page-funcionarios .btn-add-row:hover {
    background-color: #2d6a4f !important;
}

/* Badge de Total de Dias (Afastamentos) */
.total-dias-badge {
    background-color: #e3f2fd;
    color: #0277bd;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    display: inline-block;
}

html.dark-mode .modal .total-dias-badge,
html.dark-mode .total-dias-badge {
    background-color: #e3f2fd !important;
    color: #000000 !important;
}

/* Botão Fechar (X) na Gestão de Documentos */
.btn-close-doc-modal {
    font-size: 32px;
    font-weight: bold;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
    line-height: 1;
    display: inline-block;
    padding: 0 8px;
}

.btn-close-doc-modal:hover {
    color: #ef4444;
}

html.dark-mode .btn-close-doc-modal {
    color: #64748b;
}

html.dark-mode .btn-close-doc-modal:hover {
    color: #f87171;
}

/* ==========================================================================
   PADRONIZAÇÃO DE BOTÕES DE CADASTRO (Novo...)
   ========================================================================== */
.btn-cadastrar-cliente,
.btn-novo-servico,
.btn-cadastrar-srv,
.btn-cadastrar-os,
.btn-cadastrar-forn,
.btn-cadastrar-fil,
.btn-cadastrar-usr,
.btn-cadastrar-orc,
.btn-cadastrar-bnc,
.btn-cadastrar-func,
.btn-cadastrar-perf {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #FFD700 !important;
    background: #FFD700 !important;
    color: #000000 !important;
    height: 46px !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    font-family: 'Outfit', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}

.btn-cadastrar-cliente:hover,
.btn-novo-servico:hover,
.btn-cadastrar-srv:hover,
.btn-cadastrar-os:hover,
.btn-cadastrar-forn:hover,
.btn-cadastrar-fil:hover,
.btn-cadastrar-usr:hover,
.btn-cadastrar-orc:hover,
.btn-cadastrar-bnc:hover,
.btn-cadastrar-func:hover,
.btn-cadastrar-perf:hover {
    background-color: #e6c200 !important;
    background: #e6c200 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3) !important;
}

.btn-cadastrar-cliente i,
.btn-novo-servico i,
.btn-cadastrar-srv i,
.btn-cadastrar-os i,
.btn-cadastrar-forn i,
.btn-cadastrar-fil i,
.btn-cadastrar-usr i,
.btn-cadastrar-orc i,
.btn-cadastrar-bnc i,
.btn-cadastrar-func i,
.btn-cadastrar-perf i {
    font-size: 16px !important;
}

.btn-deselect-all {
    background-color: transparent !important;
    color: #dc3545 !important;
    border: 1px solid #dc3545 !important;
    font-weight: bold !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.btn-deselect-all:hover {
    background-color: #dc3545 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.25) !important;
}

html.dark-mode .btn-deselect-all {
    color: #f87171 !important;
    border-color: #f87171 !important;
}

html.dark-mode .btn-deselect-all:hover {
    background-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
}

/* ============================================================ */
/* MODULO DE MENSAGENS INTERNAS                                  */
/* ============================================================ */

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(220,53,69,0.7); }
    50%       { transform: scale(1.2); box-shadow: 0 0 14px rgba(220,53,69,0.9); }
}

.page-mensagens .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.msg-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    margin-top: 24px;
    align-items: start;
}
@media (max-width: 700px) { .msg-layout { grid-template-columns: 1fr; } }

.msg-sidebar {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 20px;
}
.msg-btn-nova {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFD700;
    color: #000;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}
.msg-btn-nova:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 215, 0, 0.35); color: #000; background: #e6c200; }
.msg-nav { display: flex; flex-direction: column; gap: 4px; }
.msg-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 8px; color: #555; text-decoration: none;
    font-size: 14px; font-weight: 500; transition: background 0.15s, color 0.15s; position: relative;
}
.msg-nav-item:hover { background: #f5f5f5; color: #222; }
.msg-nav-item.active { background: #fff9db; color: #000; font-weight: 700; }
.msg-badge {
    margin-left: auto; background: #dc3545; color: #fff; border-radius: 50%;
    min-width: 20px; height: 20px; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; animation: pulse-badge 2s infinite;
}
.msg-list-area { background: #fff; border: 2px solid #eee; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); min-height: 300px; }
.msg-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f0f0f0; }
.msg-list-header h2 { font-size: 18px; font-family: inherit !important; }
.msg-count { font-size: 12px; color: #888; }
.msg-list { list-style: none; padding: 0; margin: 0; }
.msg-item { border-bottom: 1px solid #f5f5f5; transition: background 0.15s; }
.msg-item:last-child { border-bottom: none; }
.msg-item:hover { background: #fafafa; }
.msg-item--unread { background: #fff8f8; }
.msg-item--unread .msg-item-subject { font-weight: 700; }
.msg-item-link { display: block; padding: 14px 8px; text-decoration: none; color: inherit; }
.msg-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.msg-item-from { font-size: 13px; font-weight: 600; color: #333; }
.msg-item-date { font-size: 11px; color: #aaa; }
.msg-item-subject { font-size: 14px; color: #222; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.msg-item-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.msg-dot { width: 8px; height: 8px; background: #dc3545; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.msg-chip { display: inline-flex; align-items: center; background: #f0f4ff; color: #3a5fd9; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.msg-tag { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.msg-tag--reply { background: #e7f3ff; color: #1565c0; }
.msg-tag--fwd   { background: #f3fff0; color: #2e7d32; }
.msg-tag--draft { background: #fff8e1; color: #f57f17; }
.msg-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.msg-page-btn { background: #f5f5f5; color: #333; border-radius: 6px; padding: 6px 14px; text-decoration: none; font-size: 13px; transition: background 0.15s; }
.msg-page-btn:hover { background: #e0e0e0; }
.msg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #aaa; }
.msg-form-wrapper { max-width: 860px; margin: 24px auto; }
.msg-form { background: #fff; border: 2px solid #eee; border-radius: 12px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.msg-field { margin-bottom: 18px; }
.msg-label { display: block; font-weight: 600; font-size: 13px; color: #555; margin-bottom: 6px; }
.msg-select { width: 100%; border: 1.5px solid #ddd; border-radius: 8px; padding: 8px; font-size: 13px; background: #fafafa; }
.msg-select:focus { outline: none; border-color: #dc3545; background: #fff; }
.msg-textarea { width: 100%; border: 1.5px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; background: #fafafa; transition: border-color 0.15s; box-sizing: border-box; }
.msg-textarea:focus { outline: none; border-color: #dc3545; background: #fff; }
.msg-vinculos { border: 1.5px dashed #ddd; border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.msg-vinculos-toggle { background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #555; display: flex; align-items: center; gap: 8px; }
.msg-vinculos-toggle:hover { color: #dc3545; }
.msg-vinculos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .msg-vinculos-grid { grid-template-columns: 1fr; } }
.msg-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.msg-quote-box { border-left: 4px solid #dc3545; background: #fff8f8; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 18px; }
.msg-quote-header { font-size: 12px; color: #888; margin-bottom: 6px; }
.msg-quote-body { font-size: 13px; color: #555; white-space: pre-wrap; max-height: 120px; overflow-y: auto; }
.msg-detalhe-wrapper { max-width: 860px; margin: 24px auto; }
.msg-detalhe-header { background: #fff; border: 2px solid #eee; border-bottom: none; border-radius: 12px 12px 0 0; padding: 20px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.msg-detalhe-subject { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-detalhe-meta { display: flex; flex-direction: column; gap: 6px; }
.msg-detalhe-meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #555; flex-wrap: wrap; gap: 8px; }
.msg-detalhe-date { font-size: 12px; color: #aaa; }
.msg-detalhe-body { background: #fff; border-left: 2px solid #eee; border-right: 2px solid #eee; padding: 24px; font-size: 15px; line-height: 1.8; color: #333; white-space: pre-wrap; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.msg-detalhe-vinculos { background: #f9f9f9; border-left: 2px solid #eee; border-right: 2px solid #eee; border-top: 1px solid #eee; padding: 16px 24px; }
.msg-detalhe-vinculos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.msg-vinculo-card { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 10px; padding: 10px 14px; text-decoration: none; color: #333; transition: border-color 0.15s, box-shadow 0.15s; }
.msg-vinculo-card:hover { border-color: #dc3545; box-shadow: 0 2px 8px rgba(220,53,69,0.12); }
.msg-vinculo-icon { font-size: 22px; flex-shrink: 0; }
.msg-vinculo-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.msg-vinculo-value { font-size: 13px; font-weight: 600; color: #222; }
.msg-detalhe-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 24px; background: #fff; border: 2px solid #eee; border-top: 1px solid #eee; border-radius: 0 0 12px 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.msg-reply-item { background: #f9f9f9; border-left: 3px solid #3a5fd9; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 12px; }
.msg-reply-header { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.msg-reply-body { font-size: 13px; color: #444; white-space: pre-wrap; }
.msg-float-badge {
    position: fixed; bottom: 24px; right: 24px;
    background: linear-gradient(135deg, #1a1a2e, #0f3460);
    border: 1.5px solid #e94560aa; border-radius: 999px;
    padding: 10px 18px; display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 700; color: #f0f4ff; text-decoration: none;
    box-shadow: 0 4px 20px rgba(233,69,96,0.35); z-index: 9999;
    animation: pulse-badge 2.5s infinite; transition: transform 0.15s;
}
.msg-float-badge:hover { transform: scale(1.05); color: #fff; }
.msg-float-badge-count { background: #dc3545; color: #fff; border-radius: 50%; min-width: 20px; height: 20px; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* Dashboard card styles - Mensagens */
#card-mensagens {
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
#card-mensagens .card-mensagens-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(233, 69, 96, 0.05), transparent 70%);
    pointer-events: none;
}
#card-mensagens .card-mensagens-icon-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#card-mensagens .card-mensagens-icon {
    font-size: 46px;
    filter: drop-shadow(0 0 6px rgba(233, 69, 96, 0.3));
}
#card-mensagens .card-mensagens-text {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    color: #333;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    position: relative;
}
.card-pink:hover {
    border-color: #e94560 !important;
    box-shadow: 0 6px 15px rgba(233, 69, 96, 0.2) !important;
}
.msg-badge-menu-class {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.7);
    animation: pulse-badge 2s infinite;
    z-index: 2;
}

html.dark-mode .msg-sidebar,
html.dark-mode .msg-list-area,
html.dark-mode .msg-form,
html.dark-mode .msg-detalhe-header,
html.dark-mode .msg-detalhe-body,
html.dark-mode .msg-detalhe-actions,
html.dark-mode .msg-detalhe-vinculos { background: #1e1e2e; color: #e0e0e0; border-color: #333; }
html.dark-mode .msg-item:hover { background: #2a2a3a; }
html.dark-mode .msg-item--unread { background: #2d1b20; }
html.dark-mode .msg-nav-item:hover { background: #2a2a3a; }
html.dark-mode .msg-nav-item.active { background: #3d1c24; color: #ff6b81; }
html.dark-mode .msg-item-from,
html.dark-mode .msg-item-subject,
html.dark-mode .msg-detalhe-subject { color: #e0e0e0; }
html.dark-mode .msg-item-preview,
html.dark-mode .msg-detalhe-date { color: #777; }
html.dark-mode .msg-chip { background: #1a2045; color: #7a9fff; }
html.dark-mode .msg-vinculos { border-color: #444; }
html.dark-mode .msg-select,
html.dark-mode .msg-textarea { background: #2a2a3a; border-color: #444; color: #e0e0e0; }
html.dark-mode .msg-quote-box { background: #2d1b20; border-color: #c0392b; }
html.dark-mode .msg-vinculo-card { background: #1a1a2e; border-color: #444; color: #e0e0e0; }
html.dark-mode .msg-reply-item { background: #1a1a2e; }
html.dark-mode .msg-reply-body { color: #bbb; }
html.dark-mode .msg-empty { color: #555; }
html.dark-mode .msg-list-header { border-color: #333; }
html.dark-mode .msg-float-badge { background: linear-gradient(135deg, #0a0a1a, #08213a); }
html.dark-mode #card-mensagens {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border: 2px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
html.dark-mode #card-mensagens:hover {
    border-color: #334155 !important;
}
html.dark-mode #card-mensagens .card-mensagens-bg {
    display: none !important;
}
html.dark-mode #card-mensagens .card-mensagens-text {
    color: #f8fafc !important;
}

/* Status Checkbox in Dark Mode (edit_conta_bancaria) */
html.dark-mode .status-checkbox-wrapper {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-mode .status-checkbox-label {
    color: #f8fafc !important;
}

/* Calendário de Afastamentos */
.calendario-afast-container {
    background: #fff;
    color: #333;
}
.calendario-afast-weekdays {
    background: #e3f2fd;
}
.calendario-afast-weekdays div {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #555;
}
.calendario-afast-weekdays div:first-child,
.calendario-afast-weekdays div:last-child {
    color: #0277bd;
}
.calendario-afast-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
}
.calendario-afast-footer {
    border-top: 1px solid #f1f1f1;
}

/* Dark Mode para Calendário de Afastamentos */
html.dark-mode .calendario-afast-container {
    background: #1e293b !important;
    color: #f8fafc !important;
}
html.dark-mode .calendario-afast-weekdays {
    background: #0f172a !important;
}
html.dark-mode .calendario-afast-weekdays div {
    color: #94a3b8 !important;
}
html.dark-mode .calendario-afast-weekdays div:first-child,
html.dark-mode .calendario-afast-weekdays div:last-child {
    color: #38bdf8 !important;
}
html.dark-mode .calendario-afast-legend-item {
    color: #94a3b8 !important;
}
html.dark-mode .calendario-afast-footer {
    border-top-color: #334155 !important;
}

/* ========================================= */
/* MÓDULO: separador_holerites.html - Dark Mode */
/* ========================================= */
html.dark-mode .page-separador-holerites .header-area h1 {
    color: #f8fafc !important;
}
html.dark-mode .page-separador-holerites .user-info {
    color: #f8fafc !important;
}
html.dark-mode .page-separador-holerites .pdf-container {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .page-separador-holerites .upload-section {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #ffc107 !important;
}
html.dark-mode .page-separador-holerites .upload-section:hover {
    background: #1e293b !important;
    border-color: #ffd043 !important;
}
html.dark-mode .page-separador-holerites .upload-section p {
    color: #f8fafc !important;
}
html.dark-mode .page-separador-holerites .upload-section p[style*="color"] {
    color: #94a3b8 !important;
}
html.dark-mode .page-separador-holerites .upload-section input[type="file"] {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
html.dark-mode .page-separador-holerites .upload-section button.btn-save {
    border-color: #ffc107 !important;
}

/* Filtros de Pesquisa */
html.dark-mode .holerites-filters {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
html.dark-mode .holerites-filters label {
    color: #f8fafc !important;
}
html.dark-mode .holerites-filters input,
html.dark-mode .holerites-filters select {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark-mode .holerites-filters button {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
html.dark-mode .holerites-filters button:hover {
    background-color: #1e293b !important;
}

/* Colunas de Filial */
html.dark-mode .page-separador-holerites .cnpj-column {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-mode .page-separador-holerites .cnpj-header.cnpj-outros {
    background: #111827 !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #334155;
}
html.dark-mode .page-separador-holerites .cnpj-header.cnpj-outros:hover {
    background: #1f2937 !important;
}
html.dark-mode .page-separador-holerites .cnpj-header.cnpj-dynamic {
    background: #000000 !important;
    color: #ffc107 !important;
    border-bottom: 1px solid #334155;
}
html.dark-mode .page-separador-holerites .cnpj-header.cnpj-dynamic:hover {
    background: #111111 !important;
}
html.dark-mode .page-separador-holerites .holerith-card {
    background: #0f172a !important;
    border-color: #334155 !important;
}
html.dark-mode .page-separador-holerites .holerith-card:hover {
    border-color: #ffc107 !important;
    background: #1e293b !important;
}
html.dark-mode .page-separador-holerites .holerith-emp {
    color: #f8fafc !important;
}
html.dark-mode .page-separador-holerites .holerith-meta {
    color: #94a3b8 !important;
}
html.dark-mode .page-separador-holerites .empty-column {
    color: #64748b !important;
    border-color: #334155 !important;
}
html.dark-mode .no-results-placeholder {
    color: #64748b !important;
}
html.dark-mode .no-results-placeholder i {
    color: #334155 !important;
}
.file-selected-msg {
    color: #000000;
}
html.dark-mode .file-selected-msg {
    color: #f8fafc !important;
}



/* ========================================= */
/* MÓDULO: templates/relatorios.html - Scoped styles */
/* ========================================= */

        /* Suporte completo a Dark Mode no módulo de Relatórios */
        html.dark-mode .page-relatorios h2, html.dark-mode .page-relatorios h3, html.dark-mode .page-relatorios h4, html.dark-mode .page-relatorios label, html.dark-mode .page-relatorios .report-select-card h3, html.dark-mode .page-relatorios .report-select-card p {
            color: #f8fafc !important;
        }

        html.dark-mode .page-relatorios .filter-box {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }
        
        html.dark-mode .page-relatorios .filter-box strong {
            color: #f8fafc !important;
        }

        html.dark-mode .page-relatorios .filial-check-label {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-relatorios .report-select-card {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-relatorios .report-select-card.active {
            background-color: #1e293b !important;
            border-color: #28a745 !important;
        }

        html.dark-mode .page-relatorios .report-select-card p {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-relatorios div[style*="background: #fff"], html.dark-mode .page-relatorios div[style*="background:#fff"], html.dark-mode .page-relatorios div[style*="background: white"], html.dark-mode .page-relatorios div[style*="background:white"] {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-relatorios div[style*="background: #fff"] div, html.dark-mode .page-relatorios div[style*="background:#fff"] div, html.dark-mode .page-relatorios div[style*="background: #fff"] p, html.dark-mode .page-relatorios div[style*="background:#fff"] p, html.dark-mode .page-relatorios div[style*="background: #fff"] span, html.dark-mode .page-relatorios div[style*="background:#fff"] span {
            color: inherit !important;
        }

        html.dark-mode .page-relatorios select, html.dark-mode .page-relatorios input {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-relatorios p[style*="color: #666"], html.dark-mode .page-relatorios p[style*="color:#666"] {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-relatorios td.data-label, html.dark-mode .page-relatorios td.data-value {
            color: #f8fafc !important;
        }

        html.dark-mode .page-relatorios table thead tr {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-relatorios table th {
            color: #94a3b8 !important;
            background-color: #0f172a !important;
        }

        html.dark-mode .page-relatorios table td {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-relatorios #modalOS .modal-content {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-relatorios #modalOS table thead {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-relatorios #modalOS table th {
            color: #94a3b8 !important;
            background-color: #0f172a !important;
        }

        html.dark-mode .page-relatorios #modalOS table td {
            color: #cbd5e1 !important;
            border-bottom-color: #334155 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/monitoramento_acesso.html - Scoped styles */
/* ========================================= */

.acessos-body {
    background: #f8fafc;
    color: #1e293b;
    min-height: 100vh;
    font-family: 'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

html.dark-mode .acessos-body {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
    color: #f8fafc !important;
}

.acessos-body .acessos-container { max-width: 1280px; margin: 0 auto; }

/* ── Header ── */
.acessos-body .acessos-header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
html.dark-mode .acessos-body .acessos-header-area {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.acessos-body .acessos-title-with-logo { display: flex; align-items: center; gap: 15px; }
.acessos-body .acessos-header-logo { height: 45px; object-fit: contain; }
.acessos-body .acessos-h1 { font-size: 24px; font-weight: 700; color: #0f172a; margin: 0; }
html.dark-mode .acessos-body .acessos-h1 { color: #fff !important; }

.acessos-body .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.acessos-body .btn-acessos-back {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.acessos-body .btn-acessos-back:hover { background: #f1f5f9; color: #0f172a; transform: translateY(-2px); }
html.dark-mode .acessos-body .btn-acessos-back {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
html.dark-mode .acessos-body .btn-acessos-back:hover {
    background: rgba(255,255,255,0.15) !important;
}

.acessos-body .btn-acessos-refresh {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.3);
    color: #2563eb;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.acessos-body .btn-acessos-refresh:hover { background: rgba(59,130,246,0.2); transform: scale(1.04); }
html.dark-mode .acessos-body .btn-acessos-refresh {
    background: rgba(59,130,246,0.12) !important;
    color: #60a5fa !important;
}

.acessos-body .btn-acessos-refresh.spinning i { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.acessos-body .last-updated { font-size: 11px; color: #64748b; text-align: right; margin-top: 4px; }

/* ── Filter bar ── */
.acessos-body .filter-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
html.dark-mode .acessos-body .filter-bar {
    background: rgba(30,41,59,0.5) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(10px);
}

.acessos-body .filter-group { display: flex; flex-direction: column; gap: 5px; }
.acessos-body .filter-group label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.acessos-body .filter-group select, .acessos-body .filter-group input[type="text"] {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    min-width: 160px;
    outline: none;
    transition: border-color 0.2s;
}
.acessos-body .filter-group select:focus, .acessos-body .filter-group input[type="text"]:focus { border-color: #6366f1; }
html.dark-mode .acessos-body .filter-group select, html.dark-mode .acessos-body .filter-group input[type="text"] {
    background: rgba(15,23,42,0.7) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
}
html.dark-mode .acessos-body .filter-group select option { background: #1e293b !important; color: #f8fafc !important; }

.acessos-body .btn-filter-apply {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    border: none;
    color: #fff;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    transition: opacity 0.2s, transform 0.2s;
    align-self: flex-end;
}
.acessos-body .btn-filter-apply:hover { opacity: 0.88; transform: scale(1.03); }

.acessos-body .btn-filter-clear {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.2s;
    align-self: flex-end;
}
.acessos-body .btn-filter-clear:hover { background: #e2e8f0; color: #0f172a; }
html.dark-mode .acessos-body .btn-filter-clear {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #94a3b8 !important;
}
html.dark-mode .acessos-body .btn-filter-clear:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}

.acessos-body .filter-active-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(99,102,241,0.12);
    border: 1px solid rgba(99,102,241,0.3);
    color: #4f46e5;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    align-self: center;
}
html.dark-mode .acessos-body .filter-active-tag {
    background: rgba(99,102,241,0.18) !important;
    color: #a5b4fc !important;
}

/* ── Layout grid ── */
.acessos-body .acessos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1024px) {
    .acessos-body .acessos-grid { grid-template-columns: 320px 1fr; }
}

/* ── Card ── */
.acessos-body .acessos-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
html.dark-mode .acessos-body .acessos-card {
    background: rgba(30,41,59,0.45) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important;
}

.acessos-body .card-title {
    font-size: 17px; font-weight: 600; color: #0f172a;
    margin: 0 0 18px 0;
    display: flex; align-items: center; gap: 10px;
}
html.dark-mode .acessos-body .card-title { color: #fff !important; }

.acessos-body .card-count-badge {
    margin-left: auto;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
}
html.dark-mode .acessos-body .card-count-badge {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #94a3b8 !important;
}

/* ── Online users ── */
.acessos-body .online-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.acessos-body .online-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px;
    display: flex; align-items: center; justify-content: space-between;
    transition: background 0.2s;
}
.acessos-body .online-item:hover { background: #f1f5f9; }
html.dark-mode .acessos-body .online-item {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}
html.dark-mode .acessos-body .online-item:hover { background: rgba(255,255,255,0.06) !important; }

.acessos-body .online-user-info { display: flex; align-items: center; gap: 11px; }
.acessos-body .avatar-circle {
    width: 38px; height: 38px;
    background: linear-gradient(135deg,#16a34a,#22c55e);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: 15px;
    box-shadow: 0 0 12px rgba(34,197,94,0.25);
    flex-shrink: 0;
}
.acessos-body .user-details h4 { margin: 0 0 2px 0; font-size: 14px; color: #0f172a; }
html.dark-mode .acessos-body .user-details h4 { color: #fff !important; }

.acessos-body .user-details span { font-size: 11.5px; color: #64748b; }
html.dark-mode .acessos-body .user-details span { color: #94a3b8 !important; }

.acessos-body .online-status-badge {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    color: #16a34a;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    display: flex; align-items: center; gap: 5px;
    flex-shrink: 0;
}
html.dark-mode .acessos-body .online-status-badge {
    background: rgba(34,197,94,0.12) !important;
    color: #4ade80 !important;
}

.acessos-body .status-dot {
    width: 7px; height: 7px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-green 1.6s infinite;
}
@keyframes pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
    70%  { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.acessos-body .no-online { text-align: center; padding: 40px 10px; color: #64748b; font-size: 14px; }
html.dark-mode .acessos-body .no-online { color: #94a3b8 !important; }

/* ── Table ── */
.acessos-body .table-responsive-custom {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
html.dark-mode .acessos-body .table-responsive-custom {
    border: 1px solid rgba(255,255,255,0.07) !important;
}

.acessos-body .acessos-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.acessos-body .acessos-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    padding: 11px 15px;
    border-bottom: 1px solid #e2e8f0;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}
html.dark-mode .acessos-body .acessos-table th {
    background: rgba(15,23,42,0.65) !important;
    color: #64748b !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.acessos-body .acessos-table td {
    padding: 13px 15px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    white-space: nowrap;
}
html.dark-mode .acessos-body .acessos-table td {
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    color: #cbd5e1 !important;
}

.acessos-body .acessos-table tr:last-child td { border-bottom: none; }
.acessos-body .acessos-table tr:hover td { 
    background: #f8fafc; 
}
html.dark-mode .acessos-body .acessos-table tr:hover td {
    background: rgba(255,255,255,0.06) !important;
}

.acessos-body .event-badge {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px;
}
.acessos-body .badge-login { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.25); color: #2563eb; }
.acessos-body .badge-logout { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.25);  color: #dc2626; }
html.dark-mode .acessos-body .badge-login { background: rgba(59,130,246,0.14) !important; color: #60a5fa !important; }
html.dark-mode .acessos-body .badge-logout { background: rgba(239,68,68,0.14) !important; color: #f87171 !important; }

.acessos-body .td-user { font-weight: 600; color: #0f172a; }
html.dark-mode .acessos-body .td-user { color: #fff !important; }

.acessos-body .td-time { font-size: 12.5px; color: #64748b; }
html.dark-mode .acessos-body .td-time { color: #94a3b8 !important; }

.acessos-body .td-date { font-size: 13px; color: #475569; }
html.dark-mode .acessos-body .td-date { color: #cbd5e1 !important; }

.acessos-body .td-ip { font-family: 'Courier New', monospace; font-size: 12px; color: #64748b; }
html.dark-mode .acessos-body .td-ip { color: #94a3b8 !important; }

.acessos-body .no-results {
    text-align: center;
    padding: 50px 20px;
    color: #64748b;
    font-size: 14px;
}
.acessos-body .no-results i { font-size: 36px; display: block; margin-bottom: 12px; color: #94a3b8; }
    

/* ========================================= */
/* MÓDULO: templates/ordens.html - Scoped styles */
/* ========================================= */

        .page-ordens #ordersTable th {
            position: relative;
        }
        .page-ordens .resizer {
            position: absolute;
            top: 0;
            right: 0;
            width: 6px;
            cursor: col-resize;
            user-select: none;
            height: 100%;
            z-index: 10;
        }
        .page-ordens .resizer:hover, .page-ordens .resizing {
            border-right: 3px solid #ffc107;
        }
    

/* ========================================= */
/* MÓDULO: templates/edit_conta_pagar.html - Scoped styles */
/* ========================================= */

        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
        
        body, input, select, textarea, button, h3, h4, h5, h6 {
            font-family: 'Outfit', 'Segoe UI', Roboto, sans-serif;
        }
        
        body.page-edit-conta-pagar {
            background-color: #f4f6f8;
            color: #212121;
        }
        
        .page-edit-conta-pagar .card {
            background: #ffffff;
            border: 1px solid #eef1f5;
            border-radius: 12px;
            padding: 24px;
            margin-top: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.015);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .page-edit-conta-pagar .card h3 {
            font-size: 17px;
            color: #000000;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            border-left: 4px solid #FFD700;
            padding-left: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .page-edit-conta-pagar .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .page-edit-conta-pagar .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .page-edit-conta-pagar .form-group label {
            font-size: 11px;
            font-weight: 700;
            color: #212121;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .page-edit-conta-pagar .form-group input, .page-edit-conta-pagar .form-group select {
            height: 42px;
            padding: 0 14px;
            border: 1px solid #cccccc;
            border-radius: 8px;
            font-size: 13.5px;
            color: #212121;
            background-color: #ffffff;
            transition: all 0.2s ease-in-out;
            width: 100%;
            outline: none;
        }
        
        .page-edit-conta-pagar .form-group input:focus, .page-edit-conta-pagar .form-group select:focus {
            border-color: #FFD700;
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
        }
        
        .page-edit-conta-pagar .btn-save {
            background-color: #FFD700 !important;
            color: #000000 !important;
            font-weight: 700 !important;
            border: none !important;
            padding: 12px 24px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            transition: all 0.2s ease-in-out !important;
            font-size: 13.5px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
        }
        
        .page-edit-conta-pagar .btn-save:hover {
            background-color: #e6c200 !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);
        }
        
        /* Dark Mode overrides for edit_conta_pagar */
        html.dark-mode body.page-edit-conta-pagar {
            background-color: #0f172a !important;
            color: #f8fafc !important;
        }
        html.dark-mode .page-edit-conta-pagar .card {
            background: #1e293b !important;
            border-color: #334155 !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        }
        html.dark-mode .page-edit-conta-pagar .card h3 {
            color: #f8fafc !important;
            border-left-color: #ffc107 !important;
        }
        html.dark-mode .page-edit-conta-pagar .form-group label {
            color: #f8fafc !important;
        }
        html.dark-mode .page-edit-conta-pagar .form-group input, 
        html.dark-mode .page-edit-conta-pagar .form-group select {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-edit-conta-pagar .form-group input:focus, 
        html.dark-mode .page-edit-conta-pagar .form-group select:focus {
            border-color: #ffc107 !important;
        }
        html.dark-mode .page-edit-conta-pagar .form-group input[disabled] {
            background-color: #0f172a !important;
            color: #94a3b8 !important;
            border-color: #334155 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/fechamento_caixa.html - Scoped styles */
/* ========================================= */

        /* --- CALENDAR SYSTEM --- */
        .page-fechamento-caixa .calendar-container {
            margin-top: 25px;
            background: #ffffff;
            padding: 20px;
            border-radius: 14px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #eef0f2;
        }

        .page-fechamento-caixa .month-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25px;
            font-family: 'Revue', sans-serif !important;
            width: 100%;
            flex-wrap: wrap;
            gap: 15px;
        }

        .page-fechamento-caixa .month-header h2 {
            margin: 0;
            font-size: 26px;
            font-weight: bold;
            color: #212121;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .page-fechamento-caixa .month-nav-btn {
            background: #ffffff;
            color: #ffc107;
            border: 2px solid #dee2e6;
            font-size: 18px;
            padding: 6px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .page-fechamento-caixa .month-nav-btn:hover {
            background: #f8f9fa;
            color: #ff9800;
            border-color: #ffc107;
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        .page-fechamento-caixa .weekday-header-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 12px;
            text-align: center;
            margin-bottom: 12px;
            border-bottom: 2px solid #f1f3f5;
            padding-bottom: 8px;
        }

        .page-fechamento-caixa .weekday-label {
            font-weight: 800;
            color: #495057;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .page-fechamento-caixa .calendar-month-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 12px;
        }

        .page-fechamento-caixa .calendar-cell {
            min-height: 110px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px;
            position: relative;
            box-sizing: border-box;
        }

        .page-fechamento-caixa .calendar-cell.empty {
            background: #f8f9fa;
            border: 1px dashed #dee2e6;
            opacity: 0.5;
        }

        .page-fechamento-caixa .calendar-cell.empty.weekend-empty {
            background: #f1f3f5;
            border: 1px dashed #dee2e6;
            opacity: 0.6;
        }

        .page-fechamento-caixa .calendar-card {
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
            text-decoration: none;
        }

        .page-fechamento-caixa .calendar-card:hover {
            transform: scale(1.06);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
            z-index: 10;
        }

        /* Fundo colorido e letra preta (conforme pedido pelo usuário, igual Caixa Diário) */
        .page-fechamento-caixa .calendar-card.status-fechado {
            background: #a5d6a7;
            /* verde suave */
            color: #000000 !important;
            border: 2px solid #81c784;
        }

        .page-fechamento-caixa .calendar-card.status-fechado .day-number, .page-fechamento-caixa .calendar-card.status-fechado .lock-indicator {
            color: #000000;
        }

        .page-fechamento-caixa .calendar-card.status-aberto {
            background: #ffd54f;
            /* amarelo suave */
            color: #000000 !important;
            border: 2px solid #ffc107;
        }

        .page-fechamento-caixa .calendar-card.status-aberto .day-number, .page-fechamento-caixa .calendar-card.status-aberto .lock-indicator {
            color: #000000;
        }

        .page-fechamento-caixa .calendar-card.status-nao-iniciado {
            background: #f8f9fa;
            color: #555555 !important;
            border: 2px solid #dee2e6;
        }

        .page-fechamento-caixa .calendar-card.status-nao-iniciado .day-number {
            color: #495057;
        }

        /* Cores mais escuras para Sábado e Domingo */
        .page-fechamento-caixa .calendar-card.weekend.status-fechado {
            background: #81c784;
            /* verde mais escuro */
            border-color: #66bb6a;
        }

        .page-fechamento-caixa .calendar-card.weekend.status-aberto {
            background: #ffca28;
            /* amarelo mais escuro */
            border-color: #ffb300;
        }

        .page-fechamento-caixa .calendar-card.weekend.status-nao-iniciado {
            background: #f1f3f5;
            /* cinza bem claro */
            border-color: #dee2e6;
        }

        .page-fechamento-caixa .day-number {
            font-size: 40px;
            font-weight: 800;
            font-family: 'Segoe UI', sans-serif;
            line-height: 1;
        }

        .page-fechamento-caixa .lock-indicator {
            position: absolute;
            bottom: 8px;
            right: 8px;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .page-fechamento-caixa .lock-indicator:hover {
            transform: scale(1.2);
        }

        /* --- PREMIUM CSS TOOLTIP --- */
        .page-fechamento-caixa .lock-indicator .tooltip-box {
            position: absolute;
            bottom: 125%;
            right: 0;
            background: rgba(33, 33, 33, 0.95);
            color: #ffffff;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            width: max-content;
            max-width: 220px;
            white-space: normal;
            line-height: 1.4;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            transform: translateY(6px);
            z-index: 100;
            font-family: 'Segoe UI', sans-serif;
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(4px);
            text-align: left;
        }

        .page-fechamento-caixa .lock-indicator .tooltip-box::after {
            content: "";
            position: absolute;
            top: 100%;
            right: 12px;
            border-width: 6px;
            border-style: solid;
            border-color: rgba(33, 33, 33, 0.95) transparent transparent transparent;
        }

        .page-fechamento-caixa .lock-indicator:hover .tooltip-box {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- POPUP SUBMENU MODAL --- */
        .page-fechamento-caixa .submenu-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 2000;
            backdrop-filter: blur(4px);
            animation: fadeIn 0.2s ease-out;
        }

        .page-fechamento-caixa .submenu-modal-content {
            background: #ffffff;
            padding: 25px;
            border-radius: 16px;
            width: 95%;
            max-width: 850px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            animation: scaleUp 0.2s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes scaleUp {
            from {
                transform: scale(0.95);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .page-fechamento-caixa .submenu-close-btn {
            background: none;
            border: none;
            font-size: 24px;
            font-weight: bold;
            color: #aaa;
            cursor: pointer;
            float: right;
            line-height: 1;
        }

        .page-fechamento-caixa .submenu-close-btn:hover {
            color: #333;
        }

        .page-fechamento-caixa .filial-select-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            transition: all 0.2s;
            margin-bottom: 12px;
        }

        .page-fechamento-caixa .filial-select-card:hover {
            background: #f1f3f5;
            border-color: #ced4da;
            transform: translateY(-2px);
        }

        .page-fechamento-caixa .filial-select-name {
            font-weight: bold;
            font-size: 14px;
            color: #212529;
        }

        .page-fechamento-caixa .filial-status-badge {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            margin-top: 4px;
            display: inline-block;
        }

        .page-fechamento-caixa .filial-action-btn {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            border: none;
            cursor: pointer;
            transition: 0.2s;
            margin: 0;
            display: inline-block;
        }

        .page-fechamento-caixa .filial-action-btn.ver {
            background: #000;
            color: #ffc107;
            border: 1px solid #000;
        }

        .page-fechamento-caixa .filial-action-btn.ver:hover {
            background: #ffc107;
            color: #000;
            border-color: #ffc107;
        }

        .page-fechamento-caixa .filial-action-btn.iniciar {
            background: #6c757d;
            color: #fff;
            border: 1px solid #6c757d;
        }

        .page-fechamento-caixa .filial-action-btn.iniciar:hover {
            background: #5a6268;
            border-color: #545b62;
        }

        /* --- LOG MODAL --- */
        .page-fechamento-caixa .log-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            justify-content: center;
            align-items: center;
            z-index: 3000;
            backdrop-filter: blur(5px);
            animation: fadeIn 0.2s ease-out;
        }

        .page-fechamento-caixa .log-modal-content {
            background: #ffffff;
            padding: 28px;
            border-radius: 18px;
            width: 96%;
            max-width: 900px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            animation: scaleUp 0.2s ease-out;
        }

        .page-fechamento-caixa .log-event-card {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            background: #f8f9fa;
        }

        .page-fechamento-caixa .log-event-card.fechamento {
            border-left: 4px solid #dc3545;
        }

        .page-fechamento-caixa .log-event-card.reabertura {
            border-left: 4px solid #28a745;
        }

        .page-fechamento-caixa .log-event-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .page-fechamento-caixa .log-acao-badge {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 20px;
            letter-spacing: 0.5px;
        }

        .page-fechamento-caixa .log-acao-badge.fechamento {
            background: #fdecea;
            color: #c62828;
            border: 1px solid #ef9a9a;
        }

        .page-fechamento-caixa .log-acao-badge.reabertura {
            background: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #a5d6a7;
        }

        .page-fechamento-caixa .log-conta-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            margin-top: 8px;
        }

        .page-fechamento-caixa .log-conta-table th {
            background: #343a40;
            color: #fff;
            padding: 8px 12px;
            text-align: left;
            font-size: 12px;
            font-weight: 700;
        }

        .page-fechamento-caixa .log-conta-table td {
            padding: 7px 12px;
            border-bottom: 1px solid #e9ecef;
        }

        .page-fechamento-caixa .log-conta-table tr:last-child td {
            border-bottom: none;
        }

        .page-fechamento-caixa .log-conta-table tr:nth-child(even) td {
            background: #f8f9fa;
        }

        .page-fechamento-caixa .badge-caixa-log {
            background: #e8f5e9;
            color: #2e7d32;
            font-size: 9px;
            padding: 1px 5px;
            border-radius: 4px;
            font-weight: 800;
            margin-left: 4px;
            border: 1px solid #c8e6c9;
            vertical-align: middle;
            display: inline-block;
        }

        .page-fechamento-caixa .btn-log {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: bold;
            border: 1px solid #6c757d;
            background: #fff;
            color: #495057;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .page-fechamento-caixa .btn-log:hover {
            background: #343a40;
            color: #fff;
            border-color: #343a40;
        }

        .page-fechamento-caixa .btn-reopen {
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: bold;
            border: none;
            background: #28a745;
            color: #fff;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 10px;
        }

        .page-fechamento-caixa .btn-reopen:hover {
            background: #218838;
            transform: translateY(-1px);
        }

        /* --- MODAL ALERTA CAIXA FECHADO --- */
        .page-fechamento-caixa .caixa-fechado-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.55);
            justify-content: center;
            align-items: center;
            z-index: 4000;
            backdrop-filter: blur(4px);
        }

        .page-fechamento-caixa .caixa-fechado-content {
            background: #fff;
            padding: 30px;
            border-radius: 16px;
            max-width: 480px;
            width: 94%;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .page-fechamento-caixa .caixa-fechado-content h3 {
            margin-top: 0;
            color: #dc3545;
            font-size: 20px;
        }

        .page-fechamento-caixa .caixa-fechado-content p {
            color: #495057;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .page-fechamento-caixa .caixa-fechado-btns {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* --- SUPORTE COMPLETO A DARK MODE --- */
        html.dark-mode .page-fechamento-caixa .calendar-container {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
        }

        html.dark-mode .page-fechamento-caixa .month-header h2 {
            color: #f8fafc !important;
        }

        html.dark-mode .page-fechamento-caixa .month-nav-btn {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
            color: #ffc107 !important;
        }

        html.dark-mode .page-fechamento-caixa .month-nav-btn:hover {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #ffc107 !important;
            color: #ff9800 !important;
        }

        html.dark-mode .page-fechamento-caixa .month-header label {
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-fechamento-caixa #filtroFilial {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-fechamento-caixa .weekday-label {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-fechamento-caixa .weekday-header-grid {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .calendar-cell.empty {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .calendar-card.status-nao-iniciado {
            background-color: #0f172a !important;
            background: #0f172a !important;
            color: #94a3b8 !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .calendar-card.status-nao-iniciado .day-number {
            color: #f8fafc !important;
        }

        /* Modais de Fechamento de Caixa */
        html.dark-mode .page-fechamento-caixa .submenu-modal-content, html.dark-mode .page-fechamento-caixa .log-modal-content, html.dark-mode .page-fechamento-caixa .caixa-fechado-content {
            background-color: #1e293b !important;
            background: #1e293b !important;
            color: #f8fafc !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
            border: 1px solid #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .submenu-modal h3, html.dark-mode .page-fechamento-caixa .log-modal h3, html.dark-mode .page-fechamento-caixa .caixa-fechado-modal h3 {
            color: #f8fafc !important;
        }

        html.dark-mode .page-fechamento-caixa .submenu-modal p, html.dark-mode .page-fechamento-caixa .log-modal p, html.dark-mode .page-fechamento-caixa .caixa-fechado-modal p {
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-fechamento-caixa .submenu-close-btn {
            color: #64748b !important;
        }

        html.dark-mode .page-fechamento-caixa .submenu-close-btn:hover {
            color: #f8fafc !important;
        }

        /* Cartões de Filiais no Submenu */
        html.dark-mode .page-fechamento-caixa .filial-select-card {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-select-card:hover {
            background-color: #1b263b !important;
            background: #1b263b !important;
            border-color: #415a77 !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-select-name {
            color: #f8fafc !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-select-card div[style*="border-left"] {
            border-left-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-select-card span[style*="border-bottom"] {
            border-bottom-color: #334155 !important;
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-select-card span {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-select-card strong {
            color: #f8fafc !important;
        }

        /* Botões nos Modais */
        html.dark-mode .page-fechamento-caixa .btn-log {
            background-color: #0f172a !important;
            background: #0f172a !important;
            color: #cbd5e1 !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .btn-log:hover {
            background-color: #334155 !important;
            background: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-action-btn.iniciar {
            background-color: #334155 !important;
            background: #334155 !important;
            color: #cbd5e1 !important;
            border-color: #475569 !important;
        }

        html.dark-mode .page-fechamento-caixa .filial-action-btn.iniciar:hover {
            background-color: #475569 !important;
            background: #475569 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-fechamento-caixa .caixa-fechado-btns button[onclick*="fecharCaixaFechadoModal"] {
            background-color: #334155 !important;
            background: #334155 !important;
            color: #cbd5e1 !important;
            border-color: #475569 !important;
        }

        html.dark-mode .page-fechamento-caixa .caixa-fechado-btns button[onclick*="fecharCaixaFechadoModal"]:hover {
            background-color: #475569 !important;
            background: #475569 !important;
            color: #f8fafc !important;
        }

        /* Tabelas e Eventos de Log */
        html.dark-mode .page-fechamento-caixa .log-event-card {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .log-conta-table th {
            background-color: #0f172a !important;
            background: #0f172a !important;
            color: #f8fafc !important;
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .log-conta-table td {
            color: #cbd5e1 !important;
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-fechamento-caixa .log-conta-table tr:nth-child(even) td {
            background-color: #1e293b !important;
            background: #1e293b !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/extrato.html - Scoped styles */
/* ========================================= */

        /* Dark Mode overrides for Extrato de Contas */
        html.dark-mode .page-extrato #extratoFiltrosArea {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-extrato #extratoFiltrosArea label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-extrato #extratoFiltrosArea select {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-extrato #extratoFiltrosArea input {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #ffc107 !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer h3 {
            color: #f8fafc !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer table thead tr {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer table th {
            color: #f8fafc !important;
            border-bottom-color: #334155 !important;
            background-color: #0f172a !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer table td {
            border-bottom-color: #334155 !important;
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-extrato .row-entrada {
            background-color: #143a25 !important;
        }

        html.dark-mode .page-extrato .row-saida {
            background-color: #3b181a !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer td span[style*="color: red"], html.dark-mode .page-extrato #extratoTabelaContainer td span[style*="color:red"] {
            color: #f87171 !important;
        }

        html.dark-mode .page-extrato td[style*="background-color: #f9f9f9"], html.dark-mode .page-extrato td[style*="background-color:#f9f9f9"], html.dark-mode .page-extrato td.saldo-positivo, html.dark-mode .page-extrato td.saldo-negativo {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-extrato .saldo-positivo {
            color: #4ade80 !important;
        }

        html.dark-mode .page-extrato .saldo-negativo {
            color: #f87171 !important;
        }

        html.dark-mode .page-extrato #extratoTabelaContainer table td[style*="color: #777"], html.dark-mode .page-extrato #extratoTabelaContainer table td[style*="color:#777"] {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-extrato div[style*="color: #888"] h2, html.dark-mode .page-extrato div[style*="color:#888"] h2 {
            color: #cbd5e1 !important;
        }

        /* Modals in Dark Mode */
        html.dark-mode .page-extrato .modal-content {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border: 1px solid #334155 !important;
        }

        html.dark-mode .page-extrato .modal-content h3 {
            color: #f8fafc !important;
        }

        html.dark-mode .page-extrato .modal-content label {
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-extrato .modal-content input, html.dark-mode .page-extrato .modal-content select {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-extrato .modal-content input[style*="border: 1px solid #ccc"], html.dark-mode .page-extrato .modal-content select[style*="border: 1px solid #ccc"] {
            border-color: #334155 !important;
        }

        /* Flatpickr Dark Mode Overrides */
        html.dark-mode .page-extrato .flatpickr-calendar {
            background: #1e293b !important;
            border-color: #334155 !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-months, html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-month {
            background: #1e293b !important;
            color: #f8fafc !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-current-month span.cur-month {
            color: #f8fafc !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .numInputWrapper span {
            border-color: #334155 !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .numInputWrapper span:after {
            border-top-color: #f8fafc !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .numInputWrapper span.arrowUp:after {
            border-bottom-color: #f8fafc !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar input.numInput {
            color: #f8fafc !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-weekday {
            background: #1e293b !important;
            color: #cbd5e1 !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-day {
            color: #f8fafc !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-day.prevMonthDay, html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-day.nextMonthDay {
            color: #475569 !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-day:hover {
            background: #334155 !important;
        }
        html.dark-mode .page-extrato .flatpickr-calendar .flatpickr-day.selected {
            background: #ffc107 !important;
            color: #000 !important;
            border-color: #ffc107 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/agenda.html - Scoped styles */
/* ========================================= */

        /* Ajuste de altura das linhas das horas para evitar barra de rolagem */
        .page-agenda .time-row {
            height: 38px !important;
        }
        .page-agenda .time-label {
            padding-top: 2px !important;
            font-size: 11px !important;
        }

        .page-agenda .schedule-box {
            max-height: calc(100vh - 230px) !important;
        }

        /* Suporte completo a Dark Mode na Agenda */
        html.dark-mode .page-agenda .calendar-box, html.dark-mode .page-agenda .schedule-box {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border: 1px solid #334155 !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
        }

        html.dark-mode .page-agenda .month-header, html.dark-mode .page-agenda .month-header button {
            color: #f8fafc !important;
        }

        html.dark-mode .page-agenda .day-cell:hover {
            background-color: #334155 !important;
        }

        html.dark-mode .page-agenda .day-cell.selected {
            background-color: #ff9800 !important;
            color: #fff !important;
        }

        html.dark-mode .page-agenda .timeline {
            border-top-color: #334155 !important;
        }

        html.dark-mode .page-agenda .time-row {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-agenda .time-label {
            border-right-color: #334155 !important;
            color: #94a3b8 !important;
        }

        html.dark-mode .page-agenda .time-slot:hover {
            background-color: #1e293b !important;
        }

        html.dark-mode .page-agenda .days-grid div:not(.day-label) {
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-agenda .day-label {
            color: #64748b !important;
        }

        .page-agenda #selectedDateDisplay {
            color: #333;
        }

        html.dark-mode .page-agenda #selectedDateDisplay {
            color: #f8fafc !important;
        }

        html.dark-mode .page-agenda .close-btn:hover {
            color: #fff !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/caixa.html - Scoped styles */
/* ========================================= */

        @media print {

            /* Ocultar elementos desnecessários na impressão */
            .page-caixa .header-area, .page-caixa .btn-secondary, .page-caixa .btn-exit, .page-caixa .btn-exit-outline, .page-caixa .btn-novo, .page-caixa .btn-print-pdf, .page-caixa .btn-pagination, .page-caixa .pagination-buttons, .page-caixa .alert-success, .page-caixa .alert-error, .page-caixa select, .page-caixa input, .page-caixa button, .page-caixa form, .page-caixa hr, .page-caixa .filter-search-area, .page-caixa .checkbox-label, .page-caixa #modalNovoFechamento, .page-caixa #modalListagemOS, .page-caixa .user-info, .page-caixa .btn-save-vip {
                display: none !important;
            }

            body.page-caixa {
                background: #ffffff !important;
                color: #000000 !important;
            }

            .page-caixa .container {
                box-shadow: none !important;
                margin: 0 !important;
                padding: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
            }
        }

        /* Suporte completo a Dark Mode no módulo Caixa Diário */
        html.dark-mode .page-caixa #caixaSeletorData, html.dark-mode .page-caixa #caixaFiltrosArea {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-caixa #caixaSeletorData label, html.dark-mode .page-caixa #caixaSeletorData span, html.dark-mode .page-caixa #caixaFiltrosArea label, html.dark-mode .page-caixa #caixaFiltrosArea span {
            color: #f8fafc !important;
        }

        html.dark-mode .page-caixa div[style*="border: 2px solid #eee"], html.dark-mode .page-caixa div[style*="border:2px solid #eee"] {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-caixa div[style*="border: 2px solid #eee"] h4, html.dark-mode .page-caixa div[style*="border:2px solid #eee"] h4 {
            color: #f8fafc !important;
        }

        html.dark-mode .page-caixa div[style*="border: 2px solid #eee"] span, html.dark-mode .page-caixa div[style*="border:2px solid #eee"] span {
            color: inherit !important;
        }

        html.dark-mode .page-caixa div[style*="border: 2px solid #eee"] div, html.dark-mode .page-caixa div[style*="border:2px solid #eee"] div {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-caixa #modalListagemOS > div, html.dark-mode .page-caixa #modalLog > div, html.dark-mode .page-caixa #modalManual > div {
            background-color: #1e293b !important;
            background: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-caixa #modalListagemOS table, html.dark-mode .page-caixa #modalLog table, html.dark-mode .page-caixa #modalManual table {
            color: #f8fafc !important;
        }

        html.dark-mode .page-caixa #modalListagemOS thead, html.dark-mode .page-caixa #modalLog thead, html.dark-mode .page-caixa #modalManual thead {
            background-color: #0f172a !important;
            background: #0f172a !important;
        }

        html.dark-mode .page-caixa #modalListagemOS thead th, html.dark-mode .page-caixa #modalLog thead th, html.dark-mode .page-caixa #modalManual thead th {
            color: #f8fafc !important;
            background-color: #0f172a !important;
        }

        html.dark-mode .page-caixa #modalListagemOS tbody td, html.dark-mode .page-caixa #modalLog tbody td, html.dark-mode .page-caixa #modalManual tbody td {
            color: #cbd5e1 !important;
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-caixa #modalListagemOS div[style*="background: #f8f9fa"], html.dark-mode .page-caixa #modalListagemOS div[style*="background:#f8f9fa"], html.dark-mode .page-caixa #modalLog div[style*="background: #f8f9fa"], html.dark-mode .page-caixa #modalLog div[style*="background:#f8f9fa"], html.dark-mode .page-caixa #modalManual div[style*="background: #f8f9fa"], html.dark-mode .page-caixa #modalManual div[style*="background:#f8f9fa"] {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-top-color: #334155 !important;
        }

        html.dark-mode .page-caixa #modalListagemOS #modalListagemFooter, html.dark-mode .page-caixa #modalLog #modalLogFooter, html.dark-mode .page-caixa #modalManual #modalManualFooter {
            color: #f8fafc !important;
        }

        html.dark-mode .page-caixa select, html.dark-mode .page-caixa input {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-caixa #tabelaCaixa td.col-cliente a {
            color: #38bdf8 !important;
        }

        html.dark-mode .page-caixa #tabelaCaixa td {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-caixa #labelFiltroCONF {
            background-color: #0f172a !important;
            background: #0f172a !important;
            border-color: #334155 !important;
            color: #f87171 !important;
        }

        html.dark-mode .page-caixa .os-status-badge {
            background-color: #0f172a !important;
            background: #0f172a !important;
            color: #cbd5e1 !important;
        }

        html.dark-mode .page-caixa #modalListagemOS a {
            color: #38bdf8 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/clientes.html - Scoped styles */
/* ========================================= */

        /* Estilos do Modal de Histórico */
        .page-clientes .history-modal-content {
            background-color: #fefefe;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
        }
        .page-clientes .history-table thead tr {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
        }
        .page-clientes .history-table th {
            padding: 12px 10px;
            font-weight: 600;
            color: #495057;
            font-size: 13px;
        }
        .page-clientes .history-table td {
            padding: 12px 10px;
            font-size: 13px;
            border-bottom: 1px solid #dee2e6;
            color: #333;
        }
        
        /* Dark Mode overrides */
        html.dark-mode .page-clientes .history-modal-content {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-clientes .history-table thead tr {
            background-color: #0f172a !important;
            border-bottom: 2px solid #334155 !important;
        }
        html.dark-mode .page-clientes .history-table th {
            color: #94a3b8 !important;
            background-color: #0f172a !important;
        }
        html.dark-mode .page-clientes .history-table td {
            border-bottom: 1px solid #334155 !important;
            color: #cbd5e1 !important;
        }
        html.dark-mode .page-clientes .history-table tr:hover td {
            background-color: #1e293b !important;
        }
        html.dark-mode .page-clientes .payment-detail-text {
            color: #94a3b8 !important;
        }
        html.dark-mode .page-clientes .payment-green-text {
            color: #4ade80 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/cadastro_lancamentos.html - Scoped styles */
/* ========================================= */

        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
        
        body, input, select, textarea, button, h3, h4, h5, h6 {
            font-family: 'Outfit', 'Segoe UI', Roboto, sans-serif;
        }
        
        body.page-cadastro-lancamentos {
            background-color: #f4f6f8;
            color: #212121;
        }
        
        .page-cadastro-lancamentos .card {
            background: #ffffff;
            border: 1px solid #eef1f5;
            border-radius: 12px;
            padding: 24px;
            margin-top: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.015);
        }
        
        .page-cadastro-lancamentos .card h3 {
            font-size: 17px;
            color: #000000;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            border-left: 4px solid #FFD700;
            padding-left: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 0;
        }
        
        .page-cadastro-lancamentos .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .page-cadastro-lancamentos .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .page-cadastro-lancamentos .form-group label {
            font-size: 11px;
            font-weight: 700;
            color: #212121;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .page-cadastro-lancamentos .form-group input, .page-cadastro-lancamentos .form-group select {
            height: 42px;
            padding: 0 14px;
            border: 1px solid #cccccc;
            border-radius: 8px;
            font-size: 13.5px;
            color: #212121;
            background-color: #ffffff;
            transition: all 0.2s ease-in-out;
            width: 100%;
            outline: none;
        }
        
        .page-cadastro-lancamentos .form-group input:focus, .page-cadastro-lancamentos .form-group select:focus {
            border-color: #FFD700;
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
        }
        
        .page-cadastro-lancamentos .btn-save {
            background-color: #FFD700 !important;
            color: #000000 !important;
            font-weight: 700 !important;
            border: none !important;
            padding: 12px 24px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            transition: all 0.2s ease-in-out !important;
            font-size: 13.5px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
            margin-top: 15px;
        }
        
        .page-cadastro-lancamentos .btn-save:hover {
            background-color: #e6c200 !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);
        }
        
        .page-cadastro-lancamentos .table-container {
            border: 1px solid #eef1f5;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.01);
            margin-top: 15px;
            background: #ffffff;
        }
        
        .page-cadastro-lancamentos table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0 !important;
        }
        
        .page-cadastro-lancamentos table thead tr {
            background-color: #f8fafc !important;
        }
        
        .page-cadastro-lancamentos table th {
            padding: 14px 16px !important;
            font-size: 11.5px !important;
            font-weight: 700 !important;
            color: #757575 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            border-bottom: 2px solid #eef1f5 !important;
            text-align: left;
        }
        
        .page-cadastro-lancamentos table td {
            padding: 14px 16px !important;
            font-size: 13px !important;
            color: #212121 !important;
            border-bottom: 1px solid #eef1f5 !important;
        }
        
        .page-cadastro-lancamentos table tbody tr:last-child td {
            border-bottom: none !important;
        }
        
        .page-cadastro-lancamentos table tbody tr:hover {
            background-color: #fcfdfe;
        }

        .page-cadastro-lancamentos .hierarchy-1 {
            font-weight: 600;
            background-color: #fafbfc;
        }
        .page-cadastro-lancamentos .hierarchy-2 {
            color: #424242;
        }
        .page-cadastro-lancamentos .hierarchy-3 {
            color: #616161;
        }
        .page-cadastro-lancamentos .hierarchy-4 {
            color: #757575;
        }
        .page-cadastro-lancamentos .toggle-icon {
            font-size: 10px;
            color: #888;
            margin-right: 6px;
            display: inline-block;
            transition: transform 0.2s ease;
        }
        .page-cadastro-lancamentos .collapsed-child {
            display: none !important;
        }
        .page-cadastro-lancamentos .branch-hidden {
            display: none !important;
        }
        
        /* Modal Styles */
        .page-cadastro-lancamentos .modal-overlay {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            animation: fadeInOverlay 0.25s ease;
        }
        
        .page-cadastro-lancamentos .modal-overlay.active {
            display: block;
        }
        
        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideDown {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .page-cadastro-lancamentos .modal-container {
            background: #fff;
            margin: 28px auto;
            padding: 0;
            border-radius: 14px;
            width: 94%;
            max-width: 900px;
            box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
            border: 1px solid #e0e0e0;
            animation: slideDown 0.3s ease;
            max-height: 92vh;
            overflow-y: auto;
        }
        
        .page-cadastro-lancamentos .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            border-bottom: 2px solid #ffc107;
            background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
            border-radius: 14px 14px 0 0;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .page-cadastro-lancamentos .modal-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        
        .page-cadastro-lancamentos .modal-header h2 i {
            color: #ffc107;
            font-size: 20px;
        }
        
        .page-cadastro-lancamentos .modal-close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            background: none;
            line-height: 1;
            transition: color 0.2s, transform 0.2s;
        }
        
        .page-cadastro-lancamentos .modal-close:hover {
            color: #dc3545;
            transform: scale(1.15);
        }
        
        .page-cadastro-lancamentos .modal-body {
            padding: 22px 26px 28px;
        }

        /* Support for dark mode in Cadastro de Lançamentos */
        html.dark-mode body.page-cadastro-lancamentos {
            background-color: #0f172a !important;
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card {
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card h3 {
            color: #f8fafc !important;
            border-left-color: #ffd700 !important;
        }
        
        /* Search and Filter Area overrides */
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background: #ffffff"], html.dark-mode .page-cadastro-lancamentos .card div[style*="background:#ffffff"] {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color: #ffffff"], html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color:#ffffff"] {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color: #ffffff"] span, html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color:#ffffff"] span {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card label {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card label[style*="color: #757575"], html.dark-mode .page-cadastro-lancamentos .card label[style*="color:#757575"], html.dark-mode .page-cadastro-lancamentos .card p[style*="color: #757575"], html.dark-mode .page-cadastro-lancamentos .card p[style*="color:#757575"] {
            color: #94a3b8 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="width: 1px"], html.dark-mode .page-cadastro-lancamentos .card div[style*="width:1px"] {
            background-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos #searchInput {
            color: #f8fafc !important;
            background-color: transparent !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color: #def7ec"], html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color:#def7ec"] {
            background-color: rgba(46, 125, 50, 0.15) !important;
            color: #4ade80 !important;
            border-left-color: #2e7d32 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color: #def7ec"] span, html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color:#def7ec"] span {
            color: #4ade80 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color: #fde8e8"], html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color:#fde8e8"] {
            background-color: rgba(222, 53, 69, 0.15) !important;
            color: #f87171 !important;
            border-left-color: #de3545 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color: #fde8e8"] span, html.dark-mode .page-cadastro-lancamentos .card div[style*="background-color:#fde8e8"] span {
            color: #f87171 !important;
        }
        html.dark-mode .page-cadastro-lancamentos select[id*="filterCategory"], html.dark-mode .page-cadastro-lancamentos select[id*="filterFilial"], html.dark-mode .page-cadastro-lancamentos select[id*="rowsPerPage"] {
            background-color: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos select[id*="filterCategory"] option, html.dark-mode .page-cadastro-lancamentos select[id*="filterFilial"] option, html.dark-mode .page-cadastro-lancamentos select[id*="rowsPerPage"] option {
            background-color: #1e293b !important;
            color: #f8fafc !important;
        }

        /* Hierarchy Table styles */
        html.dark-mode .page-cadastro-lancamentos .table-container {
            border-color: #334155 !important;
            background-color: #1e293b !important;
        }
        html.dark-mode .page-cadastro-lancamentos table thead tr {
            background-color: #0f172a !important;
        }
        html.dark-mode .page-cadastro-lancamentos table th {
            color: #94a3b8 !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos table td {
            color: #f8fafc !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos table tbody tr:hover {
            background-color: #0f172a !important;
        }
        html.dark-mode .page-cadastro-lancamentos .hierarchy-1 {
            background-color: #1a2236 !important;
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .hierarchy-2 {
            color: #e2e8f0 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .hierarchy-3 {
            color: #cbd5e1 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .hierarchy-4 {
            color: #94a3b8 !important;
        }
        
        /* Modal & Form control support */
        html.dark-mode .page-cadastro-lancamentos .modal-container {
            background-color: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .modal-header {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
            border-bottom-color: #ffc107 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .modal-header h2 {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .form-group label {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .form-group input, html.dark-mode .page-cadastro-lancamentos .form-group select {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .form-group input::placeholder {
            color: #64748b !important;
        }
        html.dark-mode .page-cadastro-lancamentos .btn-del {
            background-color: rgba(220, 53, 69, 0.15) !important;
            color: #f87171 !important;
        }

        /* Support for new category modal dark mode elements */
        html.dark-mode .page-cadastro-lancamentos .nome-row input {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos #btn_add_nome {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .radio-group label {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color: #f8fafc"], html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color:#f8fafc"] {
            background-color: #0f172a !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color: #f8fafc"] label, html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color:#f8fafc"] label {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color: #f8fafc"] p, html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color:#f8fafc"] p {
            color: #94a3b8 !important;
        }
        html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color: #f8fafc"] div[style*="background-color: #ddd"], html.dark-mode .page-cadastro-lancamentos .modal-body div[style*="background-color:#f8fafc"] div[style*="background-color:#ddd"] {
            background-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos #relacionamentos_container {
            background-color: #0f172a !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos #relacionamentos_container label {
            color: #f8fafc !important;
        }
        html.dark-mode .page-cadastro-lancamentos #lista_fornecedores_container, html.dark-mode .page-cadastro-lancamentos #lista_funcionarios_container {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos #lista_fornecedores_container label, html.dark-mode .page-cadastro-lancamentos #lista_funcionarios_container label {
            color: #f8fafc !important;
            border-bottom-color: #334155 !important;
        }
        html.dark-mode .page-cadastro-lancamentos #lista_fornecedores_container span, html.dark-mode .page-cadastro-lancamentos #lista_funcionarios_container span {
            color: #94a3b8 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/contas_receber.html - Scoped styles */
/* ========================================= */

        /* Estilos Customizados de UI/UX para Contas */
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

        body,
        input,
        select,
        textarea,
        button,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Outfit', 'Segoe UI', Roboto, sans-serif;
        }

        body.page-contas-receber {
            background-color: #f4f6f8;
            color: #212121;
        }



        /* Cards e Seções */
        .page-contas-receber .card {
            background: #ffffff;
            border: 1px solid #eef1f5;
            border-radius: 12px;
            padding: 24px;
            margin-top: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
        }

        .page-contas-receber .card h3 {
            font-size: 17px;
            color: #000000;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            border-left: 4px solid #FFD700;
            padding-left: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Grid de Métricas / KPIs */
        .page-contas-receber .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .page-contas-receber .metric-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid #eef1f5;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
            transition: all 0.2s ease-in-out;
        }

        .page-contas-receber .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }

        .page-contas-receber .metric-icon {
            font-size: 22px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f8fafc;
        }

        /* Cores das Métricas alinhadas com o padrão do sistema */
        .page-contas-receber .card-pending-receber .metric-icon {
            background: #fff9e6;
            color: #d4a017;
        }

        .page-contas-receber .card-paid .metric-icon {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .page-contas-receber .card-total .metric-icon {
            background: #f1f3f5;
            color: #212529;
        }

        .page-contas-receber .metric-info {
            display: flex;
            flex-direction: column;
        }

        .page-contas-receber .metric-label {
            font-size: 12px;
            font-weight: 600;
            color: #757575;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .page-contas-receber .metric-value {
            font-size: 20px;
            font-weight: 700;
            margin-top: 2px;
        }

        .page-contas-receber .card-pending-receber .metric-value {
            color: #d4a017;
        }

        .page-contas-receber .card-paid .metric-value {
            color: #2e7d32;
        }

        .page-contas-receber .card-total .metric-value {
            color: #212529;
        }

        /* Formulários */
        .page-contas-receber .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .page-contas-receber .form-group {
            display: flex;
            flex-direction: column;
        }

        .page-contas-receber .form-group label {
            font-size: 11px;
            font-weight: 700;
            color: #212121;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .page-contas-receber .form-group input, .page-contas-receber .form-group select {
            height: 42px;
            padding: 0 14px;
            border: 1px solid #cccccc;
            border-radius: 8px;
            font-size: 13.5px;
            color: #212121;
            background-color: #ffffff;
            transition: all 0.2s ease-in-out;
            width: 100%;
            outline: none;
        }

        .page-contas-receber .form-group input:focus, .page-contas-receber .form-group select:focus {
            border-color: #FFD700;
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
        }

        /* Cascading Categoria selects */
        .page-contas-receber #plano_nivel_1, .page-contas-receber #plano_nivel_2, .page-contas-receber #plano_nivel_3 {
            margin-bottom: 0;
        }

        /* Checkbox Container */
        .page-contas-receber .checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 42px;
            margin-top: 20px;
            cursor: pointer;
        }

        .page-contas-receber .checkbox-container input {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #FFD700;
        }

        .page-contas-receber .checkbox-container label {
            font-size: 13px;
            font-weight: 700;
            color: #212121;
            cursor: pointer;
            margin-bottom: 0;
            text-transform: none;
        }

        /* Botão de Salvar (Amarelo com letra preta) */
        .page-contas-receber .btn-save {
            background-color: #FFD700 !important;
            color: #000000 !important;
            font-weight: 700 !important;
            border: none !important;
            padding: 12px 24px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            transition: all 0.2s ease-in-out !important;
            font-size: 13.5px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
        }

        .page-contas-receber .btn-save:hover {
            background-color: #e6c200 !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);
        }



        /* Tabelas */
        .page-contas-receber .table-container {
            border: 1px solid #eef1f5;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
            margin-top: 15px;
        }

        .page-contas-receber table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0 !important;
        }

        .page-contas-receber table thead tr {
            background-color: #f8fafc !important;
        }

        .page-contas-receber table th {
            padding: 14px 16px !important;
            font-size: 11.5px !important;
            font-weight: 700 !important;
            color: #757575 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            border-bottom: 2px solid #eef1f5 !important;
        }

        .page-contas-receber table td {
            padding: 14px 16px !important;
            font-size: 13px !important;
            color: #212121 !important;
            border-bottom: 1px solid #eef1f5 !important;
        }

        .page-contas-receber table tbody tr:last-child td {
            border-bottom: none !important;
        }

        .page-contas-receber table tbody tr:hover {
            background-color: #fcfdfe;
        }

        /* Badges de Status */
        .page-contas-receber .badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            display: inline-block;
            letter-spacing: 0.5px;
        }

        .page-contas-receber .badge-pago, .page-contas-receber .badge-recebido {
            background-color: #def7ec !important;
            color: #03543f !important;
        }

        .page-contas-receber .badge-pendente {
            background-color: #fef3c7 !important;
            color: #92400e !important;
        }

        /* ── Modal de Lançar Conta ── */
        .page-contas-receber .modal-lancar-overlay {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            animation: fadeInOverlayC 0.25s ease;
        }

        .page-contas-receber .modal-lancar-overlay.active {
            display: block;
        }

        .page-contas-receber .modal-lancar-container {
            background: #fff;
            margin: 28px auto;
            padding: 0;
            border-radius: 14px;
            width: 94%;
            max-width: 1000px;
            box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
            border: 1px solid #e0e0e0;
            animation: slideDownC 0.3s ease;
            max-height: 92vh;
            overflow-y: auto;
        }

        .page-contas-receber .modal-lancar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            border-bottom: 2px solid #ffc107;
            background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
            border-radius: 14px 14px 0 0;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .page-contas-receber .modal-lancar-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .page-contas-receber .modal-lancar-header h2 i {
            color: #ffc107;
            font-size: 20px;
        }

        .page-contas-receber .modal-lancar-close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.2s;
        }

        .page-contas-receber .modal-lancar-close:hover {
            color: #ffc107;
        }

        .page-contas-receber .modal-lancar-body {
            padding: 24px;
        }

        /* Support for dark mode in Lancar Conta Modal */
        html.dark-mode .page-contas-receber .modal-lancar-overlay {
            background-color: rgba(0, 0, 0, 0.7);
        }

        html.dark-mode .page-contas-receber .modal-lancar-container {
            background: #1e293b;
            border-color: #334155;
            color: #f8fafc;
        }

        html.dark-mode .page-contas-receber .modal-lancar-header {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-bottom-color: #ffc107;
        }

        html.dark-mode .page-contas-receber .modal-lancar-header h2 {
            color: #f8fafc;
        }

        html.dark-mode .page-contas-receber .modal-lancar-body {
            background-color: #1e293b;
        }

        /* Support for dark mode in cards and metrics */
        html.dark-mode .page-contas-receber .metric-card {
            background-color: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        }

        html.dark-mode .page-contas-receber .metric-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
        }

        html.dark-mode .page-contas-receber .metric-label {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-contas-receber .card-pending-receber .metric-icon {
            background-color: rgba(212, 160, 23, 0.15) !important;
            color: #fbbf24 !important;
        }

        html.dark-mode .page-contas-receber .card-pending-receber .metric-value {
            color: #fbbf24 !important;
        }

        html.dark-mode .page-contas-receber .card-paid .metric-icon {
            background-color: rgba(46, 125, 50, 0.15) !important;
            color: #4ade80 !important;
        }

        html.dark-mode .page-contas-receber .card-paid .metric-value {
            color: #4ade80 !important;
        }

        html.dark-mode .page-contas-receber .card-total .metric-icon {
            background-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-receber .card-total .metric-value {
            color: #f8fafc !important;
        }

        /* Support for dark mode in listing card and table */
        html.dark-mode .page-contas-receber .card {
            background-color: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        }

        html.dark-mode .page-contas-receber .card h3 {
            color: #f8fafc !important;
            border-left-color: #ffd700 !important;
        }

        html.dark-mode .page-contas-receber #currentMonthDisplay {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-receber .table-container {
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-receber table td {
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-receber table tbody tr:hover {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-contas-receber table thead tr {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-contas-receber table th {
            color: #94a3b8 !important;
            border-color: #334155 !important;
        }

        /* Support for dark mode in form inputs, selects, labels and checkboxes container */
        html.dark-mode .page-contas-receber .form-group label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-receber .form-group input, html.dark-mode .page-contas-receber .form-group select {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-receber .form-group input::placeholder {
            color: #64748b !important;
        }

        html.dark-mode .page-contas-receber .checkbox-container label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-receber #subcategorias_checkboxes_container {
            background-color: #0f172a !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-receber #subcategorias_checkboxes_container div {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-contas-receber #subcategorias_checkboxes_container span, html.dark-mode .page-contas-receber #subcategorias_checkboxes_container label {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-contas-receber #checkboxes_list label, html.dark-mode .page-contas-receber #checkboxes_list label span {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-receber #checkboxes_list label:hover {
            background-color: #334155 !important;
        }
    

/* ========================================= */
/* MÓDULO: templates/contas_pagar.html - Scoped styles */
/* ========================================= */

        /* Estilos Customizados de UI/UX para Contas */
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

        body,
        input,
        select,
        textarea,
        button,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Outfit', 'Segoe UI', Roboto, sans-serif;
        }

        body.page-contas-pagar {
            background-color: #f4f6f8;
            color: #212121;
        }



        /* Cards e Seções */
        .page-contas-pagar .card {
            background: #ffffff;
            border: 1px solid #eef1f5;
            border-radius: 12px;
            padding: 24px;
            margin-top: 20px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
        }

        .page-contas-pagar .card h3 {
            font-size: 17px;
            color: #000000;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            border-left: 4px solid #FFD700;
            padding-left: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Grid de Métricas / KPIs */
        .page-contas-pagar .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .page-contas-pagar .metric-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid #eef1f5;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
            transition: all 0.2s ease-in-out;
        }

        .page-contas-pagar .metric-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }

        .page-contas-pagar .metric-icon {
            font-size: 22px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f8fafc;
        }

        /* Cores das Métricas alinhadas com o padrão do sistema */
        .page-contas-pagar .card-pending-pagar .metric-icon {
            background: #fdf2f2;
            color: #de3545;
        }

        .page-contas-pagar .card-paid .metric-icon {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .page-contas-pagar .card-total .metric-icon {
            background: #f1f3f5;
            color: #212529;
        }

        .page-contas-pagar .metric-info {
            display: flex;
            flex-direction: column;
        }

        .page-contas-pagar .metric-label {
            font-size: 12px;
            font-weight: 600;
            color: #757575;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .page-contas-pagar .metric-value {
            font-size: 20px;
            font-weight: 700;
            margin-top: 2px;
        }

        .page-contas-pagar .card-pending-pagar .metric-value {
            color: #de3545;
        }

        .page-contas-pagar .card-paid .metric-value {
            color: #2e7d32;
        }

        .page-contas-pagar .card-total .metric-value {
            color: #212529;
        }

        /* Formulários */
        .page-contas-pagar .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .page-contas-pagar .form-group {
            display: flex;
            flex-direction: column;
        }

        .page-contas-pagar .form-group label {
            font-size: 11px;
            font-weight: 700;
            color: #212121;
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .page-contas-pagar .form-group input, .page-contas-pagar .form-group select {
            height: 42px;
            padding: 0 14px;
            border: 1px solid #cccccc;
            border-radius: 8px;
            font-size: 13.5px;
            color: #212121;
            background-color: #ffffff;
            transition: all 0.2s ease-in-out;
            width: 100%;
            outline: none;
        }

        .page-contas-pagar .form-group input:focus, .page-contas-pagar .form-group select:focus {
            border-color: #FFD700;
            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
        }

        /* Cascading Categoria selects */
        .page-contas-pagar #plano_nivel_1, .page-contas-pagar #plano_nivel_2, .page-contas-pagar #plano_nivel_3 {
            margin-bottom: 0;
        }

        /* Checkbox Container */
        .page-contas-pagar .checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 42px;
            margin-top: 20px;
            cursor: pointer;
        }

        .page-contas-pagar .checkbox-container input {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #FFD700;
        }

        .page-contas-pagar .checkbox-container label {
            font-size: 13px;
            font-weight: 700;
            color: #212121;
            cursor: pointer;
            margin-bottom: 0;
            text-transform: none;
        }

        /* Botão de Salvar (Amarelo com letra preta) */
        .page-contas-pagar .btn-save {
            background-color: #FFD700 !important;
            color: #000000 !important;
            font-weight: 700 !important;
            border: none !important;
            padding: 12px 24px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            transition: all 0.2s ease-in-out !important;
            font-size: 13.5px !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
        }

        .page-contas-pagar .btn-save:hover {
            background-color: #e6c200 !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(255, 215, 0, 0.3);
        }



        /* Tabelas */
        .page-contas-pagar .table-container {
            border: 1px solid #eef1f5;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
            margin-top: 15px;
        }

        .page-contas-pagar table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 0 !important;
        }

        .page-contas-pagar table thead tr {
            background-color: #f8fafc !important;
        }

        .page-contas-pagar table th {
            padding: 14px 16px !important;
            font-size: 11.5px !important;
            font-weight: 700 !important;
            color: #757575 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            border-bottom: 2px solid #eef1f5 !important;
            border-right: 1px solid #eef1f5 !important;
            text-align: center !important;
        }

        .page-contas-pagar table th:last-child {
            border-right: none !important;
        }

        .page-contas-pagar table td {
            padding: 14px 16px !important;
            font-size: 13px !important;
            color: #212121 !important;
            border-bottom: 1px solid #eef1f5 !important;
            border-right: 1px solid #eef1f5 !important;
            text-align: center !important;
            vertical-align: middle !important;
        }

        .page-contas-pagar table td:last-child {
            border-right: none !important;
        }

        .page-contas-pagar table tbody tr:last-child td {
            border-bottom: none !important;
        }

        .page-contas-pagar table tbody tr:hover {
            background-color: #fcfdfe;
        }

        /* Badges de Status */
        .page-contas-pagar .badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            display: inline-block;
            letter-spacing: 0.5px;
        }

        .page-contas-pagar .badge-pago, .page-contas-pagar .badge-recebido {
            background-color: #def7ec !important;
            color: #03543f !important;
        }

        .page-contas-pagar .badge-pendente {
            background-color: #fef3c7 !important;
            color: #92400e !important;
        }

        /* ── Modal de Lançar Conta ── */
        .page-contas-pagar .modal-lancar-overlay {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            animation: fadeInOverlayC 0.25s ease;
        }

        .page-contas-pagar .modal-lancar-overlay.active {
            display: block;
        }

        .page-contas-pagar .modal-lancar-container {
            background: #fff;
            margin: 28px auto;
            padding: 0;
            border-radius: 14px;
            width: 94%;
            max-width: 1000px;
            box-shadow: 0 14px 55px rgba(0, 0, 0, 0.28);
            border: 1px solid #e0e0e0;
            animation: slideDownC 0.3s ease;
            max-height: 92vh;
            overflow-y: auto;
        }

        .page-contas-pagar .modal-lancar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            border-bottom: 2px solid #ffc107;
            background: linear-gradient(135deg, #fffde7 0%, #fff8e1 100%);
            border-radius: 14px 14px 0 0;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .page-contas-pagar .modal-lancar-header h2 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .page-contas-pagar .modal-lancar-header h2 i {
            color: #ffc107;
            font-size: 20px;
        }

        .page-contas-pagar .modal-lancar-close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            background: none;
            border: none;
            cursor: pointer;
            transition: color 0.2s;
        }

        .page-contas-pagar .modal-lancar-close:hover {
            color: #ffc107;
        }

        .page-contas-pagar .modal-lancar-body {
            padding: 24px;
        }

        /* Support for dark mode in Lancar Conta Modal */
        html.dark-mode .page-contas-pagar .modal-lancar-overlay {
            background-color: rgba(0, 0, 0, 0.7);
        }

        html.dark-mode .page-contas-pagar .modal-lancar-container {
            background: #1e293b;
            border-color: #334155;
            color: #f8fafc;
        }

        html.dark-mode .page-contas-pagar .modal-lancar-header {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-bottom-color: #ffc107;
        }

        html.dark-mode .page-contas-pagar .modal-lancar-header h2 {
            color: #f8fafc;
        }

        html.dark-mode .page-contas-pagar .modal-lancar-body {
            background-color: #1e293b;
        }

        /* Support for dark mode in cards and metrics */
        html.dark-mode .page-contas-pagar .metric-card {
            background-color: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        }

        html.dark-mode .page-contas-pagar .metric-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
        }

        html.dark-mode .page-contas-pagar .metric-label {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-contas-pagar .card-pending-pagar .metric-icon {
            background-color: rgba(222, 53, 69, 0.15) !important;
            color: #f87171 !important;
        }

        html.dark-mode .page-contas-pagar .card-pending-pagar .metric-value {
            color: #f87171 !important;
        }

        html.dark-mode .page-contas-pagar .card-paid .metric-icon {
            background-color: rgba(46, 125, 50, 0.15) !important;
            color: #4ade80 !important;
        }

        html.dark-mode .page-contas-pagar .card-paid .metric-value {
            color: #4ade80 !important;
        }

        html.dark-mode .page-contas-pagar .card-total .metric-icon {
            background-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar .card-total .metric-value {
            color: #f8fafc !important;
        }

        /* Support for dark mode in listing card, filters and table */
        html.dark-mode .page-contas-pagar .card {
            background-color: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
        }

        html.dark-mode .page-contas-pagar .card h3 {
            color: #f8fafc !important;
            border-left-color: #ffd700 !important;
        }

        html.dark-mode .page-contas-pagar #currentMonthDisplay {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar .card form[action="/contas_pagar"] {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar .card form[action="/contas_pagar"] div[style*="border-left"] {
            border-left-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar .table-container {
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar table td {
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar table tbody tr:hover {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-contas-pagar table thead tr {
            background-color: #0f172a !important;
        }

        html.dark-mode .page-contas-pagar table th {
            color: #94a3b8 !important;
            border-color: #334155 !important;
        }

        /* Support for dark mode in form inputs, selects, labels and checkboxes container */
        html.dark-mode .page-contas-pagar .form-group label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar .form-group input, html.dark-mode .page-contas-pagar .form-group select {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar .form-group input::placeholder {
            color: #64748b !important;
        }

        html.dark-mode .page-contas-pagar .checkbox-container label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar #subcategorias_checkboxes_container {
            background-color: #0f172a !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar #subcategorias_checkboxes_container div {
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar #subcategorias_checkboxes_container span, html.dark-mode .page-contas-pagar #subcategorias_checkboxes_container label {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-contas-pagar #dynamic_employee_rows {
            background-color: #0f172a !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar #dynamic_employee_rows h4 {
            color: #94a3b8 !important;
            border-bottom-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar #checkboxes_list label, html.dark-mode .page-contas-pagar #checkboxes_list label span {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar #checkboxes_list label:hover {
            background-color: #334155 !important;
        }

        /* Dark Mode overrides for Informar Pagamento Modal in contas_pagar */
        html.dark-mode .page-contas-pagar #modalPagamentoOverlay {
            background-color: rgba(0, 0, 0, 0.75) !important;
        }

        html.dark-mode .page-contas-pagar .modal-pagamento-content {
            background-color: #1e293b !important;
            border: 1px solid #334155 !important;
            box-shadow: 0 14px 55px rgba(0, 0, 0, 0.5) !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar .modal-pagamento-content .modal-cliente-header {
            border-bottom-color: #334155 !important;
        }

        .page-contas-pagar .modal-pagamento-content h2 {
            color: #ffc107 !important;
        }

        html.dark-mode .page-contas-pagar .modal-pagamento-content h2 {
            color: #ffc107 !important;
        }

        html.dark-mode .page-contas-pagar .modal-pagamento-content label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-contas-pagar .modal-pagamento-content input,
        html.dark-mode .page-contas-pagar .modal-pagamento-content select {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-contas-pagar .modal-pagamento-content button[type="button"] {
            background-color: #475569 !important;
            color: #f8fafc !important;
        }

        /* Dark Mode overrides for edit_plano_conta */
        html.dark-mode body.page-edit-plano-conta {
            background-color: #0f172a !important;
            color: #f8fafc !important;
        }

        html.dark-mode .page-edit-plano-conta .card {
            background-color: #1e293b !important;
            background: #1e293b !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        }

        html.dark-mode .page-edit-plano-conta .card h3,
        html.dark-mode .page-edit-plano-conta .card strong,
        html.dark-mode .page-edit-plano-conta label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-edit-plano-conta .card p {
            color: #94a3b8 !important;
        }

        html.dark-mode .page-edit-plano-conta input[type="text"],
        html.dark-mode .page-edit-plano-conta select {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-edit-plano-conta input[type="text"]:focus,
        html.dark-mode .page-edit-plano-conta select:focus {
            border-color: #ffc107 !important;
        }

        html.dark-mode .page-edit-plano-conta #relacionamentos_container {
            background-color: #0f172a !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-edit-plano-conta #lista_fornecedores_container,
        html.dark-mode .page-edit-plano-conta #lista_funcionarios_container {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        html.dark-mode .page-edit-plano-conta #lista_fornecedores_container label,
        html.dark-mode .page-edit-plano-conta #lista_funcionarios_container label {
            color: #f8fafc !important;
        }

        html.dark-mode .page-edit-plano-conta #lista_fornecedores_container span,
        html.dark-mode .page-edit-plano-conta #lista_funcionarios_container span {
            color: #94a3b8 !important;
        }

/* ── Dropdowns de Orçamentos e Visitas ── */
@keyframes fadeDropdown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.visitas-dropdown-menu,
.orcamento-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 10px;
    min-width: 200px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
    z-index: 5000;
    overflow: hidden;
    animation: fadeDropdown .18s ease;
}

.visitas-dropdown-item,
.orcamento-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.visitas-dropdown-item.item-has-border,
.orcamento-dropdown-item.item-has-border {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.visitas-dropdown-item:hover,
.orcamento-dropdown-item:hover {
    background: rgba(26, 107, 60, .1);
}

.visitas-dropdown-item .yellow-icon,
.orcamento-dropdown-item .yellow-icon {
    color: #ffc107;
}

/* Dark mode overrides */
html.dark-mode .visitas-dropdown-menu,
html.dark-mode .orcamento-dropdown-menu {
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

html.dark-mode .visitas-dropdown-item,
html.dark-mode .orcamento-dropdown-item {
    color: #e0e0e0;
}

html.dark-mode .visitas-dropdown-item.item-has-border,
html.dark-mode .orcamento-dropdown-item.item-has-border {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html.dark-mode .visitas-dropdown-item:hover,
html.dark-mode .orcamento-dropdown-item:hover {
    background: rgba(26, 107, 60, .25);
}

/* ── Modal Visita ── */
.modal-visita-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 9000;
    align-items: flex-start; justify-content: center;
    overflow-y: auto; padding: 30px 10px;
}
.modal-visita-overlay.active { display: flex; }
.modal-visita-container {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 16px; width: 100%; max-width: 920px;
    box-shadow: 0 25px 60px rgba(0,0,0,.15);
    overflow: visible; position: relative; animation: slideInDown .25s ease;
}
.modal-visita-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 18px 26px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #e9ecef;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.modal-visita-header h2 { color: #333; font-size: 18px; margin: 0; display: flex; align-items: center; gap: 9px; }
.modal-visita-header h2 i { color: #ffc107; font-size: 20px; }
.modal-visita-close { background: transparent; border: none; color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; opacity: .75; transition: .2s; line-height: 1; }
.modal-visita-close:hover { opacity: 1; color: #333; transform: scale(1.08); }
.modal-visita-body { padding: 24px 28px; }
.visita-section { margin-bottom: 20px; }
.visita-section-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: #333333;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08); padding-bottom: 6px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.visita-section-title i {
    color: #ffc107;
}
.visita-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.visita-field { display: flex; flex-direction: column; gap: 4px; }
.visita-field label { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .4px; }

.visita-field input, .visita-field select, .visita-field textarea {
    border: 1.5px solid rgba(0,0,0,.15);
    border-radius: 8px; padding: 8px 12px; font-size: 14px;
    background: #ffffff;
    color: #333333;
    transition: border-color .2s; width: 100%;
}
.visita-field input:focus, .visita-field select:focus, .visita-field textarea:focus {
    border-color: #d97706; outline: none;
}
.visita-field textarea { resize: vertical; min-height: 80px; }

.cliente-toggle { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.cliente-toggle button { font-size: 12px; padding: 4px 14px; border-radius: 20px; border: 1.5px solid; cursor: pointer; font-weight: 600; transition: .2s; }
.btn-toggle-cad { border-color: #d97706; background: #d97706; color: #fff; }
.btn-toggle-manual { border-color: #6f42c1; background: transparent; color: #6f42c1; }
.btn-toggle-cad.inactive { background: transparent; color: #d97706; }
.btn-toggle-manual.active { background: #6f42c1; color: #fff; }

.modal-visita-footer { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); }

.btn-imprimir-visita {
    height: 46px;
    padding: 0 28px;
    background: #ffc107;
    border-radius: 8px;
    border: none;
    color: #1e1e2e;
    cursor: pointer;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.btn-imprimir-visita:hover {
    background: #ffb300;
    transform: translateY(-1px);
}
.btn-imprimir-visita:active {
    transform: translateY(0);
}

/* Dark mode for Modal Visita */
html.dark-mode .modal-visita-container {
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
html.dark-mode .visita-section-title {
    color: #ffc107;
    border-bottom: 2px solid rgba(255, 193, 7, 0.25);
}
html.dark-mode .visita-field label { color: var(--text-muted, #888); }
html.dark-mode .visita-field input, 
html.dark-mode .visita-field select, 
html.dark-mode .visita-field textarea {
    border: 1.5px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: #e0e0e0;
}
html.dark-mode .visita-field input:focus, 
html.dark-mode .visita-field select:focus, 
html.dark-mode .visita-field textarea:focus {
    border-color: #ffc107;
}
html.dark-mode .btn-toggle-cad { border-color: #ffc107; background: #ffc107; color: #1e1e2e; }
html.dark-mode .btn-toggle-cad.inactive { background: transparent; color: #ffc107; }
html.dark-mode .modal-visita-footer { border-top: 1px solid rgba(255,255,255,.1); }
html.dark-mode .btn-imprimir-visita {
    background: #ffc107;
    color: #1e1e2e;
}
html.dark-mode .btn-imprimir-visita:hover {
    background: #ffe082;
}

/* Explicit font-family override to match Clientes Modal */
.modal-visita-container,
.modal-visita-container input,
.modal-visita-container select,
.modal-visita-container textarea,
.modal-visita-container button,
.modal-visita-container label {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
.modal-visita-header h2 {
    font-family: 'Revue', sans-serif !important;
}

/* Custom styling for Client Toggle Buttons in Visita Modal */
.btn-toggle-cad:not(.inactive),
.btn-toggle-manual.active {
    background-color: #000000 !important;
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.btn-toggle-cad.inactive,
.btn-toggle-manual:not(.active) {
    background-color: #f1f5f9 !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

/* ── Badges de status da Visita Técnica ── */
.badge-visita {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    border: 1px solid transparent;
}
.badge-Agendada    { background: #dbeafe; color: #1d4ed8; }
.badge-Realizada   { background: #d1fae5; color: #065f46; }
.badge-Cancelada   { background: #fee2e2; color: #991b1b; }
.badge-Em_analise  { background: #fef9c3; color: #854d0e; }
.badge-Aprovada    { background: #bbf7d0; color: #14532d; }
.badge-Reprovada   { background: #fed7aa; color: #9a3412; }

/* Dark Mode status badges for Visita Técnica */
html.dark-mode .badge-Agendada {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark-mode .badge-Realizada {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark-mode .badge-Cancelada {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
html.dark-mode .badge-Em_analise {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark-mode .badge-Aprovada {
    background: rgba(52, 211, 153, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}
html.dark-mode .badge-Reprovada {
    background: rgba(249, 115, 22, 0.15) !important;
    color: #fdba74 !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

/* --- Select2 Hover color in Visita Modal (Light Yellow instead of Green) --- */
.modal-visita-container .select2-container--default .select2-results__option--highlighted {
    background-color: #fff3cd !important;
    color: #333333 !important;
}

html.dark-mode .modal-visita-container .select2-container--default .select2-results__option--highlighted {
    background-color: #ffc107 !important;
    color: #000000 !important;
}

/* =========================================
   RESPONSIVIDADE GLOBAL — MOBILE
   Breakpoints: ≤768px (tablet/mobile) e ≤480px (mobile pequeno)
   ========================================= */

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {

    /* ── Container principal ── */
    .container {
        margin: 8px !important;
        padding: 12px !important;
        border-radius: 6px !important;
    }

    /* ── Header ── */
    .header-area {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
    }

    .header-logo {
        height: 44px !important;
    }

    .title-with-logo h1 {
        font-size: 16px !important;
    }

    .user-info {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 12px !important;
    }

    /* ── Formulários ── */
    .form-row,
    .form-row-triple {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .field-group {
        width: 100% !important;
    }

    /* ── Tabelas ── */
    table {
        font-size: 12px !important;
    }

    th, td {
        padding: 7px 6px !important;
        font-size: 12px !important;
    }

    /* Garante scroll horizontal em todas as tabelas globais */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── Dashboard cards (menu principal) ── */
    .dashboard-container {
        gap: 14px !important;
        margin-top: 20px !important;
    }

    .dashboard-card {
        width: 155px !important;
        height: 140px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    .dashboard-card div:first-child {
        height: 60px !important;
    }

    .dashboard-card div:last-child {
        height: 46px !important;
        font-size: 14px !important;
    }

    .dashboard-card-icon {
        font-size: 38px !important;
    }

    /* ── Login ── */
    .login-container {
        max-width: 92vw !important;
        padding: 24px 20px !important;
        margin: 16px !important;
    }

    .login-logo {
        max-width: 160px !important;
    }

    /* ── Botões de ação na tabela ── */
    .btn-edit,
    .btn-del,
    .btn-main,
    .btn-secondary {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    .btn-exit {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* ── Alertas ── */
    .alert-error,
    .alert-success {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    /* ── Modais Bootstrap ── */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .modal-body {
        padding: 14px !important;
    }

    .modal-header {
        padding: 12px 14px !important;
    }
}

/* ---------- ≤ 480px (mobile pequeno) ---------- */
@media (max-width: 480px) {

    /* ── Container ── */
    .container {
        margin: 4px !important;
        padding: 10px !important;
    }

    /* ── Header ── */
    .title-with-logo {
        gap: 8px !important;
    }

    .header-logo {
        height: 36px !important;
    }

    .title-with-logo h1 {
        font-size: 14px !important;
    }

    /* ── Dashboard cards ainda menores em tela muito pequena ── */
    .dashboard-card {
        width: 130px !important;
        height: 118px !important;
        font-size: 12px !important;
        padding: 10px !important;
    }

    .dashboard-card div:first-child {
        height: 50px !important;
    }

    .dashboard-card div:last-child {
        height: 38px !important;
        font-size: 12px !important;
    }

    .dashboard-card-icon {
        font-size: 32px !important;
    }

    /* ── Login ── */
    .login-container {
        padding: 20px 16px !important;
    }

    .login-logo {
        max-width: 130px !important;
    }

    /* ── Tabelas: padding mínimo ── */
    th, td {
        padding: 5px 4px !important;
        font-size: 11px !important;
    }

    /* ── Botões menores ── */
    .btn-edit,
    .btn-del {
        padding: 4px 7px !important;
        font-size: 10px !important;
    }
}