/* ============================================================
   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(--app-accent);          /* texto ao passar o mouse — azul/cor da marca */
    --sidebar-hover-bg: #cfe2ff;     /* fundo no hover — azul claro destacado */
    --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,
.form-check-label {
    color: var(--bs-label) !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 !important;
    width: calc(100% - 50px) !important;
}

body:has(#sidebar-wrapper.hidden) .processing-overlay {
    left: 0 !important;
    width: 100% !important;
}

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

/* "Gerando relatório" (impressão, #progressLoaderOverlay): o overlay cobre a tela
   TODA (cobre e BLOQUEIA o menu — z-index 99999 >> menu 1040), e o CARD fica
   centralizado na ÁREA DE CONTEÚDO. Como o overlay é full-screen (left:0/width:100%
   inline), o card é deslocado via padding-left = largura do menu (aberto 250 /
   colapsado 50 / escondido/mobile 0). */
#progressLoaderOverlay { padding-left: var(--sidebar-width); }
body:has(#sidebar-wrapper.collapsed) #progressLoaderOverlay { padding-left: 50px; }
body:has(#sidebar-wrapper.hidden) #progressLoaderOverlay { padding-left: 0; }
@media (max-width: 991px) { #progressLoaderOverlay { padding-left: 0; } }

.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;
}

/* Loader global "Gerando relatório…" (showProgressLoader) — dark mode.
   O card é montado com estilos inline (#fff), então o dark precisa de !important. */
body[data-bs-theme="dark"] .progress-loader-card {
    background: #0f172a !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.52) !important;
}
body[data-bs-theme="dark"] #progressLoaderTitulo { color: #e5e7eb !important; }
body[data-bs-theme="dark"] #progressLoaderMsg,
body[data-bs-theme="dark"] #progressLoaderPct { color: #9fb0c2 !important; }
body[data-bs-theme="dark"] #progressLoaderBarWrap { background: #1e293b !important; }

/* Aviso "Isso pode demorar um pouco." (injetado no loader dos relatórios) */
.rel-aviso-demora {
    margin: 0.15rem auto 0.5rem;
    max-width: 340px;
    padding: 0.45rem 0.6rem;
    background: #fff8e1;
    border: 1px solid #ffe08a;
    border-radius: 6px;
    color: #8a6d00;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
}
.rel-aviso-demora i { color: #d39e00; }
body[data-bs-theme="dark"] .rel-aviso-demora {
    background: rgba(255, 193, 7, 0.12);
    border-color: rgba(255, 193, 7, 0.32);
    color: #ffd770;
}
body[data-bs-theme="dark"] .rel-aviso-demora i { color: #ffcf40; }

/* Cronômetro da geração de relatório (injetado no loader — "12s", "1min 05s").
   Números em tabular-nums pra não "dançar" a cada segundo. */
.rel-timer-geracao {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: #64748b;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rel-timer-geracao b { color: #334155; }
body[data-bs-theme="dark"] .rel-timer-geracao { color: #94a3b8; }
body[data-bs-theme="dark"] .rel-timer-geracao b { color: #cbd5e1; }

/* Destaque das datas no label da Fase nos modais de relatório (pílula amarela).
   Mesmo padrão do Cronograma (.cro-fase-date) / TrocarPeriodoFase (.tpf-fase-date).
   O dmx-lookup escapa HTML do label → a pílula é injetada por MutationObserver. */
.rel-fase-date {
    display: inline-block;
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
    border-radius: 10px;
    padding: 1px 8px;
    margin: 0 2px;
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.2;
}
.lookup-item:hover .rel-fase-date,
.lookup-item:focus .rel-fase-date,
.lookup-item.lookup-item-suggested .rel-fase-date {
    background-color: rgba(255, 255, 255, 0.92);
    color: #664d03;
    border-color: rgba(255, 255, 255, 0.5);
}
body[data-bs-theme="dark"] .rel-fase-date {
    background-color: rgba(255, 211, 105, 0.22);
    color: #ffd969;
    border-color: rgba(255, 211, 105, 0.35);
}

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;
}

/* ===== Sino de Notificações ===== */
.notif-bell-section {
    display: flex;
    align-items: center;
    margin-right: 0.75rem;
    position: relative;
}
.notif-bell-toggle {
    position: relative;
    color: white;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.notif-bell-toggle:hover { background: rgba(255,255,255,0.1); color: white; }
.notif-bell-icon {
    font-size: 1.2rem;
    opacity: 0.4;                 /* discreto/apagado quando NÃO há notificação */
    transition: opacity 0.25s ease, font-size 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.notif-bell-toggle:hover .notif-bell-icon { opacity: 0.85; }   /* ganha vida no hover, mesmo vazio */
.notif-bell-section.has-notifications .notif-bell-icon {
    color: #ffd54a;
    opacity: 1;                   /* destaque TOTAL quando há notificação */
    font-size: 1.6rem;            /* MAIOR pra chamar atenção */
    animation: notif-bell-pulse 1.6s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes notif-bell-pulse {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-12deg); }
    20%, 40% { transform: rotate(12deg); }
}
.notif-bell-badge {
    position: absolute;
    top: -2px; right: -2px;
    background: #dc2626;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid white;
}
.notif-bell-dropdown {
    width: 360px;
    max-width: 95vw;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.08);
}
.notif-bell-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}
.notif-bell-body {
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
}
.notif-bell-empty { padding: 32px 16px; }
.notif-bell-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: default;
    align-items: flex-start;
    transition: background 0.15s;
}
.notif-bell-item:hover { background: rgba(0,0,0,0.03); }
body[data-bs-theme='dark'] .notif-bell-item:hover { background: rgba(255,255,255,0.05); }
.notif-bell-item:last-child { border-bottom: none; }
.notif-bell-item-icon {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.notif-bell-item-icon.warning { background: #fef3c7; color: #92400e; }
.notif-bell-item-icon.error { background: #fee2e2; color: #991b1b; }
.notif-bell-item-icon.info { background: #dbeafe; color: #1e40af; }
.notif-bell-item-icon.success { background: #d1fae5; color: #065f46; }
.notif-bell-item-content { flex: 1 1 auto; min-width: 0; }
.notif-bell-item-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 2px;
    line-height: 1.3;
}
.notif-bell-item-desc {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6b7280);
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: pre-line; /* respeita as quebras de linha (\n) da mensagem */
    /* Limita o preview a 4 linhas e corta com "…" — a mensagem completa fica no
       modal "Ver". Evita que mensagens grandes dominem o sino. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.notif-bell-item-actions { display: flex; gap: 6px; }
.notif-bell-item-action {
    font-size: 0.72rem;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease, color 0.15s ease;
    border: 1px solid var(--bs-primary);
    background: var(--bs-primary);
    color: white;
    cursor: pointer;
    transition: filter 0.15s;
}
.notif-bell-item-action:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.notif-bell-item-action:active {
    transform: translateY(0);
    box-shadow: none;
}
.notif-bell-item-action i {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
    display: inline-block;
}
.notif-bell-item-action:hover i {
    transform: scale(1.3);
}
.notif-bell-item-action.secondary {
    background: transparent;
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.notif-bell-item-action.secondary:hover {
    background: var(--bs-secondary);
    color: white;
}

.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;
    /* max-width é o que faz o text-overflow:ellipsis disparar — sem largura
       limite o nome cresce e invade o avatar. Nome maior termina com "…". */
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
@media (max-width: 991.98px) { .user-name { max-width: 115px; } }

.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;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 6px !important;
    vertical-align: middle !important;
}

.presence-panel > .card-header {
    justify-content: center !important;
}

.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);
}

/* Separador do menu lateral (men_tipo=5). Linha pura, ou linha com rótulo. */
.menu-separator {
    height: 1px;
    margin: 7px 14px;
    background: rgba(0, 0, 0, 0.12);
}
.menu-separator.has-label {
    height: auto;
    background: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 9px 12px 3px;
}
.menu-separator.has-label::before,
.menu-separator.has-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}
.menu-separator.has-label span {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}
body[data-bs-theme='dark'] .menu-separator,
body[data-bs-theme='dark'] .menu-separator.has-label::before,
body[data-bs-theme='dark'] .menu-separator.has-label::after { background: rgba(255, 255, 255, 0.14); }
body[data-bs-theme='dark'] .menu-separator.has-label { background: none; }
body[data-bs-theme='dark'] .menu-separator.has-label span { color: rgba(255, 255, 255, 0.5); }

#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;
    position: relative;
}

#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;
    padding-left: 2rem;        /* espaço pro ícone de lupa */
    padding-right: 2rem;       /* espaço pro botão limpar */
}

/* Ícone de lupa à esquerda do input */
#sidebar-wrapper .sidebar-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.15s ease;
}
#sidebar-wrapper .sidebar-search-wrap:focus-within .sidebar-search-icon {
    color: var(--app-accent, #0d6efd);
}

/* Botão limpar à direita — aparece APENAS quando há texto (sem .has-text fica display:none).
   !important garante que nenhuma regra global de <button> ou Bootstrap sobreponha. */
#sidebar-wrapper .sidebar-search-wrap > .sidebar-search-clear {
    position: absolute !important;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    font-size: 0.85rem;
    border-radius: 50% !important;
    line-height: 1;
    display: none !important;
}
#sidebar-wrapper .sidebar-search-wrap.has-text > .sidebar-search-clear {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
#sidebar-wrapper .sidebar-search-clear:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

body[data-bs-theme='dark'] #sidebar-wrapper .sidebar-search-icon { color: #64748b; }
body[data-bs-theme='dark'] #sidebar-wrapper .sidebar-search-clear { color: #64748b; }
body[data-bs-theme='dark'] #sidebar-wrapper .sidebar-search-clear:hover { color: #f87171; background: rgba(248, 113, 113, 0.12); }

/* Esconde o "x" nativo dos inputs type=search (cada browser tem o seu) */
#sidebar-wrapper #sidebar-menu-search::-webkit-search-cancel-button { display: none; }
#sidebar-wrapper #sidebar-menu-search::-ms-clear { display: none; }

/* ========================================
   PWA — banner de instalação customizado
   Aparece no rodapé quando Chrome/Edge dispara beforeinstallprompt
   ======================================== */
#pwa-install-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    z-index: 9999;
    padding: 0.75rem 1rem;
    max-width: 480px;
    width: calc(100% - 2rem);
    animation: pwaSlideUp 0.25s ease-out;
}
@keyframes pwaSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.pwa-banner-icon {
    font-size: 1.6rem;
    color: var(--app-accent, #0d6efd);
    flex-shrink: 0;
}
.pwa-banner-text {
    flex: 1;
    min-width: 0;
}
.pwa-banner-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f2937;
}
.pwa-banner-sub {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.1rem;
    line-height: 1.3;
}
.pwa-banner-close {
    background: transparent;
    border: 0;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
}
.pwa-banner-close:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); }

body[data-bs-theme='dark'] #pwa-install-banner {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.25);
    color: #e6edf5;
}
body[data-bs-theme='dark'] .pwa-banner-title { color: #f1f5f9; }
body[data-bs-theme='dark'] .pwa-banner-sub { color: #94a3b8; }
body[data-bs-theme='dark'] .pwa-banner-icon { color: #60a5fa; }

/* ========================================
   MOBILE BOTTOM NAV — só em telas <=768px
   5 slots: Início | Turmas | Lançar (FAB central) | Buscar | Menu (drawer)
   Drawer mobile reutiliza #sidebar-wrapper como off-canvas.
   ======================================== */
#mobile-bottom-nav { display: none; }
#mobile-drawer-overlay { display: none; }

@media (max-width: 768px) {
    /* ============================================================
       TOOLBAR CRUD no celular: o colapso do Bootstrap virava um
       sanduíche VAZIO ocupando um bloco inteiro (e os botões, quando
       abriam, empilhavam na vertical). No celular a toolbar mostra os
       botões DIRETO, em linha, um pouco menores — vale para TODAS as
       telas (o esqueleto é o mesmo).
       ============================================================ */
    #formNavbar .navbar-toggler { display: none !important; }
    #formNavbar #navbarMenu.collapse { display: block !important; }
    #formNavbar .navbar-nav {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    #formNavbar .form-toolbar-link-content i { font-size: 1.25rem !important; }
    #formNavbar .form-toolbar-link-content span { font-size: 0.68rem; }
    #formNavbar .nav-link.form-toolbar-link { padding: 0.15rem 0.4rem !important; }

    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08);
        z-index: 1050;
        padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: center;
        height: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        color: #64748b;
        text-decoration: none;
        font-size: 0.7rem;
        padding: 0.3rem 0.2rem;
        border-radius: 10px;
        transition: color 0.15s ease, background 0.15s ease;
    }
    .mobile-nav-item i {
        font-size: 1.15rem;
    }
    .mobile-nav-item.active {
        color: var(--app-accent, #0d6efd);
    }
    .mobile-nav-item.active i {
        transform: scale(1.05);
    }
    .mobile-nav-item:hover, .mobile-nav-item:active {
        color: var(--app-accent, #0d6efd);
        background: rgba(13, 110, 253, 0.06);
    }

    /* Sidebar vira drawer off-canvas em mobile */
    #sidebar-wrapper {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        z-index: 1060 !important;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 80% !important; max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important; /* altura VISÍVEL real do mobile (exclui a barra inferior do sistema) — evita o "Sair" ficar escondido atrás dela */
        overflow-y: auto;
        box-shadow: 4px 0 16px rgba(15, 23, 42, 0.15);
        display: block !important; /* sobrescreve qualquer display:none legado */
    }
    /* Vence sobre #sidebar-wrapper.hidden { transform: translateX(-100%) } */
    #sidebar-wrapper.mobile-open {
        transform: translateX(0) !important;
    }
    /* Reset da sidebar.hidden em mobile — só usa mobile-open */
    #sidebar-wrapper.hidden:not(.mobile-open) {
        transform: translateX(-100%);
    }

    #mobile-drawer-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 1055;
        display: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    #mobile-drawer-overlay.show {
        display: block;
        opacity: 1;
    }

    /* Trava scroll do body enquanto drawer aberto */
    body.mobile-drawer-active {
        overflow: hidden;
    }

    /* Reserva espaço pro bottom-nav fixo + respiro extra de 20px.
       - .tab-content padding base (cobre Localizar)
       - Form direto (Cadastro) ganha padding extra pra ter o mesmo respiro */
    .scrollable-content-area > .tab-content {
        padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Form direto na tab-pane Cadastro — garante último campo bem visível */
    .scrollable-content-area > .tab-content > .tab-pane > form {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Dark mode */
body[data-bs-theme='dark'] #mobile-bottom-nav {
    background: #1e293b;
    border-top-color: rgba(148, 163, 184, 0.2);
}
body[data-bs-theme='dark'] .mobile-nav-item { color: #94a3b8; }
body[data-bs-theme='dark'] .mobile-nav-item.active,
body[data-bs-theme='dark'] .mobile-nav-item:hover { color: #8ecae6; }

/* ========================================
   MOBILE — Cards cascateados (padrão TURMAS, Funcionarios sub-grades, etc)
   Em mobile, cada card vira accordion: header clicável + chevron rotativo.
   Altura natural (não fixa) + scroll horizontal nas tabelas se necessário.
   Comportamento de auto-expand+scroll do próximo card é controlado por JS
   na própria tela (gancho nas funções selecionarX).
   Usar: adicionar classe .card-mobile-cascade no card pra ativar o padrão.
   ======================================== */
@media (max-width: 768px) {
    /* Headers viram clicáveis (toggle expand/collapse) */
    .card-mobile-cascade > .card-header {
        cursor: pointer;
        user-select: none;
        position: relative;
    }
    .card-mobile-cascade > .card-header::after {
        content: "\f078"; /* fa-chevron-down */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        margin-left: 0.5rem;
        font-size: 0.7rem;
        color: #94a3b8;
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }
    .card-mobile-cascade.card-mobile-collapsed > .card-header::after {
        transform: rotate(-90deg);
    }
    .card-mobile-cascade.card-mobile-collapsed > .card-body {
        display: none;
    }

    /* Altura natural em mobile (substitui o fixo das classes específicas) */
    .card-mobile-cascade .turmas-grade-body,
    #cardEscolas .turmas-grade-body,
    #cardQualifs .turmas-grade-body,
    #cardTurmasFinais .turmas-grade-body {
        height: auto !important;
        max-height: 55vh;
    }

    /* Tabelas internas ganham scroll horizontal preservando legibilidade */
    .card-mobile-cascade .grid-interna,
    .card-mobile-cascade table.table {
        font-size: 0.78rem;
    }

    /* Esconde a última coluna das grids cascateadas (IDs tipo IdEscola,
       IdQualificacao, IdTurma) — em mobile não interessam pro usuário e
       liberam ~90-140px de largura útil. */
    .card-mobile-cascade .grid-interna th:last-child,
    .card-mobile-cascade .grid-interna td:last-child {
        display: none;
    }

    /* Header info: contexto do pai selecionado (escola/qualif) — JS preenche */
    .card-header-context {
        display: block;
        font-size: 0.7rem;
        color: #64748b;
        font-weight: 400;
        margin-top: 0.1rem;
        line-height: 1.1;
    }
    .card-mobile-cascade > .card-header h6 {
        text-align: left !important;
    }
}

body[data-bs-theme='dark'] .card-mobile-cascade > .card-header::after { color: #64748b; }
body[data-bs-theme='dark'] .card-header-context { color: #94a3b8; }

/* Em mobile, esconde o sanduíche superior global (#menu-toggle) — a função
   dele (abrir o sidebar/menu) já é coberta pelo botão "Menu" no bottom-nav.
   Evita confusão de ter 2 toggles de menu na tela.
   Também esconde o botão "Atalhos" — atalhos de teclado não fazem sentido
   em mobile (sem teclado físico). */
@media (max-width: 768px) {
    #menu-toggle { display: none !important; }
    .bt-atalhos-info { display: none !important; }

    /* Esconde tooltips do TinyMCE em mobile — touch não tem hover, ficam presos */
    .tox-tooltip,
    .tox-tooltip__arrow,
    .tox-tooltip__body {
        display: none !important;
    }
}

/* Rodapé do drawer mobile (botão Sair). Escondido em desktop. */
#mobile-sidebar-footer { display: none; }

@media (max-width: 768px) {
    #mobile-sidebar-footer {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        margin-top: auto; /* empurra pro fundo do flex column */
        background: rgba(248, 250, 252, 0.6);
    }
    .mobile-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.55rem 0.85rem;
        background: rgba(100, 116, 139, 0.08);
        border: 1px solid rgba(100, 116, 139, 0.22);
        border-radius: 10px;
        color: #475569 !important;
        font-weight: 500;
        font-size: 0.85rem;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-sidebar-close:hover, .mobile-sidebar-close:active {
        background: rgba(100, 116, 139, 0.14);
        color: #1e293b !important;
    }
    .mobile-sidebar-close i {
        font-size: 0.9rem;
    }
    .mobile-sidebar-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.7rem 0.85rem;
        background: rgba(220, 53, 69, 0.08);
        border: 1px solid rgba(220, 53, 69, 0.25);
        border-radius: 10px;
        color: #b02a37 !important;
        font-weight: 600;
        font-size: 0.88rem;
        text-decoration: none;
        cursor: pointer;
    }
    .mobile-sidebar-logout:hover, .mobile-sidebar-logout:active {
        background: rgba(220, 53, 69, 0.15);
        color: #842029 !important;
    }
    .mobile-sidebar-logout i {
        font-size: 0.95rem;
    }
    /* Garante que o sidebar seja flex column pra margin-top:auto funcionar */
    #sidebar-wrapper {
        display: flex !important;
        flex-direction: column;
    }
}

body[data-bs-theme='dark'] #mobile-sidebar-footer {
    background: rgba(15, 23, 42, 0.5);
    border-top-color: rgba(148, 163, 184, 0.2);
}
body[data-bs-theme='dark'] .mobile-sidebar-close {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8 !important;
}
body[data-bs-theme='dark'] .mobile-sidebar-close:hover,
body[data-bs-theme='dark'] .mobile-sidebar-close:active {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1 !important;
}
body[data-bs-theme='dark'] .mobile-sidebar-logout {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.35);
    color: #f8a4ad !important;
}
body[data-bs-theme='dark'] .mobile-sidebar-logout:hover,
body[data-bs-theme='dark'] .mobile-sidebar-logout:active {
    background: rgba(220, 53, 69, 0.25);
    color: #ffcfd4 !important;
}


#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-hover);
    background-color: var(--sidebar-hover-bg);
    border-left-color: var(--sidebar-active-color);
    border-left-width: 3px;
    font-weight: 600;
    transition: background-color 0.15s, color 0.15s, border-left-color 0.15s;
}

#sidebar-wrapper .list-group-item.active {
    color: var(--sidebar-active-color);
    font-weight: 700;
    background-color: transparent;
    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: transparent;
    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;
}

/* Mesmo estilo do mark.app-highlight da aba Localizar — purple, badge com border */
#sidebar-wrapper .menu-search-highlight {
    display: inline-block;
    background-color: rgba(111, 66, 193, 0.13);
    color: #4b2fa0;
    padding: 0 2px;
    margin: 0;
    border: 1px solid rgba(111, 66, 193, 0.40);
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.15;
    vertical-align: baseline;
}

body[data-bs-theme='dark'] #sidebar-wrapper .menu-search-highlight {
    background-color: rgba(177, 151, 252, 0.25);
    color: #d9c8ff;
    border-color: rgba(177, 151, 252, 0.45);
}

/* 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;
}

/* ========================================
   11b. CORES DE FUNDO POR GRUPO PAI
   Cada raiz do menu (1-8) tem uma cor de fundo
   sutil ao expandir, ajudando a identificar
   visualmente a qual grupo o item pertence.
   ======================================== */
.submenu-container.show[data-pai="1"] { background-color: rgba(220, 53, 69, 0.04); }  /* ADMINISTRADOR — vermelho */
.submenu-container.show[data-pai="2"] { background-color: rgba(13, 110, 253, 0.04); } /* CADASTROS — azul */
.submenu-container.show[data-pai="3"] { background-color: rgba(25, 135, 84, 0.05); }  /* COORDENAÇÃO — verde */
.submenu-container.show[data-pai="4"] { background-color: rgba(255, 193, 7, 0.07); }  /* SECRETARIA — amarelo */
.submenu-container.show[data-pai="5"] { background-color: rgba(13, 202, 240, 0.06); } /* PROFESSORES — ciano */
.submenu-container.show[data-pai="6"] { background-color: rgba(71, 85, 105, 0.07); }  /* GERENTE — slate (cinza-azulado) */
.submenu-container.show[data-pai="7"] { background-color: rgba(111, 66, 193, 0.05); } /* COORD. MUN — roxo */
.submenu-container.show[data-pai="8"] { background-color: rgba(121, 85, 72, 0.08); }  /* RH — marrom */

/* Dark mode — mesmas hues, opacidade ajustada pra ficar sutil sobre fundo escuro */
body[data-bs-theme='dark'] .submenu-container.show[data-pai="1"] { background-color: rgba(255, 99, 132, 0.05); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="2"] { background-color: rgba(110, 168, 254, 0.05); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="3"] { background-color: rgba(75, 192, 132, 0.05); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="4"] { background-color: rgba(255, 193, 7, 0.06); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="5"] { background-color: rgba(110, 226, 250, 0.05); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="6"] { background-color: rgba(173, 181, 189, 0.06); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="7"] { background-color: rgba(155, 121, 222, 0.05); }
body[data-bs-theme='dark'] .submenu-container.show[data-pai="8"] { background-color: rgba(161, 130, 113, 0.07); }

/* Pai EXPANDIDO ganha fundo mais saturado da MESMA cor + borda lateral colorida.
   #sidebar-wrapper prefixado pra vencer a regra base que zera o background. */
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="1"] { background-color: rgba(220, 53, 69, 0.13); border-left-color: rgba(220, 53, 69, 0.7); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="2"] { background-color: rgba(13, 110, 253, 0.13); border-left-color: rgba(13, 110, 253, 0.7); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="3"] { background-color: rgba(25, 135, 84, 0.14); border-left-color: rgba(25, 135, 84, 0.7); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="4"] { background-color: rgba(255, 193, 7, 0.18); border-left-color: rgba(255, 193, 7, 0.85); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="5"] { background-color: rgba(13, 202, 240, 0.15); border-left-color: rgba(13, 202, 240, 0.75); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="6"] { background-color: rgba(71, 85, 105, 0.13); border-left-color: rgba(71, 85, 105, 0.8); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="7"] { background-color: rgba(111, 66, 193, 0.14); border-left-color: rgba(111, 66, 193, 0.7); }
#sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="8"] { background-color: rgba(121, 85, 72, 0.18); border-left-color: rgba(121, 85, 72, 0.85); }

body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="1"] { background-color: rgba(255, 99, 132, 0.08); border-left-color: rgba(255, 99, 132, 0.7); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="2"] { background-color: rgba(110, 168, 254, 0.08); border-left-color: rgba(110, 168, 254, 0.7); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="3"] { background-color: rgba(75, 192, 132, 0.08); border-left-color: rgba(75, 192, 132, 0.7); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="4"] { background-color: rgba(255, 193, 7, 0.10); border-left-color: rgba(255, 193, 7, 0.85); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="5"] { background-color: rgba(110, 226, 250, 0.08); border-left-color: rgba(110, 226, 250, 0.75); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="6"] { background-color: rgba(173, 181, 189, 0.09); border-left-color: rgba(173, 181, 189, 0.75); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="7"] { background-color: rgba(155, 121, 222, 0.08); border-left-color: rgba(155, 121, 222, 0.7); }
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.expanded[data-pai="8"] { background-color: rgba(161, 130, 113, 0.12); border-left-color: rgba(161, 130, 113, 0.8); }

/* Pai expandido SEM filho ativo: zera a borda lateral (mantém só o fundo). */
#sidebar-wrapper .list-group-item.has-submenu.expanded:not(:has(+ .submenu-container .list-group-item.active)) {
    border-left-color: transparent !important;
}

/* Sidebar COLAPSADO (modo só ícones): zera as cores de fundo dos grupos. */
#sidebar-wrapper.collapsed .list-group-item.has-submenu.expanded,
#sidebar-wrapper.collapsed .submenu-container.show {
    background-color: transparent !important;
    border-left-color: transparent !important;
}

/* 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 */
/* PAI cujo descendente é a tela atual — destaque sutil mesmo fechado.
   Importante pra usuário sempre saber em qual área está navegando, mesmo
   com accordion exclusivo fechando os outros. */
#sidebar-wrapper .list-group-item.has-submenu.has-active-child:not(.expanded) {
    font-weight: 600;
    color: var(--app-accent, #0d6efd) !important;
}
#sidebar-wrapper .list-group-item.has-submenu.has-active-child:not(.expanded) > i:first-child {
    color: var(--app-accent, #0d6efd);
}
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.has-active-child:not(.expanded) {
    color: #8ecae6 !important;
}
body[data-bs-theme='dark'] #sidebar-wrapper .list-group-item.has-submenu.has-active-child:not(.expanded) > i:first-child {
    color: #8ecae6;
}

#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,
.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'] .generic-btn:focus,
body[data-bs-theme='dark'] .generic-btn:focus-visible {
    outline-color: #fff !important;
}

/* Navbar-toggler (sanduíche da toolbar CRUD em mobile) NÃO recebe o outline
   preto do foco — visual fica feio porque é um ícone pequeno. Mantém focável
   pra acessibilidade (com :focus-visible só se navegar por teclado). */
.navbar-toggler:focus,
.navbar-toggler:focus-visible,
.navbar-toggler:active {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
}

/* Light mode: força o ícone do sanduíche (navbar-toggler) a ter barras escuras
   visíveis. O default do Bootstrap depende de .navbar-light/.navbar-dark estarem
   no pai; em toolbar CRUD às vezes não tem esse contexto e o SVG fica branco. */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(33,37,41,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Dark mode: o navbar-toggler da toolbar CRUD ganha cores adequadas ao tema */
body[data-bs-theme='dark'] .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 163, 184, 0.3);
}
body[data-bs-theme='dark'] .navbar-toggler-icon {
    /* Em dark, redesenha o SVG com traço claro (sem filter pra não afetar mais nada) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(226,232,240,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    filter: none;
}

/* TinyMCE no dark — garante que TODOS os ícones SVG da toolbar fiquem visíveis
   (oxide-dark às vezes deixa o botão "..." invisível) */
body[data-bs-theme='dark'] .tox .tox-tbtn svg,
body[data-bs-theme='dark'] .tox .tox-toolbar svg,
body[data-bs-theme='dark'] .tox .tox-toolbar__primary svg,
body[data-bs-theme='dark'] .tox .tox-toolbar__overflow svg {
    fill: #cbd5e1 !important;
}
body[data-bs-theme='dark'] .tox .tox-tbtn:hover svg,
body[data-bs-theme='dark'] .tox .tox-tbtn:focus svg {
    fill: #f1f5f9 !important;
}
body[data-bs-theme='dark'] .tox .tox-tbtn {
    color: #cbd5e1 !important;
}
/* TinyMCE no dark — estado disabled (readonly/view mode) precisa de mais contraste,
   senão os ícones somem completamente. Sobe a opacidade dos SVGs/labels. */
body[data-bs-theme='dark'] .tox .tox-tbtn--disabled,
body[data-bs-theme='dark'] .tox .tox-tbtn--disabled:hover,
body[data-bs-theme='dark'] .tox .tox-tbtn[disabled],
body[data-bs-theme='dark'] .tox .tox-tbtn[aria-disabled="true"] {
    opacity: 0.55 !important;
}
body[data-bs-theme='dark'] .tox .tox-tbtn--disabled svg,
body[data-bs-theme='dark'] .tox .tox-tbtn[disabled] svg,
body[data-bs-theme='dark'] .tox .tox-tbtn[aria-disabled="true"] svg {
    fill: #94a3b8 !important;
}

/* dmx-lookup: foco no item NÃO leva borda preta — visual de seleção
   já é dado pelo background-color (consistente com select-search). */
.lookup-item:focus,
.lookup-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   10c. DENSIDADE DOS ITENS DE dmx-lookup
   ----------------------------------------
   O dmx-lookup vem com itens muito altos
   por padrão — desperdiça espaço vertical.
   Aqui alinhamos com o .dropdown-item do
   dmx-select (padding 0.5rem 1.25rem,
   fonte 0.9rem) pra manter consistência
   visual entre lookups e selects.
   ======================================== */
.lookup-item {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    min-height: 0 !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);
}

/* Tooltips do Bootstrap acima de .sticky-top-elements e cards (que criam
   stacking contexts). Sem isso, o tooltip dum botão da toolbar fica clipado
   pelo card título (pagTitulo) que está na frente no DOM. */
.tooltip {
    z-index: 1100 !important;
    /* O balão NÃO pode receber mouse: quando abre sob o cursor (placement
       bottom nas toolbars), ele "roubava" o hover do ícone -> mouseleave ->
       fecha -> mouseenter -> abre -> LOOP de piscadas. Tooltips do sistema
       são só informativos (nada clicável dentro). */
    pointer-events: none !important;
}

/* Á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.75rem alinha INPUT do form com a borda esquerda da aba "Cadastro".
       Cálculo: nav-tabs tem padding-left:1.1rem; form input precisa estar na mesma X.
       Form X = tab-content padding-left + .row margin-left (-0.75rem) + .col padding-left (0.1rem).
       Pra form X = 1.1rem: tab-content = 1.1 + 0.75 - 0.1 = 1.75rem. */
    padding-left: 1.75rem !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;
    /* Alinha o início do ícone da aba com o início da borda esquerda do input ID embaixo.
       Valor empírico — 1rem ajustado visualmente. */
    padding-left: 1.1rem;
}

/* 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;
}

/* ========================================================================
   Destaque do texto digitado nos filtros da aba Localizar (todas as telas).
   Cor PURPLE Bootstrap (#6f42c1) + font-weight médio — sai do azul padrão
   "todo sistema usa" e dá identidade visual moderna. Dark mode com purple
   mais claro pra contraste.
   ======================================================================== */
.tab-pane[id*='Localizar'] .table-filters input.form-control,
.tab-pane[id*='Localizar'] .table-filters input.form-control:focus,
.tab-pane[id*='localizar'] .table-filters input.form-control,
.tab-pane[id*='localizar'] .table-filters input.form-control:focus,
.tab-pane[id*='abaLocalizar'] .table-filters input.form-control,
.tab-pane[id*='abaLocalizar'] .table-filters input.form-control:focus {
    color: #6f42c1 !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
}
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] .table-filters input.form-control,
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] .table-filters input.form-control:focus,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] .table-filters input.form-control,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] .table-filters input.form-control:focus,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] .table-filters input.form-control,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] .table-filters input.form-control:focus {
    color: #b197fc !important;
}

/* ========================================================================
   X (limpar) CUSTOMIZADO e CROSS-BROWSER nos inputs de busca (type=search).
   O X nativo (::-webkit-search-cancel-button) só existe no Chrome/Edge — o
   Firefox NUNCA teve. Por isso usamos um "✕" nosso (injetado por JS em
   global_scripts.js: .filtro-clear-wrap > input + .filtro-clear-x), que fica
   idêntico em todos os navegadores. Aqui só o estilo. */
.filtro-clear-wrap {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;   /* não estoura em containers flex */
}
.filtro-clear-wrap > input {
    width: 100%;
    padding-right: 22px !important;   /* espaço pro X não cobrir o texto */
}
/* Esconde o X NATIVO do Chrome/Edge onde já temos o nosso (evita X duplo) */
.filtro-clear-wrap > input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* X limpo, SEM bolinha: só o glifo. Vermelho FRACO por padrão (já sinaliza
   "limpar") e FORTE + levemente maior no hover. Centralizado na vertical de
   forma robusta (top/bottom:0 + flex) — independe da altura do input. */
.filtro-clear-x {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    display: none;                    /* aparece só com .has-value */
    font-size: 0;                     /* esconde o glifo × de texto (injetado no JS) */
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    z-index: 3;
}
.filtro-clear-wrap.has-value > .filtro-clear-x {
    display: block;
}
/* O X é DESENHADO com 2 linhas cruzadas — centragem geométrica perfeita,
   sem depender da métrica/baseline da fonte. */
.filtro-clear-x::before,
.filtro-clear-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.6px;
    border-radius: 1px;
    background: rgba(220, 53, 69, 0.55);   /* vermelho FRACO */
    transition: background 0.12s ease;
}
.filtro-clear-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.filtro-clear-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.filtro-clear-x:hover {
    transform: translateY(-50%) scale(1.2);
}
.filtro-clear-x:hover::before,
.filtro-clear-x:hover::after {
    background: #dc3545;                    /* vermelho FORTE = vai limpar */
}
body[data-bs-theme='dark'] .filtro-clear-x::before,
body[data-bs-theme='dark'] .filtro-clear-x::after {
    background: rgba(255, 107, 107, 0.6);
}
body[data-bs-theme='dark'] .filtro-clear-x:hover::before,
body[data-bs-theme='dark'] .filtro-clear-x:hover::after {
    background: #ff6b6b;
}

/* Selects nos filtros do Localizar: SEMPRE alinhados à esquerda (default
   do browser). Forçar center não funciona bem com o chevron — text-align
   center desloca visualmente por causa do padding-right do triângulo. */
.tab-pane[id*='Localizar'] .table-filters select.form-select,
.tab-pane[id*='localizar'] .table-filters select.form-select,
.tab-pane[id*='abaLocalizar'] .table-filters select.form-select {
    text-align: left !important;
    text-align-last: left !important;
}

/* select-search (ex.: filtro de Status) nos filtros da aba Localizar: respeitar a
   ALTURA/fonte dos inputs form-control-sm dos demais filtros. SÓ na aba Localizar —
   nas telas normais o select-search mantém a altura padrão dele (mais alta). */
.tab-pane[id*='Localizar'] .table-filters .ss-wrapper,
.tab-pane[id*='localizar'] .table-filters .ss-wrapper,
.tab-pane[id*='abaLocalizar'] .table-filters .ss-wrapper {
    margin: 0 !important;
}
.tab-pane[id*='Localizar'] .table-filters .ss-wrapper .ss-display,
.tab-pane[id*='localizar'] .table-filters .ss-wrapper .ss-display,
.tab-pane[id*='abaLocalizar'] .table-filters .ss-wrapper .ss-display {
    height: 24px !important;            /* MESMA altura dos inputs/selects de filtro (regra abaixo) */
    min-height: 0 !important;           /* zera o min-height base do .form-select (~35px) */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 1.5rem !important;   /* espaço do chevron */
    line-height: 1.2 !important;
    font-size: 0.8125rem !important;
    background-size: 10px 8px;
    align-items: center !important;
}

/* Select + input na MESMA altura nos filtros do Localizar (global).
   Bootstrap default deixa form-select-sm 2-3px maior que form-control-sm.
   Pinamos os dois em 24px (compacto) pra ficar uniforme em todas as telas. */
.tab-pane[id*='Localizar'] .table-filters select.form-select-sm,
.tab-pane[id*='localizar'] .table-filters select.form-select-sm,
.tab-pane[id*='abaLocalizar'] .table-filters select.form-select-sm,
.tab-pane[id*='Localizar'] .table-filters input.form-control-sm,
.tab-pane[id*='localizar'] .table-filters input.form-control-sm,
.tab-pane[id*='abaLocalizar'] .table-filters input.form-control-sm {
    height: 24px !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2 !important;
    font-size: 0.8125rem !important;
}
.tab-pane[id*='Localizar'] .table-filters select.form-select-sm,
.tab-pane[id*='localizar'] .table-filters select.form-select-sm,
.tab-pane[id*='abaLocalizar'] .table-filters select.form-select-sm {
    padding-right: 1.5rem !important;
    background-size: 10px 8px;
}

/* Inputs do filtro: alinhamento aplicado por JS via classes utilitárias.
   Força com !important pra vencer o CSS default do Bootstrap. */
.tab-pane[id*='Localizar'] .table-filters input.form-control.text-center,
.tab-pane[id*='localizar'] .table-filters input.form-control.text-center,
.tab-pane[id*='abaLocalizar'] .table-filters input.form-control.text-center {
    text-align: center !important;
}
.tab-pane[id*='Localizar'] .table-filters input.form-control.text-end,
.tab-pane[id*='localizar'] .table-filters input.form-control.text-end,
.tab-pane[id*='abaLocalizar'] .table-filters input.form-control.text-end {
    text-align: right !important;
}

/* ========================================================================
   Zebra-stripe baseado em VISIBILIDADE pras grades Localizar.
   Cancela TODAS as regras nth-child/nth-of-type globais do projeto (linhas
   2227-2239) e do Bootstrap dentro da aba Localizar, e aplica zebra via
   classe `.app-stripe-on` que o JS aplica somente nas linhas visíveis.
   Especificidade alta com [id] + classes pra vencer rules globais.
   ======================================================================== */
.tab-pane[id*='Localizar'] table.table-striped tbody tr:nth-child(odd) td,
.tab-pane[id*='Localizar'] table.table-striped tbody tr:nth-child(even) td,
.tab-pane[id*='Localizar'] table.table-striped > tbody > tr:nth-of-type(odd) > *,
.tab-pane[id*='localizar'] table.table-striped tbody tr:nth-child(odd) td,
.tab-pane[id*='localizar'] table.table-striped tbody tr:nth-child(even) td,
.tab-pane[id*='localizar'] table.table-striped > tbody > tr:nth-of-type(odd) > *,
.tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:nth-child(odd) td,
.tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:nth-child(even) td,
.tab-pane[id*='abaLocalizar'] table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #ffffff !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-accent-bg: transparent !important;
    box-shadow: none !important;
}
.tab-pane[id*='Localizar'] table.table-striped tbody tr.app-stripe-on td,
.tab-pane[id*='localizar'] table.table-striped tbody tr.app-stripe-on td,
.tab-pane[id*='abaLocalizar'] table.table-striped tbody tr.app-stripe-on td {
    background-color: var(--table-odd-bg, #f2f2f2) !important;
}
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr:nth-child(odd) td,
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr:nth-child(even) td,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr:nth-child(odd) td,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr:nth-child(even) td,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:nth-child(odd) td,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:nth-child(even) td {
    background-color: var(--bs-body-bg, #1a2733) !important;
}
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr.app-stripe-on td,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr.app-stripe-on td,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr.app-stripe-on td {
    background-color: #1f2c39 !important;
}

/* HOVER nas grades Localizar — restaurado com a mesma especificidade do
   striping pra vencer (vem DEPOIS no source, e mesma specifity = source order). */
.tab-pane[id*='Localizar'] table.table-striped tbody tr:hover td,
.tab-pane[id*='localizar'] table.table-striped tbody tr:hover td,
.tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
    color: #000 !important;
    cursor: default !important;
}
/* DARK MODE — hover: tom âmbar escuro pra não confundir com selected-row (azul)
   e texto claro pra legibilidade (o color:#000 do bloco acima quebra contraste). */
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr:hover td,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr:hover td,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:hover td {
    background-color: #5a4422 !important;
    color: #f5ecd6 !important;
}
/* DARK MODE — highlight chip por cima do hover: clareia fundo/borda/texto */
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr:hover mark.app-highlight,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr:hover mark.app-highlight,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr:hover mark.app-highlight {
    background-color: rgba(255, 224, 130, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(255, 224, 130, 0.55) !important;
}

/* SELEÇÃO (.selected-row aplicada via handler global) — vence hover e striping */
.tab-pane[id*='Localizar'] table.table-striped tbody tr.selected-row td,
.tab-pane[id*='Localizar'] table.table-striped tbody tr.selected-row:hover td,
.tab-pane[id*='localizar'] table.table-striped tbody tr.selected-row td,
.tab-pane[id*='localizar'] table.table-striped tbody tr.selected-row:hover td,
.tab-pane[id*='abaLocalizar'] table.table-striped tbody tr.selected-row td,
.tab-pane[id*='abaLocalizar'] table.table-striped tbody tr.selected-row:hover td {
    background-color: #98c1ff !important;
    color: inherit !important;
}
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr.selected-row td,
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] table.table-striped tbody tr.selected-row:hover td,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr.selected-row td,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] table.table-striped tbody tr.selected-row:hover td,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr.selected-row td,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] table.table-striped tbody tr.selected-row:hover td {
    background-color: #1e4976 !important;
    color: #ffffff !important;
}

/* ========================================================================
   Grades internas das Turmas (Cadastro tab) — mesma UX da aba Localizar:
   cor purple no input do filtro, striping respeitando display:none, hover
   herdado do global. Escopo: tabelas `.grid-interna`.
   ======================================================================== */
.grid-interna .table-filters input.form-control,
.grid-interna .table-filters input.form-control:focus,
input.turmas-filter-input,
input.turmas-filter-input:focus {
    color: #6f42c1 !important;
    caret-color: #6f42c1 !important;
}
body[data-bs-theme='dark'] .grid-interna .table-filters input.form-control,
body[data-bs-theme='dark'] .grid-interna .table-filters input.form-control:focus,
body[data-bs-theme='dark'] input.turmas-filter-input,
body[data-bs-theme='dark'] input.turmas-filter-input:focus {
    color: #b197fc !important;
    caret-color: #b197fc !important;
}
/* Placeholder mais discreto no dark — texto digitado em purple claro,
   placeholder em cinza-azulado bem dim pra não competir visualmente. */
body[data-bs-theme='dark'] .grid-interna .table-filters input.form-control::placeholder,
body[data-bs-theme='dark'] input.turmas-filter-input::placeholder,
body[data-bs-theme='dark'] .tab-pane[id*='Localizar'] .table-filters input.form-control::placeholder,
body[data-bs-theme='dark'] .tab-pane[id*='localizar'] .table-filters input.form-control::placeholder,
body[data-bs-theme='dark'] .tab-pane[id*='abaLocalizar'] .table-filters input.form-control::placeholder {
    color: rgba(177, 151, 252, 0.38) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Striping: neutraliza nth-child SOMENTE em tabelas cascata, E SOMENTE
   em linhas NÃO selecionadas. Linhas com checkbox checked não recebem
   a regra transparent → a regra de seleção azul (#98c1ff) aplica limpo
   sem briga de especificidade. */
.grid-interna.table-striped:has(input.row-cascata-check) tbody tr:not(:has(input.row-cascata-check:checked)):nth-child(odd) td,
.grid-interna.table-striped:has(input.row-cascata-check) tbody tr:not(:has(input.row-cascata-check:checked)):nth-child(even) td,
.grid-interna.table-striped:has(input.row-cascata-check) > tbody > tr:not(:has(input.row-cascata-check:checked)):nth-of-type(odd) > *,
.grid-interna.table-striped:has(input.row-cascata-check) > tbody > tr:not(:has(input.row-cascata-check:checked)):nth-of-type(even) > * {
    background-color: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
}
.grid-interna.table-striped:has(input.row-cascata-check) tbody tr.app-stripe-on:not(:has(input.row-cascata-check:checked)) td {
    background-color: rgba(0, 0, 0, 0.045) !important;
}
body[data-bs-theme='dark'] .grid-interna.table-striped:has(input.row-cascata-check) tbody tr.app-stripe-on:not(:has(input.row-cascata-check:checked)) td {
    background-color: var(--table-odd-bg) !important;
}

/* Seleção via .selected-row em sub-grades .grid-interna (Cursos→Qualifs,
   Funcionários→Categorias/Filhos/Documentos, AnoLetivo→Fases, etc).
   Especificidade alta o bastante pra vencer regras de striping. */
.grid-interna.table-striped tbody tr.selected-row td,
.grid-interna.table-striped tbody tr.selected-row:hover td {
    background-color: #98c1ff !important;
    color: #052c65 !important;
    font-weight: 600 !important;
}
body[data-bs-theme='dark'] .grid-interna.table-striped tbody tr.selected-row td,
body[data-bs-theme='dark'] .grid-interna.table-striped tbody tr.selected-row:hover td {
    background-color: #1e4976 !important;
    color: #ffffff !important;
}

/* HOVER em grid-interna — restaura o gold do tema (a regra de striping acima
   tem specificity maior que a global de hover e estava apagando o efeito). */
.grid-interna.table-striped tbody tr:hover td {
    background-color: var(--table-hover-bg) !important;
    color: #000 !important;
    cursor: default !important;
}
body[data-bs-theme='dark'] .grid-interna.table-striped tbody tr:hover td {
    background-color: #5a4422 !important;
    color: #f5ecd6 !important;
}
/* Highlight chip por cima do hover em dark */
body[data-bs-theme='dark'] .grid-interna.table-striped tbody tr:hover mark.app-highlight {
    background-color: rgba(255, 224, 130, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(255, 224, 130, 0.55) !important;
}

/* SELEÇÃO via :has(.row-cascata-check:checked) — restaura azul. Specificity
   precisa vencer a do striping (que ganhou +1 class quando virou scoped a
   tabelas cascade). Solução: replicar o mesmo prefixo `:has(input.row-cascata-check)`
   pra match a especificidade do striping E ainda adicionar :checked no row level. */
.grid-interna.table-striped:has(input.row-cascata-check) tbody tr:has(input.row-cascata-check:checked) > *,
.grid-interna.table-striped:has(input.row-cascata-check) tbody tr:has(input.row-cascata-check:checked):hover > * {
    background-color: #98c1ff !important;
    color: #052c65 !important;
    font-weight: 600 !important;
}
body[data-bs-theme='dark'] .grid-interna.table-striped:has(input.row-cascata-check) tbody tr:has(input.row-cascata-check:checked) > *,
body[data-bs-theme='dark'] .grid-interna.table-striped:has(input.row-cascata-check) tbody tr:has(input.row-cascata-check:checked):hover > * {
    background-color: #1e4976 !important;
    color: #ffffff !important;
}

/* ========================================================================
   Destaque do trecho casado no resultado da pesquisa (Localizar).
   Aplicado via JS no filtro live-local — envolve a parte que bate no
   filtro com <mark class="app-highlight">. Estilo BADGE sutil:
   inline-block + line-height compacto + padding equilibrado + border-radius
   arredondado. Garante altura simétrica top/bottom.
   ======================================================================== */
/* ========================================================================
   CARD FOCADO — destaque visual no card cuja grade está "ativa" (última
   interagida via click, setas OU foco em input do filtro). Borda esquerda
   estilo Migração (inset shadow pra não deslocar layout). Cor: Bootstrap
   primary (#0d6efd) — coerente, distintiva, não compete com seleção azul.
   ======================================================================== */
.card.grade-focada {
    box-shadow: -4px 0 0 0 #6f42c1, 0 2px 6px rgba(111, 66, 193, 0.10) !important;
    transition: box-shadow 0.15s ease-in-out;
}
body[data-bs-theme='dark'] .card.grade-focada {
    box-shadow: -4px 0 0 0 #b197fc, 0 2px 6px rgba(177, 151, 252, 0.20) !important;
}

/* Remove a borda preta default do browser quando o TR recebe foco
   programático (tabindex=-1 + focus()) — usado pra capturar Space/Enter
   em modais sem que o input visível continue recebendo as teclas. */
table tbody tr[tabindex]:focus,
table tbody tr[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

mark.app-highlight {
    display: inline-block;
    background-color: rgba(111, 66, 193, 0.13);
    color: #4b2fa0;
    padding: 0 1px;
    margin: 0;
    border: 1px solid rgba(111, 66, 193, 0.40);
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.15;
    vertical-align: baseline;
}
body[data-bs-theme='dark'] mark.app-highlight {
    background-color: rgba(177, 151, 252, 0.25);
    color: #d9c8ff;
}

.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 de "lista vazia" — SEMPRE centralizada vertical e horizontalmente.
   :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.
   `flex: 1 1 auto` faz a mensagem ocupar TODO o espaço disponível quando o
   pai é flex column (caso típico: tables-card-full, modais de seleção, etc).
   `min-height: 140px` garante centralização vertical mesmo fora de flex. */
.empty-state-message:not(.d-none) {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 1.5rem !important;
  background-color: transparent !important;
  color: #6c757d !important;
  min-height: 140px;
  width: 100%;
  box-sizing: border-box;
}
/* Override pro contexto antigo de tables-card-full: padding maior + sem min-height */
.table-card-full .empty-state-message:not(.d-none) {
  padding: 2rem !important;
  min-height: 0 !important;
}

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

/* ============================================================
   PADRÃO GLOBAL DE SUB-GRADE — empty-state centralizado SEMPRE
   Pedido recorrente do user desde o primeiro projeto:
   "a mensagem do body da grade deve ficar centralizada sempre"
   ============================================================
   Pattern HTML estabelecido em Turmas/GradeCurricular:
     <div class="card-body XXX-body" style="padding:0; overflow:hidden;">
       <div style="height:100%; overflow-y:auto;">
         <table>...</table>
         <div class="empty-state-message d-none">...</div>
       </div>
     </div>
   O wrapper interno precisa ser flex-column pra empty-state-message
   (flex:1 1 auto na regra global) expandir e usar align/justify center.
   :has() é suportado em Chrome 105+, Safari 15.4+, Firefox 121+. */
.card-body > div:has(> table):has(> .empty-state-message) {
    display: flex !important;
    flex-direction: column !important;
}

/* Cabeçalho da sub-grade — th com text-align center (horizontal) E
   vertical-align middle (essencial em ths com texto multi-linha como
   "Total Aulas Semanais" / "C.H. 1ª FASE" que quebram em 2 linhas). */
.grid-interna thead th {
    vertical-align: middle !important;
    text-align: center !important;
}

/* 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;
}

/* ============================================================
   GRADES CASCATEADAS — Linha selecionada que PRECISA PERSISTIR
   visualmente (não é limpa pelo handler global de .selected-row).
   Usado quando uma grade-pai filtra os dados de grades-filhas
   (ex: Escola → Qualif → Turma Final na tela de Turmas). O usuário
   precisa enxergar qual linha está ativa mesmo após clicar em
   botões/lookups/qualquer coisa fora da grade.

   Estratégia: o estado da seleção fica num CHECKBOX ESCONDIDO
   dentro da TR (mesmo padrão da tela Faturamento do ControleClientes).
   Como o estado vive no DOM (input.checked), nada externo consegue
   "limpá-lo" como classe poderia. CSS usa `:has(:checked)` pra
   detectar e aplicar o destaque.

   Como derrotar o overlay box-shadow do Bootstrap:
   - Bootstrap pinta células via `box-shadow: inset 0 0 0 9999px
     var(--bs-table-accent-bg)`, que cobre o background-color.
   - Setamos accent-bg = transparent + bg = nossa cor.
   - Especificidade: tr + :has(input.cls:checked) + > * = (0,2,4),
     supera o striped do Bootstrap (0,2,3).

   Uso na tela:
   1) Em cada <tr> da grade, incluir um checkbox escondido:
      <input type="checkbox" class="row-cascata-check" hidden>
   2) Via JS, marcar o checkbox da linha selecionada (e desmarcar
      os das outras):
      tbody.querySelectorAll('.row-cascata-check').forEach(cb => cb.checked = false);
      tbody.children[idx].querySelector('.row-cascata-check').checked = true;
   ============================================================ */
table tbody tr:has(input.row-cascata-check:checked) > *,
table tbody tr:has(input.row-cascata-check:checked):hover > * {
    --bs-table-bg: #98c1ff !important;
    --bs-table-striped-bg: #98c1ff !important;
    --bs-table-hover-bg: #98c1ff !important;
    --bs-table-active-bg: #98c1ff !important;
    --bs-table-bg-state: #98c1ff !important;
    --bs-table-accent-bg: transparent !important;
    background-color: #98c1ff !important;
    color: #052c65 !important;
    font-weight: 600 !important;
}
/* Trave/borda escura na primeira coluna da linha selecionada */
table tbody tr:has(input.row-cascata-check:checked) > *:first-child {
    box-shadow: inset 5px 0 0 0 #0b5ed7 !important;
}
body[data-bs-theme='dark'] table tbody tr:has(input.row-cascata-check:checked) > *,
body[data-bs-theme='dark'] table tbody tr:has(input.row-cascata-check:checked):hover > * {
    --bs-table-bg: #1e4976 !important;
    --bs-table-striped-bg: #1e4976 !important;
    --bs-table-hover-bg: #1e4976 !important;
    --bs-table-active-bg: #1e4976 !important;
    --bs-table-bg-state: #1e4976 !important;
    --bs-table-accent-bg: transparent !important;
    background-color: #1e4976 !important;
    color: #ffffff !important;
}
body[data-bs-theme='dark'] table tbody tr:has(input.row-cascata-check:checked) > *:first-child {
    box-shadow: inset 5px 0 0 0 #6ea8fe !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;
}

/* 5. MOBILE (≤768px): a trava de altura/line-height de 25px acima (itens 1-2) infla
   as linhas quando o texto QUEBRA em telas estreitas (cada linha quebrada herda
   line-height:25px → 2 linhas = 50px, 3 = 75px → "linhas gigantes"). No celular,
   deixamos a linha se ajustar ao conteúdo com line-height normal. Só mobile — o
   desktop continua travado em 25px. Grades com override próprio (#id) não mudam
   (seletor mais específico vence). */
@media (max-width: 768px) {
    table tbody tr,
    table tbody td {
        height: auto !important;
        max-height: none !important;
        line-height: 1.35 !important;
    }
    table tbody td {
        padding-top: 3px !important;
        padding-bottom: 3px !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;
  /* Em scroll vertical (mobile), garante que cobre todo o conteúdo
     e não apenas a viewport — o overlay precisa crescer com o form. */
  min-height: 100%;
}

.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;
}

/* Ícone de AJUDA DE CAMPO (tooltip ao lado de um rótulo/valor). Padrão único do sistema:
   usar com `<i class="fa-solid fa-circle-info field-info-icon" dmx-bs-tooltip="...">`.
   Cinza neutro em repouso (diferencia dos rótulos), azul no hover. */
.field-info-icon {
  margin-left: 0.3rem;
  color: #94a3b8;
  cursor: help;
  font-size: 0.8rem;
  transition: transform .12s ease, color .12s ease;
}
.field-info-icon:hover,
.field-info-icon.field-info-hover { color: var(--bs-primary); transform: scale(1.15); } /* .field-info-hover = hover aplicado via JS quando o ícone está sob um overlay (ver AnoLetivo) */
body[data-bs-theme='dark'] .field-info-icon { color: #8b98a9; }

.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;
}

/* ========================================================================
   ALERTAS/CONFIRMAÇÕES ACIMA DE MODAIS ANINHADOS
   showAlertar/showConfirmar (.app-dialog-backdrop) precisa SEMPRE ficar
   acima de qualquer modal Bootstrap, inclusive modais empilhados (modal
   dentro de modal). Bootstrap usa z-index 1055-1075 progressivos.
   Garante que alertas sejam sempre visíveis em qualquer contexto.
   ======================================================================== */
.app-dialog-backdrop,
.app-dialog-card,
.swal2-container,
.swal2-popup {
    z-index: 2147483647 !important;
}

/* Override universal: o margin-left global do .form-group quebra a simetria em
   layouts horizontais (esquerda fica mais inset que a direita). Zera quando o
   form-group está dentro de um container flex (d-flex/d-inline-flex) OU dentro
   de uma .col* do Bootstrap. Cobre todos os 3 padrões usados no projeto:
     1) <div class="d-flex"><div class="form-group">...</div>...</div>
     2) <div class="row"><div class="col-X"><div class="form-group">...</div></div>...</div>
     3) modal-body com qualquer um dos anteriores
   */
.d-flex > .form-group,
.d-inline-flex > .form-group,
[class^="col-"] > .form-group,
[class*=" col-"] > .form-group,
.col > .form-group { margin-left: 0 !important; }

/* 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;
}

/* Cursor de mover SÓ onde realmente move: cards flutuantes (.draggable-card, opt-in — igual ao
   JS de drag). Card comum encaixado não arrasta, então não pode "mentir" com o cursor de 4 setas. */
.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: #ffffff;
    --sidebar-hover-bg: rgba(142,202,230,0.20);
    --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;
}

/* Alinhamento vertical padrão pra checkboxes da grade — desce 1.5px pra ficar
   centralizado com o texto da linha (sem isso fica sobre a baseline e parece alto) */
.grid-check.grid-check,
.grid-check-master.grid-check-master {
    position: relative;
    top: 1.5px;
}

/* ========================================================================
   BADGES INLINE PADRÃO DO PROJETO (.app-badge)
   Pílulas pequenas pra status/categoria/origem em grades, modais, listas.
   Calibradas pra ficar alinhadas com texto inline (top: -1.6px).
   Variantes de cor por classe modificadora — sempre `app-badge` + cor.
   ======================================================================== */
.app-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;                /* simétrico vertical pra evitar conteúdo deslocado pra baixo */
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 999px;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
    position: relative;
    top: -1.6px;                      /* lifta o badge inteiro pra alinhar com texto inline */
    border: 1px solid transparent;
    cursor: default;
}
/* Ícones internos do badge — centralizados verticalmente.
   Com padding simétrico + inline-flex align-items:center, ícone fica no eixo.
   Sem ajuste extra de top — o nudge anterior deslocava pra baixo demais. */
.app-badge > i { line-height: 1; vertical-align: middle; }
.app-badge-success { background: rgba(25,135,84,0.18);  color: #146c43; border-color: rgba(25,135,84,0.35); }
.app-badge-danger  { background: rgba(220,53,69,0.16);  color: #b02a37; border-color: rgba(220,53,69,0.32); }
.app-badge-warning { background: rgba(255,193,7,0.22);  color: #997404; border-color: rgba(255,193,7,0.45); }
.app-badge-primary { background: rgba(13,110,253,0.14); color: var(--bs-primary); border-color: rgba(13,110,253,0.30); }
.app-badge-info    { background: rgba(13,202,240,0.14); color: #087990; border-color: rgba(13,202,240,0.32); }
.app-badge-secondary { background: rgba(108,117,125,0.14); color: #495057; border-color: rgba(108,117,125,0.30); }
/* Dark mode — tons mais claros pra contrastar com fundo escuro */
body[data-bs-theme='dark'] .app-badge-success { background: rgba(74,222,128,0.16);  color: #4ade80; border-color: rgba(74,222,128,0.30); }
body[data-bs-theme='dark'] .app-badge-danger  { background: rgba(248,113,113,0.16); color: #f87171; border-color: rgba(248,113,113,0.30); }
body[data-bs-theme='dark'] .app-badge-warning { background: rgba(251,191,36,0.18);  color: #fbbf24; border-color: rgba(251,191,36,0.36); }
body[data-bs-theme='dark'] .app-badge-primary { background: rgba(142,202,230,0.16); color: #8ecae6; border-color: rgba(142,202,230,0.30); }
body[data-bs-theme='dark'] .app-badge-info    { background: rgba(125,211,252,0.16); color: #7dd3fc; border-color: rgba(125,211,252,0.30); }
body[data-bs-theme='dark'] .app-badge-secondary { background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.30); }

.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;
    position: relative;
}
/* Halo INVISÍVEL de 3px: como o hover levanta o botão 2px, o cursor parado
   na borda inferior ficava "fora" do botão -> sai/entra em loop (botão e
   tooltip piscando). O halo mantém o mouse dentro da área do botão durante
   o movimento. Zero mudança visual. */
.btn-action::after {
    content: '';
    position: absolute;
    inset: -3px;
}
.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);
}



/* Campo monetário com valor negativo (lançamento de desconto/estorno) */
input.valor-monetario.valor-negativo {
    color: var(--bs-danger) !important;
    font-weight: 600;
}

/* Cobranças — cor explícita pra coluna Recebido */
td.recebido-maior { color: #198754 !important; }    /* verde forte — recebeu mais (juros) */
td.recebido-parcial { color: #e60000 !important; }  /* vermelho vivo — recebeu menos (parcial) */

/* Cobranças — fatura cancelada: linha inteira riscada + opaca */
.cobrancas-grid tbody tr.fatura-cancelada > td {
    text-decoration: line-through;
    color: #94a3b8 !important;
}
.cobrancas-grid tbody tr.fatura-cancelada > td:first-child,
.cobrancas-grid tbody tr.fatura-cancelada > td:nth-child(2) {
    text-decoration: none; /* coluna # (numeração) e coluna Ações não riscam */
}
.cobrancas-grid tbody tr.fatura-cancelada .status-badge,
.cobrancas-grid tbody tr.fatura-cancelada .asaas-badge,
.cobrancas-grid tbody tr.fatura-cancelada .nfse-badge {
    opacity: 0.65;
}
body[data-bs-theme='dark'] .cobrancas-grid tbody tr.fatura-cancelada > td {
    color: #64748b !important;
}

/* ============================================================
   VERSIONAMENTO + SOBRE + SINO — propagado do Cashvista (2026-05-25)
   ============================================================ */

/* Badge de versão — canto inferior direito, discreto.
   <button> clicável que abre o modal "Sobre o sistema". */
.app-version-badge {
    position: fixed;
    right: 8px;
    bottom: 6px;
    z-index: 1040;
    font-size: 0.65rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    padding: 1px 8px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
    opacity: 0.55;
    outline: none;
    box-shadow: none;
}
.app-version-badge:hover {
    opacity: 1;
    color: var(--app-accent, #0d6efd);
    transform: translateY(-1px);
}
.app-version-badge:focus,
.app-version-badge:focus-visible {
    outline: 2px solid rgba(13, 110, 253, 0.4);
    outline-offset: 2px;
    opacity: 1;
}
body[data-bs-theme='dark'] .app-version-badge {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.15);
    color: #64748b;
}
body[data-bs-theme='dark'] .app-version-badge:hover {
    color: #8ecae6;
}

/* Modal "Sobre o sistema" — cabeçalho com versão + corpo changelog */
.sobre-versao-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.sobre-versao-numero {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-primary);
    line-height: 1.2;
}
.sobre-versao-data {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #64748b);
    margin-top: 0.15rem;
}
.sobre-versao-marca {
    font-size: 0.78rem;
    text-align: right;
    color: var(--bs-secondary-color, #64748b);
    line-height: 1.4;
}
.sobre-versao-marca strong {
    color: var(--bs-body-color);
}

/* Corpo do changelog renderizado (markdown → HTML) */
.sobre-changelog .changelog-h1 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.75rem 0 0.5rem;
    color: var(--bs-body-color);
}
.sobre-changelog .changelog-h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1.25rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-primary);
}
.sobre-changelog .changelog-h3 {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.75rem 0 0.3rem;
    color: var(--bs-secondary-color, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sobre-changelog .changelog-list {
    padding-left: 1.25rem;
    margin: 0.3rem 0 0.75rem;
}
.sobre-changelog .changelog-list li {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.35rem;
    color: var(--bs-body-color);
}
.sobre-changelog .changelog-list li strong {
    color: var(--bs-primary);
}
.sobre-changelog .changelog-quote {
    margin: 0.5rem 0 1rem;
    padding: 0.6rem 0.85rem;
    background: rgba(13, 110, 253, 0.06);
    border-left: 3px solid var(--bs-primary);
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--bs-secondary-color, #475569);
}
.sobre-changelog p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.sobre-changelog hr {
    margin: 1.5rem 0;
    border-top: 1px dashed var(--bs-border-color);
    opacity: 0.6;
}
body[data-bs-theme='dark'] .sobre-changelog .changelog-quote {
    background: rgba(110, 168, 254, 0.08);
    border-left-color: #6ea8fe;
}

/* Animação pulse no badge do sino quando chega notificação nova.
   Pulsa 3 vezes e para — chama atenção sem virar ruído permanente. */
@keyframes bell-badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
    }
    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
}
.notif-bell-badge.pulse-novidade {
    animation: bell-badge-pulse 0.8s ease-in-out 3;
}

/* Cor "novidade" (lilás) pro ícone do item de versão nova no dropdown do sino */
.notif-bell-item-icon.novidade {
    background: rgba(168, 85, 247, 0.15);
    color: #9333ea;
}
body[data-bs-theme='dark'] .notif-bell-item-icon.novidade {
    background: rgba(192, 132, 252, 0.18);
    color: #c084fc;
}

/* ========================================
   FLYOUT DOS SUB-PAIS DO MENU (ex: RELATÓRIOS)
   Painel flutuante FILHO DO <body> (position:fixed escapa do
   overflow-x:hidden do #sidebar-wrapper — NÃO mexer no overflow de lá).
   Só desktop (>1100px); no mobile o submenu segue inline.
   ======================================== */
.menu-flyout {
    position: fixed;
    z-index: 1052;               /* acima do conteúdo (cards em modo view chegam a z-index:1050), abaixo dos modais (1055+) */
    width: max-content;          /* expande conforme o maior item (não quebra os nomes) */
    min-width: 230px;
    max-width: 420px;            /* teto de segurança; itens normais ficam menores */
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--bs-body-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    padding: 0.35rem;
    display: none;
}
.menu-flyout.show { display: block; }

/* Cabeçalho do painel — nome do sub-pai (ex: RELATÓRIOS) */
.menu-flyout-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    padding: 0.35rem 0.5rem 0.45rem 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid transparent;  /* recebe o accent do grupo raiz (data-grupo) */
    margin-bottom: 0.25rem;
}

/* Item com a MESMA cara do .list-group-item do menu — valores COPIADOS
   (o painel vive fora do #sidebar-wrapper, não herda nada de lá) */
.menu-flyout-item {
    display: flex;
    align-items: center;
    color: var(--sidebar-text, #475569);
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: 0.45rem 0.5rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.menu-flyout-item i {
    margin-right: 0.75rem;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.menu-flyout-item span {
    min-width: 0;
    white-space: nowrap;   /* nome do relatório em UMA linha (painel expande pelo max-content) */
}
/* Separador (men_tipo=5) dentro do painel flyout — espelha o .menu-separator do menu */
.menu-flyout-separator {
    height: 1px;
    margin: 6px 8px;
    background: rgba(0, 0, 0, 0.12);
}
.menu-flyout-separator.has-label {
    height: auto;
    background: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 8px 6px 3px;
}
.menu-flyout-separator.has-label::before,
.menu-flyout-separator.has-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
}
.menu-flyout-separator.has-label span {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}
body[data-bs-theme='dark'] .menu-flyout-separator,
body[data-bs-theme='dark'] .menu-flyout-separator.has-label::before,
body[data-bs-theme='dark'] .menu-flyout-separator.has-label::after { background: rgba(255, 255, 255, 0.14); }
body[data-bs-theme='dark'] .menu-flyout-separator.has-label { background: none; }
body[data-bs-theme='dark'] .menu-flyout-separator.has-label span { color: rgba(255, 255, 255, 0.5); }

.menu-flyout-item:hover {
    color: var(--sidebar-hover, #0d6efd);
    background-color: var(--sidebar-hover-bg, #cfe2ff);
    border-left-color: var(--sidebar-active-color, #0d6efd);
    font-weight: 600;
}
.menu-flyout-item.active {
    color: var(--sidebar-active-color, #0d6efd);
    border-left-color: var(--sidebar-active-color, #0d6efd);
    font-weight: 700;
}
.menu-flyout-item.active i { color: var(--sidebar-active-color, #0d6efd); }

/* Accent do GRUPO RAIZ na borda do título — mesmas cores dos pais expandidos */
.menu-flyout[data-grupo="1"] .menu-flyout-title { border-left-color: rgba(220, 53, 69, 0.7); }   /* ADMINISTRADOR */
.menu-flyout[data-grupo="2"] .menu-flyout-title { border-left-color: rgba(13, 110, 253, 0.7); }  /* CADASTROS */
.menu-flyout[data-grupo="3"] .menu-flyout-title { border-left-color: rgba(25, 135, 84, 0.7); }   /* COORDENAÇÃO */
.menu-flyout[data-grupo="4"] .menu-flyout-title { border-left-color: rgba(255, 193, 7, 0.85); }  /* SECRETARIA */
.menu-flyout[data-grupo="5"] .menu-flyout-title { border-left-color: rgba(13, 202, 240, 0.75); } /* PROFESSORES */
.menu-flyout[data-grupo="6"] .menu-flyout-title { border-left-color: rgba(71, 85, 105, 0.8); }   /* GERENTE */
.menu-flyout[data-grupo="7"] .menu-flyout-title { border-left-color: rgba(111, 66, 193, 0.7); }  /* COORD. MUN */
.menu-flyout[data-grupo="8"] .menu-flyout-title { border-left-color: rgba(121, 85, 72, 0.85); }  /* RH */

/* Dark mode */
body[data-bs-theme='dark'] .menu-flyout {
    background-color: #16222f;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}
body[data-bs-theme='dark'] .menu-flyout-title {
    color: #94a3b8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body[data-bs-theme='dark'] .menu-flyout[data-grupo="1"] .menu-flyout-title { border-left-color: rgba(255, 99, 132, 0.7); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="2"] .menu-flyout-title { border-left-color: rgba(110, 168, 254, 0.7); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="3"] .menu-flyout-title { border-left-color: rgba(75, 192, 132, 0.7); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="4"] .menu-flyout-title { border-left-color: rgba(255, 193, 7, 0.85); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="5"] .menu-flyout-title { border-left-color: rgba(110, 226, 250, 0.75); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="6"] .menu-flyout-title { border-left-color: rgba(173, 181, 189, 0.75); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="7"] .menu-flyout-title { border-left-color: rgba(155, 121, 222, 0.7); }
body[data-bs-theme='dark'] .menu-flyout[data-grupo="8"] .menu-flyout-title { border-left-color: rgba(161, 130, 113, 0.8); }

/* Desktop: sub-pai flyout tem chevron pra DIREITA (indica painel lateral)
   + feedback visual no item enquanto o painel está aberto.
   No mobile (<=1100px) nada disso aplica — chevron/inline normais. */
@media (min-width: 1101px) {
    #sidebar-wrapper .has-submenu.is-flyout-parent .chevron {
        transform: rotate(-90deg);
    }
    #sidebar-wrapper .list-group-item.has-submenu.is-flyout-parent.flyout-open {
        color: var(--sidebar-hover);
        background-color: var(--sidebar-hover-bg);
        border-left-color: var(--sidebar-active-color);
        font-weight: 600;
    }
}

/* ============================================================
   TELAS ESTREITAS (<=768px): grades NÃO se espremem.
   Sem isto, a tabela encolhia junto com a janela: colunas
   espremidas e cabeçalho quebrando palavra por palavra
   ("C.H./1ª/FASE" empilhado, header gigante — visto na Grade
   Curricular). Regra: largura MÍNIMA na tabela + rolagem
   horizontal no container (padrão da casa).
   - SÓ vale em tela estreita: no desktop nada muda.
   - Telas com min-width PRÓPRIO (Folha 1280px, Grade 900px,
     etc.) continuam valendo — especificidade/inline vencem.
   - .table-responsive já rola X; card-body com overflow-y:auto
     rola X automaticamente (spec: eixo visible vira auto quando
     o outro é não-visible); o :has cobre card-body sem overflow.
   ============================================================ */
@media (max-width: 768px) {
    .table-responsive > table.table,
    table.grid-interna {
        min-width: 640px;
    }
    .card-body:has(> table.grid-interna),
    .card-body:has(> .table-responsive) {
        overflow-x: auto;
    }
}

/* ============================================================
   SWITCHES (form-switch) — estado DESLIGADO em VERMELHO
   Padrão do sistema: azul = ligado (true) · vermelho = desligado (false).
   O cinza default do Bootstrap parecia campo desabilitado — vermelho
   deixa o estado explícito. Bolinha branca p/ contraste no track vermelho.
   Vale para TODOS os switches (role="switch") do sistema.
   ============================================================ */
.form-switch .form-check-input:not(:checked):not(:disabled) {
    background-color: #dc3545;
    border-color: #dc3545;
    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='%23fff'/%3e%3c/svg%3e");
}
/* foco mantém o track vermelho (Bootstrap troca a bolinha p/ azul no :focus) */
.form-switch .form-check-input:not(:checked):not(:disabled):focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
    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='%23fff'/%3e%3c/svg%3e");
}
/* desligado + DESABILITADO continua apagado (não confundir com acionável) */
.form-switch .form-check-input:not(:checked):disabled {
    background-color: #adb5bd;
    border-color: #adb5bd;
}