/* ============================================================
   meu_style.css — Estilos Globais do Sistema
   ------------------------------------------------------------
   Seções:
   01. Variáveis CSS (:root)
   02. Reset & Body
   03. Navbar (topo fixo)
   04. Menu Super Administrador
   05. Menu do Usuário
   06. Sidebar (menu lateral esquerdo)
   07. Tree View (submenus em árvore)
   08. Área de Conteúdo Principal (#content)
   09. Cabeçalho de Página (.page-header-compact)
   10. Botões Genéricos (.generic-btn) e Navbar de Formulário
   11. Layout Fixo com Scroll Interno (.page-layout-fixed)
   12. Abas (Nav Tabs)
   13. Componentes de Formulário (inputs, selects, labels)
   14. Tabelas HTML (.table, #grid_Localizar)
   15. Paginação (.table-card-footer)
   16. Sistema de Flex para Tabela de Busca (.table-card-full)
   17. Seleção Visual de Linhas
   18. Altura Fixa de Linhas da Tabela
   19. Formulário — Overlay, Validação e Grid
   20. Alertas e Feedback — Tema Personalizado
   21. Modais — PDF e Draggable
   ============================================================ */

:root {
    --bs-label: var(--bs-primary);   /* Cor do texto dos labels */  
    --app-accent: var(--bs-primary);
    --app-accent-rgb: var(--bs-primary-rgb);
    --app-accent-soft-bg: rgba(var(--app-accent-rgb), 0.08);
    --app-accent-soft-bg-strong: rgba(var(--app-accent-rgb), 0.12);
    --app-accent-soft-border: rgba(var(--app-accent-rgb), 0.14);
    --app-accent-text-strong: color-mix(in srgb, var(--app-accent) 78%, #0f172a 22%);
    /* Sidebar levemente mais clara (não branco) */
    --sidebar-bg: #f1f5f9;           /* antes: #1680b2 */
    --sidebar-width: 250px;
    --sidebar-text: #475569;         /* antes: #000080 */
    --sidebar-hover: var(--sidebar-text);        /* texto ao passar o mouse */
    --sidebar-hover-bg: #e9ecef;     /* fundo no hover */
    --sidebar-active-color: var(--app-accent); /* item ativo */
    --tree-line-color: #cbd5e1;      /* antes: #495057 */

    /* Variáveis customizadas para tabelas */
    --table-header-bg: color-mix(in srgb, var(--bs-primary) 26%, #ffffff 74%);
    --table-header-color: #000;
    --table-row-height: 25px;
    --table-odd-bg: #E8E9E9;
    --table-hover-bg: #E9CB7E;
    --table-vertical-border: #b0b0b0;
    --table-header-border-bottom: color-mix(in srgb, var(--bs-primary) 42%, #ffffff 58%);

    /* Tamanho da Fonte do Label */
    --components-font-size-label: 0.79rem;

    /* Asterisco/bolinha de campo obrigatório (utilitário global) */
    --required-mark-color: #dc3545;       /* vermelho saturado — usado pelo asterisco */
    --required-mark-size: 1rem;
    --required-dot-color: #f08a8a;        /* vermelho mais claro/suave — usado pela bolinha */

    /* Placeholder padrão */
    --input-placeholder-color: #c9d1da;
    --input-placeholder-color-dark: #8fa1b3;

    /* Altura da Navbar */
    --navbar-height: 58px;

    /* Variável para limitar a altura do card quando necessário (padrão: sem limite) */
    --card-max-height: none;
}

/* ========================================
   02. RESET & BODY
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background-color: #e9ecef;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===========================================================================
   Validação HTML5 — limpeza visual global
   ---------------------------------------------------------------------------
   Bootstrap 5 injeta no estado :valid/:invalid:
     1) X vermelho ou ✓ verde como background-image (redundante e sobrepõe
        nossos ícones de calendário/lupa)
     2) Borda VERDE no :valid (comemoração desnecessária)
     3) Box-shadow esfumaçado no :focus
   Removemos os 3 globalmente — estado válido = borda neutra, só erro tem
   destaque vermelho (que é o que importa).
   =========================================================================== */

/* 1) Remove ícones de validação (X vermelho / ✓ verde) */
.form-control:invalid,
.form-control.is-invalid,
.form-control:valid,
.form-control.is-valid,
.form-select:invalid,
.form-select.is-invalid,
.form-select:valid,
.form-select.is-valid {
    background-image: none !important;
    padding-right: revert !important;
}

/* 2) Remove borda VERDE do estado :valid (mantém borda vermelha do :invalid) */
.form-control:valid,
.form-control.is-valid,
.form-select:valid,
.form-select.is-valid {
    border-color: var(--bs-border-color) !important;
}

/* 3) Foco em campo válido — borda azul do tema, sem auréola */
.form-control:valid:focus,
.form-control.is-valid:focus,
.form-select:valid:focus,
.form-select.is-valid:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: none !important;
}

/* RESTAURA o comportamento original do .input-action-embedded — esse componente
   tem o "abraço" entre input + botão que precisa manter a borda neutra mesmo no
   estado :valid/:invalid e o destaque azul vem via :focus-within (no wrapper),
   não via :focus do input em si. */
.input-action-embedded .form-control:valid,
.input-action-embedded .form-control.is-valid,
.input-action-embedded .form-control:invalid,
.input-action-embedded .form-control.is-invalid {
    border-color: var(--bs-border-color) !important;
}

.input-action-embedded:focus-within .form-control:valid,
.input-action-embedded:focus-within .form-control.is-valid,
.input-action-embedded:focus-within .form-control:invalid,
.input-action-embedded:focus-within .form-control.is-invalid,
.input-action-embedded:focus-within .btn.btn-outline-secondary {
    border-color: var(--app-accent) !important;
}

/* OBS: o border-radius do input + botão do .input-action-embedded é forçado
   nas próprias regras do componente, mais abaixo no arquivo (~linha 2155+).
   Aquelas regras vêm DEPOIS no CSS então vencem por cascata, e foi necessário
   colocar lá pra que o estado :invalid do Bootstrap não desencaixasse os cantos. */

/* Checkboxes / radios — mesmo princípio: sem verde, sem auréola, primary quando marcado */
.form-check-input:valid,
.form-check-input.is-valid {
    border-color: var(--bs-border-color) !important;
}

.form-check-input:valid:checked,
.form-check-input.is-valid:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    color: inherit !important;
}

.form-check-input:focus,
.form-check-input:valid:focus,
.form-check-input.is-valid:focus,
.form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
    box-shadow: none !important;
}

/* Asterisco de campo obrigatório — utilitário global. Uso:
   <label>Nome <span class="required-mark">*</span></label> */
.required-mark {
    color: var(--required-mark-color);
    font-size: var(--required-mark-size);
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
    vertical-align: middle;
    display: inline-block;
}

/* Variante BOLINHA — alternativa minimalista. Uso:
   <label>Nome <span class="required-dot" dmx-bs-tooltip="'Campo obrigatório'"></span></label>
   Não precisa de conteúdo de texto, é puramente visual via CSS.
   Cor mais suave (--required-dot-color) pra não competir com o conteúdo da tela. */
.required-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--required-dot-color);
    display: inline-block;
    margin-left: 0;
    vertical-align: middle;
    position: relative;
    top: -4px;
    cursor: help;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.required-dot:hover {
    transform: scale(1.3);
    background-color: var(--required-mark-color);
}

.processing-overlay {
    position: fixed;
    inset: 0;
    left: var(--sidebar-width);
    z-index: 1060;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

body:has(#sidebar-wrapper.collapsed) .processing-overlay {
    left: 50px;
}

body:has(#sidebar-wrapper.hidden) .processing-overlay {
    left: 0;
}

@media (max-width: 991px) {
    .processing-overlay {
        left: 0 !important;
    }
}

.processing-overlay-card {
    width: min(100%, 400px);
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    padding: 1.25rem 1.2rem 1.05rem;
    text-align: center;
    color: #334155;
}

.processing-overlay-spinner {
    width: 2.2rem;
    height: 2.2rem;
    border-width: 0.24rem;
}

.processing-overlay-message {
    margin-top: 0.7rem;
    margin-bottom: 0;
    font-weight: 700;
    color: #334155;
}

.inline-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 88px;
    padding: 1rem;
    text-align: center;
    color: #64748b;
}

.inline-loading-spinner {
    color: var(--app-accent);
    font-size: 1.15rem;
}

.inline-loading-message {
    margin: 0;
    font-weight: 600;
    color: #64748b;
}

body[data-bs-theme="dark"] .processing-overlay-card {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.52);
    color: #e5e7eb;
}

body[data-bs-theme="dark"] .processing-overlay-message {
    color: #e2e8f0;
}

body[data-bs-theme="dark"] .inline-loading-state {
    color: #9fb0c2;
}

body[data-bs-theme="dark"] .inline-loading-spinner {
    color: #8ecae6;
}

body[data-bs-theme="dark"] .inline-loading-message {
    color: #cbd5e1;
}

/* ========================================
   03. NAVBAR (TOPO FIXO)
   ======================================== */
.top-navbar {
    background-color: var(--bs-primary);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1050;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* ÁREA DO LOGO – mesma cor da navbar */
.logo-section {
    width: var(--sidebar-width);
    height: var(--navbar-height);
    display: flex;
    align-items: center;
    padding: 2px;
    background-color: var(--bs-primary);
    border-right: 1px solid rgba(255,255,255,0.1);
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
    flex-shrink: 0;
}



.logo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.navbar-right {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 0.2rem;
    gap: 0.25rem;
}

.theme-toggle-section {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.12);
    color: white;
    flex-shrink: 0;
}

.theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.88);
}

.theme-toggle-switch {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.theme-toggle-switch .form-check-input {
    margin-top: 0;
    cursor: pointer;
    background-color: rgba(15, 23, 42, 0.28);
    border-color: rgba(15, 23, 42, 0.42);
}

/* Theme toggle — zera TODOS os indicadores de foco/sombra (outline, box-shadow).
   Mantém a mesma borda da cor de background em TODOS os estados, pra nunca
   aparecer o "halo" branco fantasma quando o foco muda pra outro botão. */
.theme-toggle-section,
.theme-toggle-section:focus,
.theme-toggle-section:focus-visible,
.theme-toggle-section:focus-within,
.theme-toggle-switch .form-check-input,
.theme-toggle-switch .form-check-input:focus,
.theme-toggle-switch .form-check-input:focus-visible,
.theme-toggle-switch .form-check-input:active,
.theme-toggle-switch .form-check-input:hover {
    outline: none !important;
    box-shadow: none !important;
}
/* Estado DESMARCADO (modo claro) — mesma cor em qualquer estado.
   Usa #themeModeSwitch (ID, specificity 1,0,0) pra ganhar do .form-check-input:valid global. */
#themeModeSwitch:not(:checked),
#themeModeSwitch:not(:checked):valid,
#themeModeSwitch:not(:checked):focus,
#themeModeSwitch:not(:checked):focus-visible,
#themeModeSwitch:not(:checked):hover,
#themeModeSwitch:not(:checked):active {
    background-color: rgba(15, 23, 42, 0.28) !important;
    border-color: rgba(15, 23, 42, 0.42) !important;
}
/* Estado MARCADO (modo escuro) — mesma cor em qualquer estado */
#themeModeSwitch:checked,
#themeModeSwitch:checked:valid,
#themeModeSwitch:checked:focus,
#themeModeSwitch:checked:focus-visible,
#themeModeSwitch:checked:hover,
#themeModeSwitch:checked:active {
    background-color: #355066 !important;
    border-color: #355066 !important;
}

/* Knob (bolinha) — força o MESMO SVG branco sólido em qualquer estado.
   Bootstrap troca o background-image (SVG) entre :focus, :focus-visible, :hover,
   fazendo a bolinha mudar de cor quando o foco vai pra outro elemento. Aqui
   fixamos com SVG inline branco sólido pra evitar essa variação. */
#themeModeSwitch,
#themeModeSwitch:valid,
#themeModeSwitch:focus,
#themeModeSwitch:focus-visible,
#themeModeSwitch:hover,
#themeModeSwitch:active,
#themeModeSwitch:checked,
#themeModeSwitch:checked:valid,
#themeModeSwitch:checked:focus,
#themeModeSwitch:checked:focus-visible,
#themeModeSwitch:checked:hover,
#themeModeSwitch:checked:active {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

.theme-toggle-switch .form-check-input:checked {
    background-color: #355066;
    border-color: #355066;
}

.menu-toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.menu-toggle-btn:hover {
    background-color: rgba(255,255,255,0.15);
}

.navbar-base-context {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 0.35rem 0 0.15rem;
    color: #f0a500;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.navbar-base-context-text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   MENU SUPER ADMINISTRADOR (NAVBAR)
   ======================================== */
.superadmin-section {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0.75rem;
}

.superadmin-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.superadmin-toggle:hover,
.superadmin-toggle.show {
    background-color: rgba(255,255,255,0.15);
    color: white;
}

/* Remove a seta padrão do Bootstrap dropdown */
.superadmin-toggle::after {
    display: none;
}

/* Ícone do escudo - branco suave */
.superadmin-icon {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Label "Super Admin" - dourado */
.superadmin-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #ffd700;
}

.superadmin-dropdown {
    min-width: 220px;
}

.superadmin-dropdown .dropdown-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 1.25rem 0.25rem;
}

/* ========================================
   MENU DO USUÁRIO (NAVBAR)
   ======================================== */
.user-section {
    display: flex;
    align-items: center;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
    max-width: 235px;
    justify-content: flex-end;
}

.user-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    line-height: 1.05;
    text-align: center;
    margin-right: 0.7rem;
}

.user-dropdown-toggle:hover,
.user-dropdown-toggle.show {
    background-color: rgba(255,255,255,0.15);
    color: white;
}

.user-dropdown-toggle::after {
    display: none;
}

@media (max-width: 767.98px) {
    .navbar-right {
        padding: 0 0.75rem;
    }

    .theme-toggle-section {
        gap: 0.3rem;
        padding: 0.25rem 0.55rem;
        margin-right: 0.2rem;
    }

    .theme-toggle-icon {
        font-size: 0.72rem;
    }
}

@media (max-width: 575.98px) {
    .theme-toggle-section {
        padding: 0.25rem 0.45rem;
    }

    .theme-toggle-icon {
        display: none;
    }
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}

.user-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.user-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-avatar-icon {
    font-size: 2rem;
    color: rgba(255,255,255,0.95);
    line-height: 1;
}

.session-status {
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
}

.session-status-icon {
    font-size: 0.8rem;
    opacity: 0.9;
}

.session-status-label {
    opacity: 0.9;
}

.session-status-time {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.session-status-compact {
    margin-left: 0.35rem;
    margin-right: auto;
    min-width: 52px;
    justify-content: center;
    padding: 0.16rem 0.45rem;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.08);
}

.session-status-compact .session-status-time {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.session-status-inline {
    gap: 0.25rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
}

.session-status-inline .session-status-label {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.82;
}

.session-status-inline .session-status-time {
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
}

.session-status-under-user {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.12rem;
    font-size: 0.52rem;
    color: rgba(255,255,255,0.64);
}

.session-status-under-user-expired {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: none;
}

.session-status-under-user .session-status-label {
    font-size: 0.52rem;
    font-weight: 400;
    opacity: 0.68;
}

.session-status-under-user .session-status-time {
    font-size: 0.54rem;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
}

.session-status-expired {
    color: #ffd5db !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dropdown-menu {
    margin-top: 10px !important;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.5rem 0;
    min-width: 160px;
}

.dropdown-item {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    color: #333;
}

.presence-summary-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    padding: 1rem 1.1rem;
    height: 100%;
    border-left: 4px solid #adb5bd;
}

.presence-summary-card-online {
    border-left-color: #0d6efd;
}

.presence-summary-card-active {
    border-left-color: #198754;
}

.presence-summary-card-offline {
    border-left-color: #dc3545;
}

.presence-summary-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.presence-summary-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.1;
    margin-top: 0.35rem;
}

.presence-panel {
    border-radius: 12px;
    overflow: hidden;
}

.presence-page-note {
    font-size: 0.84rem;
    color: #495057;
    background: #f8f9fa;
}

.presence-content-wrap {
    min-height: 0;
}

.presence-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.form-toolbar-compact {
    min-height: auto;
    padding-top: 0.08rem !important;
    padding-bottom: 0.08rem !important;
}

.form-toolbar-compact .navbar-nav {
    gap: 0;
    padding-left: 0.18rem;
}

.form-toolbar-compact .nav-item {
    margin-right: 0;
}

.form-toolbar-link {
    padding: 0.25rem !important;
}

.form-toolbar-link-content {
    line-height: 1.2rem;
    min-width: 0;
    padding: 0.18rem 0.34rem 0.16rem;
    border-radius: 0.45rem;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.form-toolbar-link-content span {
    font-size: 0.82rem;
}

.form-toolbar-icon {
    font-size: 1.22rem;
}

.presence-table thead th {
    white-space: nowrap;
}

.presence-table tbody td {
    color: #212529;
    vertical-align: middle !important;
}

.presence-table tbody td:nth-child(2),
.presence-table tbody td:nth-child(5) {
    white-space: normal;
}

.presence-user-agent {
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

.presence-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #e9ecef;
    color: #495057;
}

.presence-status-badge-active {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
}

.presence-status-badge-logged {
    background: rgba(13, 110, 253, 0.12);
    color: #0a58ca;
}

@media (max-width: 1199.98px) {
    .presence-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .presence-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .presence-content-wrap {
        height: auto !important;
        min-height: auto !important;
    }

    .presence-panel {
        flex: 0 0 auto !important;
        min-height: 280px !important;
        max-height: none !important;
    }

    .presence-panel.table-card-full {
        max-height: none !important;
    }

    .presence-panel .card-body {
        min-height: 230px !important;
    }

    .table-responsive-wide > table {
        width: max-content !important;
    }
}

.presence-status-badge-closed {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
}

.dropdown-item:hover {
    background-color: #f0f4f8;
    color: var(--bs-primary);
}

.dropdown-divider {
    margin: 0.4rem 0;
    border-top: 1px solid #e9ecef;
}

/* ========================================
   06. SIDEBAR (MENU LATERAL ESQUERDO)
   ======================================== */
#sidebar-wrapper {
    height: calc(100vh - var(--navbar-height));
    width: var(--sidebar-width);
    position: fixed;
    left: 0; top: var(--navbar-height);
    padding-top: .5rem;
    background-color: var(--sidebar-bg);
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1040;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4);
}

#sidebar-wrapper.hidden {
    transform: translateX(-100%);
 }

#sidebar-wrapper.collapsed {
    width: 50px;
    overflow: hidden;
}

#sidebar-wrapper.collapsed span,
#sidebar-wrapper.collapsed .chevron,
#sidebar-wrapper.collapsed .sidebar-search-wrap,
#sidebar-wrapper.collapsed .submenu-container {
    display: none !important;
}

#sidebar-wrapper .sidebar-search-wrap {
    padding: 0 0.5rem 0.5rem 0.5rem;
}

#sidebar-wrapper .sidebar-search-wrap .form-control {
    border-radius: 10px;
    border: 1px solid #d5dee8;
    background: rgba(255,255,255,0.9);
    font-size: 0.82rem;
}

#sidebar-wrapper .sidebar-search-wrap .form-control:focus {
    border-color: var(--app-accent);
    box-shadow: none;
}

body[data-bs-theme='dark'] #sidebar-wrapper .sidebar-search-wrap .form-control {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.24);
    color: #e6edf5;
}

body[data-bs-theme='dark'] #sidebar-wrapper .sidebar-search-wrap .form-control::placeholder {
    color: #8fa1b3;
}

body[data-bs-theme='dark'] #sidebar-wrapper .sidebar-search-wrap .form-control:focus {
    border-color: #8ecae6;
    box-shadow: none;
}

#sidebar-wrapper.collapsed .list-group-item {
    justify-content: center;
    padding: 0.6rem 0 !important;
}

#sidebar-wrapper.collapsed .list-group-item i {
    margin: 0 !important;
    font-size: 1rem;
}

/* Sidebar - Item Principal */
#sidebar-wrapper .list-group-item {
    background-color: transparent;
    color: var(--sidebar-text);
    border: none;
    border-left: 3px solid transparent;
    padding: 0.5rem;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 0.9rem;
    font-weight: 400;
    white-space: nowrap;
}

#sidebar-wrapper .list-group-item:hover {
    color: var(--sidebar-text);
    background-color: var(--sidebar-hover-bg);
    border-left-color: #94a3b8;
}

#sidebar-wrapper .list-group-item.active {
    color: var(--sidebar-active-color);
    font-weight: 500;
    background-color: var(--app-accent-soft-bg);
    border-left-color: var(--sidebar-active-color);
    border-left-width: 3px;
}

#sidebar-wrapper .list-group-item.active:hover {
    color: var(--sidebar-active-color);
    background-color: var(--app-accent-soft-bg);
    border-left-color: var(--sidebar-active-color);
}

#sidebar-wrapper .list-group-item.active i {
    color: var(--sidebar-active-color);
}

#sidebar-wrapper .list-group-item i {
    margin-right: 0.75rem;
    font-size: 0.95rem;
    z-index: 2;
    flex-shrink: 0;
}

#sidebar-wrapper .list-group-item span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.2;
}

#sidebar-wrapper .sidebar-search-empty {
    padding: 0.75rem;
    color: #64748b;
    font-size: 0.82rem;
}

#sidebar-wrapper .menu-search-highlight {
    display: inline-block;
    padding: 0.02rem 0.28rem;
    border-radius: 999px;
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
    font-weight: inherit;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.08);
}

body[data-bs-theme='dark'] #sidebar-wrapper .menu-search-highlight {
    background: rgba(220, 53, 69, 0.22);
    color: #f8a4ad;
    box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.18);
}

/* Scrollbar customizada para o sidebar */
#sidebar-wrapper::-webkit-scrollbar {
    width: 4px;
}

#sidebar-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 4px;
}

#sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.3);
}

/* Tooltip nativo nos ícones do sidebar recolhido */
#sidebar-wrapper.collapsed .list-group-item[title] {
    position: relative;
}

/* ========================================
   07. TREE VIEW (SUBMENUS EM ÁRVORE)
   ======================================== */
.submenu-container {
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    position: relative; 
    padding-left: 0.5rem;  /* Mantém o recuo base */
}

.submenu-container.show { 
    max-height: 1000px; 
}

/* Linha Vertical (Tronco) - AJUSTADA PARA O CENTRO DO ÍCONE */
.submenu-container::before {
    content: ''; 
    position: absolute; 
    left: 0.95rem;   /* MOVIDO PARA A ESQUERDA - agora alinha no centro do ícone */
    top: -5px; 
    bottom: 12px;
    width: 1px; 
    border-left: 1px solid var(--tree-line-color); 
    z-index: 1;
}

/* Linha Horizontal (Galho) - CONECTA NO TRONCO */
.submenu-container .list-group-item::before {
    content: ''; 
    position: absolute; 
    left: 0.5rem;   /* COMEÇA NO TRONCO (mesmo valor da linha vertical) */
    top: 50%;
    width: 8px;     /* Comprimento do galho */
    height: 1px; 
    border-top: 1px solid var(--tree-line-color); 
    z-index: 1;
}

/* Item do Submenu - AJUSTADO PARA ALINHAR TEXTO */
.submenu-container .list-group-item { 
    padding-left: 0rem !important;    /* REDUZIDO - agora o texto alinha melhor */
    padding-right: 0.5rem;
    padding-top: 0.4rem; 
    padding-bottom: 0.4rem; 
}

/* Ícone do Submenu (bolinha) - POSICIONADO NA PONTA DO GALHO */
.submenu-container .list-group-item i {
    margin-right: 0.3rem !important;
    margin-left: 1rem;     /* PEQUENO AJUSTE - coloca a bolinha na ponta do galho */
    font-size: 0.4rem;
    z-index: 2;
}

/* ========== SEGUNDO NÍVEL DE SUBMENU ========== */
/* Submenu de segundo nível (submenu dentro de submenu) */
.submenu-container .submenu-container .list-group-item {
    padding-left: 2.5rem;  /* AUMENTE este valor para empurrar "Authentication" para a direita */
}

/* Linha vertical do segundo nível */
.submenu-container .submenu-container::before {
    left: 1.5rem;  /* Ajuste aqui para alinhar a linha vertical do segundo nível */
}

/* Galho horizontal do segundo nível */
.submenu-container .submenu-container .list-group-item::before {
    left: 1rem;
    width: 5px;
    top: 50%;
}

/* Bolinha do segundo nível */
.submenu-container .submenu-container .list-group-item i {
    margin-left: 1.2rem;  /* Ajuste aqui para posicionar a bolinha do segundo nível */
}

/* Garante que o item do segundo nível seja um flexbox */
.submenu-container .list-group-item.has-submenu {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 1rem !important;
}

/* Empurra a seta do segundo nível para a direita */
.submenu-container .list-group-item.has-submenu .chevron {
    margin-left: auto !important; /* O !important garante que ele vença outras regras */
}

/* Seta (chevron) do segundo nível - ALINHA À DIREITA */
.submenu-container .submenu-container .has-submenu .chevron {
    margin-left: auto !important;  /* Empurra a seta para a direita */
}

/* Seta (chevron) ALINHA À DIREITA */
.has-submenu .chevron { 
    margin-left: auto; 
    transition: transform 0.3s; 
    font-size: 0.75rem; 
}

.has-submenu.expanded .chevron { 
    transform: rotate(180deg); 
}

/* Garante que itens que abrem submenu nunca usem a cor de ativo, 
   mesmo que recebam a classe por engano */
#sidebar-wrapper .list-group-item.has-submenu.active {
    color: var(--sidebar-text) !important;
    font-weight: normal !important;
    background-color: transparent !important;
}

/* Mantém apenas a seta (chevron) com a cor de destaque se quiser, 
   ou deixe normal */
#sidebar-wrapper .list-group-item.has-submenu.active .chevron {
    color: var(--sidebar-text);
}

/* Centralização perfeita considerando sidebar (250px) e navbar (64px) */
#ContainerLogoEmpresa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--navbar-height));
    padding: 0;
    /* Transição suave quando o menu recolher */
    transition: width 0.3s ease-in-out, margin-left 0.3s ease-in-out;
}

/* Quando o sidebar estiver escondido */
body:has(#sidebar-wrapper.hidden) #ContainerLogoEmpresa {
    width: 100%;
    margin-left: 0;
}

/* Quando o sidebar estiver recolhido */
body:has(#sidebar-wrapper.collapsed) #ContainerLogoEmpresa {
    width: calc(100% - 50px);
    margin-left: 50px;
}

/* Garante que a linha e a coluna do Bootstrap não quebrem o alinhamento */
#ContainerLogoEmpresa .row,
#ContainerLogoEmpresa .col {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

#imgLogoEmpresa {
    max-width: 400px;
    width: auto;
    height: auto;
    opacity: 1;
    display: block;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    #ContainerLogoEmpresa {
        width: 100%;
        margin-left: 0;
        min-height: calc(100vh - var(--navbar-height));
    }
    
    #imgLogoEmpresa {
        max-width: 80%;
    }
}

/* ========================================
   08. ÁREA DE CONTEÚDO PRINCIPAL (#content)
   Ocupa o espaço restante após sidebar e navbar.
   Usa flex column para que partials internas
   possam criar scroll interno.
   ======================================== */
#content {
    margin-left: var(--sidebar-width);
    margin-top: var(--navbar-height);
    height: calc(100vh - var(--navbar-height));
    padding: 0;
    transition: margin-left 0.3s ease-in-out;
    background-color: #ffffff;
    display: flex;           /* Adicionado */
    flex-direction: column;  /* Adicionado */
    overflow: hidden;        /* MATA O SCROLL DA PÁGINA INTEIRA */
}

/* Quando o sidebar estiver escondido */
body:has(#sidebar-wrapper.hidden) #content {
    margin-left: 0;
}

/* Quando o sidebar estiver recolhido (icon-only) */
body:has(#sidebar-wrapper.collapsed) #content {
    margin-left: 50px;
}

/* Container da página teste */
.page-container {
    width: 100%;
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
}

/* Botão de fechar página */
.btn-close-page {
    position: fixed;
    top: calc(var(--navbar-height) + 1rem);
    right: 1rem;
    z-index: 1000;
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.3s;
}

.btn-close-page:hover {
    background-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Responsivo */
@media (max-width: 768px) {
    #content {
        margin-left: 50px;
    }

    .page-container {
        padding: 1rem;
    }
}

/* ========================================
   09. CABEÇALHO DE PÁGINA (.page-header-compact)
   Partial reutilizável de título com acento colorido
   e linha divisória.
   ======================================== */
.page-header-compact {
    padding: 3px 13px 4px; /* Espaçamento elegante e mínimo */
    min-height: 27px; /* Evita que a página dê um "pulo" ao carregar o texto */
    background: linear-gradient(180deg, rgba(252,253,255,0.98) 0%, rgba(243,246,250,0.97) 100%);
    border-left: 2px solid rgba(72, 102, 128, 0.34);
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06), inset -1px 0 0 rgba(15, 23, 42, 0.05);
}

.page-title {
    letter-spacing: -0.01em;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.1;
}

.header-accent {
    width: 4px;
    height: 14px;
    background: linear-gradient(180deg, #87b5cf 0%, #5f8ba6 100%);
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(66, 98, 122, 0.12);
}

.header-line-divider {
    display: none;
}

/* ========================================
   10. BOTÕES GENÉRICOS (.generic-btn)
   E NAVBAR DE FORMULÁRIO (#formNavbar)
   Botões da toolbar de CRUD com opacidade
   reduzida e destaque ao hover/foco.
   ======================================== */

nav#formNavbar {
    padding: .12rem .2rem .08rem;
}

/* 1. ESTADO BASE */
.generic-btn {
  opacity: 0.5 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease;
  cursor: pointer;
}

/* 2. FOCO VIA TECLADO (TAB/ENTER) */
/* Acende o botão quando você navega pelo teclado */
.generic-btn:focus-visible,
.generic-btn:focus-within {
  opacity: 1 !important;
}

/* 3. RESET APÓS CLIQUE (MOUSE) */
/* Se o foco veio do mouse (clique), ele volta para 0.5 */
/* Usamos :not(:hover) para que essa regra SÓ funcione se o mouse NÃO estiver em cima */
.generic-btn:focus:not(:focus-visible):not(:hover) {
  opacity: 0.5 !important;
}

/* 4. HOVER (MOUSE EM CIMA) - A REGRA SUPREMA */
/* O :hover deve vir por último e ser o mais específico para sempre vencer */
.generic-btn:hover {
  opacity: 1 !important;
}

/* 5. ESTADO ATIVO (DURANTE O CLIQUE) */
.generic-btn:active {
  opacity: 1 !important;
}

/* Caso o ID esteja no elemento interno (ex: <div id="btSalvarIncluir">),
   garanta também este seletor direto */
#btSalvarIncluir:focus,
#btSalvarIncluir:focus-visible,
#btSalvarAlteracao:focus,
#btSalvarAlteracao:focus-visible {
  opacity: 1 !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remover sombras/bordas que o Bootstrap às vezes aplica */
.generic-btn:focus,
#btSalvarIncluir:focus,
#btSalvarAlteracao:focus {
  box-shadow: none !important;
}

/* ========================================
   10b. FOCO VISÍVEL EM BOTÕES (GLOBAL)
   ----------------------------------------
   Borda preta sólida 2px colada no botão
   sempre que ele estiver em foco — seja
   por click, Tab ou Enter. Em dark mode
   inverte pra branco. Cobre 4 tipos:
   .btn (Bootstrap), .btn-close (X),
   .lookup-item (dropdown lookup) e
   .generic-btn (botões "ação genérica":
   Buscar, Limpar, Gerar etc. — fora do
   #formNavbar).
   EXCEÇÃO: .generic-btn DENTRO de
   nav#formNavbar (toolbar compacta do CRUD —
   Incluir/Alterar/Salvar/etc.) NÃO recebe
   borda — o visual de lá é diferente
   (ícone+texto compacto) e a borda quebraria.
   Usa :focus E :focus-visible com !important
   pq Bootstrap 5.3 zera outline no
   :focus-visible.
   ======================================== */
.btn:focus,
.btn:focus-visible,
.btn-close:focus,
.btn-close:focus-visible,
.lookup-item:focus,
.lookup-item:focus-visible,
.generic-btn:focus,
.generic-btn:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
body[data-bs-theme='dark'] .btn:focus,
body[data-bs-theme='dark'] .btn:focus-visible,
body[data-bs-theme='dark'] .btn-close:focus,
body[data-bs-theme='dark'] .btn-close:focus-visible,
body[data-bs-theme='dark'] .lookup-item:focus,
body[data-bs-theme='dark'] .lookup-item:focus-visible,
body[data-bs-theme='dark'] .generic-btn:focus,
body[data-bs-theme='dark'] .generic-btn:focus-visible {
    outline-color: #fff !important;
}

/* EXCEÇÃO: zera borda nos generic-btn da toolbar CRUD */
nav#formNavbar .generic-btn:focus,
nav#formNavbar .generic-btn:focus-visible,
nav#formNavbar .generic-btn .form-toolbar-link-content,
nav#formNavbar a.generic-btn:focus,
nav#formNavbar a.generic-btn:focus-visible {
    outline: none !important;
}

/* EXCEÇÃO: zera borda nos botões do componente dmxFoto (upload/webcam/url/clear).
   São botões pequenos com visual próprio do componente — borda quebraria. */
.dmx-foto .dmx-foto-actions .btn:focus,
.dmx-foto .dmx-foto-actions .btn:focus-visible {
    outline: none !important;
}

/* EXCEÇÃO: zera borda nos botões embutidos em input-group (.input-action-embedded).
   Ex: lupa "Consultar CNPJ" colada no input. Visual integrado com o input,
   borda quebraria a "fusão" visual. */
.input-action-embedded .btn:focus,
.input-action-embedded .btn:focus-visible {
    outline: none !important;
}

/* ========================================
   11. LAYOUT FIXO COM SCROLL INTERNO
   (.page-layout-fixed / .sticky-top-elements
   / .scrollable-content-area)
   Estrutura usada nas páginas com cabeçalho
   fixo e área de dados com scroll próprio.
   ======================================== */
.page-layout-fixed {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Cabeçalho fixo da página (título + botões + tabs) */
.sticky-top-elements {
    flex-shrink: 0;
    background-color: #fff;
    z-index: 1020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Área de conteúdo que cria o scroll quando necessário */
.scrollable-content-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow-y: auto !important;    /* CORRIGIDO: era hidden, agora permite scroll */
    overflow-x: hidden !important;
}

.page-layout-fixed .scrollable-content-area > .tab-content,
.page-layout-fixed > .scrollable-content-area.p-3 {
    padding-left: 1.45rem !important;
    padding-right: 1.45rem !important;
}

.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] > .container-fluid,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] > .container-fluid,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 100%;
}

.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'],
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'],
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] {
    margin-left: -.73rem;
    margin-right: -.73rem;
}

.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] > .container-fluid > .card,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] > .container-fluid > .table-card-full,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] > .container-fluid > #card_localizar,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] > .container-fluid > .card,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] > .container-fluid > .table-card-full,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] > .container-fluid > #card_localizar,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] > .container-fluid > .card,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] > .container-fluid > .table-card-full,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] > .container-fluid > #card_localizar {
    margin-bottom: 0 !important;
}

/* Scrollbar discreta na área de conteúdo */
.scrollable-content-area::-webkit-scrollbar {
    width: 5px;
}

.scrollable-content-area::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-content-area::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.18);
    border-radius: 4px;
}

.scrollable-content-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.32);
}

/* Tab INATIVA - Cinza claro (estilo disabled) */
.page-layout-fixed .sticky-top-elements .nav-tabs .nav-link {
    padding: 0.16rem 0.68rem !important;
    font-size: 0.82rem;
    line-height: 1.1;
    color: #adb5bd !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-bottom-color: #dee2e6 !important;
    transition: all 0.2s ease;
}

.page-layout-fixed .sticky-top-elements .nav-tabs {
    margin-top: -0.18rem;
}

/* Tab INATIVA ao passar o mouse */
.page-layout-fixed .sticky-top-elements .nav-tabs .nav-link:hover {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
}

/* Tab ATIVA - Fundo azul claro e texto escuro */
.page-layout-fixed .sticky-top-elements .nav-tabs .nav-link.active {
    color: #495057 !important;
    background-color: #e7f3ff !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
    font-weight: 600 !important;
}

/* ========================================
   13. COMPONENTES DE FORMULÁRIO
   (inputs, selects, labels, readonly)
   Altura reduzida (30px) e foco com borda
   preta para padronização visual.
   ======================================== */
input.form-control[type="text"],
input.form-control[type="email"],
input.form-control[type="number"],
input.form-control[type="password"],
input.form-control[type="search"],
input.form-control[type="tel"],
input.form-control[type="url"],
input.form-control[type="date"],
select.form-select {
  height: 30px;
  min-height: 30px;
  line-height: normal;
      padding-top: 0;
    padding-bottom: 0;
}

input.form-control[type="date"] {
    color: var(--input-placeholder-color);
}

input.form-control[type="date"].has-value {
    color: #212529 !important;
}

.form-select {
    padding: 5px;
}

.form-control::placeholder,
textarea.form-control::placeholder,
.datatable-input::placeholder {
    color: var(--input-placeholder-color) !important;
    opacity: 1;
}

input.form-control[type="date"]:not(.has-value)::-webkit-datetime-edit,
input.form-control[type="date"]::-webkit-input-placeholder,
input.form-control[type="date"]::placeholder {
    color: var(--input-placeholder-color);
}

input.form-control[type="date"].has-value::-webkit-datetime-edit,
input.form-control[type="date"].has-value::-webkit-date-and-time-value {
    color: #212529 !important;
}

input.form-control[type="number"]::-webkit-outer-spin-button,
input.form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.form-control[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-control, .datatable-input, .form-select {
    border-width: 1.8px;
}

.form-control:focus, .datatable-input:focus, .form-select:focus, .form-check-input:focus {
    color: #212529 !important;
    border-color: var(--app-accent) !important;
    box-shadow: none !important;
}

.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: none !important;
}

.input-readonly-disabled {
    background-color: #e9ecef;   /* mesmo fundo do disabled bootstrap */
    color: #6c757d;              /* texto acinzentado */
    border-color: #ced4da;
    cursor: not-allowed;
}

.input-readonly-disabled:focus {
    background-color: #e9ecef;
    color: #6c757d;
    box-shadow: none;
    outline: none;
}

/* ========================================
   14. TABELAS HTML
   (.table, #grid_Localizar, thead fixo,
   zebra, hover, bordas e cabeçalho sticky)
   ======================================== */
.table-responsive {
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

.table-responsive-wide {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-responsive-wide > table {
  min-width: max-content;
  width: 100% !important;
}

.table-min-width-audit {
  min-width: 1020px !important;
}

.table-min-width-presence {
  min-width: 1180px !important;
}

table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--table-vertical-border);
}

/* =================================================================
   CABEÇALHO FIXO (THEAD) - SOLUÇÃO PARA 2 LINHAS SEM VAZAMENTO
   ================================================================= */

/* Sticky header GLOBAL pra QUALQUER .table dentro de container scrollável.
   Quando a tabela está num wrapper com overflow:auto/scroll, o thead fica fixo
   no topo. Quando não há scroll, o sticky não tem efeito (fica como antes).
   Cobre grades de Cobranças, Faturamento, modais (Histórico de Baixas, Itens
   da Fatura, etc.) e qualquer grade nova sem precisar adicionar CSS específico. */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--table-header-bg);
    background-clip: padding-box;
}

/* Cabeçalho fixo */
#grid_Localizar thead {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--table-header-bg) !important;
  background-clip: padding-box;
}

/* 2. Removemos qualquer sticky individual das células para não conflitar */
#grid_Localizar thead th {
    position: relative !important; /* Muda de sticky para relative */
    top: auto !important;
    background-color: var(--table-header-bg) !important;
    z-index: 1;
    background-clip: padding-box;
    border-bottom: 1px solid var(--table-vertical-border) !important;
}

/* 3. Estilo específico para a primeira linha (Títulos) */
#grid_Localizar thead tr:first-child th {
    font-weight: 700 !important;
    font-size: 13px !important;
    height: 24px;
    line-height: 1.05 !important;
    padding: 2px 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 4. Estilo específico para a segunda linha (Filtros/Inputs) */
#grid_Localizar thead tr.table-filters th {
    padding: 4px 6px !important;
    /* Linha mais grossa apenas no final do cabeçalho completo */
    border-bottom: 2px solid var(--table-header-border-bottom) !important;
}

.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] .table-filters .form-control.form-control-sm,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] .table-filters .form-control.form-control-sm,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] .table-filters .form-control.form-control-sm {
    min-height: 24px;
    height: 24px;
    padding: .1rem .35rem;
    font-size: .76rem;
    line-height: 1.1;
}

/* ========================================================================
   Largura mínima dos inputs de filtro (aba Localizar) — em telas estreitas
   evita que campo fique tão pequeno que não dá pra ver o que foi digitado.
   Quando não couber, o .table-responsive (overflow-x:auto) ativa scroll.
   ======================================================================== */
#grid_Localizar .table-filters .form-control,
.tab-pane[id*='Localizar'] .table-filters .form-control,
.tab-pane[id*='localizar'] .table-filters .form-control,
.tab-pane[id*='abaLocalizar'] .table-filters .form-control {
    min-width: 70px;
}

/* Força a tabela do Localizar a respeitar o min-width das colunas
   — em vez de espremer abaixo do utilizável, gera scroll horizontal */
#grid_Localizar > table,
.tab-pane[id*='Localizar'] .table-responsive > table,
.tab-pane[id*='localizar'] .table-responsive > table,
.tab-pane[id*='abaLocalizar'] .table-responsive > table {
    min-width: max-content;
}

/* 5. Garante que o fundo seja opaco para não vazar dados por trás */
#grid_Localizar thead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: var(--table-header-bg);
    z-index: -1;
}

#grid_GruposUsuario thead,
#grid_GruposUsuario thead::after,
#grid_GruposUsuario thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-color) !important;
}

#grid_GruposUsuario thead th {
    border-bottom: 1px solid var(--table-vertical-border) !important;
}

/* Conteúdo (Body) */
table tbody td {
  border-top: none !important;
  border-bottom: none !important;
  border-right: 1px solid var(--table-vertical-border);
  /* Padding reduzido pela metade conforme solicitado */
  padding: 0 0.2rem !important; 
  line-height: var(--table-row-height) !important;
  height: var(--table-row-height) !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table tbody td:last-child {
  border-right: none;
}

/* Zebra: Linhas pares com cinza, linhas ímpares com BRANCO PURO */
/* 1. Remove o efeito padrão do Bootstrap 5 */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent !important;
    box-shadow: none !important;
}

/* 2. Aplica o Branco Puro nas linhas Ímpares (1, 3, 5...) */
table.table-striped tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}

/* 3. Aplica o Cinza nas linhas Pares (2, 4, 6...) */
table.table-striped tbody tr:nth-child(even) td {
    background-color: var(--table-odd-bg) !important;
}

/* 4. HOVER: Força o laranja em QUALQUER linha ao passar o mouse */
table.table tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
    color: #000 !important; /* Garante que o texto continue legível */
    cursor: default !important;
}

.clickable { 
    cursor: pointer !important; 
}

/* Índice */
td.row-index {
  text-align: right !important;
  vertical-align: middle !important;

  font-weight: 500; /* opcional: deixa o número um pouco mais visível */
}

/* Garante que nenhum resquício do contador antigo apareça */
td.row-index::before {
  content: none !important;
}

/* --- Paginação Estilo Premium --- */
.table-card-footer .pagination {
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end; /* Alinhado à direita */
    gap: 4px;
}

.table-card-footer .page-item .page-link {
    border: 1px solid #dee2e6;
    color: #555;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 4px !important; /* Botões levemente arredondados */
    transition: all 0.2s;
    background-color: #fff;
}

/* Hover nos botões */
.table-card-footer .page-item .page-link:hover {
    background-color: var(--table-row-hover-color, #E9CB7E);
    border-color: #ccc;
    color: #000;
}

/* Botão Ativo (Página Atual) - Usando a cor do seu cabeçalho */
.table-card-footer .page-item.active .page-link {
    background-color: #A9CADE !important; 
    border-color: #8aacc1 !important;
    color: #000 !important;
    font-weight: bold;
}

/* Botões Desabilitados */
.table-card-footer .page-item.disabled .page-link {
    pointer-events: none; /* garante que não seja clicável */
    box-shadow: none !important;
    outline: none !important;
    border-color: #eee !important;
    background-color: #f8f9fa !important;
    color: #bbb !important;
}

/* Remove foco e borda ao clicar nos botões desabilitados */
.table-card-footer .page-item.disabled .page-link:focus,
.table-card-footer .page-item.disabled .page-link:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Padroniza o foco da paginação com a identidade do sistema (Borda Preta) */
.table-card-footer .page-item .page-link:focus {
    outline: 0 !important;
    box-shadow: none !important;
    z-index: 3; /* Garante que a borda de foco fique por cima das outras */
}

/* Remove o foco visual apenas dos itens desabilitados (para não confundir o usuário) */
.table-card-footer .page-item.disabled .page-link:focus {
    box-shadow: none !important;
    border-color: #eee !important;
}

/* Ajuste para que o botão ativo também siga o padrão ao ser focado */
.table-card-footer .page-item.active .page-link:focus {
    background-color: #A9CADE !important; /* Mantém a cor azul clara de ativo */
}

/* Centralização Vertical e Horizontal do Footer */
.table-card-footer {
    display: flex !important;
    align-items: center !important;   /* Centraliza Verticalmente */
    justify-content: flex-end !important; /* Mantém a paginação à direita (ou use center se preferir) */
    min-height: 2.5rem; /* Garante uma altura mínima confortável */
    padding: 0.25rem 1rem !important; /* Ajuste fino do padding */
}

.tab-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.tab-content > form {
    min-height: 0 !important;
}

.tab-content > form > .tab-pane {
    display: none;
}

.tab-content > form > .active {
    display: block;
}

/* Força a corrente de altura para o card poder esticar */
.tab-pane.active, 
.tab-pane.active .container-fluid, 
.tab-pane.active .container-fluid .row, 
.tab-pane.active .container-fluid .row .col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Ajuste no card para ele aceitar o crescimento */
.table-card-full {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important; /* Força o crescimento */
    min-height: 0 !important;
    margin-bottom: 15px !important;
    max-height: var(--card-max-height) !important;
}

/* Garante que o card-body seja flexível e ocupe o espaço */
.table-card-full .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  height: 100%;
}

/* Container da tabela como flex column para posicionar tabela e mensagem */
.table-card-full .table-responsive {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  width: 100%;
  box-sizing: border-box;
}

.table-card-full .table-responsive-wide {
  display: block !important;
  flex: 1 1 auto !important;
}

/* Mensagem centralizada.
   :not(.d-none) garante que, quando a classe Bootstrap .d-none é adicionada
   para esconder o empty state (grid com dados), essa regra não sobrescreva
   o display: none !important do .d-none. */
.table-card-full .empty-state-message:not(.d-none) {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  background-color: transparent !important;
  color: #6c757d !important;
  min-height: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

.table-card-full .empty-state-message span {
  margin: 0;
  font-weight: 400;
  font-size: .92rem;
}

/* A tabela não cresce, fica no topo */
.table-card-full .table-responsive table {
  flex: none !important;
  align-self: flex-start !important;
  width: 100%;
  box-sizing: border-box;
}


/* ===== SELEÇÃO VISUAL DE LINHAS (GENÉRICO) ===== */
table.table tbody tr {
  cursor: pointer;
  -moz-user-select: none;
       user-select: none; /* Impede seleção de texto azul ao clicar rápido */
  -webkit-user-select: none;
  transition: background-color .1s ease;
}

/* Classe aplicada via JS ao clicar na linha */
table.table tbody tr.selected-row td {
  background-color: #98c1ff !important; /* Azul clarinho */
  color: inherit !important;
}

/* Garante que inputs dentro da tabela ainda permitam seleção de texto */
table.table tbody tr td input {
  -moz-user-select: text !important;
       user-select: text !important;
  -webkit-user-select: text !important;
}


/* Classe para um card com bordas externas mais destacadas */
.card-destaque {
    border: 1.5px solid #c0c0c0 !important; /* Aumenta a espessura para 2px ou 3px */
    border-radius: 8px !important;        /* Arredonda um pouco mais os cantos externos */
    overflow: hidden;                     /* Garante que o conteúdo interno não "vaze" o arredondamento */
}

/* Ajuste para garantir que o cabeçalho e rodapé internos não criem bordas duplas estranhas */
.card-destaque .card-header {
    border-bottom: 1px solid #c0c0c0;
}

.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] .card-header,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] .card-header,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] .card-header {
    min-height: 35px !important;
    padding: .18rem .65rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] .card-header h6,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] .card-header h6,
.page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] .card-header h6 {
    margin: 0 !important;
    line-height: 1.05 !important;
}

/* 1. Trava a altura da linha e remove qualquer expansão do navegador */
table tbody tr {
    height: var(--table-row-height) !important;
    max-height: var(--table-row-height) !important;
}

/* 2. Trava a célula, garante que o conteúdo não quebre linha e centraliza verticalmente */
table tbody td {
    height: var(--table-row-height) !important;
    max-height: var(--table-row-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important; /* Alinhamento vertical nativo de tabela */
    line-height: var(--table-row-height) !important; /* Centraliza o texto pela altura da linha */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 3. Garante que o índice automático também respeite a altura */
table tbody tr td.row-index::before {
    line-height: var(--table-row-height) !important;
    height: var(--table-row-height) !important;
}

/* 4. Se houver imagens ou ícones, eles não podem ser maiores que a linha */
table tbody td img, 
table tbody td i {
    max-height: calc(var(--table-row-height) - 4px) !important;
    vertical-align: middle !important;
}

/* ========================================
   19. FORMULÁRIO — OVERLAY, VALIDAÇÃO E GRID
   (.form-overlay, .form-group, .invalid-feedback,
   .row, .col, label)
   ======================================== */
.form-overlay {
  position: absolute;
  top: var(--form-overlay-top, 0);
  right: var(--form-overlay-right, 0);
  bottom: var(--form-overlay-bottom, 0);
  left: var(--form-overlay-left, 0);
  background: rgba(255, 255, 255, 0.6);
  z-index: 10;
  cursor: not-allowed;
}

.form-overlay-transparent {
  background: rgba(170, 154, 154, 0) !important;
  z-index: 1030;
  pointer-events: auto;
  cursor: auto !important;
  --form-overlay-left: -15px;
  --form-overlay-right: -20px;  
}

.input-action-embedded .btn {
  min-width: 2.2rem;
  padding-left: .55rem;
  padding-right: .55rem;
  margin: 0;
  position: relative;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
}

/* Input com botões embutidos */
.input-action-embedded .form-control,
.input-action-embedded .btn.btn-outline-secondary {
  border: 1.8px solid var(--bs-border-color) !important;
  box-shadow: none !important;
}

.input-action-embedded .form-control {
  z-index: 1;
}

.input-action-embedded .form-control:focus {
  border-color: var(--app-accent) !important;
  box-shadow: none !important;
  z-index: 3;
}

.input-action-embedded .btn.btn-outline-secondary {
  min-width: 2rem;
  padding-left: .45rem;
  padding-right: .45rem;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-left: -1.8px;
  background-color: #fff;
  color: #6c757d;
  background-image: none;
  z-index: 0;
}

/* Primeiro botão (antes do input): margin ajustado */
.input-action-embedded > .btn.btn-outline-secondary:first-child {
  margin-left: 0;
  margin-right: -1.8px;
}

/* No focus: todos os elementos ficam com borda accent */
.input-action-embedded:focus-within .form-control,
.input-action-embedded:focus-within .btn.btn-outline-secondary {
  border-color: var(--app-accent) !important;
}

.input-action-embedded .btn.btn-outline-secondary:hover,
.input-action-embedded .btn.btn-outline-secondary:focus,
.input-action-embedded .btn.btn-outline-secondary:active {
  background-color: #f8f9fa;
  color: #495057;
  box-shadow: none !important;
}

.input-action-embedded .btn.btn-outline-secondary:disabled {
  background-color: #e9ecef;
  color: #6c757d;
}

.input-action-embedded .btn.btn-outline-secondary .fas {
  margin: 0;
  font-size: .875rem;
 }

.input-action-embedded .btn.lookup-loading {
  cursor: wait;
  opacity: .9;
 }

/* OBS: o border-radius dos filhos do .input-action-embedded é forçado via
   JavaScript em [public/js/global_scripts.js] (seção 10). O Bootstrap 5 tem
   regras de :nth-last-child / :not(.has-validation) / .was-validated que
   competem pela cascata e venciam todas as nossas tentativas via CSS local.
   A solução definitiva foi aplicar via inline style + !important pelo JS,
   reagindo automaticamente a mudanças de classe via MutationObserver. */

.form-group {
    margin-left: .3rem !important;
    position: relative;
}

/* Força a mensagem de erro a ser um Tooltip flutuante */
.form-group.position-relative {
    position: relative !important;
}

.invalid-feedback, .invalid-tooltip {
    position: absolute !important;
    top: 85% !important;
    left: 0 !important;
    display: none;
    width: auto !important;
    white-space: normal;
    max-width: min(360px, calc(100vw - 3rem)) !important;
    background: #ffffff !important;
    color: #dc3545 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    z-index: 1000 !important;
    border: 1px solid rgba(220, 53, 69, 0.35) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.14);
}

.invalid-feedback::before,
.invalid-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
}

.invalid-feedback::after,
.invalid-tooltip::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 14px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(220, 53, 69, 0.35);
    z-index: -1;
}

span.dmxValidator-error {
    position: absolute !important;
    top: 85% !important;
    left: 0 !important;
    z-index: 1000 !important;
    display: none;
    width: max-content !important;
    max-width: min(360px, calc(100vw - 3rem)) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #dc3545 !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    border: 1px solid rgba(220, 53, 69, 0.35) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.14);
    white-space: normal !important;
    margin: 0 !important;
}

span.dmxValidator-error:empty {
    display: none !important;
}

span.dmxValidator-error::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 14px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
}

span.dmxValidator-error::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 14px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(220, 53, 69, 0.35);
    z-index: -1;
}

/* Exibe o balão quando o campo for inválido */
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
textarea.is-invalid ~ .invalid-feedback {
    display: block !important;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip {
    display: block !important;
}

.was-validated span.dmxValidator-error,
span.dmxValidator-error:not(:empty) {
    display: block !important;
}

/* Esconde o ícone de check verde de sucesso do Bootstrap */
.was-validated .form-control:valid, .form-control.is-valid {
    background-image: none !important;
    border-color: #ced4da !important; /* Volta a cor da borda para o padrão */
}

.row>* {
   padding-right: 0.1rem;
   padding-left: .1rem;
   margin-top: var(--bs-gutter-y);
}

.col{
   min-height: 50px !important;
   margin-left: 0px !important;
   margin-right: 0px !important;
}

label {
   color: var(--bs-label) !important;
   font-size: var(--components-font-size-label) !important;
   line-height: 1.08;
   margin-bottom: .08rem !important;
}

.tab-content {
   padding-top: .3rem !important;
}

.page-layout-fixed .scrollable-content-area .tab-content > form > .tab-pane > .row {
   margin-bottom: -.08rem;
}

.page-layout-fixed .scrollable-content-area .tab-content > form > .tab-pane > .row + .row {
   margin-top: -.1rem !important;
}

.page-layout-fixed .scrollable-content-area .tab-content > form > .tab-pane > .row:last-child {
   margin-bottom: 0;
}

.page-layout-fixed .scrollable-content-area .tab-content > form > .tab-pane > .row > [class*='col-'],
.page-layout-fixed .scrollable-content-area .tab-content > form > .tab-pane > .row > .col {
   min-height: 0 !important;
}

.page-layout-fixed .scrollable-content-area .tab-content > .tab-pane > form > .row {
   margin-bottom: -.08rem;
}

.page-layout-fixed .scrollable-content-area .tab-content > .tab-pane > form > .row + .row {
   margin-top: -.1rem !important;
}

.page-layout-fixed .scrollable-content-area .tab-content > .tab-pane > form > .row:last-child {
   margin-bottom: 0;
}

.page-layout-fixed .scrollable-content-area .tab-content > .tab-pane > form > .row > [class*='col-'],
.page-layout-fixed .scrollable-content-area .tab-content > .tab-pane > form > .row > .col {
   min-height: 0 !important;
}


/* Modais */
/* 2. Efeito Esfumado na borda do PDF (Degradê de Cinza Escuro para Cinza 20%) */
.pdf-container-shadow {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    /* Criando o efeito esfumado com múltiplas camadas de sombra */
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.2),           /* Linha fina de contorno */
        0 0 15px 5px rgba(33, 37, 41, 0.4),    /* Esfumado Cinza Escuro (quase preto) */
        0 0 30px 10px rgba(108, 117, 125, 0.2); /* Transição para Cinza 20% (suave) */
    
    transition: all 0.3s ease;
}

/* ajuda a GPU a lidar melhor com as transformações */
#modalVisualizador .modal-content {
  will-change: transform;
}

/* Força o modal do visualizador a ficar acima de tudo (inclusive do modal1 e do preloader) */
#modalVisualizador {
    z-index: 1080 !important;
}

/* ============================================================
   Modais: ajuste de centralização descontando o sidebar
   Exceção: #modalVisualizador (fullscreen)
   ============================================================ */
body:has(#sidebar-wrapper) .modal:not(#modalVisualizador) {
    padding-left: var(--sidebar-width) !important;
}

body:has(#sidebar-wrapper.collapsed) .modal:not(#modalVisualizador) {
    padding-left: 50px !important;
}

body:has(#sidebar-wrapper.hidden) .modal:not(#modalVisualizador) {
    padding-left: 0 !important;
}

/* Mobile/tablet: sem desconto de sidebar (menu fica oculto/sobreposto) */
@media (max-width: 991px) {
    .modal:not(#modalVisualizador),
    body:has(#sidebar-wrapper) .modal:not(#modalVisualizador),
    body:has(#sidebar-wrapper.collapsed) .modal:not(#modalVisualizador),
    body:has(#sidebar-wrapper.hidden) .modal:not(#modalVisualizador) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .modal .modal-dialog {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* Exemplo: regras aplicáveis a todos os modais com a classe draggable-header */
.modal .btn-close:focus,
.modal .btn-close:active,
.modal .btn-close:focus-visible,
.draggable-header .btn-close:focus,
.draggable-header .btn-close:active,
.draggable-header .btn-close:focus-visible {
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
    background-color: transparent; /* Garante que não mude a cor de fundo no foco */
    opacity: 0.5; /* Opacidade padrão do Bootstrap para o botão fechar */
}

/* 2. Garante que o Hover seja a única mudança visual */
.modal .btn-close:hover,
.draggable-header .btn-close:hover {
    opacity: 1; /* Fica mais nítido ao passar o mouse */
    background-color: transparent;
}

/* 3. Se o usuário clicar e "desistir" (manter pressionado e tirar), 
      forçamos ele a voltar ao estado de hover ou padrão */
.modal .btn-close:active,
.draggable-header .btn-close:active {
    opacity: 0.8; /* Um leve feedback de clique, mas sem mudar a cor para preto */
}

.draggable-header .pdf-container-shadow {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.2),
        0 0 15px 5px rgba(33,37,41,0.4),
        0 0 30px 10px rgba(108,117,125,0.2);
    transition: all 0.3s ease;
}

.draggable-header .modal-header {
    cursor: move;
    user-select: none;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    height: 35px; /* opcional */
}

.draggable-header .btn-close {
  z-index: 1060 !important;
  pointer-events: auto !important;
}

.draggable-header .modal-header * {
  pointer-events: auto;
}

.draggable-header .modal-content {
  will-change: transform;
}

.modal .modal-header,
.draggable-header .modal-header {
    min-height: 35px;
    height: 35px;
    padding: .18rem .75rem;
    display: flex;
    align-items: center;
}

.modal .modal-header .modal-title,
.draggable-header .modal-header .modal-title {
    margin: 0;
    line-height: 1.1;
    font-size: .98rem;
}

.modal .modal-header:not(.no-drag),
.draggable-header .modal-header:not(.no-drag) {
    cursor: move;
    user-select: none;
}

.modal .btn-close,
.draggable-header .btn-close {
    z-index: 1060 !important;
    pointer-events: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.modal .modal-header *,
.draggable-header .modal-header * {
    pointer-events: auto;
}

.card > .card-header:not(.no-drag),
.draggable-card > .card-header:not(.no-drag) {
    cursor: move;
    user-select: none;
}

.card.is-dragging-card,
.draggable-card.is-dragging-card {
    z-index: 1045;
}

.card.draggable-card-enabled,
.draggable-card.draggable-card-enabled {
    will-change: transform;
}

.card.draggable-card-enabled > .card-header,
.draggable-card.draggable-card-enabled > .card-header {
    min-height: 35px;
    padding: .18rem .65rem;
    display: flex;
    align-items: center;
}

.card.draggable-card-enabled > .card-header h1,
.card.draggable-card-enabled > .card-header h2,
.card.draggable-card-enabled > .card-header h3,
.card.draggable-card-enabled > .card-header h4,
.card.draggable-card-enabled > .card-header h5,
.card.draggable-card-enabled > .card-header h6,
.draggable-card.draggable-card-enabled > .card-header h1,
.draggable-card.draggable-card-enabled > .card-header h2,
.draggable-card.draggable-card-enabled > .card-header h3,
.draggable-card.draggable-card-enabled > .card-header h4,
.draggable-card.draggable-card-enabled > .card-header h5,
.draggable-card.draggable-card-enabled > .card-header h6 {
    margin: 0;
    line-height: 1.1;
}

body[data-bs-theme='dark'] {
    color-scheme: dark;
    --app-navbar-bg: #1b2b39;
    --app-navbar-bg-alt: #233849;
    --app-navbar-accent: #314c61;
    --app-navbar-text: #dfe7ee;
    --bs-label: var(--bs-primary);
    --app-accent: var(--bs-primary);
    --app-accent-rgb: var(--bs-primary-rgb);
    --app-accent-soft-bg: rgba(var(--app-accent-rgb), 0.12);
    --app-accent-soft-bg-strong: rgba(var(--app-accent-rgb), 0.18);
    --app-accent-soft-border: rgba(var(--app-accent-rgb), 0.16);
    --app-accent-text-strong: color-mix(in srgb, var(--app-accent) 72%, #ffffff 28%);
    --sidebar-bg: #111b26;
    --sidebar-text: #d7e3f1;
    --sidebar-hover: var(--sidebar-text);
    --sidebar-hover-bg: rgba(255,255,255,0.08);
    --sidebar-active-color: var(--app-accent);
    --tree-line-color: rgba(255, 255, 255, 0.18);
    --table-header-bg: color-mix(in srgb, var(--bs-primary) 22%, #0f1720 78%);
    --table-header-color: #e9f2fb;
    --table-odd-bg: #1e2b38; /* linha par no dark — visivelmente mais claro que #16212b (odd) pra criar zebra perceptível */
    --table-hover-bg: #3a4a5c;
    --table-vertical-border: #314354;
    --table-header-border-bottom: color-mix(in srgb, var(--bs-primary) 38%, #0f1720 62%);
}

body[data-bs-theme='dark'] {
    background-color: #0f1720;
    color: #d7e0e8;
}

body[data-bs-theme='dark'] #content,
body[data-bs-theme='dark'] .page-container,
body[data-bs-theme='dark'] .sticky-top-elements,
body[data-bs-theme='dark'] .tab-content,
body[data-bs-theme='dark'] .tab-pane,
body[data-bs-theme='dark'] .card,
body[data-bs-theme='dark'] .modal-content,
body[data-bs-theme='dark'] .dropdown-menu,
body[data-bs-theme='dark'] .presence-summary-card,
body[data-bs-theme='dark'] .presence-page-note {
    background-color: #16212b;
    color: #d7e0e8;
}

body[data-bs-theme='dark'] .top-navbar,
body[data-bs-theme='dark'] .logo-section {
    background-color: var(--app-navbar-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}

body[data-bs-theme='dark'] .logo-section {
    border-right-color: rgba(255,255,255,0.08);
}

body[data-bs-theme='dark'] .navbar-right,
body[data-bs-theme='dark'] .superadmin-toggle,
body[data-bs-theme='dark'] .user-dropdown-toggle,
body[data-bs-theme='dark'] .menu-toggle-btn {
    color: #e9f3fb;
}

body[data-bs-theme='dark'] .navbar-base-context {
    color: #ffbf47;
}

body[data-bs-theme='dark'] .theme-toggle-section {
    background-color: rgba(255,255,255,0.09);
    color: var(--app-navbar-text);
}

body[data-bs-theme='dark'] .theme-toggle-icon,
body[data-bs-theme='dark'] .superadmin-icon,
body[data-bs-theme='dark'] .user-icon {
    color: rgba(244,248,251,0.85);
}

body[data-bs-theme='dark'] .menu-toggle-btn:hover,
body[data-bs-theme='dark'] .superadmin-toggle:hover,
body[data-bs-theme='dark'] .superadmin-toggle.show,
body[data-bs-theme='dark'] .user-dropdown-toggle:hover,
body[data-bs-theme='dark'] .user-dropdown-toggle.show {
    background-color: rgba(255,255,255,0.1);
    color: var(--app-navbar-text);
}

body[data-bs-theme='dark'] .superadmin-label {
    color: #ffd66b;
}

body[data-bs-theme='dark'] #sidebar-wrapper {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.45);
}

body[data-bs-theme='dark'] #content {
    background-color: #0f1720;
}

body[data-bs-theme='dark'] .header-line-divider,
body[data-bs-theme='dark'] .dropdown-divider,
body[data-bs-theme='dark'] .card-destaque,
body[data-bs-theme='dark'] .card-destaque .card-header,
body[data-bs-theme='dark'] .card,
body[data-bs-theme='dark'] .modal-header,
body[data-bs-theme='dark'] .modal-footer,
body[data-bs-theme='dark'] .page-layout-fixed .sticky-top-elements .nav-tabs .nav-link,
body[data-bs-theme='dark'] .table-card-footer .page-item .page-link,
body[data-bs-theme='dark'] table,
body[data-bs-theme='dark'] #grid_Localizar thead th,
body[data-bs-theme='dark'] .input-readonly-disabled,
body[data-bs-theme='dark'] .input-action-embedded .btn.btn-outline-secondary {
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-bs-theme='dark'] .sticky-top-elements {
    background-color: #16212b;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}

body[data-bs-theme='dark'] .page-header-compact {
    padding: 3px 13px 4px;
    background: transparent;
    border-left-color: rgba(255,255,255,0.08);
    box-shadow: none;
}

body[data-bs-theme='dark'] .page-header-compact .page-title {
    color: #ffd66b !important;
    font-weight: 500 !important;
    text-shadow: none;
}

body[data-bs-theme='dark'] .header-accent {
    width: 4px;
    height: 14px;
    background: linear-gradient(180deg, #8ecae6 0%, #4f87a8 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

body[data-bs-theme='dark'] .page-header-compact,
body[data-bs-theme='dark'] .page-header-compact h1,
body[data-bs-theme='dark'] .page-header-compact h2,
body[data-bs-theme='dark'] .page-header-compact h3,
body[data-bs-theme='dark'] .page-header-compact h4,
body[data-bs-theme='dark'] .page-header-compact h5,
body[data-bs-theme='dark'] .page-header-compact h6,
body[data-bs-theme='dark'] .page-header-compact .page-title,
body[data-bs-theme='dark'] .presence-summary-value,
body[data-bs-theme='dark'] .presence-table tbody td,
body[data-bs-theme='dark'] .dropdown-item,
body[data-bs-theme='dark'] .form-control,
body[data-bs-theme='dark'] .form-select,
body[data-bs-theme='dark'] .datatable-input,
body[data-bs-theme='dark'] .table-card-footer .page-item .page-link,
body[data-bs-theme='dark'] .empty-state-message,
body[data-bs-theme='dark'] .btn-close-page {
    color: #e6edf5;
}

body[data-bs-theme='dark'] .presence-summary-label,
body[data-bs-theme='dark'] .presence-page-note,
body[data-bs-theme='dark'] .dropdown-header,
body[data-bs-theme='dark'] .table-card-full .empty-state-message,
body[data-bs-theme='dark'] .input-readonly-disabled,
body[data-bs-theme='dark'] input.form-control[type='date'] {
    color: var(--input-placeholder-color-dark) !important;
}

body[data-bs-theme='dark'] .dropdown-menu {
    box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.35);
}

body[data-bs-theme='dark'] .dropdown-item:hover,
body[data-bs-theme='dark'] .dropdown-item:focus {
    background-color: rgba(142, 202, 230, 0.12);
    color: #8ecae6;
}

body[data-bs-theme='dark'] .presence-page-note {
    background: #111b26;
}

body[data-bs-theme='dark'] .presence-summary-card {
    box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.22);
}

body[data-bs-theme='dark'] .form-control,
body[data-bs-theme='dark'] .form-select,
body[data-bs-theme='dark'] .datatable-input,
body[data-bs-theme='dark'] textarea.form-control {
    background-color: #101923;
    border-color: rgba(255,255,255,0.12);
    color: #d7e0ea;
}

body[data-bs-theme='dark'] .form-control::placeholder,
body[data-bs-theme='dark'] textarea.form-control::placeholder {
    color: var(--input-placeholder-color-dark) !important;
    opacity: 1;
}

body[data-bs-theme='dark'] input.form-control[type='date'].has-value,
body[data-bs-theme='dark'] input.form-control[type='date'].has-value::-webkit-datetime-edit,
body[data-bs-theme='dark'] input.form-control[type='date'].has-value::-webkit-date-and-time-value,
body[data-bs-theme='dark'] #abaCadastro input[type='date']::-webkit-datetime-edit,
body[data-bs-theme='dark'] #abaCadastro input[type='date'].empresa-date-filled,
body[data-bs-theme='dark'] #abaCadastro input[type='date'].empresa-date-filled::-webkit-datetime-edit,
body[data-bs-theme='dark'] #abaCadastro input[type='date'].empresa-date-filled::-webkit-date-and-time-value {
    color: #d7e0ea !important;
}

body[data-bs-theme='dark'] input.form-control[type='date']:not(.has-value)::-webkit-datetime-edit,
body[data-bs-theme='dark'] input.form-control[type='date']:not(.has-value)::-webkit-date-and-time-value {
    color: var(--input-placeholder-color-dark) !important;
}

body[data-bs-theme='dark'] .form-control:focus,
body[data-bs-theme='dark'] .datatable-input:focus,
body[data-bs-theme='dark'] .form-select:focus,
body[data-bs-theme='dark'] .form-check-input:focus,
body[data-bs-theme='dark'] .input-action-embedded:focus-within {
    color: #e6edf0 !important;
    border-color: #8ecae6 !important;
    box-shadow: none !important;
}

body[data-bs-theme='dark'] .input-readonly-disabled,
body[data-bs-theme='dark'] .form-control:disabled,
body[data-bs-theme='dark'] .form-select:disabled {
    background-color: #1b2834;
}

body[data-bs-theme='dark'] .input-action-embedded .form-control {
    border-right-color: transparent;
}

body[data-bs-theme='dark'] .input-action-embedded .btn.btn-outline-secondary,
body[data-bs-theme='dark'] .input-action-embedded .btn.btn-outline-secondary:hover,
body[data-bs-theme='dark'] .input-action-embedded .btn.btn-outline-secondary:focus,
body[data-bs-theme='dark'] .input-action-embedded .btn.btn-outline-secondary:active {
    background-color: #16212b;
    color: #b8c7d7;
}

body[data-bs-theme='dark'] .input-action-embedded:focus-within .form-control,
body[data-bs-theme='dark'] .input-action-embedded:focus-within .btn.btn-outline-secondary,
body[data-bs-theme='dark'] .input-action-embedded:focus-within .btn.btn-outline-secondary:hover,
body[data-bs-theme='dark'] .input-action-embedded:focus-within .btn.btn-outline-secondary:focus,
body[data-bs-theme='dark'] .input-action-embedded:focus-within .btn.btn-outline-secondary:active {
    border: 0 !important;
}


body[data-bs-theme='dark'] .page-layout-fixed .sticky-top-elements .nav-tabs .nav-link {
    color: #8fa0b2 !important;
    border-bottom-color: rgba(255,255,255,0.14) !important;
    border-top-left-radius: 0.45rem !important;
    border-top-right-radius: 0.45rem !important;
    margin-bottom: -1px;
    position: relative;
}

body[data-bs-theme='dark'] .page-layout-fixed .sticky-top-elements .nav-tabs .nav-link:hover {
    color: #d4e4f3 !important;
    background-color: rgba(255,255,255,0.04) !important;
}

body[data-bs-theme='dark'] .page-layout-fixed .sticky-top-elements .nav-tabs {
    margin-top: 0;
    padding-top: 0.1rem;
}

body[data-bs-theme='dark'] .page-layout-fixed .sticky-top-elements .nav-tabs .nav-link.active {
    color: #dce5ee !important;
    background-color: #223244 !important;
    border-color: rgba(255,255,255,0.14) rgba(255,255,255,0.14) #16212b !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    top: 1px;
}

body[data-bs-theme='dark'] #grid_Localizar thead,
body[data-bs-theme='dark'] #grid_Localizar thead::after,
body[data-bs-theme='dark'] #grid_Localizar thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-color) !important;
}

body[data-bs-theme='dark'] table tbody td {
    color: #dbe7f3;
}

body[data-bs-theme='dark'] table.table-striped tbody tr:nth-child(odd) td {
    background-color: #16212b !important;
}

body[data-bs-theme='dark'] table.table-striped tbody tr:nth-child(even) td {
    background-color: var(--table-odd-bg) !important;
}

body[data-bs-theme='dark'] table.table tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
    color: #e3ebf2 !important;
}

body[data-bs-theme='dark'] table.table tbody tr.selected-row td {
    background-color: #2d4760 !important;
    color: #e3ebf2 !important;
}

body[data-bs-theme='dark'] .table-card-footer .page-item .page-link {
    background-color: #16212b;
    color: #d7e3f1;
}

body[data-bs-theme='dark'] .table-card-footer .page-item .page-link:hover {
    background-color: #223244;
    color: #e3ebf2;
    border-color: #38526b;
}

body[data-bs-theme='dark'] .table-card-footer .page-item.active .page-link,
body[data-bs-theme='dark'] .table-card-footer .page-item.active .page-link:focus {
    background-color: #2d4760 !important;
    border-color: #466786 !important;
    color: #e3ebf2 !important;
}

body[data-bs-theme='dark'] .table-card-footer .page-item.disabled .page-link {
    background-color: #111b26 !important;
    color: #6d8195 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body[data-bs-theme='dark'] .form-overlay {
    background: rgba(15, 23, 32, 0.55);
}

body[data-bs-theme='dark'] .invalid-feedback,
body[data-bs-theme='dark'] .invalid-tooltip,
body[data-bs-theme='dark'] span.dmxValidator-error {
    background: #24181c !important;
    color: #ff9aa6 !important;
    border-color: rgba(255, 154, 166, 0.35) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.32);
}

body[data-bs-theme='dark'] .invalid-feedback::before,
body[data-bs-theme='dark'] .invalid-tooltip::before,
body[data-bs-theme='dark'] span.dmxValidator-error::before {
    border-bottom-color: #24181c;
}

body[data-bs-theme='dark'] .invalid-feedback::after,
body[data-bs-theme='dark'] .invalid-tooltip::after,
body[data-bs-theme='dark'] span.dmxValidator-error::after {
    border-bottom-color: rgba(255, 154, 166, 0.35);
}

body[data-bs-theme='dark'] .modal-header,
body[data-bs-theme='dark'] .draggable-header .modal-header {
    background-color: #1b2834;
    color: #e6edf5;
}

body[data-bs-theme='dark'] .pdf-container-shadow,
body[data-bs-theme='dark'] .draggable-header .pdf-container-shadow {
    background: #0f1720;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 15px 5px rgba(0,0,0,0.45),
        0 0 30px 10px rgba(0,0,0,0.22);
}

body[data-bs-theme='dark'] .btn-close-page {
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

body[data-bs-theme='dark'] .form-check-input {
    background-color: #101923;
    border-color: rgba(255,255,255,0.2);
}

body[data-bs-theme='dark'] .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

body[data-bs-theme='dark'] .table-card-full .empty-state-message {
    background-color: transparent !important;
}

body[data-bs-theme='dark'] nav#formNavbar,
body[data-bs-theme='dark'] nav#formNavbar.navbar,
body[data-bs-theme='dark'] .navbar.navbar-light.form-toolbar-compact {
    background-color: #16212b;
}

body[data-bs-theme='dark'] nav#formNavbar .nav-link,
body[data-bs-theme='dark'] nav#formNavbar .nav-link.text-dark,
body[data-bs-theme='dark'] nav#formNavbar .navbar-nav .nav-link,
body[data-bs-theme='dark'] .navbar.navbar-light.form-toolbar-compact .nav-link,
body[data-bs-theme='dark'] .navbar.navbar-light.form-toolbar-compact .nav-link.text-dark {
    color: #dbe7f3 !important;
}

body[data-bs-theme='dark'] nav#formNavbar .nav-link:hover,
body[data-bs-theme='dark'] nav#formNavbar .nav-link:focus {
    color: #e6edf2 !important;
}

body[data-bs-theme='dark'] .navbar.navbar-light .navbar-toggler {
    border-color: rgba(255,255,255,0.18);
}

body[data-bs-theme='dark'] .navbar.navbar-light .navbar-toggler-icon {
    filter: invert(1) brightness(1.4);
}

body[data-bs-theme='dark'] .card-header,
body[data-bs-theme='dark'] .card-footer,
body[data-bs-theme='dark'] fieldset,
body[data-bs-theme='dark'] legend,
body[data-bs-theme='dark'] .table-responsive,
body[data-bs-theme='dark'] .list-group-item,
body[data-bs-theme='dark'] .list-group,
body[data-bs-theme='dark'] .accordion-item,
body[data-bs-theme='dark'] .accordion-button {
    background-color: #16212b;
    color: #e6edf5;
}

body[data-bs-theme='dark'] .card-header,
body[data-bs-theme='dark'] .card-footer,
body[data-bs-theme='dark'] .accordion-item,
body[data-bs-theme='dark'] .accordion-button,
body[data-bs-theme='dark'] fieldset {
    border-color: rgba(255,255,255,0.12);
}

body[data-bs-theme='dark'] .btn-outline-secondary {
    color: #d7e3f1;
    border-color: rgba(255,255,255,0.18);
    background-color: transparent;
}

body[data-bs-theme='dark'] .btn-primary,
body[data-bs-theme='dark'] .btn.btn-primary,
body[data-bs-theme='dark'] .btn-outline-primary:hover,
body[data-bs-theme='dark'] .btn-outline-primary:focus,
body[data-bs-theme='dark'] .btn-outline-primary:active,
body[data-bs-theme='dark'] .btn-outline-primary.active,
body[data-bs-theme='dark'] .page-header-compact .btn-primary {
    background-color: var(--app-navbar-bg);
    border-color: var(--app-navbar-bg);
    color: var(--app-navbar-text);
}

body[data-bs-theme='dark'] .btn-primary:hover,
body[data-bs-theme='dark'] .btn.btn-primary:hover,
body[data-bs-theme='dark'] .btn-primary:focus,
body[data-bs-theme='dark'] .btn.btn-primary:focus,
body[data-bs-theme='dark'] .btn-primary:active,
body[data-bs-theme='dark'] .btn.btn-primary:active,
body[data-bs-theme='dark'] .page-header-compact .btn-primary:hover,
body[data-bs-theme='dark'] .page-header-compact .btn-primary:focus {
    background-color: var(--app-navbar-bg-alt);
    border-color: var(--app-navbar-bg-alt);
    color: #e6edf2;
}

body[data-bs-theme='dark'] .btn-outline-primary,
body[data-bs-theme='dark'] .btn.btn-outline-primary {
    color: #dbe7f3;
    border-color: var(--app-navbar-accent);
    background-color: rgba(27, 43, 57, 0.12);
}

body[data-bs-theme='dark'] .btn-outline-primary:hover,
body[data-bs-theme='dark'] .btn.btn-outline-primary:hover,
body[data-bs-theme='dark'] .btn-outline-primary:focus,
body[data-bs-theme='dark'] .btn.btn-outline-primary:focus,
body[data-bs-theme='dark'] .btn-outline-primary:active,
body[data-bs-theme='dark'] .btn.btn-outline-primary:active {
    box-shadow: 0 0 0 0.12rem rgba(49, 76, 97, 0.24);
}

body[data-bs-theme='dark'] nav#formNavbar .nav-link,
body[data-bs-theme='dark'] nav#formNavbar .nav-link.text-dark,
body[data-bs-theme='dark'] .navbar.navbar-light.form-toolbar-compact .nav-link,
body[data-bs-theme='dark'] .navbar.navbar-light.form-toolbar-compact .nav-link.text-dark,
body[data-bs-theme='dark'] .form-toolbar-link-content i,
body[data-bs-theme='dark'] .form-toolbar-link-content span {
    color: #a9b8c6 !important;
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content span {
    color: #d8e3ed !important;
}

body[data-bs-theme='dark'] .generic-btn {
    opacity: 0.76 !important;
}

body[data-bs-theme='dark'] nav#formNavbar .nav-link,
body[data-bs-theme='dark'] .navbar.navbar-light.form-toolbar-compact .nav-link {
    border-radius: 0.55rem;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

body[data-bs-theme='dark'] .generic-btn:hover,
body[data-bs-theme='dark'] .generic-btn:focus-visible {
    opacity: 1 !important;
    transform: translateY(-1px);
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content {
    background-color: rgba(255,255,255,0.035);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-plus-circle) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-plus-circle) span,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-save) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-save) span {
    color: #6fc98f !important;
}

body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-pencil-alt) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-pencil-alt) span {
    color: #f2b257 !important;
}

body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-trash-alt) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-trash-alt) span,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-sign-out-alt) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-sign-out-alt) span,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-times-circle) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-times-circle) span {
    color: #f07f86 !important;
}

body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-sync) i,
body[data-bs-theme='dark'] .form-toolbar-link-content:has(i.fa-sync) span {
    color: #aebdcc !important;
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-plus-circle),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-plus-circle),
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-save),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-save) {
    background-color: rgba(111, 201, 143, 0.055);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-pencil-alt),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-pencil-alt) {
    background-color: rgba(242, 178, 87, 0.055);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-trash-alt),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-trash-alt),
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-sign-out-alt),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-sign-out-alt),
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-times-circle),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-times-circle) {
    background-color: rgba(240, 127, 134, 0.055);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-sync),
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-sync) {
    background-color: rgba(174, 189, 204, 0.045);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-plus-circle) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-plus-circle) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-plus-circle) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-plus-circle) span,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-save) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-save) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-save) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-save) span {
    color: #95e2b0 !important;
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-pencil-alt) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-pencil-alt) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-pencil-alt) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-pencil-alt) span {
    color: #ffc978 !important;
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-trash-alt) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-trash-alt) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-trash-alt) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-trash-alt) span,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-sign-out-alt) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-sign-out-alt) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-sign-out-alt) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-sign-out-alt) span,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-times-circle) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-times-circle) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-times-circle) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-times-circle) span {
    color: #ff9ca3 !important;
}

body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-sync) i,
body[data-bs-theme='dark'] .generic-btn:hover .form-toolbar-link-content:has(i.fa-sync) span,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-sync) i,
body[data-bs-theme='dark'] .generic-btn:focus-visible .form-toolbar-link-content:has(i.fa-sync) span {
    color: #d6e2ee !important;
}

body[data-bs-theme='dark'] .btn-outline-secondary:hover,
body[data-bs-theme='dark'] .btn-outline-secondary:focus,
body[data-bs-theme='dark'] .btn-outline-secondary:active {
    color: #e6edf2;
    background-color: #223244;
    border-color: #38526b;
}

body[data-bs-theme='dark'] .btn-secondary {
    background-color: #314354;
    border-color: #314354;
}

body[data-bs-theme='dark'] .btn-secondary:hover,
body[data-bs-theme='dark'] .btn-secondary:focus,
body[data-bs-theme='dark'] .btn-secondary:active {
    background-color: #3c5368;
    border-color: #3c5368;
}

body[data-bs-theme='dark'] .text-muted {
    color: #9fb0c2 !important;
}

body[data-bs-theme='dark'] .bg-white {
    background-color: #16212b !important;
}

body[data-bs-theme='dark'] .border,
body[data-bs-theme='dark'] .border-top,
body[data-bs-theme='dark'] .border-end,
body[data-bs-theme='dark'] .border-bottom,
body[data-bs-theme='dark'] .border-start {
    border-color: rgba(255,255,255,0.12) !important;
}

@media (max-width: 991.98px) {
    .logo-section {
        width: 78px;
        padding: 3px;
    }

    .navbar-right {
        min-width: 0;
        padding: 0 0.7rem 0 0.2rem;
        gap: 0.2rem;
    }

    .navbar-base-context {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.95rem;
    }

    .superadmin-section {
        margin-right: 0.35rem;
    }

    .user-dropdown-toggle {
        max-width: 180px;
        padding: 4px 8px;
    }

    .user-meta {
        margin-right: 0.85rem;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    .page-layout-fixed .scrollable-content-area > .tab-content,
    .page-layout-fixed > .scrollable-content-area.p-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'],
    .page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'],
    .page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .logo-section {
        width: 58px;
        padding: 2px;
    }

    .logo-container {
        padding: 2px;
    }

    .navbar-right {
        min-width: 0;
        padding: 0 0.5rem 0 0.2rem;
        gap: 0.15rem;
    }

    .navbar-base-context {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.82rem;
        padding-right: 0.1rem;
    }

    .superadmin-section {
        margin-left: 0;
        margin-right: 0.2rem;
    }

    .superadmin-toggle,
    .user-dropdown-toggle {
        padding: 4px 6px;
    }

    .user-dropdown-toggle {
        max-width: 132px;
    }

    .user-meta {
        margin-right: 0.65rem;
    }

    .page-header-compact {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page-header-compact > .d-flex {
        flex-wrap: wrap;
        align-items: flex-start !important;
        gap: 0.4rem;
    }

    .page-header-compact > .d-flex > :last-child {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .page-title {
        font-size: 0.95rem;
    }

    .header-accent {
        height: 12px;
    }

    nav#formNavbar {
        padding: 0.08rem 0.12rem;
    }

    .form-toolbar-compact .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 0.1rem;
        padding-left: 0;
    }

    .form-toolbar-compact .navbar-collapse {
        overflow-x: auto;
    }

    .form-toolbar-link {
        padding: 0.18rem !important;
    }

    .form-toolbar-link-content {
        padding: 0.14rem 0.25rem 0.12rem;
    }

    .form-toolbar-link-content span {
        font-size: 0.76rem;
    }

    .form-toolbar-icon {
        font-size: 1.12rem;
    }

    .page-layout-fixed .sticky-top-elements .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .page-layout-fixed .sticky-top-elements .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .page-layout-fixed .scrollable-content-area > .tab-content,
    .page-layout-fixed > .scrollable-content-area.p-3 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.65rem !important;
    }

    .page-layout-fixed .scrollable-content-area .tab-pane[id*='Localizar'] > .container-fluid,
    .page-layout-fixed .scrollable-content-area .tab-pane[id*='localizar'] > .container-fluid,
    .page-layout-fixed .scrollable-content-area .tab-pane[id*='abaLocalizar'] > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-responsive {
        overflow-x: auto !important;
    }

    .table-card-full .table-responsive-wide .empty-state-message {
        min-width: 100% !important;
        flex: 0 0 auto !important;
    }

    .table-min-width-audit {
        min-width: 980px !important;
    }

    .table-min-width-presence {
        min-width: 1120px !important;
    }

    .btn-close-page {
        top: calc(var(--navbar-height) + 0.75rem);
        right: 0.75rem;
        padding: 0.42rem 0.78rem;
        font-size: 0.82rem;
    }

    .modal-dialog {
        margin: 0.55rem;
    }

    div[is='dmx-foto'] {
        display: block;
        max-width: 100%;
    }

    div[is='dmx-foto'] > div {
        max-width: 100% !important;
    }
}

@media (max-width: 991px) {
    #sidebar-wrapper.collapsed {
        transform: translateX(-100%);
        overflow: hidden;
    }

    #content {
        margin-left: 0 !important;
    }

    #ContainerLogoEmpresa,
    body:has(#sidebar-wrapper.collapsed) #ContainerLogoEmpresa,
    body:has(#sidebar-wrapper.hidden) #ContainerLogoEmpresa {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    #sidebar-wrapper {
        width: min(84vw, 280px);
        z-index: 1045;
    }

    #sidebar-wrapper.collapsed {
        width: min(84vw, 280px);
    }

    .logo-section {
        width: 50px;
    }

    .theme-toggle-section {
        padding: 0.22rem 0.38rem;
    }

    .user-dropdown-toggle {
        max-width: 92px;
        padding: 4px;
    }

    .user-meta {
        margin-right: 0.5rem;
    }

    .page-title {
        font-size: 0.9rem;
    }

    .page-layout-fixed .scrollable-content-area > .tab-content,
    .page-layout-fixed > .scrollable-content-area.p-3 {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    .btn-close-page {
        right: 0.55rem;
    }
}

/* ========================================
   Checkbox em grades (PADRÃO DEFINITIVO) — mesmo visual pra readonly (pe-none) e clicável
   Tamanho 16x16 + borda 1.5px #999 + primary quando marcado.
   Indeterminate (master de select-all): laranja.
   Seletores:
   - .table .form-check-input.pe-none (readonly dentro de table)
   - .grid-check.grid-check (clicável, funciona DENTRO ou FORA de .table — dupla classe
     pra ganhar especificidade vs .form-check-input:valid global)
   - .grid-check-master.grid-check-master (mesmo pro master de select-all)
   ======================================== */
.table .form-check-input.pe-none,
.table .form-check-input[disabled],
.table .form-check-input:disabled,
.grid-check.grid-check,
.grid-check-master.grid-check-master {
    border-width: 1.5px !important;
    border-style: solid !important;
    border-color: #999 !important;
    opacity: 0.8;
}

/* Checkbox individual de linha — 16x16 */
.table .form-check-input.pe-none,
.table .form-check-input[disabled],
.table .form-check-input:disabled,
.grid-check.grid-check {
    width: 16px !important;
    height: 16px !important;
}

/* Master (select-all) — 20x20 pra destacar visualmente como "controlador" */
.grid-check-master.grid-check-master {
    width: 20px !important;
    height: 20px !important;
}

.grid-check.grid-check,
.grid-check-master.grid-check-master {
    cursor: pointer;
}

.table .form-check-input.pe-none:checked,
.table .form-check-input[disabled]:checked,
.table .form-check-input:disabled:checked,
.grid-check.grid-check:checked,
.grid-check-master.grid-check-master:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    opacity: 1;
}

.grid-check-master.grid-check-master:indeterminate {
    background-color: #f39c12 !important;
    border-color: #f39c12 !important;
    opacity: 1;
}

/* ========================================================================
   Preloader em modo escuro.
   O dmxPreloader nativo do Wappler usa --bgcolor: #fff (branco), então
   em cada navegação entre páginas o usuário via um flash branco antes do
   conteúdo dark renderizar. Aqui só sobrescrevemos as CSS vars `--bgcolor`
   e `--color` — a cascata interna do preloader cuida de usar elas nos
   spinners (via background-color: var(--color) nos elementos filhos).
   ======================================================================== */
html[data-bs-theme='dark'] .dmxPreloader,
body[data-bs-theme='dark'] .dmxPreloader {
    --bgcolor: #0f172a !important;
    --color: #cbd5e1 !important;
    background-color: #0f172a !important;
}

/* ========================================================================
   .btn-action — efeito hover padronizado pra botões de ação no projeto
   (não toolbar CRUD, não lookup-trigger, não btn-close).
   Aplica: elevação 2px + sombra adaptativa pela cor do botão + brilho.
   Uso: classe opt-in, adicionar em qualquer .btn-primary, .btn-success,
   .btn-danger, .btn-secondary, .btn-outline-* onde quiser o efeito.
   ======================================================================== */
.btn-action {
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
    will-change: transform;
}
.btn-action:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
}
.btn-action:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.95);
}
/* Sombra adaptativa por variante de cor — usa as variáveis Bootstrap RGB */
.btn-action.btn-primary:hover:not(:disabled),
.btn-action.btn-outline-primary:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
}
.btn-action.btn-success:hover:not(:disabled),
.btn-action.btn-outline-success:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(var(--bs-success-rgb, 25, 135, 84), 0.35);
}
.btn-action.btn-danger:hover:not(:disabled),
.btn-action.btn-outline-danger:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(var(--bs-danger-rgb, 220, 53, 69), 0.35);
}
.btn-action.btn-warning:hover:not(:disabled),
.btn-action.btn-outline-warning:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(var(--bs-warning-rgb, 255, 193, 7), 0.35);
}
.btn-action.btn-secondary:hover:not(:disabled),
.btn-action.btn-outline-secondary:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(var(--bs-secondary-rgb, 108, 117, 125), 0.30);
}
/* Animação dos ícones FontAwesome dentro de .btn-action.
   Padrão: scale 1.15 em qualquer ícone no hover. Override: rotação 180° pra
   ícones de "atualizar" (sync/rotate). Assim funciona com QUALQUER ícone novo
   sem precisar atualizar a lista ícone por ícone. */
.btn-action i {
    transition: transform 0.3s ease;
    display: inline-block; /* necessário pra transform funcionar em <i> */
}
.btn-action:hover:not(:disabled) i {
    transform: scale(1.15);
}
/* Override: ícones de atualização rotacionam em vez de escalar */
.btn-action:hover:not(:disabled) i.fa-rotate,
.btn-action:hover:not(:disabled) i.fa-sync,
.btn-action:hover:not(:disabled) i.fa-rotate-right,
.btn-action:hover:not(:disabled) i.fa-arrows-rotate {
    transform: rotate(180deg);
}

/* ========================================================================
   Mesmo efeito do .btn-action aplicado nos .generic-btn de ação inline
   (Buscar/Limpar/Gerar de Faturamento, Cobranças, Lançamentos, etc.)
   EXCEÇÃO: toolbar CRUD (.form-toolbar-link) — mantém comportamento próprio
   (opacity 0.5 no estado base, acende no hover/focus).
   Sombra usa rgba neutra escura pra funcionar com qualquer cor de botão
   (primary/success/secondary/danger configurada via CSS no ID do botão).
   ======================================================================== */

/* Botões de ação inline ficam SEMPRE com opacity 1 (cor real, sem desbotar).
   Sobrescreve o `.generic-btn { opacity: 0.5 }` que vale só pra toolbar. */
.generic-btn:not(.form-toolbar-link),
.generic-btn:not(.form-toolbar-link):focus:not(:focus-visible):not(:hover) {
    opacity: 1 !important;
}

.generic-btn:not(.form-toolbar-link) {
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
    will-change: transform;
}
.generic-btn:not(.form-toolbar-link):hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
    filter: brightness(1.05);
}
.generic-btn:not(.form-toolbar-link):active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    filter: brightness(0.95);
}
.generic-btn:not(.form-toolbar-link) i {
    transition: transform 0.3s ease;
    display: inline-block;
}
.generic-btn:not(.form-toolbar-link):hover:not(:disabled) i {
    transform: scale(1.15);
}
.generic-btn:not(.form-toolbar-link):hover:not(:disabled) i.fa-rotate,
.generic-btn:not(.form-toolbar-link):hover:not(:disabled) i.fa-sync,
.generic-btn:not(.form-toolbar-link):hover:not(:disabled) i.fa-rotate-right,
.generic-btn:not(.form-toolbar-link):hover:not(:disabled) i.fa-arrows-rotate {
    transform: rotate(180deg);
}