/* ── NETSIGA ERP Web — app.css ── */

/* ──────────────────────────────────────────
   Base
   ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }

/* ──────────────────────────────────────────
   Correção DevExpress Blazor 22.2 — borda dupla nos editores
   O <input> interno do DxTextBox/DxDateEdit/etc. sai sem a classe
   "dxbl-text-edit-input" que o próprio tema usa pra zerar a borda
   nativa do navegador — sobra o contorno "2px inset" padrão do Chrome
   por dentro da borda estilizada do DevExpress. Repete em TODO editor
   de texto do app (confirmado via inspeção de DOM, não é caso isolado).
   Reforça o reset direto pelo pai (.dxbl-text-edit), que sempre tem a
   classe certa, em vez de depender da classe do filho que falta.
   ────────────────────────────────────────── */
.dxbl-text-edit input,
.dxbl-text-edit textarea {
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
}

/* ──────────────────────────────────────────
   TopBar — barra superior fixa (52px)
   ────────────────────────────────────────── */
.ns-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    /* Acima do .ns-drawer (110) — senão os dropdowns da topbar (idioma, aparência,
       busca) ficam presos no contexto de empilhamento da topbar e o menu lateral
       sempre desenha por cima, mesmo com z-index maior no próprio dropdown. */
    z-index: 300;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: stretch;
    padding: 0 12px 0 0;
}

/* Logo */
.ns-logo-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    text-decoration: none;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ns-logo-brand {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #0f172a;
}

.ns-logo-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Botão hamburguer — abre/fecha o drawer no mobile; some no desktop (drawer fica fixo aberto) */
.ns-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-right: 1px solid #e2e8f0;
    color: #334155;
    font-size: 19px;
    cursor: pointer;
    transition: background .12s;
}

.ns-drawer-toggle:hover { background: #f8fafc; }

.ns-topbar-logo .ns-logo-link { border-right: none; }

/* Ações por linha na grid (Editar/Excluir) — evita ter que rolar até o topo
   pra usar os botões da barra de filtro em listas grandes. */
.ns-grid-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ns-grid-row-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #0ea5e9;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ns-grid-row-btn:hover { background: #f0f9ff; color: #0284c7; }

.ns-grid-row-btn-danger { color: #ef4444; }
.ns-grid-row-btn-danger:hover { background: #fef2f2; color: #dc2626; }

/* Navegador de registro (First/Prev/Next/Last) — telas de formulário */
.ns-record-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.ns-record-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #475569;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ns-record-nav-btn:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.ns-record-nav-btn:disabled { color: #cbd5e1; cursor: default; }

.ns-record-nav-pos {
    font-size: 12px;
    color: #64748b;
    padding: 0 8px;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .ns-record-nav { display: none; }
}

/* Busca no menu — dentro do próprio menu lateral (drawer), igual ao padrão
   "Find demo by keyword" do site de demos da DevExpress Blazor. Substitui o
   accordion enquanto houver texto digitado (ver code-behind: _buscaMenu). */
.ns-drawer-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 14px 6px;
    padding: 7px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #94a3b8;
}

.ns-drawer-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: #0f172a;
}

.ns-drawer-search input::placeholder { color: #94a3b8; }

.ns-drawer-search-clear {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    padding: 2px;
}

.ns-drawer-search-clear:hover { color: #0f172a; }

.ns-drawer-search-results {
    padding: 4px 8px 12px;
    overflow-y: auto;
}

.ns-drawer-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.ns-drawer-search-item:hover { background: #f1f5f9; color: #0f172a; }
.ns-drawer-search-item-nome { flex-shrink: 0; }
.ns-drawer-search-item-caminho {
    margin-left: auto;
    font-size: 11px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-drawer-search-empty {
    padding: 14px 10px;
    font-size: 13px;
    color: #0f172a;
    text-align: center;
}

/* Empurra a área do usuário pra direita */
.ns-topbar-spacer { flex: 1; }

/* Área do usuário (direita da topbar) */
.ns-topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ns-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0ea5e9;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ns-user-name {
    font-size: 13px;
    color: #334155;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-topbar-logout {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    color: #94a3b8;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    transition: color .12s, background .12s;
}

.ns-topbar-logout:hover { color: #ef4444; background: #fef2f2; }

/* Ações da topbar (idioma / configurações) — entre o espaçador e a área do usuário */
.ns-topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
}

.ns-topbar-icon-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: none;
    border: none;
    color: #0f172a;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: color .12s, background .12s;
}

.ns-topbar-icon-btn:hover { color: #0f172a; background: #f8fafc; }

.ns-topbar-icon-label {
    font-size: 12px;
    font-weight: 600;
}

.ns-topbar-dropdown { position: relative; }

/* Camada invisível atrás do menu — fecha o dropdown ao clicar em qualquer
   lugar fora dele, mesmo padrão do .ns-drawer-overlay do menu lateral. */
.ns-topbar-dropdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.ns-topbar-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    padding: 4px;
    z-index: 200;
}

.ns-topbar-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

.ns-topbar-dropdown-item:hover:not(:disabled) { background: #f1f5f9; }
.ns-topbar-dropdown-item:disabled { color: #cbd5e1; cursor: default; }
.ns-topbar-dropdown-item-ativo { color: #0ea5e9; font-weight: 600; }

.ns-topbar-dropdown-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Mobile: esconde rótulos de texto pra caber ícones + avatar + sair sem estourar a tela.
   Avatar e botão de sair nunca somem — são os únicos indispensáveis.
   Barra e ícones são "position: fixed" — o que passar da largura da viewport
   não gera scroll, fica invisível pra sempre. Por isso aperta tudo aqui,
   não só esconde texto. Testado até 360px (Android comum); abaixo disso
   (ex.: 320px, aparelhos já obsoletos) pode voltar a estourar um pouco. */
@media (max-width: 480px) {
    .ns-topbar-icon-label { display: none; }
    .ns-user-name { display: none; }
    .ns-topbar { padding-right: 8px; }
    .ns-logo-link { padding: 0 8px; }
    .ns-topbar-actions { gap: 0; }
    .ns-topbar-icon-btn { padding: 6px 6px; }
    .ns-topbar-user { padding-left: 6px; gap: 4px; }
    .ns-topbar-logout { padding: 6px 6px; }
}

/* ──────────────────────────────────────────
   Drawer — painel de navegação (260px)
   Mobile: escondido por padrão, desliza sobre o conteúdo.
   Desktop (≥992px): fixo aberto, empurra o conteúdo (ver media query no fim do arquivo).
   ────────────────────────────────────────── */
.ns-drawer {
    position: fixed;
    top: 52px; left: 0; bottom: 0;
    width: 260px;
    z-index: 110;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
    transform: translateX(-100%);
    transition: transform .2s ease;
}

.ns-drawer-open { transform: translateX(0); }

.ns-drawer::-webkit-scrollbar { width: 4px; }
.ns-drawer::-webkit-scrollbar-track { background: transparent; }
.ns-drawer::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* Backdrop — só existe/intercepta clique enquanto o drawer está aberto no mobile */
.ns-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: 52px;
    background: rgba(15, 23, 42, .45);
    z-index: 105;
}

.ns-drawer-overlay-visible { display: block; }

/* DxAccordion — cabeçalho de cada módulo */
.ns-drawer-accordion {
    background: transparent;
    border: none;
}

/* O skin do DevExpress pinta o corpo de cada DxAccordionItem com fundo
   branco sólido (dxbl-group/dxbl-accordion-group) — inofensivo agora que
   o .ns-drawer também é branco, mas mantido explícito (!important) porque
   outras skins/temas do DevExpress podem pintar cor diferente. */
.ns-drawer-accordion .dxbl-group,
.ns-drawer-accordion .dxbl-accordion-group,
.ns-drawer-accordion .dxbl-accordion-item {
    background: transparent !important;
}

/* Classe real renderizada pelo DevExpress é .dxbl-group-header (a versão
   .dxbl-accordion-item-header nunca existiu no DOM desta versão do
   pacote). !important pra vencer a especificidade do CSS do skin. */
.ns-drawer-accordion .dxbl-group-header {
    background: transparent !important;
    color: #0f172a !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 18px;
}

.ns-drawer-accordion .dxbl-group-header:hover { background: #f8fafc; }

/* Grupo de itens dentro do módulo. */
.ns-drawer-group {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #94a3b8;
    padding: 14px 18px 5px;
    font-weight: 600;
}

/* Item de navegação */
.ns-drawer-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .1s, color .1s;
    cursor: pointer;
}

.ns-drawer-link .bi { font-size: 14px; flex-shrink: 0; }

.ns-drawer-link:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Item ativo: tinta suave da cor de marca em vez de fundo sólido escuro
   — mesmo padrão do demo oficial DevExpress Blazor (achado do usuário,
   2026-08-13: menu ficando "monstro" com badge ATIVO em quase toda linha
   e fundo escuro pesado; ver protótipo comparativo antes de aplicar). */
.ns-drawer-link-active {
    background: #e0f2fe;
    color: #0ea5e9;
    border-left-color: #0ea5e9;
    font-weight: 700;
}

.ns-drawer-link-active .bi { color: #0ea5e9; }

/* Item ainda não disponível — só cinza claro, sem ação, sem badge "em
   breve"/"ATIVO" (removido do modelo NsMenuItem inteiramente — deixou de
   fazer sentido com ~150 itens já prontos, virava ruído redundante).
   Não reage a hover. font-weight explícito porque .ns-drawer-link (mesma
   especificidade) agora é 600 por padrão — sem isso herdaria o negrito. */
.ns-drawer-disabled {
    color: #cbd5e1;
    font-weight: 400;
    cursor: default;
}

.ns-drawer-disabled:hover {
    background: none;
    color: #cbd5e1;
}

/* Item ainda não disponível (2026-08-23, revisão do padrão acima) — pedido do
   usuário: fonte igual à de um item normal (não mais cinza/apagada), a
   diferença fica só numa bandeirinha vermelha no lugar da estrela de
   favorito. Mesma ideia do .ns-menu-item-star, só que sem ação (não é
   botão) e sem estado de hover que sugira clique. */
.ns-drawer-indisponivel {
    cursor: default;
}

.ns-drawer-indisponivel:hover {
    background: none;
    color: #334155;
}

.ns-menu-item-indisponivel-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-right: 8px;
    color: #ef4444;
    font-size: 12px;
}

/* ──────────────────────────────────────────
   Content — área principal
   ────────────────────────────────────────── */
.ns-content {
    margin-top: 52px;
    margin-left: 0;
    min-height: calc(100vh - 52px);
    background: #f1f5f9;
    overflow-y: auto;
    transition: margin-left .2s ease;
}

/* Desktop — drawer fixo aberto por padrão, empurrando o conteúdo; o mesmo
   botão hamburguer (sempre visível) recolhe/mostra via .ns-drawer-collapsed.
   Precisa vir DEPOIS da regra base de .ns-content acima — mesma especificidade,
   quem vier por último no arquivo é que vale. */
@media (min-width: 992px) {
    .ns-drawer { transform: translateX(0); }
    .ns-drawer-overlay { display: none !important; }
    .ns-content { margin-left: 260px; }
    .ns-drawer.ns-drawer-collapsed { transform: translateX(-100%); }
    .ns-drawer.ns-drawer-collapsed ~ .ns-content { margin-left: 0; }
}

.ns-content-inner {
    padding: 28px 32px;
    max-width: 1440px;
}

/* O MainLayout já envolve o conteúdo em .ns-content-inner, mas 358 páginas
   repetem o wrapper dentro delas (padrão copiado de tela em tela desde o
   começo). O padding dobrava: 32+32 de cada lado, o que num celular de 375px
   sobrava 247px de área útil — um terço da tela virava margem.
   Corrigido aqui, numa regra só, em vez de editar as 358 páginas: a instância
   ANINHADA não repete padding nem limite de largura. Páginas com um wrapper só
   seguem exatamente como antes. Achado no teste mobile de 2026-08-16. */
.ns-content-inner .ns-content-inner {
    padding: 0;
    max-width: none;
}

/* No celular 32px de cada lado é caro demais — sobra pouco para grid e form. */
@media (max-width: 575.98px) {
    .ns-content-inner {
        padding: 16px 14px;
    }
}

/* Toasts — canto INFERIOR direito da área visível, posição fixa (não some de
   vista rolando a página), como o painel da Meta faz. Pedido do usuário em
   07/10/2026; antes ficava no canto superior direito. O mais novo entra
   embaixo, perto do canto. bottom: 28px deixa livre o selo de versão
   (.ns-versao-rodape), que mora no mesmo canto. Ver ToastService/NsToastHost. */
.ns-toast-host {
    position: fixed;
    bottom: 28px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.ns-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;
    animation: ns-toast-in .2s ease-out;
}

@keyframes ns-toast-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ns-toast-sucesso { background: #198754; }
.ns-toast-erro    { background: #dc3545; }
.ns-toast-aviso   { background: #b8860b; }
.ns-toast-info    { background: #0d6efd; }

.ns-toast-msg { flex: 1; }

.ns-toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px;
}
.ns-toast-close:hover { color: #fff; }

/* Selo de versão — canto inferior direito, discreto; diagnóstico rápido pra
   confirmar em produção se um deploy realmente foi aplicado. */
.ns-versao-rodape {
    position: fixed;
    right: 8px;
    bottom: 4px;
    font-size: 11px;
    color: #94a3b8;
    background: rgba(255, 255, 255, .85);
    padding: 1px 6px;
    border-radius: 4px;
    z-index: 500;
    pointer-events: none;
    user-select: text;
}

/* ──────────────────────────────────────────
   Títulos de página
   ────────────────────────────────────────── */
.ns-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.ns-page-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.ns-page-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* ──────────────────────────────────────────
   KPI cards (dashboard)
   ────────────────────────────────────────── */
.ns-kpi-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 22px;
}

.ns-kpi-card.ns-kpi-muted { opacity: .65; }

.ns-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 6px;
    font-weight: 600;
}

.ns-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────
   Cards de módulo (Configurações dos Módulos)
   ────────────────────────────────────────── */
.ns-modulo-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px;
    height: 100%;
}

.ns-modulo-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f0f9ff;
    color: #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ns-modulo-card-nome {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.ns-modulo-card-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 10px;
}

.ns-modulo-card-badge-ativo { color: #16a34a; background: #f0fdf4; }

.ns-kpi-link {
    font-size: 12px;
    color: #0ea5e9;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
}

/* ──────────────────────────────────────────
   Grid / tabela
   ────────────────────────────────────────── */
.ns-grid { border-radius: 8px; overflow: hidden; }

/* Seta de ordenação do cabeçalho (2026-08-23) — existe e funciona (só aparece
   na coluna ativa, mesmo comportamento do WinForms), mas vinha na mesma cor
   cinza-padrão do Bootstrap (#212529) e passava despercebida — usuário
   achou que a grade não tinha ordenação nenhuma. Cor de destaque igual à
   usada em qualquer outro indicador de estado "ativo" no app (link de menu
   ativo, item selecionado). Sem escopo a .ns-grid de propósito, mesma regra
   das outras correções de contraste desta sessão. */
.dxbl-grid-sort-asc svg,
.dxbl-grid-sort-desc svg {
    fill: #0ea5e9;
    color: #0ea5e9;
}

/* Texto de linha de dados (2026-08-23): DxGrid herda o cinza padrão do
   Bootstrap (#212529, body-color do tema) em vez de preto — reclamação real
   de usuários mais velhos em mais de 1 cliente sobre legibilidade. Cobre
   célula normal e da faixa de filtro (ambas são <td>, mesma estrutura);
   badge/ícone de status que já declara a própria cor continua intocado
   (especificidade de uma classe explícita sempre vence aqui). Sem escopo a
   .ns-grid de propósito — cobre qualquer tela que tenha esquecido o
   wrapper, "linha de dados" é sitewide. */
.dxbl-grid-table td { color: #0f172a; }

/* Odd/Even: DxGrid não marca as linhas com classe própria (só <tr> puro
   dentro do tbody), então a listra é via nth-child mesmo. */
.ns-grid table.dxbl-grid-table tbody tr:nth-child(even) { background-color: #f8fafc; }

.ns-grid-footer { font-size: 12px; color: #94a3b8; }

.ns-bool-cell-true { color: #0ea5e9; font-size: 16px; }
.ns-bool-cell-false { color: #cbd5e1; font-size: 16px; }

/* Mobile — em telas estreitas o grid transbordava (colunas extras cortadas
   pelo overflow:hidden do wrapper, sem scroll, escondendo até os botões de
   Editar/Excluir). Mantém só as duas primeiras colunas + a última (sempre
   "Ações" — padrão confirmado em todas as ~177 telas de listagem do app,
   nunca precisa de CSS por tela). :nth-child(n+3):not(:last-child) funciona
   com qualquer quantidade de colunas no meio, sem depender de contar quantas
   cada grid tem. table-layout:fixed usa <colgroup><col> pra largura — some
   só o td/th não libera o espaço da coluna, precisa esconder o <col> também. */
@media (max-width: 575px) {
    .ns-grid { overflow-x: auto; }
    .ns-grid table.dxbl-grid-table colgroup col:nth-child(n+3):not(:last-child),
    .ns-grid table.dxbl-grid-table th:nth-child(n+3):not(:last-child),
    .ns-grid table.dxbl-grid-table td:nth-child(n+3):not(:last-child) {
        display: none;
    }

    /* As larguras dos <col> vêm inline (JS do DevExpress, herdadas do layout
       desktop) e sobram como duas margens grandes quando só restam 2 colunas
       + Ações — precisa de !important pra vencer o style inline. table-layout:
       auto deixa a 1ª coluna (código, curto) e Ações (2 ícones) encolherem pro
       conteúdo, e o browser dá o resto pra 2ª coluna, que é sempre a de maior
       conteúdo (nome/descrição) nas ~177 telas de listagem. */
    .ns-grid table.dxbl-grid-table {
        table-layout: auto !important;
        width: 100% !important;
    }
    .ns-grid table.dxbl-grid-table colgroup col:nth-child(1),
    .ns-grid table.dxbl-grid-table colgroup col:nth-child(2),
    .ns-grid table.dxbl-grid-table colgroup col:last-child {
        width: auto !important;
    }
    .ns-grid table.dxbl-grid-table th:nth-child(1),
    .ns-grid table.dxbl-grid-table td:nth-child(1),
    .ns-grid table.dxbl-grid-table th:last-child,
    .ns-grid table.dxbl-grid-table td:last-child {
        width: 1%;
        white-space: nowrap;
    }
    .ns-grid table.dxbl-grid-table th:nth-child(2),
    .ns-grid table.dxbl-grid-table td:nth-child(2) {
        white-space: normal;
    }
}

/* Grid de relatório densa (muitas colunas de dado, sem "Ações" no fim,
   ex.: Ficha de Estoque) — a convenção .ns-grid (2 colunas + Ações) não
   serve aqui, esconder colunas tiraria informação que é o motivo da tela
   existir. Rola horizontal em vez de esconder, em qualquer largura de tela. */
.ns-grid-relatorio { overflow-x: auto; }
.ns-grid-relatorio table.dxbl-grid-table { table-layout: auto !important; }

/* Zebra striping (linha par/ímpar) — o tema DevExpress Blazor não aplica isso
   por padrão (<tr> sem classe nenhuma pra diferenciar), diferente do grid do
   WinForms original. Pedido do usuário 2026-08-21, aplicado à classe
   compartilhada pra valer em toda tela de relatório, não só numa. */
.ns-grid-relatorio table.dxbl-grid-table tbody tr:nth-child(even) td {
    background-color: #f8fafc;
}

/* Em telas estreitas, tira as colunas menos essenciais (Documento/Tipo/
   Histórico/Vlr Unit./Centro de Custo/Conta DRE/Projeto-JOB — dá pra ver o
   Histórico completo abrindo o lançamento) e deixa só Data/E-S/Quantidades/
   Valores, que é o que responde "o saldo bate". CssClass no DxGridDataColumn
   marca tanto o <col> quanto as células — os três seletores garantem que a
   largura reservada da coluna também some, não só o conteúdo. Continua
   rolando na horizontal (.ns-grid-relatorio acima) pro que ainda não couber.
   Pedido do usuário em 2026-08-19, com a Ficha de Estoque testada em
   celular real. */
@media (max-width: 767px) {
    .ns-grid-relatorio colgroup col.ns-col-mobile-hide,
    .ns-grid-relatorio th.ns-col-mobile-hide,
    .ns-grid-relatorio td.ns-col-mobile-hide {
        display: none;
    }
}

/* ──────────────────────────────────────────
   Barra de filtros
   ────────────────────────────────────────── */
.ns-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
}

.ns-combo-sm { width: 160px; }
.ns-combo-xs { width: 90px; }

/* Período de estoque fechado — bloqueia Incluir/Alterar/Excluir */
.ns-periodo-fechado-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    padding: 12px 16px;
    color: #991b1b;
}
.ns-periodo-fechado-badge i { font-size: 1.4rem; color: #dc2626; }
.ns-periodo-fechado-badge strong { display: block; font-size: 0.95rem; }
.ns-periodo-fechado-badge div div { font-size: 0.85rem; opacity: 0.85; }

.ns-saldo-atual-badge {
    display: inline-block;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 6px 12px;
    color: #075985;
    font-size: 0.9rem;
}

/* ──────────────────────────────────────────
   Cards de formulário
   ────────────────────────────────────────── */
.ns-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px 28px;
}

.ns-form-layout { max-width: 900px; }

.ns-form-actions {
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    margin-top: 4px;
}

/* Grid de formulário próprio — não depende do motor responsivo do DxFormLayout
   (v22.2 troca a legenda pra "horizontal" sozinho em colunas estreitas e
   sobrepõe campos vizinhos; aqui o controle é 100% nosso). */
.ns-form-group {
    padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
}

.ns-form-group:last-child { border-bottom: none; padding-bottom: 0; }
.ns-form-group:first-child { padding-top: 0; }

.ns-form-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 16px;
}

.ns-form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px 18px;
}

.ns-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ns-field > label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.ns-field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ns-field-inline .flex-grow-1 { flex: 1 1 auto; min-width: 0; }

.ns-field-checkbox { justify-content: center; }

.ns-col-2  { grid-column: span 2; }
.ns-col-3  { grid-column: span 3; }
.ns-col-4  { grid-column: span 4; }
.ns-col-5  { grid-column: span 5; }
.ns-col-7  { grid-column: span 7; }
.ns-col-12 { grid-column: span 12; }

/* Espaço apertado (drawer fixo tomando 260px do desktop) — reduz a densidade
   antes de virar coluna única, pra não amontoar os campos. */
@media (max-width: 900px) {
    .ns-form-grid { grid-template-columns: repeat(6, 1fr); }
    .ns-col-2  { grid-column: span 3; }
    .ns-col-3  { grid-column: span 3; }
    .ns-col-4  { grid-column: span 6; }
    .ns-col-5  { grid-column: span 6; }
    .ns-col-7  { grid-column: span 6; }
}

@media (max-width: 560px) {
    .ns-form-grid { grid-template-columns: 1fr; }
    .ns-col-2, .ns-col-3, .ns-col-4, .ns-col-5, .ns-col-7, .ns-col-12 { grid-column: span 1; }
    .ns-field-checkbox { align-items: flex-start; justify-content: flex-start; }
}

/* ──────────────────────────────────────────
   Conversa CRM (Fase 2) — histórico de mensagens estilo chat
   ────────────────────────────────────────── */
.ns-conversa-mensagens {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
}

.ns-conversa-msg {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.ns-conversa-msg-enviada {
    align-self: flex-end;
    background: #dbeafe;
    color: #0f172a;
}

.ns-conversa-msg-recebida {
    align-self: flex-start;
    background: #f1f5f9;
    color: #0f172a;
}

.ns-conversa-msg-meta {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
}

.ns-conversa-msg-texto {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mídia dentro da bolha da conversa (foto, áudio, vídeo, documento) — 07/10/2026. */
.ns-conversa-midia {
    margin: 4px 0;
}

.ns-conversa-midia img,
.ns-conversa-midia video {
    display: block;
    max-width: 260px;
    max-height: 260px;
    border-radius: 8px;
}

.ns-conversa-midia audio {
    max-width: 260px;
}

.ns-conversa-midia-aviso {
    font-size: 12px;
    color: #64748b;
}

/* ──────────────────────────────────────────
   Login — painel duplo
   ────────────────────────────────────────── */
.ns-login-shell {
    display: flex;
    min-height: 100vh;
}

/* Painel esquerdo — branding */
.ns-login-left {
    width: 55%;
    flex-shrink: 0;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.ns-login-brand-area {
    max-width: 400px;
}

.ns-login-brand-hero {
    display: block;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: .06em;
    color: #ffffff;
    margin-bottom: 4px;
}

.ns-login-brand-sub {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    color: #0ea5e9;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.ns-login-tagline {
    font-size: 18px;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 32px;
}

.ns-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ns-login-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #cbd5e1;
}

.ns-login-features .bi {
    color: #0ea5e9;
    font-size: 15px;
    flex-shrink: 0;
}

/* Painel direito — formulário */
.ns-login-right {
    flex: 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}

.ns-login-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 36px 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, .06);
}

.ns-login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.ns-login-brand {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #0f172a;
}

.ns-login-version {
    font-size: 11px;
    color: #94a3b8;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ns-login-form .btn-primary {
    background: #0ea5e9;
    border-color: #0ea5e9;
    font-weight: 600;
}

.ns-login-form .btn-primary:hover {
    background: #0284c7;
    border-color: #0284c7;
}

/* Responsivo: tela pequena esconde painel esquerdo */
@media (max-width: 768px) {
    .ns-login-left { display: none; }
    .ns-login-right { background: #0f172a; }
    .ns-login-box {
        background: #1e293b;
        border-color: #334155;
        box-shadow: none;
    }
    .ns-login-brand { color: #ffffff; }
    .ns-login-version { color: #64748b; }
    .ns-login-box label { color: #94a3b8; }
    .ns-login-box .form-control {
        background: #0f172a;
        border-color: #334155;
        color: #e2e8f0;
    }
    .ns-login-box .alert-danger { background: #450a0a; color: #fca5a5; border-color: #7f1d1d; }
}

/* ──────────────────────────────────────────
   Blazor error UI
   ────────────────────────────────────────── */
#blazor-error-ui {
    background: #fef9c3;
    border-top: 1px solid #fef08a;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.12);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
    color: #713f12;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
}

/* ──────────────────────────────────────────
   Histórico de alterações (HistoricoDialog)
   ────────────────────────────────────────── */
.ns-historico-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    z-index: 1050;
    overflow-y: auto;
}

.ns-historico-dialog {
    background: #ffffff;
    border-radius: 10px;
    width: 100%;
    max-width: 560px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, .25);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
}

.ns-historico-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.ns-historico-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
}

.ns-historico-close:hover { color: #0f172a; }

.ns-historico-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
}

.ns-historico-vazio {
    color: #64748b;
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

/* Disclaimer de confirmação explícita — gate de operações de risco
   (ver project_netsiga_gate_operacoes_risco). Mesmo padrão visual do
   ns-historico-* (backdrop fixo + card centralizado), primeiro modal
   bloqueante do projeto — sem precedente pra copiar antes disso. */
.ns-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1060;
}

.ns-confirm-dialog {
    background: #ffffff;
    border-radius: 10px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, .25);
    border-top: 4px solid #dc3545;
}

.ns-confirm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.ns-confirm-body {
    padding: 16px 20px;
    font-size: 14px;
    color: #334155;
}

.ns-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px 16px;
}

/* Cadastro rápido embutido (NsCadastroRapidoModal) — abre um CRUD dentro
   de outra tela sem navegação, pra não perder o formulário de origem
   (ver project_netsiga_orcamento_light_crm). Mesmo padrão visual do
   ns-confirm-*, só maior e com scroll interno pro conteúdo do cadastro.
   z-index abaixo de 1050 de propósito: o popup interno do DxComboBox/
   DxDropDown (.dxbl-popup-cell) usa z-index:1050 fixo — com o modal em
   1060 ele renderizava atrás, invisível, mesmo com posição correta
   (achado testando Itens do Orçamento, 2026-08-27). */
.ns-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1040;
}

.ns-modal-dialog {
    background: #ffffff;
    border-radius: 10px;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(15, 23, 42, .25);
}

.ns-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.ns-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.ns-historico-data {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #94a3b8;
    margin: 18px 0 8px;
}

.ns-historico-data:first-child { margin-top: 0; }

.ns-historico-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.ns-historico-item:last-child { border-bottom: none; }

.ns-historico-icone {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.ns-historico-icone-criado { background: #f0fdf4; color: #16a34a; }
.ns-historico-icone-alterado { background: #f0f9ff; color: #0ea5e9; }
.ns-historico-icone-excluido { background: #fef2f2; color: #ef4444; }

.ns-historico-conteudo { flex: 1 1 auto; min-width: 0; }

.ns-historico-linha1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #0f172a;
}

.ns-historico-hora { color: #94a3b8; font-size: 12px; }
.ns-historico-usuario { color: #64748b; font-size: 12px; }

.ns-historico-campos {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 12px;
}

.ns-historico-campos li {
    padding: 2px 0;
    color: #334155;
}

.ns-historico-campo-nome { color: #64748b; margin-right: 4px; }
.ns-historico-valor-antes { color: #94a3b8; text-decoration: line-through; }
.ns-historico-valor { color: #0f172a; font-weight: 500; }

/* Rótulo "Classe #Oid" — só aparece na busca geral (NsHistoricoTimeline
   MostrarClasse=true), onde o resultado cruza várias classes/registros. */
.ns-historico-classe {
    font-size: 11px;
    font-weight: 600;
    color: #0ea5e9;
    background: #f0f9ff;
    padding: 1px 7px;
    border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════
   Navigation Rail + Mega Flyout (2026-08-15)
   Substitui a sidebar única (.ns-drawer no desktop, mantida como
   .ns-drawer-mobile só pro drawer do celular). Todas as classes abaixo são
   NOVAS — nada das regras antigas de .ns-drawer/.ns-topbar foi alterado, só
   sobrescrito onde precisa (margin do .ns-content, visibilidade do drawer
   antigo em telas grandes) via regras que vêm depois no arquivo.
   ══════════════════════════════════════════════════════════════ */

/* Rail — coluna fina de ícones dos módulos, sempre visível no desktop.
   Escondida por padrão (mobile usa o drawer tradicional abaixo). */
.ns-rail { display: none; }

/* Ícone à esquerda do rótulo (linha única) em vez de empilhado — reduz a
   altura de cada item (~38px vs ~55px do layout empilhado antigo) e
   aproveita a largura maior do rail (ver .ns-rail abaixo). */
.ns-rail-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: #0f172a;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ns-rail-item .bi { font-size: 18px; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; }

.ns-rail-item-label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
}

.ns-rail-item:hover { background: #f8fafc; color: #0f172a; }

.ns-rail-item-ativo {
    background: #e0f2fe;
    color: #0ea5e9;
    border-left-color: #0ea5e9;
}

.ns-rail-item-busca { color: #0ea5e9; }

.ns-rail-sep {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 14px 10px;
    flex-shrink: 0;
}

/* Flyout — painel com os itens do módulo ativo (ou resultados de busca).
   Overlay flutuante (não empurra o conteúdo), fecha ao clicar fora. */
.ns-flyout { display: none; }
.ns-flyout-overlay { display: none; }

.ns-flyout-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 14px 6px;
    padding: 8px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #94a3b8;
    flex-shrink: 0;
}

.ns-flyout-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: #0f172a;
}

.ns-flyout-search input::placeholder { color: #94a3b8; }

.ns-flyout-close {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    padding: 3px;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background .12s, color .12s;
}

.ns-flyout-close:hover { color: #0f172a; background: #e2e8f0; }

.ns-flyout-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 16px;
    margin: 0 4px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ns-flyout-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f0f9ff;
    color: #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.ns-flyout-header-nome {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.ns-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

.ns-flyout-body::-webkit-scrollbar { width: 4px; }
.ns-flyout-body::-webkit-scrollbar-track { background: transparent; }
.ns-flyout-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

/* Resultados de busca dentro do flyout precisam esticar/rolar dentro do
   flex column do painel — escopado só ao flyout pra não afetar o mesmo
   bloco reaproveitado dentro do drawer mobile (que rola a nav inteira). */
.ns-flyout .ns-drawer-search-results { flex: 1; overflow-y: auto; }

@media (min-width: 992px) {
    .ns-rail {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 52px; left: 0; bottom: 0;
        width: 220px;
        z-index: 120;
        background: #ffffff;
        border-right: 1px solid #e2e8f0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        padding: 10px 0 16px;
        transition: transform .2s ease;
    }

    .ns-rail::-webkit-scrollbar { display: none; }
    .ns-rail.ns-rail-collapsed { transform: translateX(-100%); }

    .ns-flyout {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 52px; left: 220px; bottom: 0;
        width: 300px;
        z-index: 118;
        background: #ffffff;
        border-right: 1px solid #e2e8f0;
        box-shadow: 6px 0 28px rgba(15, 23, 42, .10);
        overflow: hidden;
        transition: left .2s ease;
    }

    .ns-flyout.ns-flyout-recuado { left: 0; }

    .ns-flyout-overlay {
        display: block;
        position: fixed;
        inset: 52px 0 0 0;
        z-index: 117;
        background: transparent;
    }

    /* Drawer antigo (agora só mobile) nunca aparece em telas grandes —
       sobrescreve a regra legada "@media (min-width:992px) .ns-drawer
       {transform: translateX(0)}" que forçava ele sempre aberto. */
    .ns-drawer-mobile,
    .ns-drawer-overlay-mobile {
        display: none !important;
    }

    /* Conteúdo agora reserva espaço só pro rail (220px) — o flyout é
       flutuante (overlay), não soma na largura do conteúdo. Sobrescreve a
       regra legada de margin-left:260px baseada na largura do drawer antigo. */
    .ns-content { margin-left: 220px; }
    .ns-rail.ns-rail-collapsed ~ .ns-content { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Home — Hub de Cards por módulo (2026-08-15)
   ══════════════════════════════════════════════════════════════ */
.ns-hub-header { margin-bottom: 22px; }

.ns-hub-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}

.ns-hub-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.ns-hub-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: #94a3b8;
    margin: 30px 0 14px;
}

.ns-hub-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    height: 100%;
    text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    cursor: pointer;
}

.ns-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    border-color: #cbd5e1;
}

.ns-hub-card-disabled { opacity: .55; cursor: default; }
.ns-hub-card-disabled:hover { transform: none; box-shadow: none; border-color: #e2e8f0; }

.ns-hub-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ns-hub-card-texto { min-width: 0; }

.ns-hub-card-nome {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Abaixo do breakpoint xl (onde os cards passam a ter 4 por linha e sobra
   largura de sobra) os cards ficam estreitos demais pra manter nome de
   módulo numa linha só sem virar sopa de letrinhas ("Cadas...", "Contábil /
   Patri..."). Deixa quebrar em até 2 linhas em vez de truncar. */
@media (max-width: 1199.98px) {
    .ns-hub-card { align-items: flex-start; padding: 14px; }
    .ns-hub-card-icon { width: 38px; height: 38px; font-size: 17px; }
    .ns-hub-card-nome {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }
}

.ns-hub-card:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   Favoritos de menu (2026-08-15)
   ══════════════════════════════════════════════════════════════ */

/* Linha de um item de menu (flyout do rail ou drawer mobile) — o link ocupa
   o espaço todo, a estrela fica encostada na direita, fora do <a> (não dá
   pra aninhar botão dentro de link de forma válida/sem ambiguidade de clique). */
.ns-menu-item-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ns-menu-item-link { flex: 1 1 auto; min-width: 0; }

.ns-menu-item-star {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-right: 8px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ns-menu-item-star:hover { background: #f1f5f9; color: #94a3b8; }
.ns-menu-item-star-ativo { color: #f59e0b; }
.ns-menu-item-star-ativo:hover { background: #fffbeb; color: #d97706; }

/* Categoria retrátil (ex: "CADASTROS", "MOVIMENTAÇÃO") dentro do flyout
   desktop e do drawer mobile — cabeçalho clicável com chevron que rotaciona
   via CSS conforme MenuCategory.IsExpanded (ver NsNavShell.razor). Mesma
   tipografia de .ns-drawer-group (que virou só o cabeçalho visual antes),
   só que agora é um <button>, não um <div>. */
.ns-menu-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 14px 18px 5px;
    background: none;
    border: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
}

.ns-menu-category-header:hover { color: #0ea5e9; }

.ns-menu-category-chevron {
    font-size: 11px;
    flex-shrink: 0;
    transition: transform .15s ease;
}

.ns-menu-category-chevron-expandida { transform: rotate(90deg); }

/* Entrada suave dos itens ao expandir — sem JS/interop, só CSS (o @if do
   Blazor já cuida de mostrar/esconder; isso só evita o "pop" seco). */
.ns-menu-category-body { animation: ns-menu-category-fade .12s ease; }

@keyframes ns-menu-category-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Toggle Favoritos/Todos — só aparece com um módulo ativo no flyout do rail
   (não existe no drawer mobile, que não tem modo separado). */
.ns-flyout-modo-toggle {
    display: flex;
    gap: 4px;
    margin: 12px 18px 8px;
    padding: 3px;
    background: #f1f5f9;
    border-radius: 8px;
    flex-shrink: 0;
}

.ns-flyout-modo-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.ns-flyout-modo-btn .bi { font-size: 12px; }
.ns-flyout-modo-btn:hover { color: #0f172a; }

.ns-flyout-modo-ativo {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.ns-flyout-modo-ativo.ns-flyout-modo-btn .bi-star-fill { color: #f59e0b; }

/* Estado vazio — módulo sem favoritos ainda. */
.ns-flyout-favoritos-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    color: #0f172a;
}

.ns-flyout-favoritos-vazio .bi {
    font-size: 28px;
    color: #cbd5e1;
    margin-bottom: 10px;
}

.ns-flyout-favoritos-vazio p { margin: 0 0 4px; font-size: 13px; }
.ns-flyout-favoritos-vazio-dica { font-size: 12px !important; color: #0f172a; }

.ns-flyout-favoritos-vazio-link {
    margin-top: 14px;
    background: none;
    border: none;
    color: #0ea5e9;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background .12s;
}

.ns-flyout-favoritos-vazio-link:hover { background: #f0f9ff; }

.ns-hub-card-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 2px;
}

/* Paleta de accent rotativa pros ícones dos cards — só cor de fundo/ícone
   varia (mesmo padrão claro+saturado do resto do app), dá vida ao grid sem
   virar bagunça visual. */
.ns-hub-accent-0 { background: #f0f9ff; color: #0ea5e9; }
.ns-hub-accent-1 { background: #f0fdf4; color: #16a34a; }
.ns-hub-accent-2 { background: #fefce8; color: #ca8a04; }
.ns-hub-accent-3 { background: #fdf4ff; color: #a21caf; }
.ns-hub-accent-4 { background: #fff1f2; color: #e11d48; }
.ns-hub-accent-5 { background: #f0fdfa; color: #0d9488; }
.ns-historico-seta { color: #cbd5e1; margin: 0 4px; font-size: 10px; }

/* ═══ Painel lateral (NsSidePanel) ═══
   Desktop: desliza da direita, o conteúdo atrás continua visível.
   Mobile: tela cheia. A barra de ação fica fixa no rodapé nos dois casos —
   só o corpo rola. */

.ns-sidepanel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1050;
    animation: ns-sidepanel-fade .15s ease-out;
}

.ns-sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: #ffffff;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(15, 23, 42, .18);
    animation: ns-sidepanel-in .18s ease-out;
    outline: none;
}

.ns-sidepanel-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.ns-sidepanel-titulo {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.ns-sidepanel-subtitulo {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.ns-sidepanel-fechar {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.ns-sidepanel-fechar:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.ns-sidepanel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px;
}

.ns-sidepanel-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

@keyframes ns-sidepanel-in {
    from { transform: translateX(24px); opacity: .4; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes ns-sidepanel-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ═══ Navegador de hierarquia (NsHierarquiaNav) ═══
   Mesmo componente e mesma consulta nos dois tamanhos: as colunas ficam num
   trilho horizontal com scroll-snap. No desktop cabem várias lado a lado
   (visual de colunas); no celular cada coluna ocupa 100% da largura e vira
   drill-down. Quem muda o comportamento é o CSS, não o código. */

.ns-hier-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 13px;
    margin-bottom: 10px;
}

.ns-hier-crumb {
    background: transparent;
    border: 0;
    padding: 3px 8px;
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    font-size: 13px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-hier-crumb:hover { background: #f1f5f9; color: #0f172a; }
.ns-hier-crumb-atual { color: #1d4ed8; font-weight: 600; }
.ns-hier-crumb-sep { color: #cbd5e1; font-size: 10px; }

/* Altura limitada de propósito: sem isso a coluna cresce até o tamanho da
   lista, a PÁGINA inteira passa a rolar e o overflow interno de cada coluna
   nunca entra em ação — o cabeçalho e o breadcrumb somem da tela ao descer de
   nível (bug real visto no teste de 2026-08-16 com os grupos do Gabbinetto).
   Com a altura presa ao viewport, cada coluna rola por dentro e o trilho
   inteiro fica sempre visível. */
.ns-hier-trilho {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    height: calc(100vh - 230px);
    min-height: 340px;
}

.ns-hier-coluna {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    outline: none;
    min-width: 0;
}

.ns-hier-coluna:last-child { border-right: 0; }

.ns-hier-coluna-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.ns-hier-coluna-titulo {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #0f172a;
}

.ns-hier-coluna-novo {
    background: transparent;
    border: 0;
    color: #2563eb;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.ns-hier-coluna-novo:hover { background: #eff6ff; }

.ns-hier-coluna-lista {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Linha = navegar, lápis = editar. Duas áreas de clique irmãs (nunca botão
   dentro de botão, que é HTML inválido). */
.ns-hier-item-wrap {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f1f5f9;
}

.ns-hier-item-wrap:hover { background: #f8fafc; }

.ns-hier-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 9px 4px 9px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #0f172a;
}

.ns-hier-item-editar {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #0ea5e9;
    font-size: 12px;
    padding: 0 10px;
    cursor: pointer;
}

.ns-hier-item-editar:hover { color: #2563eb; background: #eff6ff; }

.ns-hier-item-ativo {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 500;
}

.ns-hier-item-ativo:hover { background: #dbeafe; }
.ns-hier-item-ativo .ns-hier-item-editar { color: #93c5fd; }

.ns-hier-item-codigo {
    flex: 0 0 auto;
    font-size: 11px;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.ns-hier-item-ativo .ns-hier-item-codigo { color: #60a5fa; }

.ns-hier-item-desc {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-hier-item-seta { flex: 0 0 auto; color: #334155; font-size: 11px; }
.ns-hier-item-ativo .ns-hier-item-seta { color: #60a5fa; }

/* Registro inativo continua visível (o usuário precisa achar pra reativar) —
   o risco no texto já é sinal suficiente de "inativo" sem precisar apagar a
   fonte (mesmo princípio do item indisponível do menu: cor não é a única
   pista, texto continua legível). */
.ns-hier-item-inativo .ns-hier-item-desc {
    color: #0f172a;
    text-decoration: line-through;
}

.ns-hier-vazio {
    padding: 18px 12px;
    font-size: 12px;
    color: #0f172a;
    text-align: center;
}

@media (max-width: 767.98px) {
    .ns-sidepanel {
        width: 100vw;
        box-shadow: none;
    }

    .ns-sidepanel-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    /* Uma coluna por vez ocupando a tela toda: o mesmo trilho vira drill-down. */
    .ns-hier-coluna { flex: 0 0 100%; }

    /* dvh em vez de vh: no celular a barra de endereço do navegador entra e sai
       da tela, e 100vh ignora isso — a página passava a rolar na vertical
       (medido no teste: trilho de 612px numa viewport de 812px ainda estourava).
       Navegador sem suporte a dvh simplesmente mantém a regra de vh acima. */
    .ns-hier-trilho {
        height: calc(100vh - 250px);
        height: calc(100dvh - 250px);
        min-height: 280px;
    }
}

/* Board Kanban (CRM Leads/Oportunidades) — colunas por Etapa, cards
   arrastáveis via HTML5 drag-and-drop nativo (ver project_netsiga_crm_kanban).
   Mesma linguagem visual dos componentes ns-modal e ns-confirm (fixo claro,
   não segue o Skin escuro do DevExpress). */
.ns-kanban {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.ns-kanban-col {
    background: #f1f5f9;
    border-radius: 10px;
    min-width: 260px;
    max-width: 280px;
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 260px);
}

.ns-kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
}

.ns-kanban-col-count {
    background: #e2e8f0;
    color: #475569;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
}

.ns-kanban-col-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.ns-kanban-card {
    background: var(--ns-kanban-accent-bg, #ffffff);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--ns-kanban-accent, #94a3b8);
    padding: 10px 12px;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.ns-kanban-card:hover {
    border-color: #94a3b8;
    border-left-color: var(--ns-kanban-accent, #94a3b8);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .14);
    transform: translateY(-2px);
}

.ns-kanban-card:active { cursor: grabbing; transform: translateY(0); }

.ns-kanban-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ns-kanban-card-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--ns-kanban-accent-soft, #eef2ff);
    color: var(--ns-kanban-accent, #4338ca);
}

.ns-kanban-card-title {
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-kanban-card-sub {
    font-size: 12.5px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ns-kanban-card-sub .bi {
    color: #64748b;
    font-size: 12px;
}

.ns-kanban-card-produto {
    font-size: 12px;
    color: #475569;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns-kanban-card-produto .bi {
    color: #64748b;
    font-size: 12px;
    flex: 0 0 auto;
}

.ns-kanban-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ns-agenda-scheduler {
    height: calc(100vh - 200px);
    min-height: 500px;
}

/* Visual "card claro" (fundo claro + barra sólida na lateral) em vez do
   preenchimento sólido padrão do DxScheduler — pedido do usuário
   comparando com a demo oficial da DevExpress. .dxsc-apt-bg recebe a cor
   do Label via inline style (background-color); um gradiente por cima
   deixa os primeiros 4px intocados (barra sólida) e clareia o resto com
   uma camada branca semitransparente, sem precisar saber a cor em CSS
   puro — funciona pra qualquer cor que o componente aplicar. */
.ns-agenda-scheduler .dxsc-apt-bg {
    background-image: linear-gradient(to right, transparent 0, transparent 4px, rgba(255, 255, 255, .82) 4px, rgba(255, 255, 255, .82) 100%);
}

/* Barra do Status na lateral direita (mesma ideia, sem clarear — é só um
   indicador fino, já vem estreito por padrão do componente). */
.ns-agenda-scheduler .dxsc-apt-status {
    opacity: .9;
}

/* Horário/descrição vêm com opacity reduzida por padrão (.8/.65) — feito
   pensando no preenchimento sólido e saturado padrão do componente; no
   fundo claro daqui isso lê como cinza desbotado em vez de preto.
   Usuário testou e pediu texto "preto normal" — título já vinha 100%. */
.ns-agenda-scheduler .dxbs-sc-apt-time,
.ns-agenda-scheduler .dxbs-sc-apt-description {
    opacity: 1;
}

.ns-kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.ns-kanban-card-data {
    font-size: 11px;
    color: #64748b;
}

.ns-badge {
    background: #eef2ff;
    color: #4338ca;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

/* Impressão de documentos (ex.: proposta de divisórias): esconde o chrome do app. */
@media print {
    .ns-topbar, .ns-rail, .ns-flyout, .ns-flyout-overlay, .ns-drawer, .ns-drawer-overlay,
    .ns-versao-rodape, .ns-no-print { display: none !important; }
    .ns-content { margin: 0 !important; background: #fff !important; min-height: 0 !important; overflow: visible !important; }
    .ns-content-inner { padding: 0 !important; }
    body { background: #fff !important; }
}

/* Sino de notificações (barra superior) */
.ns-sino-wrap { position: relative; display: inline-flex; align-items: center; }
.ns-sino-btn { position: relative; }
.ns-sino-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.ns-sino-overlay { position: fixed; inset: 0; z-index: 1200; }
.ns-sino-panel { position: absolute; top: 100%; right: 0; z-index: 1210; width: 360px; max-width: 92vw; max-height: 70vh; overflow-y: auto; background: #fff; color: #111; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ns-sino-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.ns-sino-link { border: 0; background: none; color: #1d4ed8; font-size: 12px; cursor: pointer; }
.ns-sino-vazio { padding: 16px; color: #475569; font-size: 13px; }
.ns-sino-item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f1f5f9; background: #fff; padding: 10px 12px; cursor: pointer; }
.ns-sino-item:hover { background: #f8fafc; }
.ns-sino-nova { background: #eff6ff; }
.ns-sino-titulo { font-weight: 700; font-size: 13px; }
.ns-sino-msg { font-size: 12px; color: #334155; margin-top: 2px; }
.ns-sino-canais { font-size: 11px; color: #475569; margin-top: 4px; }
.ns-sino-data { font-size: 11px; color: #64748b; margin-top: 4px; }
@media print { .ns-sino-wrap { display: none !important; } }