/* ============================================================================
   VIKUNJA · TEMA "LIMA AMORIM & ADVOGADOS"
   ----------------------------------------------------------------------------
   Skin / override CSS para o Vikunja (Vue 3 · base Bulma).
   Carregar SEMPRE por ÚLTIMO (último <link>/<style> da página), depois do CSS
   padrão do Vikunja. Injetado via nginx-sidecar (sub_filter) em
   https://kanban.limaamorim.com.br — embutido em iframe na intranet (HumHub).

   Estratégia:
     1. Sobrescrever as CSS custom properties do :root do Vikunja  ──►  recolore
        em cascata botões, links, foco, seleção e estados ativos.
     2. Ajustes pontuais por classe onde a variável não cobre (topbar, sidebar,
        kanban, etiquetas, login).
   Só mexe em COR, TIPOGRAFIA e ACABAMENTO — nunca em layout, espaçamento ou
   usabilidade. `!important` apenas onde o CSS base do Vikunja exige.

   Sumário:
     [0]  Tipografia (@font-face / stacks, sem CDN)
     [1]  Variáveis :root  (recoloração em cascata)
     [2]  Topbar (barra superior)
     [3]  Sidebar (menu de navegação)
     [4]  Botões & links
     [5]  Inputs, cards & foco
     [6]  Kanban (buckets, cards, botão +)
     [7]  Etiquetas / labels / badges
     [8]  Login (botão Entrar + faixa lateral da lhama)
     [9]  Dark mode
   ============================================================================ */


/* ============================================================================
   [0] TIPOGRAFIA  ·  Sem assets externos / CDN (a intranet bloqueia CDN por CSP)
   ----------------------------------------------------------------------------
   Assumimos que 'Playfair Display' e 'Inter' já estão disponíveis no sistema
   ou injetadas via @font-face em outra folha. Caso a infra queira embutir as
   fontes aqui, descomente os blocos @font-face abaixo e aponte os src para
   arquivos servidos pelo próprio domínio (woff2 local, mesma origem — sem CDN).
   ---------------------------------------------------------------------------- */
/*
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:500 700;
  font-display:swap; src:url('/fonts/PlayfairDisplay.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/fonts/Inter.woff2') format('woff2');
}
*/

:root{
  /* Stacks com fallback de sistema robusto (serif p/ títulos, sans p/ corpo) */
  --la-serif: 'Playfair Display', Georgia, 'Times New Roman', Cambria, serif;
  --la-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


/* ============================================================================
   [1] VARIÁVEIS :root  ·  recoloração em cascata (AZUL → VERDE LIMA AMORIM)
   ----------------------------------------------------------------------------
   Paleta institucional:
     verde-floresta  #2E3B23   primária / títulos / botões
     verde escuro    #232C1A   hover / pressed
     sálvia          #808E5C   acento / hover de superfície / ativo suave
     sage-tint       #EEEFE2   seleção / hover claro
     creme           #EAE7D9   fundos suaves
     off-white       #F4F3EA   fundo de página
     tinta texto     #2b2b2b / #4a4a4a
   ---------------------------------------------------------------------------- */
:root{
  /* — Primária (Bulma is-primary, foco, destaques) — */
  --primary:            #2E3B23;
  --primary-dark:       #232C1A;
  --primary-light:      #EEEFE2;
  --primary-hover:      #3A4A2C;
  --primary-rgb:        46, 59, 35;        /* para usos rgba(var(--primary-rgb), …) */

  /* — Links — verde legível sobre branco (mantém contraste AA) — */
  --link:               #41512B;
  --link-dark:          #2E3B23;
  --link-hover:         #2E3B23;
  --link-active:        #232C1A;
  --link-focus:         #2E3B23;
  --link-text:          #41512B;

  /* — Fundos — */
  --site-background:    #F4F3EA;           /* fundo de página off-white */
  --background:         #F4F3EA;

  /* — Texto / cinzas (puxados para o oliva quente, em vez do cinza-azulado) — */
  --text:               #2b2b2b;
  --text-light:         #4a4a4a;
  --grey-700:           #3A4230;
  --grey-800:           #2E3526;
  --grey-900:           #232A18;

  /* — Acento de seleção de texto — */
  --la-selection:       #808E5C;
}

/* Seleção de texto na cor sálvia */
::selection{ background:#808E5C; color:#fff; }
::-moz-selection{ background:#808E5C; color:#fff; }

/* Corpo: fundo de página + tipografia Inter */
html, body, #app{
  background-color: var(--site-background);
}
body{
  font-family: var(--la-sans);
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos em Playfair Display */
h1, h2, h3, h4,
.title, .subtitle,
.card-header-title,
.menu-label{
  font-family: var(--la-serif);
}
.title{ color: var(--primary); letter-spacing:.1px; }

/* Números em tabular-nums (datas, contadores, IDs de tarefa) */
.task-id, .bucket-header .limit, .count,
.menu-list .count, time, .date, [class*="count"]{
  font-variant-numeric: tabular-nums;
  font-feature-settings:'tnum' 1;
}


/* ============================================================================
   [2] TOPBAR  ·  barra superior
   ----------------------------------------------------------------------------
   Cobre as variações de nome de classe entre versões do Vikunja:
   .navbar (Bulma), .topbar, o cabeçalho do conteúdo .content-wrapper > header.
   ---------------------------------------------------------------------------- */
.navbar,
.topbar,
header.navbar{
  background-color: var(--cream, #EAE7D9);
  border-bottom: 1px solid rgba(var(--primary-rgb), .12);
}

/* Hambúrguer / ícones / título dentro da topbar em verde */
.navbar a, .topbar a,
.navbar .icon, .topbar .icon,
.navbar .button.is-text,
.menu-show-button, .menu-hide-button{
  color: var(--primary);
}
.navbar a:hover, .topbar a:hover{
  color: var(--primary-hover);
}

/* Logotipo: o SVG padrão do Vikunja fica num tom neutro/verde */
.logo svg, .logo img{
  filter: none;
}


/* ============================================================================
   [3] SIDEBAR  ·  menu de navegação (Visão geral / Projetos / Etiquetas / Equipes)
   ----------------------------------------------------------------------------
   Vikunja usa um Bulma "menu": .menu-container > .menu > .menu-list.
   Rótulos: .menu-label. Item ativo: .router-link-exact-active / .is-active.
   ---------------------------------------------------------------------------- */
.menu-container,
.namespace-container,
aside.menu,
#menu{
  background-color: var(--cream, #EAE7D9);
  border-right: 1px solid rgba(var(--primary-rgb), .10);
}

/* Rótulos de seção do menu (em sálvia, caixa alta discreta) */
.menu-label{
  color: #6E7458;
  letter-spacing:.04em;
}

/* Itens do menu */
.menu-list a{
  color: var(--text-light);
  border-radius: 10px;
  transition: background-color .16s ease, color .16s ease;
}
.menu-list a:hover{
  background-color: #E3E1CF;     /* hover creme um pouco mais saturado */
  color: var(--primary);
}

/* Item ATIVO — verde-floresta sólido + texto claro (contraste AA garantido) */
.menu-list a.router-link-exact-active,
.menu-list a.router-link-active,
.menu-list a.is-active,
.menu-list li.is-active > a{
  background-color: var(--primary) !important;
  color: #F1F0E2 !important;
}
.menu-list a.router-link-exact-active .icon,
.menu-list a.router-link-active .icon,
.menu-list a.is-active .icon{
  color: #F1F0E2 !important;
}

/* Ícones do menu (favoritos, etc.) na cor sálvia quando inativos */
.menu-list a .icon{ color:#808E5C; }

/* Pontinhos de cor de projeto e contadores permanecem como definidos por dado;
   contadores neutros ganham o tom oliva */
.menu-list .count, .menu-list .num{
  color:#6E7458;
}


/* ============================================================================
   [4] BOTÕES & LINKS
   ----------------------------------------------------------------------------
   .button.is-primary é o CTA principal. Verde sólido com texto claro
   (contraste alto); hover escurece para --primary-dark.
   ---------------------------------------------------------------------------- */
.button.is-primary{
  background-color: var(--primary);
  border-color: transparent;
  color: #F1F0E2;
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), .14);
}
.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary.is-hovered{
  background-color: var(--primary-hover);
  color:#fff;
}
.button.is-primary:active,
.button.is-primary.is-active{
  background-color: var(--primary-dark);
}
.button.is-primary[disabled],
.button.is-primary.is-loading{
  background-color: #6E7458;
}

/* Variante outline / texto em verde */
.button.is-primary.is-outlined{
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.button.is-primary.is-outlined:hover{
  background-color: var(--primary);
  color:#F1F0E2;
}

/* Botões secundários / neutros: hover puxa para a sálvia */
.button:not(.is-primary):not(.is-danger):not(.is-success):not(.is-warning):hover{
  border-color:#808E5C;
  color: var(--primary);
}

/* Links genéricos */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }
a.is-primary, .is-link{ color: var(--link); }


/* ============================================================================
   [5] INPUTS, CARDS & FOCO
   ----------------------------------------------------------------------------
   Anel de foco verde-sálvia, cantos suaves, sombras leves.
   ---------------------------------------------------------------------------- */
.input:focus, .textarea:focus, .select select:focus,
.input.is-focused, .is-focused .input,
.button:focus-visible, a:focus-visible,
.input:active, .textarea:active{
  border-color: #808E5C !important;
  box-shadow: 0 0 0 .125em rgba(128,142,92,.22) !important;
}

/* Foco de teclado visível e coerente em qualquer elemento interativo */
:focus-visible{
  outline-color: #808E5C;
}

/* Cards e caixas — cantos suaves + sombra leve da marca */
.card, .box{
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), .05),
              0 2px 8px rgba(var(--primary-rgb), .06);
}

/* Checkbox / "done" das tarefas no verde da marca */
.fancycheckbox input:checked + .check,
input[type="checkbox"]:checked{
  accent-color: var(--primary);
}

/* Barra de progresso / elementos is-primary diversos */
.progress.is-primary::-webkit-progress-value{ background-color: var(--primary); }
.progress.is-primary::-moz-progress-bar{ background-color: var(--primary); }
.progress.is-primary{ color: var(--primary); }


/* ============================================================================
   [6] KANBAN  ·  buckets (colunas), cards e botão "+"
   ----------------------------------------------------------------------------
   DOM Vikunja: .kanban > .bucket > .bucket-header / .tasks > .task / .bucket-footer
   ---------------------------------------------------------------------------- */
.kanban{ background: transparent; }

/* Coluna / bucket */
.kanban .bucket{
  background-color: var(--cream, #EAE7D9);
  border: 1px solid rgba(var(--primary-rgb), .08);
  border-radius: 14px;
}

/* Cabeçalho da coluna */
.kanban .bucket .bucket-header{
  color: var(--primary);
}
.kanban .bucket .bucket-header .title{
  font-family: var(--la-serif);
  color: var(--primary);
}
/* Contador de limite */
.kanban .bucket .bucket-header .limit{
  color:#6E7458;
}
/* Marcador de "bucket concluído" / done usa a sálvia */
.kanban .bucket.is-done-bucket .bucket-header,
.kanban .bucket .is-done-bucket-button.is-done{
  color:#808E5C;
}

/* Cards de tarefa */
.kanban .bucket .task{
  background-color: #FFFFFF;
  border: 1px solid rgba(var(--primary-rgb), .07);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), .05);
  transition: box-shadow .2s ease, transform .14s ease, border-color .2s ease;
}
.kanban .bucket .task:hover{
  border-color: rgba(128,142,92,.45);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .10);
}
/* ID "#123" do card discreto e tabular */
.kanban .task .task-id, .task .task-id{
  color:#9AA083;
  font-variant-numeric: tabular-nums;
}
/* Título do card */
.kanban .task .task-title, .kanban .task .title{
  color: var(--text);
}

/* Botão "+ Adicionar tarefa" no rodapé do bucket */
.kanban .bucket .bucket-footer .button,
.kanban .bucket-footer .button{
  color: var(--primary);
}
.kanban .bucket .bucket-footer .button:hover{
  background-color: #E3E1CF;
  border-color:#808E5C;
  color: var(--primary);
}

/* Placeholder de drop / coluna em arraste */
.kanban .bucket.dragging-active,
.kanban .sortable-ghost{
  outline: 2px dashed #808E5C;
  outline-offset: -2px;
}


/* ============================================================================
   [7] ETIQUETAS / LABELS / BADGES
   ----------------------------------------------------------------------------
   IMPORTANTE: as etiquetas que o usuário cria têm cor própria (inline) e NÃO
   devem ser sobrescritas. Aqui tratamos apenas as tags NEUTRAS/padrão do Bulma
   (sem cor definida) e os badges de prioridade/estado.
   ---------------------------------------------------------------------------- */

/* Tag neutra padrão (sem is-* e sem cor inline) → tom creme/oliva da marca */
.tag:not([style*="background"]):not(.is-primary):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-link){
  background-color: var(--primary-light);
  color: var(--primary);
}

/* Tag is-primary do Bulma na cor da marca */
.tag.is-primary{
  background-color: var(--primary);
  color:#F1F0E2;
}

/* Etiquetas coloridas pelo usuário: só suavizamos o canto, sem tocar na cor */
.tag{ border-radius: 8px; }

/* "Done" / concluído */
.tag.is-success, .is-done{
  background-color: #808E5C;
  color:#fff;
}


/* ============================================================================
   [8] LOGIN  ·  botão Entrar, links e faixa lateral da lhama
   ----------------------------------------------------------------------------
   Recolore o CTA "Entrar" e os links da tela de entrada.
   A faixa/ilustração lateral padrão do Vikunja (a lhama) é coberta por um
   bloco VERDE SÓLIDO com o nome do escritório, para não destoar da intranet.

   OBS p/ infra: o seletor exato da faixa pode variar conforme a versão.
   Os candidatos cobertos abaixo dão conta das builds atuais; se a ilustração
   for um <img> específico, acrescente o seletor dele no bloco marcado ▶.
   ---------------------------------------------------------------------------- */

/* CTA "Entrar" e links da tela de login já herdam de [1]/[4]; reforço pontual */
.login .button.is-primary,
.content-auth .button.is-primary,
[class*="auth"] .button.is-primary{
  background-color: var(--primary);
  color:#F1F0E2;
}
.login a, .content-auth a, [class*="auth"] a{
  color: var(--link);
}

/* Cartão de login: cantos suaves + sombra da marca */
.login .box, .content-auth .box, [class*="auth"] .box{
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), .10),
              0 24px 50px rgba(var(--primary-rgb), .10);
}

/* ▶ Faixa lateral da lhama → bloco verde sólido. Mantém o "Bem-vindo de volta!"
   nativo do Vikunja por cima do verde. NÃO injetar texto via ::after — fazia
   sobrepor/duplicar com o texto nativo (corrigido 2026-06-14). */
.app-container.has-background,
.noauth-wrapper .image,
.login-hero,
.auth-image,
[class*="auth"] [class*="image"]{
  background-image: none !important;
  background-color: var(--primary) !important;
}


/* ============================================================================
   [9] DARK MODE  ·  variante escura coerente
   ----------------------------------------------------------------------------
   Vikunja alterna o tema escuro via classe na raiz / [data-theme]. Cobrimos os
   gatilhos conhecidos e também prefers-color-scheme como rede de segurança.
   Em fundo escuro a SÁLVIA passa a ser o acento visível (lê melhor que o verde
   profundo); botões primários usam sálvia com texto escuro p/ contraste.
   ---------------------------------------------------------------------------- */
:root.dark,
html.dark,
[data-theme='dark'],
.theme-dark{
  --primary:            #9DAA74;   /* sálvia clara = acento visível no escuro */
  --primary-dark:       #808E5C;
  --primary-light:      #2A331F;   /* superfícies de seleção/hover escuras */
  --primary-hover:      #AEBB86;
  --primary-rgb:        157, 170, 116;

  --link:               #B7C293;
  --link-hover:         #CBD3AC;

  --site-background:    #181C12;   /* fundo de página verde-carvão */
  --background:         #181C12;
}

/* Superfícies escuras com tom verde-quente em vez do cinza-azulado padrão */
[data-theme='dark'] .navbar,
[data-theme='dark'] .topbar,
[data-theme='dark'] .menu-container,
[data-theme='dark'] aside.menu,
:root.dark .navbar,
:root.dark .menu-container,
.theme-dark .navbar,
.theme-dark .menu-container{
  background-color: #20271A;
  border-color: rgba(157,170,116,.16);
}
[data-theme='dark'] .kanban .bucket,
:root.dark .kanban .bucket,
.theme-dark .kanban .bucket{
  background-color: #20271A;
  border-color: rgba(157,170,116,.14);
}
[data-theme='dark'] .kanban .bucket .task,
:root.dark .kanban .bucket .task,
.theme-dark .kanban .bucket .task{
  background-color: #262E1C;
  border-color: rgba(157,170,116,.16);
}
/* Item ativo do menu no escuro: sálvia sólida + texto escuro (contraste) */
[data-theme='dark'] .menu-list a.router-link-exact-active,
:root.dark .menu-list a.router-link-exact-active,
.theme-dark .menu-list a.router-link-exact-active{
  background-color: #808E5C !important;
  color: #181C12 !important;
}
/* Botão primário no escuro: sálvia com texto escuro */
[data-theme='dark'] .button.is-primary,
:root.dark .button.is-primary,
.theme-dark .button.is-primary{
  background-color: #9DAA74;
  color:#181C12;
}
[data-theme='dark'] .button.is-primary:hover,
:root.dark .button.is-primary:hover,
.theme-dark .button.is-primary:hover{
  background-color:#AEBB86;
}

/* Rede de segurança: se o tema escuro vier só por preferência do SO */
@media (prefers-color-scheme: dark){
  html:not(.light):not([data-theme='light']) .login .box{
    box-shadow: 0 8px 30px rgba(0,0,0,.45);
  }
}

/* ============================================================================
   FIM — vikunja-lima.css
   ============================================================================ */