/* ============================================================
   TryERP.Web — blocos de interface GLOBAIS (R106).

   Tudo que mais de uma tela usa mora AQUI, não num .razor.css. CSS isolado (.razor.css) só
   vale dentro do próprio componente: a mesma classe usada em outra tela simplesmente não tem
   estilo — foi assim que as abas do Parceiro/Produto/Tributação ficaram sem aparência de aba,
   os cards de celular de Serviços da NFS-e ficaram crus e as métricas do topo da NF-e nunca
   pegaram estilo (auditoria de layout 2026-09-23). Teste: LayoutTests.
   ============================================================ */

/* ---------- Abas (<TryAbas>) ---------- */

.tryerp-abas {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--tryerp-surface);
    border: 1px solid var(--tryerp-border);
    border-radius: var(--tryerp-radius-lg);
    box-shadow: var(--tryerp-shadow-sm);
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

.tryerp-abas.tryerp-abas-fixa {
    position: sticky;
    top: calc(var(--tryerp-topbar-h) + 0.5rem);
    z-index: 30;
}

.tryerp-abas-trilho {
    position: relative;   /* referência do offsetLeft usado para trazer a aba ativa à vista */
    display: flex;
    align-items: stretch;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.tryerp-abas-trilho::-webkit-scrollbar {
    display: none;
}

.tryerp-aba {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.8rem 1rem;
    border: none;
    background: transparent;
    color: var(--tryerp-text-muted);
    font-size: var(--tryerp-text-body);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    transition: color var(--tryerp-transition), background-color var(--tryerp-transition);
}

.tryerp-aba .bi {
    font-size: 1.05rem;
    color: var(--tryerp-text-subtle);
}

/* Traço inferior: invisível nas inativas, forte na ativa. */
.tryerp-aba::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    transition: background-color var(--tryerp-transition);
}

.tryerp-aba:hover:not(:disabled):not(.ativa) {
    color: var(--tryerp-text);
    background: var(--tryerp-surface-alt);
}

.tryerp-aba.ativa {
    color: var(--tryerp-primary);
    font-weight: 600;
    background: var(--tryerp-primary-soft);
}

.tryerp-aba.ativa .bi {
    color: var(--tryerp-primary);
}

.tryerp-aba.ativa::after {
    background: var(--tryerp-primary);
}

.tryerp-aba:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tryerp-aba:focus-visible {
    outline: 2px solid var(--tryerp-primary);
    outline-offset: -2px;
}

.tryerp-aba-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    border-radius: var(--tryerp-radius-pill);
    color: var(--tryerp-primary);
    background: var(--tryerp-primary-soft);
}

.tryerp-aba.ativa .tryerp-aba-contador {
    color: #fff;
    background: var(--tryerp-primary);
}

.tryerp-aba-ok {
    color: var(--tryerp-success) !important;
}

.tryerp-aba-alerta {
    color: var(--tryerp-warning) !important;
}

/* "Mais": o que não cabe entre as principais. */
.tryerp-abas-mais {
    position: relative;
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--tryerp-border);
    margin-left: 0.25rem;
    padding-left: 0.25rem;
}

.tryerp-abas-mais-ponto {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--tryerp-primary);
}

.tryerp-abas-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1060;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--tryerp-surface);
    border: 1px solid var(--tryerp-border);
    border-radius: var(--tryerp-radius);
    box-shadow: var(--tryerp-shadow-lg);
    padding: 0.35rem 0;
}

.tryerp-abas-menu .tryerp-aba {
    justify-content: flex-start;
    padding: 0.6rem 1rem;
}

.tryerp-abas-menu .tryerp-aba::after {
    display: none;
}

.tryerp-abas-menu .tryerp-aba .tryerp-aba-contador {
    margin-left: auto;
}

.tryerp-abas-fundo {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: transparent;
}

/* Desktop: extras escondidas (vivem no "Mais"), exceto a ativa, que aparece na faixa. */
@media (min-width: 768px) {
    .tryerp-abas-trilho .tryerp-aba-extra:not(.ativa) {
        display: none;
    }
}

/* Celular: todas na faixa rolável (com sombra nas bordas indicando que rola); sem "Mais". */
@media (max-width: 767.98px) {
    .tryerp-abas {
        padding: 0;
        border-radius: var(--tryerp-radius);
    }

    .tryerp-abas-mais {
        display: none;
    }

    .tryerp-abas-trilho {
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        padding: 0 0.5rem;
    }

    .tryerp-aba {
        padding: 0.7rem 0.8rem;
        font-size: var(--tryerp-text-body-sm);
    }

    .tryerp-abas.tryerp-abas-fixa {
        top: var(--tryerp-topbar-h);
    }
}

/* ---------- Seções de página única (<TrySecoes>) ---------- */

.tryerp-secoes {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.25rem 0 0.75rem;
    margin-bottom: 0.25rem;
}

.tryerp-secoes::-webkit-scrollbar {
    display: none;
}

.tryerp-secoes.tryerp-secoes-fixa {
    position: sticky;
    top: var(--tryerp-topbar-h);
    z-index: 25;
    background: var(--tryerp-bg);
    padding-top: 0.5rem;
}

.tryerp-secao-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--tryerp-radius-pill);
    border: 1px solid var(--tryerp-border-strong);
    background: var(--tryerp-surface);
    color: var(--tryerp-text-muted);
    font-size: var(--tryerp-text-body-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--tryerp-transition);
}

.tryerp-secao-link:hover {
    color: var(--tryerp-primary);
    border-color: var(--tryerp-primary);
}

.tryerp-secao-link.ativa {
    color: var(--tryerp-primary);
    background: var(--tryerp-primary-soft);
    border-color: var(--tryerp-primary-soft);
    font-weight: 600;
}

/* Alvo de rolagem: não esconder o título da seção atrás do topo fixo + faixa de seções. */
.tryerp-secao {
    scroll-margin-top: calc(var(--tryerp-topbar-h) + 7rem);
}

/* TryErros: o alerta é levado à vista quando aparece; a margem evita que ele pare debaixo do
   cabeçalho grudado no topo. */
.tryerp-erros {
    scroll-margin-top: calc(var(--tryerp-topbar-h) + 6rem);
}

/* ---------- Painel lateral (<TryPainelLateral>) ---------- */

.tryerp-painel-fundo {
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(18, 32, 63, 0.35);
    animation: tryerp-aparecer 120ms ease-out;
}

.tryerp-painel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    width: min(100vw, var(--tryerp-painel-largura, 480px));
    display: flex;
    flex-direction: column;
    background: var(--tryerp-surface);
    box-shadow: var(--tryerp-shadow-lg);
    animation: tryerp-entrar-direita 160ms ease-out;
    outline: none;
}

.tryerp-painel-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tryerp-border);
}

.tryerp-painel-titulo {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.tryerp-painel-subtitulo {
    font-size: var(--tryerp-text-body-sm);
    color: var(--tryerp-text-muted);
    margin: 0.15rem 0 0;
}

.tryerp-painel-fechar {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--tryerp-text-muted);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tryerp-radius);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.tryerp-painel-fechar:hover {
    background: var(--tryerp-surface-alt);
    color: var(--tryerp-text);
}

.tryerp-painel-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.tryerp-painel-rodape {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tryerp-border);
    background: var(--tryerp-surface-alt);
}

@media (max-width: 767.98px) {
    .tryerp-painel-rodape > * {
        flex: 1;
    }
}

/* ---------- Diálogo de confirmação (IConfirmacaoService) ---------- */

.tryerp-confirmacao-fundo {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(18, 32, 63, 0.45);
    animation: tryerp-aparecer 120ms ease-out;
}

.tryerp-confirmacao {
    width: min(100%, 30rem);
    background: var(--tryerp-surface);
    border-radius: var(--tryerp-radius-lg);
    box-shadow: var(--tryerp-shadow-lg);
    overflow: hidden;
    outline: none;
}

.tryerp-confirmacao-corpo {
    display: flex;
    gap: 0.9rem;
    padding: 1.25rem 1.25rem 1rem;
}

.tryerp-confirmacao-icone {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--tryerp-primary-soft);
    color: var(--tryerp-primary);
}

.tryerp-confirmacao.perigo .tryerp-confirmacao-icone {
    background: var(--tryerp-danger-soft);
    color: var(--tryerp-danger);
}

.tryerp-confirmacao-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.tryerp-confirmacao-mensagem {
    margin: 0;
    color: var(--tryerp-text-muted);
    white-space: pre-line;
}

.tryerp-confirmacao-rodape {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    background: var(--tryerp-surface-alt);
    border-top: 1px solid var(--tryerp-border);
}

@media (max-width: 480px) {
    .tryerp-confirmacao-rodape > * {
        flex: 1;
    }
}

@keyframes tryerp-aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tryerp-entrar-direita {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ---------- Listas: grid, estado vazio, cards do celular, menu de ações da linha ---------- */

.tryerp-grid {
    border: none !important;
    border-radius: 0 !important;
}

.tryerp-grid .dxbl-grid-header-row th,
.tryerp-grid .dxbl-grid-header-row .dxbl-grid-header-cell {
    font-size: var(--tryerp-text-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tryerp-text-subtle);
    background: var(--tryerp-surface-alt);
}

.tryerp-grid .dxbl-grid-data-row td {
    font-size: var(--tryerp-text-body);
    color: var(--tryerp-text);
}

.tryerp-grid .dxbl-grid-data-row:hover {
    background: var(--tryerp-surface-alt) !important;
}

.tryerp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--tryerp-text-muted);
    text-align: center;
    background: var(--tryerp-surface);
}

.tryerp-empty-state .bi {
    font-size: 2.5rem;
    color: var(--tryerp-text-subtle);
    margin-bottom: 0.75rem;
}

.tryerp-empty-title {
    font-weight: 600;
    color: var(--tryerp-text);
    font-size: var(--tryerp-text-body);
    margin-bottom: 0.25rem;
}

.tryerp-empty-subtitle {
    font-size: var(--tryerp-text-body-sm);
    color: var(--tryerp-text-muted);
}

.tryerp-parc-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--tryerp-surface-alt);
}

.tryerp-parc-card {
    background: var(--tryerp-surface);
    border: 1px solid var(--tryerp-border);
    border-radius: var(--tryerp-radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--tryerp-shadow-sm);
    transition: box-shadow var(--tryerp-transition);
}

.tryerp-parc-card:active,
.tryerp-parc-card:hover {
    box-shadow: var(--tryerp-shadow-md);
}

.tryerp-parc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid var(--tryerp-border);
    background: var(--tryerp-surface-alt);
}

.tryerp-parc-card-header strong {
    font-weight: 600;
    color: var(--tryerp-text);
}

.tryerp-parc-card-body {
    padding: 0.625rem 0.875rem;
    font-size: var(--tryerp-text-body-sm);
}

/* ---------- Topo da página: métricas, status do auto-save, botões suaves ---------- */

.tryerp-page-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--tryerp-text-body-sm);
    color: var(--tryerp-text-muted);
    font-variant-numeric: tabular-nums;
}

.tryerp-page-metric .bi {
    color: var(--tryerp-text-subtle);
    font-size: 0.85rem;
}

.tryerp-page-metric-total {
    color: var(--tryerp-primary);
    font-weight: 600;
}

.tryerp-autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--tryerp-text-subtle);
    font-style: italic;
}

/* DxButton recebe CssClass no <button> que ele renderiza — seletor com .dxbl-btn para vencer o tema. */
.dxbl-btn.tryerp-btn-danger-soft,
.btn.tryerp-btn-danger-soft {
    background-color: var(--tryerp-danger-soft);
    border-color: var(--tryerp-danger-soft);
    color: var(--tryerp-danger);
}

.dxbl-btn.tryerp-btn-danger-soft:hover,
.btn.tryerp-btn-danger-soft:hover {
    background-color: var(--tryerp-danger);
    border-color: var(--tryerp-danger);
    color: #fff;
}

.dxbl-btn.tryerp-btn-primary-soft,
.btn.tryerp-btn-primary-soft {
    background-color: var(--tryerp-primary-soft);
    border-color: var(--tryerp-primary-soft);
    color: var(--tryerp-primary);
}

.dxbl-btn.tryerp-btn-primary-soft:hover,
.btn.tryerp-btn-primary-soft:hover {
    background-color: var(--tryerp-primary);
    border-color: var(--tryerp-primary);
    color: #fff;
}

.tryerp-badge-secondary {
    background: var(--tryerp-secondary-container);
    color: var(--tryerp-on-secondary-container);
}

/* ---------- Topo fixo de formulário: cabeçalho + faixa de seções num bloco só ---------- */

.tryerp-topo-fixo {
    position: sticky;
    top: var(--tryerp-topbar-h);
    z-index: 35;
    background: var(--tryerp-bg);
    margin: -0.75rem 0 0;
    padding-top: 0.75rem;
}

.tryerp-topo-fixo .tryerp-secoes {
    position: static;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--tryerp-border);
}

/* Celular: nada gruda no alto (a tela é curta) — as ações já estão na barra do rodapé. */
@media (max-width: 767.98px) {
    .tryerp-topo-fixo {
        position: static;
        margin: 0;
        padding-top: 0;
    }
}

/* ---------- Página com cabeçalho fixo: espaço para a barra de ações no celular ---------- */

@media (max-width: 767.98px) {
    .tryerp-content:has(.tryerp-page-header.fixo) {
        padding-bottom: 5.5rem;
    }

    body:has(.tryerp-page-header.fixo) .tryerp-toasts {
        bottom: 4.75rem;
    }
}

/* ---------- Barra de erro do Blazor (vale para TODOS os layouts, inclusive o login) ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--tryerp-danger);
    color: #FFF;
    bottom: 0;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.875rem;
}

#blazor-error-ui .bi {
    margin-right: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
}

#blazor-error-ui .reload {
    color: #FFF;
    font-weight: 600;
    margin-left: 0.5rem;
    text-decoration: underline;
}

/* =============================================================
   Paginador (TryPaginador) — paginação no servidor (#80).
   ============================================================= */
.tryerp-paginador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 0 0;
    font-size: .875rem;
}

.tryerp-paginador-info {
    color: var(--tryerp-text-muted, #6c757d);
}

.tryerp-paginador-botoes {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.tryerp-paginador-pagina {
    padding: 0 .5rem;
    white-space: nowrap;
}

.tryerp-paginador-tamanho {
    width: auto;
}

@media (max-width: 767.98px) {
    .tryerp-paginador {
        justify-content: center;
    }

    .tryerp-paginador-extremo {
        display: none;
    }

    .tryerp-paginador-botoes .btn {
        min-width: 2.75rem;
        min-height: 2.5rem;
    }
}

/* =============================================================
   Modal em tela cheia no celular (DxPopup CssClass="tryerp-popup-tela-cheia").
   No PC continua janela; abaixo de 768px ocupa a tela toda, com o corpo rolando e o rodapé
   (botões) sempre à vista — um formulário de item de NF-e não cabe numa janela de 390px.
   ============================================================= */
@media (max-width: 767.98px) {
    .dxbl-modal:has(.tryerp-popup-tela-cheia) > .dxbl-modal-root {
        padding: 0 !important;
        margin: 0 !important;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.tryerp-popup-tela-cheia {
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        height: 100dvh;
        margin: 0 !important;
        align-self: stretch;
    }

    .dxbl-popup.tryerp-popup-tela-cheia > .dxbl-modal-content {
        height: 100dvh;
        max-height: 100dvh !important;
        border: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .dxbl-popup.tryerp-popup-tela-cheia > .dxbl-modal-content > .dxbl-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dxbl-popup.tryerp-popup-tela-cheia > .dxbl-modal-content > .dxbl-modal-footer {
        flex: 0 0 auto;
        padding-bottom: max(.75rem, env(safe-area-inset-bottom));
    }
}

/* Botão de envio invisível dos formulários de filtro: garante que Enter num campo submeta o form
   (envio implícito), sem aparecer nem receber foco. */
.tryerp-submit-oculto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============================================================
   Atalhos de teclado (R115) — marcador do <TryAtalho>, teclas desenhadas e a ajuda (Ctrl+/).
   ============================================================ */
.tryerp-atalho {
    display: none !important;
}

.tryerp-teclas {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.tryerp-teclas kbd {
    font-family: var(--tryerp-font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--tryerp-text);
    background: var(--tryerp-surface);
    border: 1px solid var(--tryerp-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--tryerp-radius-sm);
    padding: 3px 6px;
}

.tryerp-teclas-mais {
    color: var(--tryerp-text-subtle);
    font-size: 11px;
}

.tryerp-atalhos-lista {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.tryerp-atalhos-lista li {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--tryerp-border);
    font-size: var(--tryerp-text-body);
}

.tryerp-atalhos-lista li:last-child {
    border-bottom: 0;
}

.tryerp-atalhos-teclas {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    color: var(--tryerp-text-subtle);
}

.tryerp-atalhos-desabilitado {
    color: var(--tryerp-text-subtle);
}

.tryerp-atalhos-subtitulo {
    font-size: var(--tryerp-text-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tryerp-text-subtle);
    margin: 0.5rem 0 0.25rem;
}

/* Celular não tem teclado físico: nada de dica de tecla. */
@media (max-width: 767.98px) {
    .tryerp-teclas-dica {
        display: none !important;
    }
}