@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 que
   ignora o modo do topbar (data-topbar-color) — sobrepõe-se ao branco correto
   do modo "brand". Repõe-se aqui, com o mesmo seletor, para ganhar a cascata
   (este ficheiro carrega depois do app.min.css). */
html:not([data-layout=topnav]) .app-topbar:not(.topbar-active) {
    --ct-topbar-item-hover-color: #ffffff;
}

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

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

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

/* Gráfico de barras em CSS puro (sem ApexCharts/JS), nos tons da marca.
   A altura de cada barra é passada inline via style="height: X%". */
.oda-barchart {
    display: flex;
    align-items: flex-end;
}

.oda-bar-col {
    flex: 1;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oda-bar-track {
    height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.oda-bar-value {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 5px;
}

.oda-bar {
    width: 100%;
    background: linear-gradient(180deg, #C1272D 0%, #9A1F24 100%);
    border-radius: 6px 6px 0 0;
    transition: filter .2s ease;
}

.oda-bar:hover {
    filter: brightness(1.1);
}

.oda-bar-label {
    margin-top: 8px;
    font-size: 12px;
    color: #64748B;
    text-align: center;
    white-space: nowrap;
}

/* Donut em CSS puro (sem ApexCharts/JS). O gradiente é passado inline
   via style="background: conic-gradient(...)". */
.oda-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.oda-donut::before {
    content: "";
    position: absolute;
    width: 72%;
    height: 72%;
    border-radius: 50%;
    background: var(--ct-secondary-bg, #fff);
}

.oda-donut .oda-donut-label {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.25;
    padding: 0 0.5rem;
    max-width: 82%;
}

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