@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ============================================================
   Tema ODA — Ordem dos Advogados
   Re-colore o layout Adminto para o vermelho institucional,
   mantendo a estrutura/layout e os status (verde/amarelo/azul).
   Carregar SEMPRE depois de app.min.css.
   ============================================================ */

:root,
:root[data-bs-theme=light] {
    /* Tipografia do dashboard — DM Sans */
    --ct-font-sans-serif: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ct-body-font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --ct-primary: #C1272D;
    --ct-primary-rgb: 193, 39, 45;
    --ct-primary-bg-subtle: #f9dede;
    --ct-primary-border-subtle: #e7a3a6;
    --ct-primary-text-emphasis: #9a1f24;

    /* Dourado institucional — cor secundária usada com moderação (detalhes,
       divisores, selos, ícones de destaque) para dar mais dinamismo sem
       concorrer com o vermelho da marca. Nunca azul. */
    --oda-gold: #B8892B;
    --oda-gold-rgb: 184, 137, 43;
    --oda-gold-light: #F3E4C0;
    --oda-ink: #1A1D24;

    /* Links a vermelho institucional */
    --ct-link-color: #C1272D;
    --ct-link-color-rgb: 193, 39, 45;
    --ct-link-hover-color: #a81f25;
    --ct-focus-ring-color: rgba(193, 39, 45, 0.25);

    /* O tema Adminto tem #188ae2 (azul) espalhado por dezenas de variáveis de
       componentes Bootstrap (paginação, progress bar, pills, dropdowns, list-group,
       checkboxes...). Reescrevem-se aqui os tokens partilhados para vermelho, em vez
       de perseguir cada componente individualmente. */
    --ct-nav-pills-link-active-bg: #C1272D;
    --ct-pagination-active-bg: #C1272D;
    --ct-pagination-active-border-color: #C1272D;
    --ct-progress-bar-bg: #C1272D;
    --ct-dropdown-link-active-bg: #C1272D;
    --ct-list-group-active-bg: #C1272D;
    --ct-list-group-active-border-color: #C1272D;
}

/* O template define --ct-topbar-item-hover-color:#188ae2 numa media query, e o
   modo "brand" (data-topbar-color) reescreve-o para branco — pensado para uma
   topbar colorida/escura. Nesta aplicação a topbar do dashboard é sempre
   clara, por isso texto branco ao passar o rato torna o nome do utilizador
   invisível ("desaparece" ao fazer hover). Usa-se antes o vermelho da marca,
   consistente com os restantes estados de hover/activo da aplicação. */
html:not([data-layout=topnav]) .app-topbar:not(.topbar-active) {
    --ct-topbar-item-hover-color: #C1272D;
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #C1272D;
    border-color: #C1272D;
}

.form-range::-webkit-slider-thumb {
    background-color: #C1272D;
}

.form-range::-moz-range-thumb {
    background-color: #C1272D;
}

.btn-outline-primary {
    --ct-btn-color: #C1272D;
    --ct-btn-border-color: #C1272D;
    --ct-btn-hover-color: #fff;
    --ct-btn-hover-bg: #C1272D;
    --ct-btn-hover-border-color: #C1272D;
    --ct-btn-active-bg: #C1272D;
    --ct-btn-active-border-color: #C1272D;
    --ct-btn-disabled-color: #C1272D;
    --ct-btn-disabled-border-color: #C1272D;
}

.dropdown-menu-dark {
    --ct-dropdown-link-active-bg: #C1272D;
}

.bg-primary-gradient {
    background-image: linear-gradient(120deg, #9a1f24 0, #C1272D 60%, #dd646a 100%);
}

.megamenu-list li a:hover,
.nav-pills-primary {
    --ct-nav-pills-link-active-bg: #C1272D;
    --ct-nav-link-hover-color: #C1272D;
    color: #C1272D;
}

/* Avatar do utilizador (topbar): o ficheiro de origem é uma silhueta a preto
   sólido, sem fundo, o que fica "cru" sobre branco. Em vez de a mostrar como
   <img>, usa-se como máscara CSS — assim fica vectorial, colorida a
   vermelho da marca sobre um círculo rosa suave, tal como os ícones dos KPIs. */
.oda-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ct-primary-bg-subtle);
}

.oda-avatar-icon {
    width: 58%;
    height: 58%;
    background-color: var(--ct-primary);
    -webkit-mask: url('/assets/images/1299805.svg') center / contain no-repeat;
    mask: url('/assets/images/1299805.svg') center / contain no-repeat;
}

/* Cards com mais vida: cantos arredondados + sombra suave + leve elevação no hover */
.card {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 14px;
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .15);
    transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .22);
}

/* Topbar em modo "brand": usar o vermelho da marca em vez do azul do tema.
   (Mantém os ícones/texto a branco definidos pelo próprio modo brand.) */
:root[data-topbar-color=brand] {
    --ct-topbar-bg: #C1272D;
}

/* Sidebar clara: item ativo e hover a vermelho, com fundo suave (visual do mockup) */
:root[data-menu-color=light] {
    --ct-menu-item-hover-color: #C1272D;
    --ct-menu-item-hover-bg: rgba(193, 39, 45, 0.06);
    --ct-menu-item-active-color: #C1272D;
    --ct-menu-item-active-bg: #fbe0e0;   /* janela aberta: vermelho leve (como no mockup) */
}

/* Item selecionado: marcação vermelho leve + texto e ícone a vermelho.
   (Regra direta no <a>.active — funciona mesmo sem a classe active no <li>.) */
.side-nav .side-nav-link.active {
    background-color: #fbe0e0 !important;
    color: #C1272D !important;
    font-weight: 600;
    border-radius: 6px;
}

.side-nav .side-nav-link.active .menu-icon i {
    color: #C1272D !important;
}

/* O template traz um azul fixo (#188ae2) para o "flyout" que aparece ao
   passar o rato sobre um item quando a sidebar está colapsada (condensed).
   Substitui-se pelo vermelho da marca para consistência visual. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link {
    background-color: #C1272D;
}

/* Correcção do bug do sidebar colapsado: o CSS de origem só revela o
   submenu de um grupo (.collapse) em :hover, ignorando por completo a
   classe .show que o Vue passa a controlar ao clicar (ver AppSidebar.vue);
   e mesmo o :hover ficava sem efeito visível, porque o submenu é filho do
   contentor com scroll nativo ([data-simplebar], mais abaixo neste
   ficheiro) que tem overflow-x:hidden — o balão ficava sempre cortado.
   Quando colapsada, o AppSidebar.vue teleporta o balão para <body> (classe
   .oda-sidenav-flyout) e posiciona-o via JS junto do ícone — aqui só é
   preciso dar-lhe aparência, fora da árvore de overflow do menu. */
.oda-sidenav-flyout {
    display: block;
    position: fixed;
    z-index: 1071;
    width: calc(var(--ct-sidenav-width) - var(--ct-sidenav-width-sm));
    box-shadow: var(--ct-box-shadow-lg);
    border-radius: 0 0.4rem 0.4rem 0;
    background-color: var(--ct-menu-bg);
    padding: 0;
    margin: 0;
    animation: odaFadeInUp 0.15s ease both;
}

.oda-sidenav-flyout .sub-menu {
    position: static;
    display: block;
    width: 100%;
    box-shadow: none;
}

.oda-sidenav-flyout .side-nav-link .menu-text {
    display: flex;
}

/* Destaca o item colapsado enquanto o seu balão está aberto (por clique) —
   só cor, sem alterar a largura do gatilho. A versão anterior expandia o
   gatilho para a largura toda (como um preview do rótulo), mas isso mexia
   com a própria medição usada para posicionar o balão (getBoundingClientRect
   já lia o gatilho "esticado"), fazendo o balão aparecer bem afastado do
   ícone. Mantém-se aqui só o realce de cor, previsível e estável. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav > .side-nav-item > .side-nav-link[aria-expanded="true"] {
    color: #fff;
    background-color: #C1272D;
}

/* O template original marcava cada item de submenu com um ponto decorativo
   (::before, escondido dentro de .sub-menu) em vez de um ícone — os itens
   dos submenus (Listar/Ver Situação/Efectuar Pagamento, etc.) ficavam sem
   nenhuma indicação visual. Substitui-se por um ícone real (já definido em
   cada item em src/navigation.js), em vez do padding reservado para o ponto. */
.sub-menu .side-nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: var(--ct-menu-item-padding-x);
}

.sub-menu .side-nav-link .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--ct-menu-item-color, #64748b);
}

.sub-menu .side-nav-link.active .menu-icon {
    color: inherit;
}

/* "Sair" a vermelho no rodapé do menu */
.side-nav .side-nav-logout,
.side-nav .side-nav-logout .menu-icon i {
    color: #C1272D;
}

/* O espaçamento entre topbar, sidebar e conteúdo é dado nativamente
   pelo modo "detached" (cartões flutuantes) — ver data-layout-mode no <html>. */

/* Card de boas-vindas (hero) do dashboard — vermelho da marca */
.oda-welcome {
    background: linear-gradient(135deg, #C1272D 0%, #9A1F24 100%);
    border: 0;
}

.oda-welcome .oda-welcome-badge {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
}

/* Cartão de destaque secundário (ex.: CTA de pagamento centralizado) — tom
   escuro neutro, para não repetir o vermelho do cartão de boas-vindas quando
   aparecem os dois na mesma página. */
.oda-cta-dark {
    background: linear-gradient(135deg, #2a2f3d 0%, #1a1d26 100%);
    border: 0;
}

/* Botão de texto/ícone discreto para acções secundárias (ex.: "Ver email
   simulado" junto a um botão principal de um dialog). */
.oda-link-btn {
    border: none;
    background: transparent;
    color: var(--ct-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.oda-welcome .oda-welcome-mark {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 110px;
    line-height: 1;
    color: rgba(255, 255, 255, .08);
    pointer-events: none;
}

/* Contentor de altura fixa para os gráficos Chart.js (barras, tendência de
   receita) — o canvas do Chart.js precisa de um pai com altura definida para
   respeitar `maintainAspectRatio: false` e preencher o espaço do card. */
.oda-chart-wrap {
    position: relative;
    height: 220px;
}

.oda-chart-wrap-trend {
    height: 240px;
}

/* Donut desenhado com Chart.js (canvas), com o valor central sobreposto por
   cima do "buraco" do doughnut (cutout: 72% definido no componente). */
.oda-donut-wrap {
    width: 180px;
    height: 180px;
    position: relative;
    margin: 0 auto;
}

.oda-donut-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.oda-donut-wrap .oda-donut-label {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    padding: 0 0.5rem;
    pointer-events: none;
}

.oda-donut-wrap .oda-donut-label h3 {
    font-size: 1.25rem;
    word-break: break-word;
    margin-bottom: 0.15rem;
}

/* Marca ODA na sidebar: logo maior + "Ordem dos Advogados" ao lado, a vermelho */
.logo-lg.oda-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
}

.oda-brand-img {
    height: 46px !important;   /* logo maior / mais visível */
    width: auto;
    border-radius: 4px;
}

.oda-brand-img-sm {
    height: 34px !important;   /* versão da sidebar recolhida */
    width: auto;
    border-radius: 4px;
}

/* Logo no topbar do dashboard (AppHeader) */
.oda-topbar-logo,
.oda-topbar-logo-sm {
    height: 34px;
    width: 34px;
    object-fit: cover;
    border-radius: 50%;
}

.oda-brand-text {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #C1272D;
}

/* Correção de bug do template: no layout "detached", ao colapsar a sidebar
   (data-sidenav-size=condensed) o CSS de origem só reduz a margem do
   conteúdo (.page-content), mas esquece-se do header (.app-topbar), que
   fica sempre com a margem da sidebar larga (245px). Isto faz o header
   parecer "cortado" e desalinhado do conteúdo por baixo. */
html[data-layout-mode="detached"][data-sidenav-size="condensed"] .app-topbar {
    margin-left: var(--ct-sidenav-width-sm);
}

/* Botões partilhados da área pública (landing/verificação) — usados pelo header
   e por várias secções da landing (Hero, CTA final). Ficam aqui (globais) e não
   em <style scoped> de um único componente, para poderem ser reutilizados por
   outros sem os estilos do Vue se recusarem a atravessar essa fronteira. */
.oda-public-btn {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.oda-public-btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
}

.oda-public-btn-solid {
    background: var(--ct-primary);
    color: #fff;
}

.oda-public-btn-solid:hover {
    background: #a81f25;
    color: #fff;
}

/* Variante para usar sobre fundos vermelhos (Hero, CTA final) — um botão sólido
   vermelho sobre vermelho fica invisível, por isso esta variante inverte as cores. */
.oda-public-btn-solid-invert {
    background: #fff;
    color: var(--ct-primary);
}

.oda-public-btn-solid-invert:hover {
    background: #f2f2f2;
    color: #a81f25;
}

/* Botões primários (o tema traz hex fixo, por isso é preciso reescrever) */
.btn-primary {
    --ct-btn-bg: #C1272D;
    --ct-btn-border-color: #C1272D;
    --ct-btn-hover-bg: #a81f25;
    --ct-btn-hover-border-color: #a81f25;
    --ct-btn-active-bg: #a81f25;
    --ct-btn-active-border-color: #a81f25;
    --ct-btn-disabled-bg: #C1272D;
    --ct-btn-disabled-border-color: #C1272D;
    --ct-btn-focus-shadow-rgb: 193, 39, 45;
}

/* O template espera a biblioteca SimpleBar (JS) para dar scroll ao menu lateral
   através de [data-simplebar] — como não está incluída neste projecto, o menu
   ficava simplesmente cortado, sem hipótese de chegar aos módulos do fundo
   quando um perfil tem muitos itens. Repõe-se aqui scroll nativo do browser,
   com uma barra fina na cor da marca para não destoar do resto do layout. */
.sidenav-menu [data-simplebar] {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(193, 39, 45, .35) transparent;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar {
    width: 6px;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar-track {
    background: transparent;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar-thumb {
    background-color: rgba(193, 39, 45, .35);
    border-radius: 999px;
}

.sidenav-menu [data-simplebar]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(193, 39, 45, .55);
}

/* ============================================================
   Fase 1 — Redesign do Dashboard
   Tokens e componentes de apresentação partilhados pelos dashboards do
   Backoffice e do Portal do Advogado (hero, KPIs, gráficos, timeline).
   ============================================================ */

/* Hero de boas-vindas: textura subtil (grelha diagonal muito ténue) por
   cima do gradiente, para dar mais profundidade sem comprometer a
   legibilidade do texto branco. */
.oda-welcome {
    position: relative;
}

.oda-welcome::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 22px);
    pointer-events: none;
}

.oda-welcome .card-body {
    z-index: 1;
}

.oda-welcome-badge {
    backdrop-filter: blur(2px);
}

/* Timeline de "Actividade Recente" — nó com ícone + linha de ligação, em
   substituição da lista plana anterior. */
.oda-timeline {
    position: relative;
}

.oda-timeline-item {
    position: relative;
    display: flex;
    gap: .75rem;
    padding-bottom: 1.25rem;
    animation: odaFadeInUp .45s ease both;
}

.oda-timeline-item:last-child {
    padding-bottom: 0;
}

.oda-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: -2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(193, 39, 45, .18), rgba(193, 39, 45, .02));
}

.oda-timeline-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.oda-timeline-content {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

/* Entrada suave das secções do dashboard (fade + leve deslocamento vertical),
   escalonada por secção — aplicada apenas dentro de .oda-dashboard para não
   afectar páginas de listagem/backoffice fora do âmbito desta tarefa. */
.oda-dashboard > .row {
    animation: odaFadeInUp .5s ease both;
}

/* Espaçamento entre secções, mais compacto do que o mb-3/mb-2 do Bootstrap
   (1rem/0.75rem) usado em cada linha, mantendo a respiração entre cartões
   mas sem tanta distância vertical acumulada ao longo da página. Aplicado a
   toda a plataforma autenticada (qualquer ecrã dentro de .page-container),
   não só aos dashboards, para o espaçamento ficar consistente em todo o
   lado. O padding interno dos cards também é reduzido (o tema base vem com
   1.5rem, generoso a mais quando empilhado repetidamente). */
.page-container > .row {
    margin-bottom: 0.85rem !important;
}

.page-content .card-body {
    padding: 1.1rem 1.25rem;
}

.page-content .card-header {
    padding: 0.85rem 1.25rem;
}

.oda-dashboard > .row:nth-of-type(1) { animation-delay: 0s; }
.oda-dashboard > .row:nth-of-type(2) { animation-delay: .06s; }
.oda-dashboard > .row:nth-of-type(3) { animation-delay: .12s; }
.oda-dashboard > .row:nth-of-type(4) { animation-delay: .18s; }
.oda-dashboard > .row:nth-of-type(5) { animation-delay: .24s; }
.oda-dashboard > .row:nth-of-type(n+6) { animation-delay: .3s; }

@keyframes odaFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oda-dashboard > .row,
    .oda-timeline-item {
        animation: none;
    }
}

/* ============================================================
   Fase 1.5 — Elevação visual (pedido de feedback explícito: "quero algo
   mais fora da caixa"). Padrão de cabeçalho de secção com selo de ícone
   colorido, tira de estatísticas em vidro fosco no hero, e realce das
   linhas de tabela — usados a partir daqui nos dashboards.
   ============================================================ */

.oda-section-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.oda-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    background: var(--ct-primary-bg-subtle);
    color: var(--ct-primary);
    box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.4);
}

.oda-section-icon-gold {
    background: var(--oda-gold-light);
    color: var(--oda-gold);
}

.oda-section-icon-success {
    background: #e6f6ee;
    color: #1e7e4d;
}

.oda-section-icon-info {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
}

.oda-section-icon-secondary {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

/* Tira de estatísticas "em vidro" no rodapé do hero — dados reais do
   dashboard (não decorativos), para o cartão de boas-vindas transmitir de
   imediato uma sensação de painel de gestão vivo, não só um banner de texto. */
.oda-hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.oda-hero-stat {
    flex: 1 1 130px;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-right: none;
}

.oda-hero-stat:first-child {
    border-radius: 10px 0 0 10px;
}

.oda-hero-stat:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0 10px 10px 0;
}

.oda-hero-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}

.oda-hero-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

@media (max-width: 767.98px) {
    .oda-hero-stat {
        flex-basis: 50%;
        border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 8px !important;
        margin: 3px;
    }
}

/* Realce subtil das linhas de tabela ao passar o rato — as tabelas PrimeVue
   ficavam sem qualquer resposta visual ao hover, destoando dos restantes
   elementos interactivos (cards, KPIs) já com microinteracções. */
.p-datatable .p-datatable-tbody > tr {
    transition: background-color 0.15s ease;
}

.p-datatable .p-datatable-tbody > tr:hover {
    background-color: rgba(193, 39, 45, 0.035) !important;
}

/* Impressão de qualquer ecrã do dashboard (usado sobretudo pelo recibo) — esconde
   a chrome da aplicação e deixa só o conteúdo da página ocupar a folha. */
@media print {
    .sidenav-menu,
    .app-topbar,
    .footer,
    .oda-no-print {
        display: none !important;
    }

    .wrapper,
    .page-content,
    .page-container {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
}