/* Hide menu text when sidebar is collapsed */

/* ===== IMPORTAÇÃO DE TODOS OS ARQUIVOS CSS ESPECÍFICOS ===== */
@import url("base.46cc18954715.css");
@import url("custom.75f272b9a359.css");
@import url("agendamento.ab44a250d3d5.css");
@import url("certificado.01f4cd929f48.css");
@import url("configuracoes.5a491a538183.css");
@import url("conversor.50928c92f441.css");
@import url("dowload.6f2488fd5b8f.css");
@import url("empresa.8cf95c35cf70.css");
@import url("historico.04dcdcf960e6.css");
@import url("home.3491564961d1.css");
@import url("login.a41603130ed5.css");
@import url("nfse.98d8e8d45a1e.css");
@import url("pessoa.ff739ecab95c.css");
@import url("perfil.c2e2a55817d8.css");
@import url("role.13b06dd6732c.css");
@import url("painel_tv.bd7542f93bf7.css");
@import url("painel_departamento.ad3adc7ef36d.css");
@import url("secretaria_painel.cf78f7c311ae.css");
@import url("atendimento_analista.556331f11651.css");
@import url("usuario_form.27648fc597bd.css");

/* ===== VARIÁVEIS ===== */
:root {
    --verde-deep: #16a34a;     /* verde mais saturado */
    --verde-light: #86efac;
    --verde-suave: #dcfce7;
    --amarelo-deep: #eab308;   /* amarelo mais noturno */
    --amarelo-light: #fef08a;
    --amarelo-suave: #fef3c7;
    --off-white: #F5F0E6;
    --cinza-escuro: #1f2937;   /* mais escuro */
    --cinza-claro: #f8f9fa;
    --azul-deep: #0ea5e9;      /* azul mais vibrante */
    --gradiente-principal: linear-gradient(135deg, #F5F0E6 0%, #E8F5E9 50%, #FFF8E1 100%);
    --gradiente-card: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    --gradiente-verde: linear-gradient(135deg, var(--verde-deep), var(--verde-light));
    --gradiente-amarelo: linear-gradient(135deg, var(--amarelo-deep), var(--amarelo-light));
    --gradiente-misto: linear-gradient(135deg, var(--verde-deep), var(--amarelo-deep));
    --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.06);
    --sombra-media: 0 4px 12px rgba(0, 0, 0, 0.1);
    --sombra-hover: 0 8px 20px rgba(22, 163, 74, 0.2);
    --borda-suave: 1px solid rgba(76, 175, 80, 0.1);
    --transicao-padrao: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Modern neutral surfaces */
    --surface-1: #ffffff;
    --surface-2: #f9fafb;
    --surface-3: #f3f4f6;
    --muted: #6b7280;
    --glass: rgba(255,255,255,0.85);
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
    --radius-lg: 12px;
    --radius-md: 10px;
    --radius-sm: 6px;
    --text-color: #111827;     /* mais escuro */

    /* Accessible color accents */
    --primary-600: #15803d; /* deeper green */
    --primary-500: #16a34a;
    --primary-400: #4ade80;
    --accent-600: #0ea5a4;
    --danger-600: #dc2626;
    --muted-strong: #4b5563;
}

/* ===== RESET E ESTILOS GLOBAIS ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 15px; /* base: 1rem = 15px — mais compacto sem quebrar rem de Bootstrap */
}

body {
    font-family: "Inter", sans-serif;
    background: var(--gradiente-principal);
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--text-color);
    font-size: 0.9375rem; /* ~14px */
    line-height: 1.5;
}

/* ===== LAYOUT PRINCIPAL ===== */
.app-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* Force full-width on all containers (admin-like layout com sidebar fixa) */
.container, .container-fluid, .container-xl, .container-xxl {
    max-width: 100% !important;
}
.container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* compact input sizes */
.form-check-label {
    font-size: 0.9rem;
}

/* ===== SIDEBAR ===== */

/* cards de módulos na home */
.module-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: var(--radius-lg);
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface-1);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(15,23,42,0.05);
}
.module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(22,163,74,0.14);
    border-color: rgba(22,163,74,0.2);
}

/* stat icon box */
.stat-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* add floating animation */
@keyframes floatin {
    from {opacity:0; transform: translateY(30px);} 
    to {opacity:1; transform: translateY(0);}    
}
.animate-fade-in {
    animation: floatin 0.6s ease-out forwards;
}

/* inputs de data compactos */
input[type=date] {
    font-size: 0.9rem;
    padding: 0.4rem;
}

/* dark mode global form overrides (applied beyond pessoa forms) */
body.dark-mode textarea {
    background: var(--surface-2) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.2) !important;
}
body.dark-mode ::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

/* cards estatísticos do dashboard */
.stat-card {
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(15,23,42,0.03);
}
.stat-card .card-body h2 {
    line-height: 1;
    font-weight: 700;
}

/* Empty state icon utility */
.icon-empty {
    font-size: 3rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .45;
}
.icon-xl {
    font-size: 3rem;
    display: block;
}

/* tables compactos */

/* rounded row effect by rounding first/last cell */

/* subtle zebra achieved via spacing and soft row backgrounds applied to cells */

/* Melhorias de tabela - linhas com melhor diferenciação */

/* compact variant for dense lists already defined earlier - keep it */

/* compact variant for dense lists */

/* inputs de data compactos */
input[type=date] {
    font-size: 0.9rem;
    padding: 0.35rem;
}

/* Global card style */

/* Buttons */

/* Forms - softer inputs */

/* Checkbox and radio improvements */
.form-check-input {
    border: 2px solid rgba(107, 114, 128, 0.3);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:hover {
    border-color: #16a34a;
}

.form-check-input:checked {
    background-color: #16a34a;
    border-color: #16a34a;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Badges */

/* semantic badge colors with better contrast */

/* Estado colapsado */

/* ===== DARK MODE ===== */
body.dark-mode {
    background: #0b0b0c !important;
    color: #e6eef2;
    /* darker surfaces for components in dark mode */
    --surface-1: #0f1720;
    --surface-2: #111316;
    --surface-3: #16181a;
    --muted: #9aa6b2;
    --text-color: #e6eef2;
    /* compact font-size in dark mode */
    font-size: 0.95rem;
}

/* fixed dark toggle button */
#dark-toggle-fixed {
    background: var(--amarelo-deep);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: var(--sombra-media);
    transition: transform 0.3s ease;
}
#dark-toggle-fixed:hover {
    transform: scale(1.1);
}
#dark-toggle-fixed.dark {
    background: var(--cinza-escuro);
}

/* Removido para permitir override específico do formulário de pessoa */

/* enforce text color globally */
body.dark-mode {
    color: #e0e0e0 !important;
}

body.dark-mode .module-card, body.dark-mode .stat-card {
    background: var(--surface-1);
    color: var(--text-color);
    border-color: rgba(255,255,255,0.04);
}

/* tables in dark pages */

/* ensure plain hyperlinks are readable; styled links (menu, buttons) keep their own color */
body.dark-mode a:where(:not([class])) {
    color: var(--hz-brand-text, #90caf9);
}
body.dark-mode .text-muted {
    color: rgba(230,238,242,0.72) !important;
}

/* ===== TV MODE ===== */
.tv-mode body, .tv-mode .container-fluid {
    background: #000 !important;
}

.tv-mode .container-fluid { padding: 8px !important; }
.tv-mode .panel-controls { position: fixed; right: 8px; top: 8px; z-index: 4000; background: rgba(0,0,0,0.6); color: #fff; padding: 6px; border-radius: 6px; }
.tv-mode .panel-controls .btn { margin-left: 4px; }
.tv-mode .list-group-item { font-size: 1.4rem !important; padding: 0.8rem 1rem; }
.tv-mode h2, .tv-mode h4 { font-size: 1.8rem !important; color: #fff; }
.tv-mode .badge { font-size: 1.1rem; padding: 6px 10px; }
.tv-mode .tempo-espera, .tv-mode .tempo-atendimento { font-weight: 700; font-size: 1.6rem; }
.tv-mode .col-md-3, .tv-mode .col-md-4, .tv-mode .col-md-5 { padding: 8px !important; }
.tv-mode .panel-rotate-hidden { display: none !important; }

/* ===== TV MODE + DARK MODE ADJUSTMENTS =====
   When the user enables dark mode, make painel/TV cards and fields
   follow the same dark-surface pattern used across the app so that
   inputs and cards appear on a muted gray surface instead of pure black.
*/
body.tv-mode.dark-mode, body.dark-mode.tv-mode, .tv-mode body.dark-mode, body.dark-mode .tv-mode, .tv-mode.dark-mode {
    background: var(--surface-2) !important;
    color: var(--text-color) !important;
}

.tv-mode.dark-mode .container-fluid, .tv-mode.dark-mode .column, .tv-mode.dark-mode .card, body.dark-mode .tv-mode .card {
    background: var(--surface-2) !important;
    color: var(--text-color) !important;
    border-color: rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
}

.tv-mode.dark-mode .card.green { background: rgba(16,185,129,0.06) !important; }
.tv-mode.dark-mode .card.red { background: rgba(220,53,69,0.06) !important; }

.tv-mode.dark-mode .label, .tv-mode.dark-mode .time, .tv-mode.dark-mode .analyst-item .label, .tv-mode.dark-mode .analyst-item .time {
    color: var(--text-color) !important;
}

.tv-mode.dark-mode .stats-footer {
    color: var(--muted) !important;
}

/* Ensure timers and small text contrast in dark mode */
.tv-mode.dark-mode .time { color: var(--muted) !important; }

/* Make list items and placeholders match other dark-mode styles */
.tv-mode.dark-mode .list-group-item, .tv-mode.dark-mode .pending-item, .tv-mode.dark-mode .attending-item, .tv-mode.dark-mode .analyst-item {
    background: var(--surface-2) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Inputs shown in TV/admin views should use muted surfaces */
.tv-mode.dark-mode input, .tv-mode.dark-mode select, .tv-mode.dark-mode textarea {
    background: var(--surface-2) !important;
    color: var(--text-color) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

/* compact controls for non-tv mode too */
.panel-controls { position: relative; display: inline-flex; gap: 8px; align-items: center; }
.panel-controls .control-label { color: var(--muted); font-size: 0.95rem; margin-right: 6px; }

/* small responsive adjustments for very large screens used by TVs */
@media (min-width: 1600px) {
    .tv-mode .list-group-item { font-size: 1.8rem !important; }
    .tv-mode h2, .tv-mode h4 { font-size: 2.4rem !important; }
}

/* Improve form controls, selects and checkboxes in dark mode for consistent contrast */
body.dark-mode textarea {
    background: #0f1214;
    color: var(--text-color);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: none;
}

/* Checkboxes / radios */
body.dark-mode .form-check-input {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    width: 1.15rem;
    height: 1.15rem;
}
body.dark-mode .form-check-input:checked {
    background: var(--primary-500);
    border-color: var(--primary-500);
    box-shadow: 0 0 0 0.15rem rgba(22,163,74,0.12);
}
body.dark-mode .form-check-input:checked::after {
    background-color: var(--hz-surface, #fff);
    color: #0f1720;
    opacity: 1;
}
/* Select2 compatibility: dark background for dropdowns if select2 is present */
body.dark-mode .select2-container .select2-selection--multiple, body.dark-mode .select2-container .select2-selection--single {
    background: #0f1214;
    color: var(--text-color);
    border: 1px solid rgba(255,255,255,0.06);
}
body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(22,163,74,0.12);
}
/* Dropdowns and menus */

/* Modal-specific dark-mode tweaks for certificate upload modal */
body.dark-mode .modal.show {
    background-color: rgba(0,0,0,0.75) !important;
}

body.dark-mode .modal-title { color: var(--text-color); }
body.dark-mode .modal-body { color: var(--text-color); }

body.dark-mode .modal .btn {
    color: var(--text-color);
}
body.dark-mode .modal .btn.btn-success {
    background: linear-gradient(90deg,#16a34a,#15803d);
    color: #fff;
}
body.dark-mode .modal .btn.btn-secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.06);
    color: var(--text-color);
}
body.dark-mode #uploadProgress { background: rgba(255,255,255,0.03); }
body.dark-mode #uploadProgress .progress-bar.bg-success {
    background: linear-gradient(90deg,#16a34a,#15803d) !important;
    color: #fff;
}
body.dark-mode #uploadStatus.alert { background: var(--surface-2); color: var(--text-color); border: 1px solid rgba(255,255,255,0.04); }
/* file input appearance */
body.dark-mode input[type=file] {
    background: var(--surface-2);
    color: var(--text-color);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Make icons and small text readable */
body.dark-mode .bi { color: #9fdba8 !important; }
/* Ensure tables maintain sufficient contrast */

/* Logo */

/* O "H" virou o símbolo da marca em SVG: as regras aqui são de imagem, não
   de texto. Altura fixa em vez de font-size, e a ênfase do menu recolhido
   passou a ser opacidade — `color` num <img> não faria nada. */

/* Container dos itens do menu */

/* Navegacao por contexto de trabalho. O scroll fica somente nos modulos; a
   marca e as acoes do usuario permanecem sempre acessiveis. */

/* Itens do menu */

/* A árvore pode ter quantos níveis forem necessários. Cada categoria cria
   uma guia visual curta, sem transformar a sidebar numa lista gigante. */

/* Efeito de hover */

/* Ícones */

/* Texto do menu */

/* Estado colapsado - esconde textos */

/* stronger contrast for sidebar items in dark mode */

/* small bounce on logo when toggled for affordance */
@keyframes logoBounce {
    0%{transform: translateY(0);}50%{transform: translateY(-4px);}100%{transform: translateY(0);}    
}

/* No modo minimizado o menu fica estritamente iconográfico. Submenus
   aparecem ao passar o mouse, sem setas ocupando espaço. */

/* Camada global de dialogs. A sidebar usa z-index 2000; portanto todo modal
   deve ficar acima dela, independentemente do modulo que o declarou. */
.modal {
    z-index: 30050 !important;
}

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

body.modal-open #dark-toggle-fixed {
    pointer-events: none !important;
}

/* Link ativo */

/* Global dark-mode component support */
body.dark-mode .bg-white, body.dark-mode .bg-light, body.dark-mode .page-header, body.dark-mode .dashboard-header, body.dark-mode .kpi-card, body.dark-mode .breadcrumb, body.dark-mode .breadcrumb-item, body.dark-mode .fiscal-hero, body.dark-mode .fiscal-link-card, body.dark-mode .fiscal-stat-card, body.dark-mode .fiscal-company-card, body.dark-mode .fiscal-panel, body.dark-mode .fiscal-note-month-card, body.dark-mode .fiscal-metric, body.dark-mode .fiscal-mini-metric, body.dark-mode .fiscal-metric-card, body.dark-mode .fiscal-tax-box, body.dark-mode .fiscal-note-mini, body.dark-mode .module-card, body.dark-mode .stat-card, body.dark-mode .table-responsive, body.dark-mode .list-group-item, body.dark-mode .input-group-text, body.dark-mode .nav-pills .nav-link, body.dark-mode .toast, body.dark-mode .popover, body.dark-mode .modal-body {
    background: var(--surface-2) !important;
    color: var(--text-color) !important;
    border-color: rgba(255,255,255,0.07) !important;
}

body.dark-mode .form-check-label, body.dark-mode .form-text, body.dark-mode .text-muted, body.dark-mode label, body.dark-mode .small {
    color: rgba(230,238,242,0.8) !important;
}

body.dark-mode .page-title, body.dark-mode .section-header h2, body.dark-mode .section-title {
    color: #e6eef2 !important;
}

body.dark-mode .bg-white {
    background: #121518 !important;
}

body.dark-mode .bg-light {
    background: #161b20 !important;
}

body.dark-mode .border {
    border-color: rgba(255,255,255,0.08) !important;
}

body.dark-mode .shadow, body.dark-mode .box-shadow {
    box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}

body.dark-mode .collapse.show, body.dark-mode .accordion-button:not(.collapsed) {
    background: var(--surface-2) !important;
}

body.dark-mode .progress {
    background: rgba(255,255,255,0.08) !important;
}

body.dark-mode .progress-bar {
    background: linear-gradient(90deg, #16a34a, #0ea5e9) !important;
}

/* Grupo superior - itens principais */
.nav-top {
    flex: 1;
}

/* Rodapé da sidebar */

/* ===== CONTEÚDO PRINCIPAL ===== */

/* Ensure main content can scroll independently when content overflows */

/* Ajuste quando sidebar está colapsada */

/* when collapsed we keep H horizontal; name hidden by other rule */

/* Container interno para centralizar conteúdo */
.content-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 10px 0;
}

.breadcrumb-item a {
    color: var(--verde-deep);
    font-weight: 500;
    transition: var(--transicao-padrao);
    text-decoration: none;
    font-size: 0.85rem;
}

.breadcrumb-item a:hover {
    color: var(--amarelo-deep);
}

.breadcrumb-item.active {
    color: #6c757d;
    font-size: 0.85rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--verde-deep);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 2px;
}

/* ===== TÍTULOS ===== */
h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2px;
}

h1 i {
    color: var(--verde-deep);
}

h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ===== CARDS GENÉRICOS (para referência) ===== */

/* ===== UTILITÁRIOS ===== */
.text-success-gradient {
    background: var(--gradiente-verde);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Modern list-group styling for side cards (conversor recent items) */
.list-group-flush .list-group-item {
    background: var(--surface-1);
    border: 1px solid rgba(15,23,42,0.03);
    margin: 4px 6px;
    border-radius: 6px;
    padding: 8px 10px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.list-group-flush .list-group-item + .list-group-item {
    margin-top: 4px;
}
.list-group-flush .list-group-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,24,40,0.06);
}
.list-group-flush .list-group-item .bi {
    color: var(--verde-deep);
    font-size: 0.95rem;
    margin-right: 6px;
}

/* dark mode list items */
body.dark-mode .list-group-flush .list-group-item {
    background: var(--surface-2) !important;
    border-color: rgba(255,255,255,0.04) !important;
    color: var(--text-color) !important;
}
body.dark-mode .list-group-flush .list-group-item .bi { color: #9be6a7; }

/* Painel de arquivos (conversor) - avoid empty white bar and style items */
#painelArquivos {
    background: transparent;
    padding: 0 6px 6px 6px;
    min-height: 0;
}

/* hide the element when empty to avoid stray bars */
#painelArquivos:empty {
    display: none;
}

/* file item placeholder styling (JS may inject items here) */
#painelArquivos .file-item, #painelArquivos .arquivo-row {
    background: var(--surface-1);
    border: 1px solid rgba(15,23,42,0.03);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.03);
}

body.dark-mode #painelArquivos .file-item, body.dark-mode #painelArquivos .arquivo-row {
    background: var(--surface-2) !important;
    border-color: rgba(255,255,255,0.04) !important;
    color: var(--text-color) !important;
}

/* Global upload area styling (works with inline fallback) */
.upload-area {
    border: 2px dashed rgba(148,163,184,0.18);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.18s ease;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.upload-area:hover {
    border-color: rgba(16,185,129,0.35);
    background-color: rgba(16,185,129,0.03);
}
body.dark-mode .upload-area {
    border: 3px dashed rgba(255,255,255,0.06);
    background: transparent;
}
body.dark-mode .upload-area:hover {
    border-color: rgba(16,185,129,0.35);
    background-color: rgba(16,185,129,0.02);
}

/* Slightly darker card headers in dark mode for separation */

/* ===== SCROLLBAR PERSONALIZADA ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.7);
    background-clip: padding-box;
}

body.dark-mode {
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    background-clip: padding-box;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
    background-clip: padding-box;
}

/* ===== SELEÇÃO DE TEXTO ===== */
::selection {
    background: var(--verde-deep);
    color: white;
}

::-moz-selection {
    background: var(--verde-deep);
    color: white;
}

/* ===== RESPONSIVIDADE ===== */

@media (max-width: 768px) {
    
    
    
    
    
    
    
    
    h1 {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    
    
    
    
    h1 {
        font-size: 1.1rem;
    }
    
    h2 {
        font-size: 1rem;
    }
}

/* Accessible focus outlines for keyboard users */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid rgba(76,175,80,0.9);
    outline-offset: 2px;
    box-shadow: 0 4px 12px rgba(76,175,80,0.06);
}

/* Buttons and interactive controls */
.btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .card:focus-visible, .list-group-item:focus-visible {
    outline: 2px solid rgba(144,202,249,0.95);
    outline-offset: 1px;
}

/* Make table cells keyboard-focusable style when JS adds tabindex */
.table td:focus-visible {
    outline: 2px solid rgba(255,193,7,0.9);
    outline-offset: 1px;
}

/* Skip-link (visible on focus) */
.skip-to-content {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-to-content:focus, .skip-to-content:active {
    position: fixed;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    padding: 6px 10px;
    background: var(--surface-1);
    color: var(--text-color);
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 6px 18px rgba(16,24,40,0.10);
}

/* Additional responsive enhancements */
/* Use fluid, readable type scaling */
html { font-size: clamp(14px, 1.2vw, 16px); }

/* Off-canvas sidebar for small screens */
@media (max-width: 992px) {
    
    
    /* Main content occupies full width by default on small screens */
    
    /* Slight dim overlay when sidebar is visible (use pseudo element on body) */
    
}

/* Tables: allow horizontal scroll on small screens */
@media (max-width: 768px) {
    .table-responsive, .table-scrollable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.table {
        width: 100%;
        min-width: 560px;
    }
}

/* Tabelas só viram cartões quando a tela declara esse comportamento. Tabelas
   legadas sem data-label continuam íntegras e rolam horizontalmente. */
@media (max-width: 520px) {
    .table-cards table {
        width: 100%;
    }
    .table-cards table thead {
        display: none;
    }
    .table-cards table tbody tr {
        display: block;
        background: var(--surface-1);
        border-radius: 6px;
        margin-bottom: 6px;
        padding: 6px 8px;
        box-shadow: 0 4px 12px rgba(15,23,42,0.02);
    }
    .table-cards table tbody tr td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border: none;
    }
    .table-cards table tbody tr td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--cinza-escuro);
        margin-right: 8px;
        flex: 0 0 48%;
        text-align: left;
    }
}

/* Cards and upload area spacing for small screens */
@media (max-width: 576px) {
    
    
    .upload-area { padding: 12px; }
    .list-group-flush .list-group-item { margin: 3px 4px; padding: 6px 8px; }
}

/* Ensure forms and selects adapt */

/* Provide a helper class to wrap tables when editing templates gradually */
.table-scrollable { width: 100%; }

/* Eixo visual compartilhado por todas as telas renderizadas no layout base. */
.content-viewport {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    min-width: 0;
}

.content-viewport img {
    max-width: 100%;
}

.content-viewport .table-responsive, .content-viewport .table-scrollable {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

/* ===== GLOBAL SCROLL FIX =====
   Ensure pages can scroll vertically by default while preserving
   the TV/painel mode which intentionally hides scrolling. This
   overrides accidental `overflow:hidden` on large containers. */
html, body, .app-wrapper {
    height: auto !important;
    min-height: 100vh !important;
}
/* Only the viewport scrolls. body and .app-wrapper must not become scroll
   containers, or the sticky topbar and table headers stop sticking. */
html { overflow-y: auto !important; overflow-x: clip !important; }
body, .app-wrapper { overflow-y: visible !important; overflow-x: clip !important; }

/* Keep TV mode (full-screen panels) non-scrollable as originally intended */
.tv-mode body, .tv-mode .container-fluid, .tv-mode .app-wrapper {
    height: 100vh !important;
    overflow: hidden !important;
}

/* ===== 2026 SYSTEM POLISH ===== */
body {
    background: #f2f3f5;
    color: var(--text-color);
}

.module-card, .stat-card, .list-group-flush .list-group-item {
    border-color: rgba(15, 23, 42, 0.06);
}

.module-card, .stat-card {
    background: var(--hz-surface, #ffffff);
}

body.dark-mode {
    --surface-1: #101a29;
    --surface-2: #132032;
    --surface-3: #18273c;
    --text-color: #eef4fb;
    --muted: #9cadc2;
    --muted-strong: #d8e1ed;
    background: #0d1117;
    color: var(--text-color);
}

/* Cada produto tem um acento discreto. A cor serve como orientacao espacial,
   sem transformar a navegacao numa coleção de botoes coloridos. */

body.dark-mode .module-card, body.dark-mode .stat-card, body.dark-mode .list-group-flush .list-group-item, body.dark-mode .offcanvas {
    background: linear-gradient(180deg, rgba(16, 26, 41, 0.96) 0%, rgba(19, 32, 50, 0.96) 100%) !important;
    color: var(--text-color) !important;
    border-color: rgba(132, 151, 180, 0.14) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.20);
}

body.dark-mode .dropdown-divider {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(132, 151, 180, 0.12) !important;
}

body.dark-mode .text-muted, body.dark-mode .small, body.dark-mode .form-text, body.dark-mode .breadcrumb-item, body.dark-mode .breadcrumb-item a {
    color: #9fb0c7 !important;
}

body.dark-mode textarea, body.dark-mode input[type="file"] {
    background: rgba(18, 29, 45, 0.96) !important;
    color: #eef4fb !important;
    border-color: rgba(132, 151, 180, 0.16) !important;
    box-shadow: none !important;
}

body.dark-mode textarea:focus {
    border-color: rgba(52, 211, 153, 0.42) !important;
    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.12) !important;
}

body.dark-mode ::placeholder {
    color: rgba(201, 214, 231, 0.58) !important;
}

body.dark-mode .page-item.active .page-link {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.26);
    color: #ffffff;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(1);
}

body.dark-mode #dark-toggle-fixed {
    background: rgba(16, 26, 41, 0.9) !important;
    border-color: rgba(132, 151, 180, 0.14) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

body.dark-mode .bi {
    color: inherit !important;
}

/* 2026 chrome cleanup */

/* ===== CHAT PAGE — full-height, remove main padding ===== */
.main-content:has(.wa-root) {
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
}

.main-content:has(.wa-root) .content-viewport {
  max-width: none;
  height: 100%;
}

@media (max-width: 767.98px) {
    .content-viewport { max-width: 100%; }
    .content-viewport .modal-dialog {
        width: auto;
        max-width: calc(100vw - 1rem);
        margin: .5rem auto;
    }
    .content-viewport .modal-content { max-height: calc(100dvh - 1rem); }
    .content-viewport .modal-body { overflow-y: auto; }
}

/* ===== DARK MODE TOGGLE — discreto, no topo ===== */
#dark-toggle-fixed {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 4000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(15,23,42,0.1) !important;
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(8px);
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(15,23,42,0.10);
    opacity: 0.7;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#dark-toggle-fixed:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,0.16);
    opacity: 1;
}

body.dark-mode #dark-toggle-fixed {
    background: rgba(16,26,41,0.88) !important;
    border-color: rgba(132,151,180,0.18) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ===== SIDEBAR COLLAPSED ACTIVE STATE ===== */

/* ===== KPI / STAT CARDS — global polish ===== */
.kpi-card, .stat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kpi-card:hover, .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

/* ===== TABLE — cleaner look ===== */

/* ===== ALERT BANNERS — softer ===== */

.platform-access-bar {
    position: sticky;
    top: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: .55rem 1rem;
    color: #ecfdf5;
    background: linear-gradient(90deg, #064e3b, #047857);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 8px 24px rgba(2, 44, 34, .22);
    font-size: .86rem;
}

.platform-access-bar form { margin: 0; }

.platform-access-bar button {
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 9px;
    padding: .4rem .75rem;
    color: #fff;
    background: rgba(255,255,255,.1);
    font-weight: 700;
}

.platform-access-bar button:hover { background: rgba(255,255,255,.2); }

@media (max-width: 720px) {
    .platform-access-bar { align-items: flex-start; flex-direction: column; }
}
.tenant-billing-banner {position:relative;z-index:1041;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 18px;font-size:.82rem;border-bottom:1px solid transparent}
.tenant-billing-banner.warning {color:#7c4a03;background:#fff7df;border-color:#f5d88b}
.tenant-billing-banner.blocked {color:#fff;background:#991b1b;border-color:#7f1d1d}
[data-theme="dark"] .tenant-billing-banner.warning, body.dark-mode .tenant-billing-banner.warning {color:#fde68a;background:#422006;border-color:#713f12}
/* Aviso da fatura da mensalidade (core/billing/_due_banner.html). */
.tenant-billing-banner.is-info {color:var(--hz-info);background:var(--hz-info-bg);border-color:var(--hz-line)}
.tenant-billing-banner.is-warning {color:var(--hz-warn);background:var(--hz-warn-bg);border-color:var(--hz-line)}
.tenant-billing-banner.is-action {padding:6px 18px;color:var(--hz-ink-2);background:var(--hz-surface-2);border-color:var(--hz-line)}
.tenant-billing-banner-action {flex:none;padding:3px 12px;border-radius:var(--hz-radius-pill);background:var(--hz-brand);color:var(--hz-brand-ink);font-weight:700;text-decoration:none;white-space:nowrap}
.tenant-billing-banner-action:hover {background:var(--hz-brand-hover);color:var(--hz-brand-ink)}
.billing-locked-card {max-width:760px;margin:8vh auto;padding:36px;display:flex;gap:22px;border:1px solid #fecaca;border-radius:20px;background:linear-gradient(145deg,#fff,#fff7f7);box-shadow:0 22px 60px rgba(127,29,29,.12)}
.billing-locked-icon {flex:0 0 58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#fee2e2;color:#b91c1c;font-size:1.4rem}.billing-locked-card h1 {margin:5px 0 12px;font-size:1.65rem}.billing-locked-card p {color:var(--hz-muted, #64748b)}.billing-eyebrow {font-size:.7rem;letter-spacing:.12em;font-weight:800;color:#b91c1c}.billing-locked-actions {display:flex;gap:10px;margin-top:22px}
body.dark-mode .billing-locked-card, [data-theme="dark"] .billing-locked-card {background:linear-gradient(145deg,#111827,#190f12);border-color:#7f1d1d;color:#f8fafc}
@media(max-width:600px){.billing-locked-card {margin:24px 12px;padding:24px;flex-direction:column}.tenant-billing-banner {align-items:flex-start;justify-content:flex-start}}
.quota-progress {height:9px;overflow:hidden;border-radius:999px;background:#fee2e2;margin:18px 0 8px}.quota-progress span {display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#dc2626)}

/* ── Empresa ativa no rodape da barra lateral ────────────────────────────
   Fica abaixo do botao de sair porque MOSTRAR onde a pessoa esta vale mais
   que poder trocar: foi a duvida "em que empresa eu estou?" que revelou o
   vazamento entre tenants. */

/* Barra recolhida: fica so o icone, como o resto do rodape. */

/* Dock compacto do menu recolhido. Em vez de quatro cartões competindo por
   atenção, as ações formam um único controle vertical e o perfil funciona
   como ponto de referência visual. */

/* O tenant vira um selo do perfil quando a barra esta recolhida. Isso elimina
   o ultimo botao solto sem esconder a troca de empresa: o select continua
   ocupando o selo e pode ser acionado normalmente. */