/* ============================================================================
   FVC — Componentes padrão partilhados
   ============================================================================
   Cada padrão de UI abaixo tem de ser usado sempre com a MESMA classe/marcação
   em toda a app, em vez de cada página inventar a sua própria variante (o que
   tem estado a acontecer e gera inconsistências sem motivo). Construídos sempre
   por cima de classes REAIS do template (Corporate UI Dashboard Pro / Bootstrap)
   ou do Radzen — nunca a reinventar o visual à mão quando já existe uma classe
   genuína para o efeito.

   Ficheiro partilhado entre Portal e PortalPatrimonio (carregado depois
   de corporate-theme.css, antes do tema próprio de cada app): as cores usam
   custom properties com um valor de recurso (fallback) igual ao que já existia
   no Portal, por isso nada muda visualmente enquanto nenhuma das duas
   apps as redefine. Cada app pode sobrepor essas variáveis no seu próprio
   ficheiro de tema para adaptar à sua marca.
   ============================================================================ */

/* ── 1. Barra de pesquisa ─────────────────────────────────────────────────
   O visual (borda, canto arredondado, espaço do ícone) vem inteiramente das
   classes reais do template — esta classe só fixa a largura, que é o único
   aspeto que legitimamente varia por contexto (barra de ferramentas cheia vs.
   filtro apertado dentro de uma tabela). Não criar mais nenhuma classe
   "-search-box" por página — usar esta, com o modificador --narrow quando
   for preciso menos espaço.

   Marcação:
   <div class="input-group fvc-search-box">
       <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
       <input type="text" class="form-control" placeholder="Pesquisar..." />
   </div>
*/
.fvc-search-box {
    flex: 1;
    min-width: 220px;
}
.fvc-search-box--narrow {
    flex: none;
    min-width: 0;
    max-width: 280px;
}

/* ── 2. Chip de sub-ação dentro de um grupo ───────────────────────────────
   Ex: as tags de construção nos cartões de empreendimento ("Pista 1"), ou os
   botões "Logs"/"Comparar versões" no MTQ de concurso de uma obra. Construído
   sobre .badge/.badge-secondary/.border-radius-lg reais do template — só a
   borda (removida) e o hover (preenche com a cor de marca) são customizados.
   Funciona tanto em <a> (navegação) como em <button> (ação).

   Marcação:
   <a/button class="badge badge-secondary border-radius-lg fvc-chip">Texto</a>
*/
.fvc-chip {
    border-color: transparent !important;
    cursor: pointer;
}
.fvc-chip:hover:not(:disabled) {
    background: var(--fvc-chip-hover-bg, #5C4E63);
    color: #fff;
}
.fvc-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── 3. Botão de ícone só (sem texto junto) ───────────────────────────────
   Ações de linha como editar/eliminar/gravar/cancelar/contactos/transferir.
   Já existia como .row-action-btn (Fornecedores, Especialidades) — mantido
   com o mesmo nome e valores de sempre (zero alterações de marcação nos
   sítios que já a usam bem); só passou a viver aqui em vez de duplicado
   como .cs-remove-btn/.sra-note-btn em ConstructionTab.razor, que devem
   passar a reutilizar esta em vez de terem a sua própria versão.

   Modificadores de cor:
     --edit / --contact / --neutral / --toggle  → neutro em repouso, realça a verde no hover
     --delete                                   → neutro em repouso, realça a vermelho no hover
     --save                                      → verde em repouso e no hover (ação já positiva)
     --cancel                                    → neutro em repouso, cinzento no hover
     --flag                                      → laranja em repouso e no hover (ex: erros e omissões)
     --toggle + .is-active                       → fica preenchido persistentemente enquanto ativo (ex:
                                                     ignorar); o hover verde continua igual às restantes
   Modificador de estado (combina com qualquer um dos acima):
     .has-note                       → cor de aviso persistente (tem nota/detalhe anexado)

   Marcação:
   <button class="row-action-btn row-action-btn--edit" title="Editar">
       <i class="fa-solid fa-pen"></i>
   </button>
*/
.row-action-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #94a3b8;
    /* Short enough that swiping the mouse quickly across two adjacent icons (e.g. Editar → Eliminar)
       never shows both mid-fade at once — a longer fade made that brief double-highlight look like a
       bug rather than a transition. */
    transition: background 0.05s, border-color 0.05s, color 0.05s;
    flex-shrink: 0;
}
.row-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* O <i> do ícone já herda line-height:1 (base do FontAwesome), mas isso só define a altura da caixa
   de linha — dentro dela o glifo continua posicionado pela baseline da fonte (ascent/descent), que
   não é simétrica à volta do centro, e por isso o ícone ficava visivelmente deslocado para cima
   dentro do quadrado 30×30, sobretudo notório no hover (fundo colorido a revelar a assimetria).
   Tornar o próprio <i> num flex container recentra o glifo pela geometria da caixa em vez da
   baseline da fonte. */
.row-action-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-action-btn--edit:hover:not(:disabled),
.row-action-btn--contact:hover:not(:disabled),
.row-action-btn--neutral:hover:not(:disabled),
.row-action-btn--toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--fvc-icon-btn-accent, #A0DAB3) 25%, white) !important;
    color: color-mix(in srgb, var(--fvc-icon-btn-accent, #A0DAB3) 55%, black);
    border-color: var(--fvc-icon-btn-accent, #A0DAB3) !important;
}
.row-action-btn--contact.has-info {
    color: color-mix(in srgb, var(--fvc-icon-btn-accent, #A0DAB3) 55%, black);
}

.row-action-btn--delete:hover:not(:disabled) {
    background: #fee2e2 !important;
    color: #dc2626;
    border-color: #dc2626 !important;
}

.row-action-btn--save { color: #15803d; }
.row-action-btn--save:hover:not(:disabled) {
    background: #dcfce7 !important;
    border-color: #15803d !important;
}

.row-action-btn--cancel:hover:not(:disabled) {
    background: #f1f5f9 !important;
}

/* Indicador "tem nota" — estado persistente (não é só hover) de que a linha já tem uma nota/detalhe
   anexado, para o utilizador ver isso sem precisar de passar o rato. */
.row-action-btn.has-note { color: #b45309; }

/* Variante "de alerta" (ex: erros e omissões de uma proposta) — a cor de repouso já chama a atenção por
   si só, ao contrário das outras variantes que só reagem no hover. */
.row-action-btn--flag { color: #c2410c; }
.row-action-btn--flag:hover:not(:disabled) {
    background: #ffedd5 !important;
    color: #c2410c;
    border-color: #c2410c !important;
}
.row-action-btn--flag.has-note { color: #9a3412; }

/* Alternador (ex: ignorar fornecedor) — o estado "ativo" fica persistentemente preenchido, não só
   durante o hover. Sem a regra ":hover" abaixo, ".row-action-btn--toggle:hover" (especificidade
   0,3,0) ganhava a ".is-active" (0,2,0) e o botão "perdia" o aspeto de selecionado sempre que se
   lhe passava o rato por cima — esta regra iguala a especificidade do hover normal e mantém o
   preenchimento ativo em vez de reverter à cor de hover genérica. */
.row-action-btn--toggle.is-active {
    background: var(--rz-base-300, #e2e8f0) !important;
    color: #334155;
}
.row-action-btn--toggle.is-active:hover:not(:disabled) {
    background: var(--rz-base-300, #e2e8f0) !important;
    color: #334155;
    border-color: transparent !important;
}

/* ── 4. Ação principal (ícone + texto) ────────────────────────────────────
   Ex: "+ Novo", "+ Nova Especialidade", "Registar Envio", "Importar
   Proposta". Não precisa de nenhuma classe nova — usar sempre a classe real
   do Bootstrap .btn.btn-primary, com a cor de marca definida uma vez, via as
   custom properties nativas do Bootstrap 5.3 (ver .btn-primary em
   portal-theme.css / equivalente no Património). Quando esta ação convive
   numa barra de ferramentas com outras (ex: Comparar, Exportar Excel), essas
   outras usam .btn-outline-primary — preenchido só para a ação que
   cria/adiciona conteúdo. Nunca usar RadzenButton para este papel.

   Marcação:
   <button type="button" class="btn btn-primary mb-0">
       <i class="fa-solid fa-plus me-1"></i> Texto
   </button>
*/

/* ── 5. Ação secundária (ícone + texto), estilo claro/contornado ─────────
   Ex: "Testar email", "Cancelar"/"Fechar" de um diálogo. Também não precisa
   de nenhuma classe nova — é simplesmente o RadzenButton com
   ButtonStyle="ButtonStyle.Light" (o uso real em todo o Portal — 53 sítios
   contra 1 a usar "Secondary" —, e que corporate-theme.css já estiliza de
   forma idêntica a "Secondary": fundo branco, borda cinzenta, texto escuro,
   por isso não há diferença visual entre os dois hoje). Não embrulhar em
   IconButton nem inventar uma variante Bootstrap à parte para este papel.

   Marcação:
   <RadzenButton Text="Testar email" Icon="email" ButtonStyle="ButtonStyle.Light" />
*/