/*
 * ============================================================================
 * 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.
 * ============================================================================
 */

#initial-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
}

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

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

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

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

/* ============================================================================
 * CARDS COM ALTURA UNIFORME EM GRID - TODAS AS RESOLUÇÕES
 * ============================================================================
 * Garante que todos os cards em um MudGrid tenham a mesma altura na linha,
 * adaptando-se desde telas muito pequenas (320px) até desktops grandes.
 *
 * Aplicado a TODAS as telas do sistema para consistência visual.
 * ============================================================================
 */

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

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

/* Força o MudCard a preencher toda a altura disponível no item */
.mud-grid-item > .mud-card,
.mud-grid > .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 */
.mud-grid-item > .mud-card > .mud-card-content,
.mud-grid > .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 */
    .mud-grid-item,
    .mud-grid > .mud-grid-item {
        min-height: unset !important;
    }

    /* Garante que o card ainda preencha o item */
    .mud-grid-item > .mud-card,
    .mud-grid > .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) {
    .mud-grid-item,
    .mud-grid > .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 padrão para abas com filtros (empresas, sistemas, clientes, etc) */
.scrollable-tab-content {
    height: calc(100vh - 450px);
    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 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;
}

/* Header de coluna alinhado à direita com padding */
.grid-header-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    font-weight: bold;
    padding-right: 26px;
}

/* Célula alinhada à direita sem padding */
.grid-cell-right {
    text-align: right;
    width: 100%;
    padding-right: 0px;
}

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

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

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

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

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

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

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

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

/* ============================================================================
 * MODAL DE RECONEXÃO BLAZOR
 * ============================================================================
 * Estilo para o modal que aparece quando a conexão SignalR é perdida
 * ============================================================================
 */

#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-in-out;
}

#components-reconnect-modal .reconnect-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);
    animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================================================
 * 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
 * ============================================================================
 * 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: auto !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;
}