/*
 * ============================================================================
 * BWMERP - Estilos Customizados
 * ============================================================================
 *
 * IMPORTANTE: As cores primárias do MudBlazor são definidas em CustomTheme.cs
 * e aplicadas automaticamente em todos os componentes MudBlazor.
 *
 * Este arquivo CSS é mantido apenas para estilos complementares que NÃO podem
 * ser definidos via MudTheme, como ajustes de layout específicos ou estilos
 * customizados fora do escopo do MudBlazor.
 *
 * Cores do Logo (referência):
 * - Azul Primário: #012840
 * - Cinza Escuro:  #73736F
 * - Cinza Claro:   #A6A6A4
 * - Branco:        #F2F2F2
 * - Preto:         #0D0D0D
 *
 * ============================================================================
 */

/* ============================================================================
 * OVERLAY DE CARREGAMENTO INICIAL
 * ============================================================================
 * Overlay unificado e padronizado que cobre toda a aplicação durante o
 * carregamento inicial, mantendo consistência visual com as cores da marca.
 * ============================================================================
 */

/* Evita barra de rolagem durante o overlay */
body.overlay-active {
    overflow: hidden;
}

#container-initial-loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
    overflow: hidden;
}

#container-initial-loading-overlay.dark-mode {
    background-color: #000;
}

#container-initial-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* O conteúdo interno ocupa o container inteiro e centraliza */
#initial-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.initial-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.initial-loading-logo {
    margin-bottom: 8px;
}

.initial-logo-image {
    height: 48px;
    width: auto;
    opacity: 0.9;
}

.initial-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #012340;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#container-initial-loading-overlay.dark-mode .initial-loading-spinner {
    border: 4px solid #e0e0e0;
    border-top-color: #f5f5f5;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.initial-loading-text {
    color: #012340;
    font-size: 16px;
    font-weight: 500;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

#container-initial-loading-overlay.dark-mode .initial-loading-text {
    color: #f5f5f5;
}

/* ============================================================================
 * PADRONIZAÇÃO DE BOTÕES
 * ============================================================================
 * Classes para garantir largura FIXA e consistente em botões de formulários.
 * O MudBlazor Size="Size.Medium" define apenas a altura (40px), não a largura.
 *
 * IMPORTANTE: Estas classes NÃO devem ser usadas em botões de autenticação
 * (Entrar, Registrar, EsqueciSenha, RedefinirSenha), que usam FullWidth="true"
 *
 * Uso:
 * <MudButton Class="btn-action" Size="Size.Medium">SALVAR</MudButton>
 * <MudButton Class="btn-action" Size="Size.Medium">CANCELAR</MudButton>
 *
 * Larguras FIXAS (v1.3):
 * - btn-action: 140px (SALVAR, CANCELAR, INCLUIR, EXCLUIR, ATUALIZAR, ALTERAR)
 * - btn-action-large: 200px (VOLTAR, TENTAR NOVAMENTE)
 * - btn-compact: 100px (Paginação, cards)
 * ============================================================================
 */

/* Botão de ação padrão - SALVAR, CANCELAR, INCLUIR, EXCLUIR, ATUALIZAR, ALTERAR */
.btn-action,
button.btn-action,
.mud-button.btn-action,
.mud-button-root.btn-action {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Botão de ação largo - Para ações com texto maior */
.btn-action-large,
button.btn-action-large,
.mud-button.btn-action-large,
.mud-button-root.btn-action-large {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Botão de ação extra largo - Para ações com texto maior */
.btn-action-large-extra,
button.btn-action-large-extra,
.mud-button.btn-action-large-extra,
.mud-button-root.btn-action-large-extra {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Botão compacto - Para uso em tabelas e cards */
.btn-compact,
button.btn-compact,
.mud-button.btn-compact,
.mud-button-root.btn-compact {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding: 6px 12px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Botão INCLUIR - mesmo tamanho que btn-action em desktop */
.btn-action-incluir,
button.btn-action-incluir,
.mud-button.btn-action-incluir,
.mud-button-root.btn-action-incluir {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ============================================================================
 * RESPONSIVIDADE MOBILE - ADAPTAÇÃO DE BOTÕES
 * ============================================================================
 * Em dispositivos móveis (max-width: 599px):
 *
 * 1. Botão INCLUIR (.btn-action-incluir):
 *    - Fica QUADRADO (40x40px) apenas com o ícone +
 *    - Texto é ocultado
 *
 * 2. Demais botões (.btn-action, .btn-action-large):
 *    - Ícones são REMOVIDOS
 *    - Largura REDUZIDA para economizar espaço
 *    - Mantém apenas o texto
 * ============================================================================
 */

@media (max-width: 599px) {
    /* DEMAIS BOTÕES: Ocultar ícones */
    .btn-action .mud-button-icon-start,
    .btn-action-large .mud-button-icon-start,
    .btn-compact .mud-button-icon-start {
        display: none !important;
    }

    /* Reduzir largura dos botões padrão em mobile */
    .btn-action,
    button.btn-action,
    .mud-button.btn-action,
    .mud-button-root.btn-action {
        width: auto !important;
        min-width: 80px !important;
        max-width: 120px !important;
        padding: 8px 12px !important;
    }

    .btn-action-large,
    button.btn-action-large,
    .mud-button.btn-action-large,
    .mud-button-root.btn-action-large {
        width: auto !important;
        min-width: 100px !important;
        max-width: 150px !important;
        padding: 8px 12px !important;
    }

    .btn-compact,
    button.btn-compact,
    .mud-button.btn-compact,
    .mud-button-root.btn-compact {
        width: auto !important;
        min-width: 70px !important;
        max-width: 100px !important;
        padding: 6px 10px !important;
    }

    /* BOTÃO INCLUIR: Fica quadrado apenas com ícone + (sobrescreve regras acima) */
    .btn-action-incluir,
    button.btn-action-incluir,
    .mud-button.btn-action-incluir,
    .mud-button-root.btn-action-incluir {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
    }

    /* Ocultar o texto do botão INCLUIR, mantendo apenas o ícone */
    .btn-action-incluir .mud-button-label {
        display: none !important;
    }

    /* Garantir que o ícone do INCLUIR permaneça visível e centralizado */
    .btn-action-incluir .mud-button-icon-start {
        display: block !important;
        margin: 0 !important;
    }
}

/* ============================================================================
 * SELEÇÃO DE CLIENTE
 * ============================================================================
 * Estilos mínimos necessários para manter:
 * - Sombra de hover nos cards (sem "subir" o card, evitando corte em containers com overflow)
 * - Área de listagem com rolagem interna
 * - Altura mínima do painel para não "encolher" durante a pesquisa
 * ============================================================================
 */

.cliente-card {
    transition: box-shadow 0.25s ease;
    position: relative;
}

.cliente-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.cliente-favorito {
    border: 2px solid var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.favorito-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.favorito-toggle .mud-icon-button:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.clientes-scroll-container {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
}

.selecao-cliente-paper {
    min-height: calc(100vh - 81px);
}

.selecao-sistema-paper {
    min-height: calc(100vh - 81px);
}

.min-height-180 {
    min-height: 180px;
}

.icon-48 {
    font-size: 48px;
}

.text-break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================================
 * SCF - Listas / Busca / Headers
 * ============================================================================
 * Observação: utilitários genéricos já existentes devem ser reaproveitados,
 * evitando criar classes duplicadas aqui. Exemplos:
 * - nowrap: use .text-nowrap
 * - negrito: use .text-bold
 * - elipse: use .text-ellipsis
 * - borda de ExpansionPanel: use .expansion-panel-border
 * - coluna "Ações" alinhada à direita: use .grid-header-right / .grid-cell-right
 * ============================================================================
 */

.border-bottom-lines {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.scf-list-scroll-323 {
    overflow-y: auto;
    height: calc(100vh - 323px);
    min-height: calc(100vh - 323px);
}

.relatorio-selecao-header {
    min-width: 0;
}

.relatorio-selecao-busca-inline {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.relatorio-selecao-busca-icone {
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.relatorio-selecao-busca-input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    padding: 2px 0;
}

.relatorio-selecao-busca-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.9;
}

.relatorio-selecao-acoes {
    flex: 0 0 auto;
}

/* ============================================================================
 * Layout / Auth / Navegação
 * ============================================================================
 */

.auth-layout-logo {
    max-width: 150px;
}

.auth-layout-main {
    overflow: hidden;
}

.nav-drawer {
    max-width: 100vw;
}

.nav-drawer-container {
    height: 100vh;
    overflow: hidden;
}

.nav-logo {
    max-width: 200px;
}

.nav-drawer-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8px;
}

.navgroup-root {
    margin-bottom: 8px;
}

.navgroup-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navgroup-indent-16 {
    padding-left: 16px;
}

.navlink-indent-16 {
    padding-left: 16px;
}

.navlink-indent-32 {
    padding-left: 32px;
}

.nav-footer {
    padding-left: 24px;
    padding-right: 16px;
}

/* ============================================================================
 * Seleção de Sistema
 * ============================================================================
 */

.selecao-sistema-card {
    height: 240px;
}

/* ============================================================================
 * OVERLAY DE CARREGAMENTO (COMPONENTE)
 * ============================================================================
 * Usado pelo componente Shared/Common/Carregando.razor.
 * Mantém o overlay centralizado e com identidade visual consistente.
 * ============================================================================
 */

.loading-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
}

.loading-overlay--visible {
    opacity: 1;
    pointer-events: all;
}

.loading-overlay--hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.loading-logo {
    margin-bottom: 8px;
}

.loading-logo-image {
    height: 48px;
    width: auto;
    opacity: 0.9;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--mud-palette-lines-default);
    border-top-color: var(--mud-palette-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: var(--mud-palette-text-primary);
    font-size: 16px;
    font-weight: 500;
}

/* ============================================================================
 * CARDS COM ALTURA UNIFORME EM GRID - CONTEXTOS ESPECÍFICOS
 * ============================================================================
 * Aplicado apenas onde necessário, não globalmente.
 * Use a classe .card-grid-container no MudGrid pai para ativar altura uniforme.
 * ============================================================================
 */

/* Força o MudGrid marcado a usar flexbox para alinhar itens */
.card-grid-container.mud-grid {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Força cada item do grid marcado a ser flex container em coluna */
.card-grid-container > .mud-grid-item {
    display: flex !important;
    flex-direction: column !important;
}

/* Força o MudCard a preencher toda a altura disponível no item */
.card-grid-container > .mud-grid-item > .mud-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Força o MudCardContent a preencher o card */
.card-grid-container > .mud-grid-item > .mud-card > .mud-card-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ============================================================================
 * AJUSTES PARA TELAS MUITO PEQUENAS (320px - 599px)
 * ============================================================================
 * Em mobile, quando os cards ocupam 100% da largura (xs="12"),
 * cada card pode ter sua própria altura sem quebrar o layout.
 * ============================================================================
 */
@media (max-width: 599px) {
    /* Permite que cards individuais em mobile tenham alturas diferentes */
    .card-grid-container > .mud-grid-item {
        min-height: unset !important;
    }

    /* Garante que o card ainda preencha o item */
    .card-grid-container > .mud-grid-item > .mud-card {
        width: 100% !important;
    }

    /* Previne overflow horizontal em telas muito pequenas */
    .mud-card-content {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Garante que textos longos não quebrem o layout */
    .mud-typography {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
}

/* ============================================================================
 * TABLET E DESKTOP (600px+)
 * ============================================================================
 * Quando há múltiplos cards na mesma linha (sm="6", md="4", lg="3"),
 * todos devem ter a mesma altura.
 * ============================================================================
 */
@media (min-width: 600px) {
    .card-grid-container > .mud-grid-item {
        min-height: 100% !important;
    }
}

/* ============================================================================
 * ÁREAS DE CONTEÚDO COM SCROLL E ALTURA DINÂMICA
 * ============================================================================
 * Classes utilitárias para áreas scrolláveis com altura calculada baseada no
 * viewport. Usadas em abas de formulários para maximizar o uso do espaço.
 * ============================================================================
 */

/* Área de scroll para aba de dados básicos (mais espaço para formulário) */
.scrollable-tab-content-basic {
    height: calc(100vh - 314px);
    overflow-y: auto;
}

/* Área de scroll da manutenção de avaliação, reservando o rodapé de ações */
.avaliacao-tab-content {
    max-height: calc(100vh - 360px);
    min-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    padding-bottom: 12px;
}

.avaliacao-summary-grid > .mud-grid-item {
    display: flex;
}

.avaliacao-summary-grid > .mud-grid-item > .mud-card,
.avaliacao-competencia-card {
    width: 100%;
}

.avaliacao-summary-card-content {
    min-height: 106px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.avaliacao-summary-card-content .mud-chip {
    max-width: 100%;
}

.avaliacao-competencia-card-content {
    min-height: 220px;
    height: 100%;
    display: flex;
    overflow: visible;
}

.avaliacao-competencia-card-content .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

@media (min-width: 960px) {
    .areas-gestao-grid-item {
        flex-basis: 20% !important;
        max-width: 20% !important;
    }
}

@media (max-width: 960px) {
    .avaliacao-tab-content {
        height: auto;
        max-height: none;
        min-height: unset;
        overflow: visible;
        padding-right: 0;
        padding-bottom: 0;
    }

    .avaliacao-competencia-card-content {
        min-height: unset;
    }
}

/* Área de scroll para rotinas com formulário em abas (ex.: Copiar Lançamentos) */
.scrollable-tab-content-rotina {
    height: calc(100vh - 312px);
    overflow-y: auto;
}

/* Área de scroll para formulários sem abas (ex.: Alterar Categoria) */
.scrollable-single-form {
    height: calc(100vh - 190px);
    overflow-y: auto;
}

/* Área de scroll padrão para abas com filtros (empresas, sistemas, clientes, etc) */
.scrollable-tab-content {
    height: calc(100vh - 450px);
    overflow-y: auto;
}

/* Área de scroll para abas de leitura sem filtros (perfis vinculados, usuários vinculados) */
.scrollable-tab-content-readonly {
    height: calc(100vh - 314px);
    overflow-y: auto;
}

/* ============================================================================
 * ESTILOS DE DIÁLOGOS E ALERTAS
 * ============================================================================
 * Classes para componentes de diálogo reutilizáveis em toda a aplicação
 * ============================================================================
 */

/* Card de alerta amarelo para vínculos */
.dialog-alert-warning {
    background-color: #fff8e1;
    border-left: 4px solid #ffc107;
}

/* Título/label em negrito */
.dialog-label-bold {
    font-weight: 600;
    margin-bottom: 8px;
}

/* Label com peso médio */
.dialog-label-medium {
    font-weight: 500;
}

/* Texto em itálico */
.dialog-text-italic {
    font-style: italic;
}

/* Background cinza claro para áreas de informação */
.dialog-background-grey {
    background-color: var(--mud-palette-background-grey);
}

/* ============================================================================
 * ESTILOS DE MODAL DE RECONEXÃO
 * ============================================================================
 * Classes para os estados do modal de reconexão do Blazor
 * ============================================================================
 */

/* Container base para conteúdo do modal de reconexão */
.reconnect-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Título do modal de reconexão - estado normal */
.reconnect-modal-title {
    margin: 0 0 1rem 0;
    color: #333;
}

/* Título do modal - estado de falha */
.reconnect-modal-title-error {
    margin: 0 0 1rem 0;
    color: #d32f2f;
}

/* Título do modal - estado de aviso/rejeição */
.reconnect-modal-title-warning {
    margin: 0 0 1rem 0;
    color: #ff9800;
}

/* Parágrafo/mensagem do modal */
.reconnect-modal-message {
    margin: 0 0 1rem 0;
    color: #666;
}

/* Spinner centrado no modal */
.reconnect-modal-spinner {
    margin: 0 auto;
}

/* ============================================================================
 * ESTILOS DE GRIDS DE LISTAGEM
 * ============================================================================
 * Classes para altura fixa de grids e estilização de headers
 * ============================================================================
 */

/* Altura padrão para grids de listagem com filtros */
.grid-listagem-height {
    height: calc(100vh - 400px);
}

/* Altura para grid de usuários (menos filtros) */
.grid-usuarios-height {
    height: calc(100vh - 340px);
}

/* Altura padrão para tabelas do módulo GED - Arquivos (com expansion panel de filtros) */
.table-ged-arquivos-height {
    min-height: calc(100vh - 336px);
}

/* Altura padrão para tabelas do módulo GED - Categorias (filtros simples) */
.table-ged-categorias-height {
    min-height: calc(100vh - 336px);
}

/* Altura fixa e scroll para o container principal do painel/dashboard */
.painel-dashboard-container {
    height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 1px 8px 8px 8px;
}

/* Remove altura 100% e flex dos cards dentro do painel para não cortar bordas */
.painel-dashboard-container .mud-grid-item {
    display: block !important;
}

.painel-dashboard-container .mud-grid-item > .mud-card,
.painel-dashboard-container .mud-grid > .mud-grid-item > .mud-card,
.painel-dashboard-container .mud-paper {
    height: auto !important;
    flex: none !important;
    display: block !important;
}

/* Força as bordas dos cards no painel em ambos os modos (light e dark) */
.painel-dashboard-container .mud-paper {
    border: 1px solid var(--mud-palette-lines-default) !important;
}

/* Header de coluna em negrito */
.grid-header-bold {
    font-weight: bold !important;
}

/* Header de coluna de ações - negrito e alinhado à direita */
.grid-actions-header {
    font-weight: bold !important;
    text-align: right !important;
    width: 98%;
    display: block;
}

/* Header de coluna alinhado à direita (legado) */
.grid-header-right {
    text-align: right;
}

/* Célula alinhada à direita - alinha conteúdo à direita */
.grid-column-right {
    text-align: right !important;
}

/* Célula centralizada - alinha conteúdo ao centro */
.grid-column-center {
    text-align: center !important;
}

/* Força centralização dos headers com ordenação quando a coluna tem grid-column-center */
th.grid-column-center .mud-table-sort-label {
    justify-content: center !important;
    width: 100%;
}

th.grid-column-center button {
    width: 100%;
    justify-content: center !important;
}

th.grid-column-center {
    text-align: center !important;
}

/* Força centralização de headers sortable em MudDataGrid */
.mud-table-head-cell.grid-column-center {
    text-align: center !important;
}

.mud-table-head-cell.grid-column-center .mud-button-root {
    width: 100%;
    justify-content: center !important;
}

.mud-table-head-cell.grid-column-center .column-header {
    justify-content: center !important;
}

/* MudDataGrid: centraliza header de coluna sortable */
.mud-table-head-cell.grid-column-center > div {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.mud-table-head-cell.grid-column-center .mud-table-sort-label {
    justify-content: center !important;
    width: 100% !important;
}

.mud-table-head-cell.grid-column-center .mud-table-sort-label > span {
    text-align: center !important;
}

/* Célula alinhada à direita (legado) */
.grid-cell-right {
    text-align: right;
}

/* Destaque de erro com borda vermelha à esquerda */
.grid-error-highlight {
    border-left: 4px solid var(--mud-palette-error);
    padding-left: 8px;
}

/* Header de coluna centralizado com negrito */
.grid-header-center {
    display: flex;
    justify-content: center;
    width: 100%;
    font-weight: bold;
}

/* Célula centralizada */
.grid-cell-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Div flex com expansão */
.flex-expand {
    flex: 1;
}

/* Texto em negrito */
.text-bold {
    font-weight: bold;
}

/* Painel de expansão de busca - tela Faturas e Bancos */
.search-panel-expansion {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 4px;
}

/* Stack do painel de busca - largura completa */
.search-panel-stack {
    width: 100%;
}

/* Wrapper do campo de busca - flexível */
.search-field-wrapper {
    flex: 1;
}

/* Label de filtro sem quebra de linha */
.filter-label-nowrap {
    white-space: nowrap;
}

/* Stack do rodapé com botões - responsivo */
.footer-buttons-stack {
    flex-wrap: wrap;
    gap: 1rem;
}

/* Botão do rodapé - tamanho responsivo */
.btn-footer {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
}

/* Mobile: Botões ocupam largura completa */
@media (max-width: 960px) {
    .footer-buttons-stack {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .btn-footer {
        flex: 1 1 100%;
        min-width: unset;
    }
}

/* Stack de botões do diálogo - mantém botões lado a lado */
.dialog-buttons-stack {
    gap: 0.5rem;
    flex-wrap: nowrap;
}

/* Stack das actions do diálogo - largura completa */
.dialog-actions-stack {
    width: 100%;
}

/* Botão do diálogo - tamanho adaptado lado a lado */
.btn-dialog {
    flex: 1;
    min-width: auto;
    padding: 0 8px;
}

/* Texto com peso médio (500) */
.text-medium {
    font-weight: 500;
}

/* Margem zero */
.margin-zero {
    margin: 0;
}

/* Chip de status padronizado - largura fixa para Ativo/Inativo */
.chip-status-padrao {
    min-width: 80px !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Borda de expansion panel */
.expansion-panel-border {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* Borda sutil para caixa de filtros simples */
.filter-box-border {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* Stack com largura 100% */
.stack-width-full {
    width: 100%;
}

/* Texto sem quebra de linha */
.text-nowrap {
    white-space: nowrap;
}

/* Div/elemento com flex: 1 para expansão */
.flex-grow {
    flex: 1;
}

/* Div/elemento com flex: 1 e min-width: 0 para truncamento de texto */
.flex-grow-truncate {
    flex: 1;
    min-width: 0;
}

/* Texto com ellipsis (overflow hidden) */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ícone grande (64px) para áreas de upload */
.icon-upload-large {
    font-size: 64px !important;
}

/* ============================================================================
 * ESTILOS DE UPLOAD/DROP ZONE - MÓDULO GED
 * ============================================================================
 * Classes para área de drag-and-drop de arquivos
 * ============================================================================
 */

/* Drop zone estado normal (não arrastando) */
.dropzone-normal {
    background-color: var(--mud-palette-background-grey);
}

/* Drop zone estado de arrastar (dragging) */
.dropzone-dragging {
    background-color: var(--mud-palette-success-lighten);
}

/* Texto com quebra de palavra longa (email, links, etc.) */
.text-break-word {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Stack vertical com largura limitada e overflow controlado */
.stack-overflow-hidden {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Altura mínima para áreas de loading */
.min-height-400 {
    min-height: 400px;
}

/* ============================================================================
 * CARDS COM ALTURA FIXA E CENTRALIZAÇÃO
 * ============================================================================
 * Garante que cards de seleção (empresas, sistemas, clientes, grupos) tenham
 * altura consistente e conteúdo centralizado, independente do tamanho do texto.
 * ============================================================================
 */

/* Card com altura fixa e conteúdo centralizado */
.card-fixed-height {
    min-height: 120px !important;
    max-height: 120px !important;
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Stack vertical com gap customizado para conteúdo de cards */
.stack-gap-8 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* ============================================================================
 * ESTILOS DE PERFIL - CARDS E TEXTOS
 * ============================================================================
 * Classes para estilização de cards de perfil com administradores e
 * textos com ellipsis em diferentes contextos
 * ============================================================================
 */

/* Card de administrador com opacidade reduzida */
.card-admin-opacity {
    opacity: 0.9;
}

/* Texto com ellipsis para nomes de usuário (150px) */
.text-ellipsis-usuario {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* Texto com ellipsis para funcionalidades (200px) */
.text-ellipsis-funcionalidade {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Stack flex com expansão */
.stack-flex-expand {
    flex: 1;
    min-width: 0;
}

/* Ícone sem flex-shrink */
.icon-no-shrink {
    flex-shrink: 0;
}

/* Stack com flex-wrap */
.stack-flex-wrap {
    flex-wrap: wrap;
}

/* Cursor pointer para cards clicáveis */
.cursor-pointer {
    cursor: pointer;
}

/* MudChip com margens compactas para uso em grids */
.chip-compact {
    margin-top: -4px !important;
    margin-bottom: -4px !important;
}

/* MudSwitch com margens compactas para uso em grids */
.switch-compact {
    margin-top: -8px !important;
    margin-bottom: -8px !important;
}

/* MudTabs com altura aumentada para cabeçalhos */
.mud-tabs-large .mud-tab {
    min-height: 48px;
}

/* Grid: Célula alinhada à direita com largura máxima de 150px */
.grid-text-right-max-150 {
    text-align: right !important;
    max-width: 150px;
}

/* Hover elevation para cards interativos - nível 4 */
.hover-elevation-4:hover {
    box-shadow: var(--mud-elevation-4) !important;
}

/* Hover elevation para cards interativos - nível 8 */
.hover-elevation-8:hover {
    box-shadow: var(--mud-elevation-8) !important;
}

/* Cabeçalho de coluna centralizado (grid TemplateColumn) */
.grid-header-center {
    text-align: center;
    width: 100%;
}

/* ============================================================================
 * DIÁLOGO DE ALERTA DE INATIVIDADE
 * ============================================================================
 * Estilos customizados para o modal de alerta de inatividade do usuário
 * que aparece após 2 minutos sem atividade
 * ============================================================================
 */

/* Backdrop com blur para efeito moderno */
.mud-dialog-backdrop-blur {
    background-color: rgba(1, 40, 64, 0.85) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Container de mensagem do diálogo */
.alerta-inatividade-mensagem-container {
    width: 100%;
}

/* Contador de segundos */
.alerta-inatividade-contador {
    background-color: #ff9800 !important;
    border-radius: 8px;
    min-width: 140px;
}

.alerta-inatividade-contador-texto {
    color: white !important;
    font-weight: 600 !important;
}

/* Ícone de informação inline */
.alerta-inatividade-icone-info {
    vertical-align: middle;
    margin-right: 4px;
}

/* ============================================================================
 * MODAL DE RECONEXÃO BLAZOR - ATUAL
 * ============================================================================
 * Estilos para o modal de reconexão do Blazor Server que aparece quando
 * a conexão SignalR é perdida e está tentando reconectar.
 * ============================================================================
 */

#components-reconnect-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}

#components-reconnect-modal > div {
    display: none;
}

#components-reconnect-modal.components-reconnect-show
    > .components-reconnect-show {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed
    > .components-reconnect-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected
    > .components-reconnect-rejected {
    display: block;
}

#blazor-error-ui {
    background: #ffebe9;
    bottom: 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.5rem 0.7rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #c62828;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

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

/* ============================================================================
 * CUSTOMIZAÇÃO DE GRIDS E TABELAS
 * ============================================================================
 * Estilos para reduzir altura de linhas e melhorar densidade visual das
 * tabelas MudDataGrid, aplicável a todas as telas da aplicação.
 * ============================================================================
 */

/* Reduz a altura das linhas da grid */
.mud-table-row {
    height: auto !important;
}

.mud-table-cell {
    padding: 4px 16px !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.mud-table-head-cell {
    padding: 4px 16px !important;
    line-height: 1.2 !important;
}

.mud-data-grid .mud-table-body .mud-table-row {
    min-height: 0 !important;
}

/* Remove espaçamento extra de MudStack dentro das células */
.mud-table-cell .mud-stack {
    gap: 0 !important;
}

/* Reduz o tamanho da fonte se necessário */
.mud-table-cell,
.mud-table-head-cell {
    font-size: 0.9rem !important;
}

/* ============================================================================
 * LAYOUT DE PÁGINAS DE AUTENTICAÇÃO/FORMULÁRIOS CENTRALIZADOS
 * ============================================================================
 * Classes para centralizar páginas de formulário como login, redefinir senha,
 * alterar senha, etc. Substitui CSS inline nessas páginas.
 * ============================================================================
 */

/* Container principal para páginas de autenticação/formulário centralizado */
.auth-page-container {
    height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Container do formulário com largura máxima */
.auth-form-container {
    max-width: 480px;
    width: 100%;
}

/* ============================================================================
 * CHIPS DE TIPO DE CONTA (SCF)
 * ============================================================================
 * Classes para exibir tipos de conta com chips coloridos na listagem de contas.
 * ============================================================================
 */

/* Estilo base para chips de tipo */
.tipo-chip {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    min-width: 70px;
    text-align: center;
}

/* Chip pequeno para mobile/listagens compactas */
.tipo-chip-small {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    min-width: 36px;
    text-align: center;
    margin-right: 6px;
    line-height: 1.2;
    vertical-align: middle;
    transform: translateY(-2px);
}

/* Variações de cor */
.tipo-chip-error {
    background-color: #f44336;
    color: white;
}

.tipo-chip-success {
    background-color: #4caf50;
    color: white;
}

.tipo-chip-info {
    background-color: #2196f3;
    color: white;
}

.tipo-chip-warning {
    background-color: #ff9800;
    color: white;
}

.tipo-chip-primary {
    background-color: #1976d2;
    color: white;
}

.tipo-chip-secondary {
    background-color: #7b1fa2;
    color: white;
}

.tipo-chip-tertiary {
    background-color: #00796b;
    color: white;
}

.tipo-chip-default {
    background-color: #9e9e9e;
    color: white;
}

/* ========================================
   TELA DE CONTAS - ESTILOS CENTRALIZADOS
   ======================================== */

/* Container wrapper para área de contas (overlay + scroll) */
.contas-wrapper {
    position: relative;
    height: calc(100vh - 320px);
    min-height: 400px;
    overflow: hidden;
}

/* Overlay de processamento para listagem de contas */
.contas-processing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    opacity: 0.95;
    z-index: 1000;
}

/* Container de listagem de contas com scroll */
.contas-list-container {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Scrollbar styling for webkit browsers */
.contas-list-container::-webkit-scrollbar {
    width: 8px;
}

.contas-list-container::-webkit-scrollbar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

.contas-list-container::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
}

.contas-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}

/* Header da grid de contas */
.contas-grid-header {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Header clicavel para ordenacao */
.contas-sortable-header {
    cursor: pointer;
}

/* Divider vertical no header */
.contas-header-divider {
    height: 20px;
}

/* Container das colunas Tipo e Acoes no header */
.contas-header-right {
    gap: 24px;
}

/* Header de tipo de conta - centralizado */
.contas-tipo-header {
    min-width: 90px;
    cursor: pointer !important;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-right: 30px;
}

.contas-tipo-header * {
    cursor: pointer !important;
}

/* Header de ações na grid de contas - centralizado */
.contas-actions-header {
    min-width: 160px;
    text-align: center;
}

/* Botão de ação desabilitado durante processamento */
.contas-action-btn-disabled,
.contas-action-btn-disabled * {
    cursor: wait !important;
    opacity: 0.5;
    pointer-events: none;
}

/* Botão de ação habilitado - cursor de mão */
.contas-action-btn,
.contas-action-btn *,
.contas-action-btn .mud-icon-root,
.contas-action-btn .mud-typography {
    cursor: pointer !important;
}

.contas-action-btn:hover {
    opacity: 0.8;
}

/* Linha de item na lista de contas */
.contas-item-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Conteudo principal da linha */
.contas-item-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
}

/* Coluna esquerda com nome e nivel */
.contas-item-left {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
}

/* Placeholder para icone de expandir (mantem alinhamento) */
.contas-expand-placeholder {
    width: 30px;
    min-width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Garantir que o MudIconButton tenha tamanho consistente */
.contas-item-left .mud-icon-button {
    width: 30px;
    height: 30px;
    padding: 3px;
}

/* Container do nome e nivel */
.contas-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Coluna direita com tipo e acoes */
.contas-item-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Coluna do chip de tipo - centralizado */
.contas-tipo-col {
    min-width: 90px;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Coluna de acoes - centralizada */
.contas-acoes-col {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 160px;
    justify-content: center;
}

/* Chip com largura mínima e conteúdo centralizado */
.chip-min-width {
    min-width: 120px;
    justify-content: center;
}

/* Formulario inline de criacao de conta filha */
.contas-inline-form {
    padding: 8px 12px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.contas-inline-form-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contas-inline-input {
    width: 150px;
    max-width: 150px;
}

/* ============================================================================
 * RELATÓRIO CONSOLIDADO - ESTILOS DO PAINEL DE FILTROS
 * ============================================================================
 * Classes para o módulo de Relatórios Consolidados (SCF)
 * ============================================================================
 */

/* Container principal do painel de filtros do relatório consolidado */
.relatorio-filtros-container {
    height: calc(100vh - 250px);
    overflow-y: auto;
    padding: 0 8px !important;
}

/* Container de carregamento centralizado */
.relatorio-loading-container {
    height: calc(100vh - 250px);
}

/* Container de resultados desktop - área scrollável */
.relatorio-resultados-scroll-desktop {
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Container de resultados mobile - área scrollável */
.relatorio-resultados-scroll-mobile {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.relatorio-extrato-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.relatorio-extrato-meta-item {
    min-width: 0;
}

.relatorio-extrato-meta-label {
    font-size: 0.68rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 3px;
}

.relatorio-extrato-meta-value {
    font-size: 0.84rem;
    line-height: 1.3;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.relatorio-extrato-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.relatorio-extrato-value-card {
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 0;
}

.relatorio-extrato-value-label {
    font-size: 0.7rem;
    line-height: 1.1;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.relatorio-extrato-value-number {
    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.relatorio-extrato-valor-credito {
    color: var(--mud-palette-success);
}

.relatorio-extrato-valor-debito {
    color: var(--mud-palette-error);
}

.relatorio-extrato-valor-saldo-positivo {
    color: var(--mud-palette-success);
}

.relatorio-extrato-valor-saldo-negativo {
    color: var(--mud-palette-error);
}

/* Rodapé mobile do relatório */
.relatorio-grid-footer-mobile {
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
    padding: 12px;
    margin-top: 8px;
}

/* Header do grid de relatório desktop */
.relatorio-grid-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-weight: 600;
}

/* Coluna principal (Conta/Descrição) no header */
.relatorio-grid-header-col-principal {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Coluna Centro de Custo no header */
.relatorio-grid-header-col-centro {
    width: 140px;
    text-align: center;
}

/* Coluna Data no header */
.relatorio-grid-header-col-data {
    width: 120px;
    text-align: center;
}

/* Coluna Valor no header */
.relatorio-grid-header-col-valor {
    width: 140px;
    text-align: right;
}

/* Coluna Status no header */
.relatorio-grid-header-col-status {
    width: 100px;
    text-align: center;
}

/* Rodapé do grid de relatório */
.relatorio-grid-footer {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    font-size: 0.875rem;
    gap: 16px;
}

/* Linha do grid hierárquico */
.relatorio-grid-row {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background-color 0.15s ease;
}

.relatorio-grid-row:hover {
    background-color: rgba(var(--mud-palette-primary-rgb, 89, 74, 226), 0.05);
}

/* Linha do grid hierárquico - item pai */
.relatorio-grid-row-parent {
    background: rgba(0, 0, 0, 0.02);
    border-left: 3px solid var(--mud-palette-primary-lighten);
}

/* Coluna principal (flex: 2) */
.relatorio-grid-row-col-principal {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Container de conteúdo da coluna principal */
.relatorio-grid-row-content {
    display: flex;
    flex-direction: column;
}

/* Placeholder para indentação */
.relatorio-grid-row-placeholder {
    width: 30px;
    min-width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Garantir que MudIconButton nos relatórios tenha exatamente 30px (mesmo tamanho do placeholder) */
.relatorio-grid-row-col-principal > .mud-icon-button,
.relatorio-mensal-td-nome .mud-icon-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 3px !important;
    flex-shrink: 0;
}

/* Colunas de largura fixa */
.relatorio-grid-row-col-centro {
    width: 140px;
    text-align: center;
}

.relatorio-grid-row-col-data {
    width: 120px;
    text-align: center;
}

.relatorio-grid-row-col-valor {
    width: 140px;
    text-align: right;
}

.relatorio-grid-row-col-status {
    width: 100px;
    text-align: center;
}

/* Texto com peso de título */
.relatorio-text-title {
    font-weight: 600;
}

/* Cores de valores */
.relatorio-valor-positivo {
    color: var(--mud-palette-success);
    font-weight: 500;
}

.relatorio-valor-negativo {
    color: var(--mud-palette-error);
    font-weight: 500;
}

/* Grid de 7 colunas para filtros do relatório (DESKTOP) */
.relatorio-filtros-grid-desktop {
    display: contents;
}

/* Campos dentro do grid - tamanho igual */
.relatorio-filtros-grid-desktop > * {
    min-width: 0;
    width: 100%;
}

/* Normalização de espaçamento no MudGrid de filtros */
.relatorio-filtros-container .mud-grid {
    margin: 0 -4px !important;
    gap: 0 !important;
}

.relatorio-filtros-container .mud-grid-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Responsividade - desktop usa grid fluido via MudGrid */
@media (min-width: 1400px) {
    .relatorio-filtros-grid-desktop .mud-grid-item {
        flex-basis: 14.28% !important;
        max-width: 14.28% !important;
    }
}

/* Grid de caixas de seleção (Fontes, Contas, Centros) */
.relatorio-filtros-container > .mud-grid.mud-grid-spacing-xs-3 {
    margin: 0 -4px !important;
}

.relatorio-filtros-container
    > .mud-grid.mud-grid-spacing-xs-3
    > .mud-grid-item {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Caixa de seleção fixa (Fontes, Contas, Centros de Custo) */
.relatorio-selecao-box {
    border-radius: 4px;
    height: 380px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 16px;
    overflow: hidden;
    margin-bottom: 0 !important;
}

/* Container interno da caixa de seleção */
.relatorio-selecao-content {
    height: calc(380px - 32px);
    display: flex;
    flex-direction: column;
}

/* Cabeçalho das caixas de seleção com espaçamento */
.relatorio-selecao-content > .mud-stack:first-child {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Área de scroll da caixa de seleção */
.relatorio-selecao-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* Garantir que checkboxes não cortem texto */
.relatorio-selecao-scroll .mud-checkbox {
    width: 100%;
}

.relatorio-selecao-scroll .mud-checkbox .mud-checkbox-label {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Garantir alinhamento do placeholder e MudIconButton dentro do relatório */
.relatorio-selecao-scroll .contas-expand-placeholder {
    width: 30px;
    min-width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-block;
}

.relatorio-selecao-scroll .mud-icon-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 3px !important;
    flex-shrink: 0;
}

/* Borda do painel de expansão do relatório */
.relatorio-expansion-panel-border {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 4px;
}

/* Remove padding extra do MudExpansionPanel */
.relatorio-expansion-panel-border .mud-expand-panel-header {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.relatorio-expansion-panel-border .mud-expand-panel-content {
    padding: 16px 0 0 0 !important;
}

/* Stack do título sem margem extra */
.relatorio-expansion-panel-border .relatorio-titulo-stack {
    padding: 0 8px !important;
    margin: 0 !important;
}

/* Força a borda inferior mesmo quando expandido */
.relatorio-expansion-panel-border.mud-expand-panel {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Remove o ícone de expansão quando não necessário */
.expansion-panel-sem-toggle .mud-expand-panel-icon {
    display: none !important;
}

/* Borda do painel interno de tipos de relatório */
.relatorio-tipos-panel {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 4px;
    margin-bottom: 0 !important;
}

.relatorio-tipos-panel .mud-expand-panel-header {
    padding: 6px 16px !important;
}

.relatorio-tipos-panel .mud-expand-panel-content {
    padding: 8px 16px !important;
}

/* Stack de título com largura total */
.relatorio-titulo-stack {
    width: 100%;
}

/* Flex grow para elementos de título */
.relatorio-titulo-flex {
    flex: 1;
}

/* Indicador de filtros nowrap */
.relatorio-filtros-indicador {
    white-space: nowrap;
}

/* Espaçamento para checkboxes de tipo de lançamento */
.relatorio-filtros-container label.mud-checkbox {
    margin-right: 12px;
}

.relatorio-filtros-container label.mud-checkbox:last-of-type {
    margin-right: 0;
}

/* Container para resultados das abas */
.relatorio-resultados-container {
    height: calc(100vh - 174px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}

/* Painel interno das abas */
.relatorio-resultados-container .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}

.relatorio-resultados-container .mud-tabpanel {
    height: 100%;
    overflow-y: auto;
}

.relatorio-chart-evolucao .mud-chart-bar,
.relatorio-chart-comparativo-mensal .mud-chart-bar,
.relatorio-chart-comparativo-anual .mud-chart-bar {
    overflow: visible !important;
}

.relatorio-chart-evolucao .mud-charts-xaxis text,
.relatorio-chart-comparativo-mensal .mud-charts-xaxis text,
.relatorio-chart-comparativo-anual .mud-charts-xaxis text {
    dominant-baseline: auto;
}

@media (max-width: 600px) {
    .relatorio-chart-evolucao .mud-charts-xaxis text,
    .relatorio-chart-comparativo-mensal .mud-charts-xaxis text {
        font-size: 10px;
    }

    .relatorio-chart-comparativo-anual .mud-charts-xaxis text {
        font-size: 9px;
        letter-spacing: -0.02em;
    }
}

/* Ajuste de altura para caixas de loading dentro dos resultados */
.relatorio-resultados-container.mud-stack {
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ============================================================================
 * RELATÓRIO CONSOLIDADO - MUDBLAZOR DATAGRID
 * ============================================================================ */

/* Sem toolbar — controles ficam no header da coluna */
.relatorio-datagrid .mud-table-toolbar {
    display: none;
}

/* Container: scroll vertical + horizontal sempre visíveis, responsivo */
.relatorio-datagrid .mud-table-container {
    overflow: scroll !important;
}

/* Tabela: ocupa 100% mas pode expandir além se houver muitas colunas */
.relatorio-datagrid .mud-table-container > table {
    width: 100%;
    min-width: max-content;
}

/* Cabeçalho */
.relatorio-datagrid .mud-table-head .mud-table-cell {
    font-weight: 700;
    white-space: nowrap;
    padding: 6px 8px;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

/* Cabeçalhos numéricos: alinhar texto à direita (todas as colunas exceto a coluna Conta/sticky) */
.relatorio-datagrid
    .mud-table-head
    .mud-table-cell:not(.sticky-left)
    .column-header {
    justify-content: flex-end;
    text-align: right;
}

.relatorio-extrato-datagrid .mud-table-head .mud-table-cell .column-header {
    width: 100%;
    justify-content: flex-start !important;
    text-align: left !important;
}

.relatorio-extrato-datagrid
    .mud-table-head
    .mud-table-cell.extrato-header-text
    .column-header {
    justify-content: flex-start !important;
    text-align: left !important;
}

.relatorio-extrato-datagrid
    .mud-table-head
    .mud-table-cell.extrato-header-numeric
    .column-header {
    justify-content: flex-end !important;
    text-align: right !important;
}

.relatorio-extrato-datagrid
    .mud-table-head
    .mud-table-cell.extrato-header-sticky {
    padding-right: 6px;
}

.extrato-header-sticky-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.extrato-header-sticky-title {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-weight: 700;
}

.extrato-header-sticky-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

.extrato-header-divider {
    width: 1px;
    height: 18px;
    background: var(--mud-palette-lines-default);
    margin: 0 4px;
}

.extrato-header-column-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.relatorio-extrato-datagrid .extrato-header-action-button {
    padding: 2px;
    width: 20px;
    height: 20px;
}

.relatorio-extrato-datagrid .mud-table-head .mud-table-cell {
    white-space: normal;
    line-height: 1.15;
    padding-top: 8px;
    padding-bottom: 8px;
}

.relatorio-extrato-datagrid
    .mud-table-head
    .mud-table-cell:not(.sticky-left)
    .column-header {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    align-items: center;
}

.relatorio-extrato-datagrid
    .mud-table-head
    .mud-table-cell.extrato-header-numeric,
.relatorio-extrato-datagrid
    .mud-table-body
    .mud-table-cell.extrato-cell-numeric {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.relatorio-extrato-datagrid .mud-table-body .mud-table-cell.extrato-cell-text {
    vertical-align: top;
}

.relatorio-extrato-datagrid
    .mud-table-body
    .mud-table-cell.extrato-cell-sticky {
    padding-right: 10px;
}

.extrato-cell-saldo-anterior {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.extrato-cell-fonte-header {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 4px;
}

.relatorio-extrato-datagrid .extrato-toggle-fonte-button {
    padding: 0;
    margin: 1px;
    width: 20px;
    height: 20px;
}

.extrato-cell-primeira-coluna {
    display: flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
}

.extrato-cell-primeira-coluna-espaco {
    width: 18px;
    min-width: 18px;
    height: 24px;
    flex-shrink: 0;
}

.extrato-cell-primeira-coluna-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Corpo */
.relatorio-datagrid .mud-table-body .mud-table-cell {
    padding: 2px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-variant-numeric: tabular-nums;
}

/* Hover para melhor legibilidade */
.relatorio-datagrid .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: rgba(
        var(--mud-palette-primary-rgb, 89, 74, 226),
        0.06
    ) !important;
}

/* Hover na coluna sticky: fundo opaco para não vazar conteúdo */
.relatorio-datagrid
    .mud-table-body
    .mud-table-row:hover
    .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-surface) !important;
}

/* Coluna sticky body: herda --row-bg da <tr> (solid, opaco) + sombra de separação */
.relatorio-datagrid .mud-table-body .mud-table-cell.sticky-left {
    background-color: var(--row-bg, var(--mud-palette-surface)) !important;
    z-index: 3 !important;
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Coluna sticky header: fundo sólido acima de tudo + sombra */
.relatorio-datagrid .mud-table-head .mud-table-cell.sticky-left {
    background: var(--mud-palette-surface) !important;
    z-index: 11 !important;
    box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.15);
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Linha selecionada: destaque em ambos os modos */
.relatorio-datagrid .mud-table-body .mud-table-row.selected {
    background-color: var(--mud-palette-primary-lighten) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.relatorio-datagrid .mud-table-body .mud-table-row.selected .mud-table-cell {
    background-color: var(--mud-palette-primary-lighten) !important;
    font-weight: 600 !important;
}

/* Linha selecionada sticky: herda destaque */
.relatorio-datagrid
    .mud-table-body
    .mud-table-row.selected
    .mud-table-cell.sticky-left {
    background-color: var(--mud-palette-primary-lighten) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

/* ============================================================================
 * RELATÓRIO CONSOLIDADO - ESTILOS MOBILE
 * ============================================================================
 */

/* Abas em mobile: apenas ícones com scroll horizontal */
.relatorio-tabs-mobile .mud-tabs-header {
    overflow-x: auto;
}

.relatorio-tabs-mobile .mud-tab {
    min-width: 48px !important;
    padding: 8px 12px !important;
}

/* Mobile: Caixas de seleção com altura automática e scroll */
@media (max-width: 600px) {
    /* Caixas de seleção com altura automática e máximo */
    .relatorio-selecao-box {
        height: auto !important;
        max-height: 280px;
    }

    .relatorio-selecao-scroll {
        max-height: 200px;
        overflow-y: auto;
    }

    .relatorio-filtros-container {
        height: auto;
        max-height: none;
        overflow-y: visible;
    }

    .relatorio-loading-container {
        height: auto;
        min-height: 200px;
    }

    .relatorio-resultados-container {
        height: auto;
        min-height: 250px;
    }

    .relatorio-resultados-scroll-desktop {
        height: auto;
        max-height: calc(100vh - 300px);
    }
}

/* Ajustes para tablets */
@media (max-width: 960px) and (min-width: 601px) {
    .relatorio-selecao-box {
        height: auto !important;
        max-height: 350px;
    }
}

/* ============================================================================
 * RELATÓRIO CONSOLIDADO - TOOLBAR COM PESQUISA E ÍCONES
 * ============================================================================
 * Estilo para integrar a caixa de pesquisa com os ícones/controles na mesma linha
 * ============================================================================
 */

.relatorio-pesquisa-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    margin: 0 !important;
}

.relatorio-pesquisa-field {
    flex: 1;
    min-width: 0;
}

.relatorio-pesquisa-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}