/*
 * vcgl-projectcontrol.css — estilos que são SÓ deste produto.
 *
 * Os outros ficheiros desta pasta (vcgl.css, vcgl-dashboard.css, vcgl-components.css) são cópias do kit
 * do VCGL EPM e são substituídos quando o kit é actualizado. O que se escrever lá desaparece nessa cópia.
 * O que é do Project Control vive aqui. É o mesmo papel que o vcgl-lola.css tem no Lola.
 */

/* ============================================================
   Menu do utilizador — igual ao do Lola
   ============================================================
   O utilizador no fundo da barra lateral é um <button>, para abrir o mesmo menu do topo. O kit desenha-o
   como se fosse uma ligação, e um botão traz consigo a moldura e o fundo branco que o browser lhe põe —
   é essa a "caixa branca" à volta do nome. O Lola tem este mesmo reset no seu vcgl-lola.css. */
.sidebar-footer .sidebar-user,
.navbar-user {
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.sidebar-footer .sidebar-user { width: 100%; }

/* O menu ABRIA, mas ficava invisível. A versão do kit que este produto tem leva `overflow: hidden` no
   .sidebar-footer — a do Lola não leva — e o dropdown, que é desenhado por cima do rodapé, era cortado por
   inteiro. Um menu que não aparece lê-se como um botão avariado, e foi assim que apareceu.
   A barra lateral também tem `overflow: hidden`, mas essa fica: o menu abre para CIMA e com a largura do
   rodapé, portanto cabe lá dentro. Tirá-la mudaria o rolamento da navegação e o recolher da barra. */
.sidebar-footer { overflow: visible; }

/* O menu leva `w-100`, que com a barra recolhida são poucos pixels — largura para meia palavra. O mínimo é
   o que o mantém legível recolhida, e o `w-100` continua a mandar com a barra aberta. Recolhida é
   precisamente quando este menu é mais preciso: não há nome escrito, só as iniciais. */
.sidebar-footer .dropdown-menu { min-width: 200px; }

/* ============================================================
   Caixa de entrada — igual à do Lola
   ============================================================
   O cartão, o cabeçalho com o gradiente da marca e o círculo decorativo vêm do kit (vcgl.css), e as regras
   do kit são byte a byte as mesmas nos dois produtos. O que falta é o que o Lola tem no seu layout, e está
   aqui: a placa do logo e as linhas do formulário. Dois produtos da mesma casa com portas de entrada
   diferentes é a primeira coisa que um cliente nota, e a única que ele vê antes de entrar.

   A placa branca por baixo do logo não é enfeite: no logo, tanto o símbolo como a palavra "Project" são do
   mesmo azul-escuro do cabeçalho — logo sobre azul, metade do logo desaparecia. Branco fixo e não uma
   variável de superfície, porque o fundo por baixo é o mesmo nos dois temas e portanto a placa que o tem de
   vencer também é.

   Trava-se a ALTURA e não a largura: um logo mais largo encolhe sozinho, um mais alto empurrava o formulário
   para fora do ecrã num portátil baixo — que é onde esta página é mais vista. */
.auth-logo {
  display: block;
  height: 116px;
  width: auto;
  max-width: 100%;
  margin: .35rem auto .55rem;
  padding: .35rem .7rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

/* O nome escrito só reaparece se a imagem faltar (via onerror no parcial): uma porta de entrada sem imagem
   não pode ficar sem dizer de que produto é. */
.auth-logo-fallback {
  display: none;
}

/* A linha de baixo do cabeçalho — no cliente é o nome do tenant — um pouco mais afastada da placa do logo.
   Encostada, lia-se como parte da imagem e não como legenda dela. O kit põe margem zero; aqui só se mexe no
   topo, para não desalinhar o fundo do cabeçalho. */
.vcgl-tagline {
  margin-top: .6rem;
}

.auth-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--app-text);
  margin-bottom: .25rem;
}

.auth-lead {
  font-size: .84rem;
  color: var(--app-text-muted);
  margin-bottom: 1.25rem;
}


.field-error {
  display: block;
  font-size: .8rem;
  color: #b91c1c;
  margin-top: .3rem;
}

[data-theme="dark"] .field-error {
  color: #f87171;
}

.field-note {
  font-size: .78rem;
  color: var(--app-text-muted);
  margin-top: .3rem;
  line-height: 1.4;
}

/* ============================================================
   Quadro Kanban
   ============================================================
   Nada aqui fixa cores de superficie: o quadro vive dentro de um vcgl-card e tem de sobreviver ao tema
   nocturno como o resto. As unicas cores literais sao as do estado do limite de trabalho em curso, e essas
   sao semanticas (ambar = atencao, vermelho = passou), nao decorativas. */
.kanban-quadro {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: .5rem;
}

.kanban-coluna {
  flex: 0 0 17rem;
  max-width: 17rem;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.kanban-coluna-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--app-border);
  font-size: .85rem;
  font-weight: 600;
  color: var(--app-text);
}

.kanban-coluna-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A contagem em relacao ao limite. E o unico numero do quadro que importa ver de longe. */
.kanban-wip {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 600;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--app-border);
  color: var(--app-text-muted);
}

.kanban-coluna.no-limite .kanban-wip { background: rgba(245, 158, 11, .18); color: #b45309; }
.kanban-coluna.acima    .kanban-wip { background: rgba(220, 38, 38, .18); color: #b91c1c; }
.kanban-coluna.acima { border-color: rgba(220, 38, 38, .45); }

[data-theme="dark"] .kanban-coluna.no-limite .kanban-wip { color: #fbbf24; }
[data-theme="dark"] .kanban-coluna.acima    .kanban-wip { color: #f87171; }

/* Altura minima para haver onde largar um cartao numa coluna vazia — sem isto, esvaziar uma coluna deixava-a
   sem alvo e o trabalho ficava preso do outro lado. */
.kanban-cartoes {
  min-height: 4.5rem;
  padding: .55rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-radius: 0 0 10px 10px;
}

.kanban-cartoes.alvo {
  background: rgba(59, 130, 246, .09);
  outline: 2px dashed rgba(59, 130, 246, .5);
  outline-offset: -4px;
}

.kanban-cartao {
  background: var(--card-bg);
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--app-border);
  border-radius: 8px;
  padding: .5rem .6rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.kanban-cartao:active { cursor: grabbing; }
.kanban-cartao.a-arrastar { opacity: .45; }

.kanban-cartao-codigo {
  font-size: .7rem;
  font-weight: 600;
  color: var(--app-text-muted);
}

.kanban-cartao-nome {
  font-size: .85rem;
  color: var(--app-text);
  line-height: 1.3;
  margin: .1rem 0 .35rem;
}

.kanban-cartao-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

/* A etiqueta leva a cor da fase, que vem do servidor em estilo inline; o branco e escolhido contra ela e nao
   contra o fundo do tema, e por isso e literal. */
.kanban-etiqueta {
  font-size: .68rem;
  font-weight: 600;
  color: #fff;
  padding: .08rem .4rem;
  border-radius: 999px;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-horas {
  font-size: .72rem;
  color: var(--app-text-muted);
  white-space: nowrap;
}

/* Cartao parado. O vermelho e semantico (o trabalho nao anda) e nao decorativo, por isso e literal — mas
   suave o suficiente para nao competir com a cor da fase na barra da esquerda. */
.kanban-cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  min-height: 1.15rem;
}

.kanban-cartao-topo .vcgl-kebab {
  padding: 0 .25rem;
  line-height: 1;
  font-size: .75rem;
  opacity: 0;
  transition: opacity .12s;
}

/* O kebab so aparece com o rato em cima (ou com foco pelo teclado): um ponto de exclamacao em cada cartao
   tornava o quadro ruidoso, e o quadro le-se de longe. */
.kanban-cartao:hover .vcgl-kebab,
.kanban-cartao .vcgl-kebab:focus { opacity: 1; }

.kanban-cartao.bloqueado { border-color: rgba(220, 38, 38, .5); background: rgba(220, 38, 38, .04); }

.kanban-bloqueio {
  margin-top: .3rem;
  font-size: .72rem;
  line-height: 1.25;
  color: #b91c1c;
  background: rgba(220, 38, 38, .1);
  border-radius: 5px;
  padding: .2rem .4rem;
}

[data-theme="dark"] .kanban-bloqueio { color: #fca5a5; }

/* ============================================================
   Capacidade (periodos de um projecto de fluxo)
   ============================================================ */
.capacidade-equipa {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}

.capacidade-equipa .badge {
  font-weight: 500;
  background: var(--app-border);
  color: var(--app-text);
}

/* Histórico de alterações — o cartão tem fim, o histórico não.
   Sem isto, uma entidade com dois anos de uso desenhava milhares de linhas e empurrava tudo o resto para
   fora do ecrã. */
.historico-scroll {
  max-height: 26rem;
  overflow-y: auto;
  overflow-x: auto;
}

/* Cola o cabeçalho ao topo e NADA MAIS. A primeira versão desta regra pintava-lhe o fundo com --card-bg
   "para o cabeçalho não ficar transparente por cima do conteúdo a rolar" — mas o .vcgl-table th já traz o
   seu azul, e o que isto fez foi despintá-lo: os cabeçalhos do histórico ficaram brancos e diferentes de
   todas as outras tabelas da aplicação, no backoffice e no frontoffice.
   A sombra fica, e só ela: com border-collapse: collapse, a margem inferior de um th colado desaparece em
   alguns browsers, e é ela que separa o cabeçalho da primeira linha. Em tom escuro, para assentar no azul
   do cabeçalho em vez de lhe abrir um risco claro. */
.historico-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}