/* VISÃO GERAL - o resumo do portefólio
   Os três cartões do topo com a faixa do total, a fila de atalhos por tipo de
   pendência e a lista de prioridades. Painel em
   `public/features/dashboard-panel.js`; as contagens e os descritores em
   `public/features/dashboard.js`.

   Fica em `public/design.css` o que é partilhado com as secções vizinhas: a
   moldura comum dos quadros e o contentor de consulta, que nomeiam
   `.priorityList` e `.prioritySection` a par de `.uploadSection` e
   `.contractsSection`; a família de pastilhas `.statusPill/.phasePill/
   .rolePill`, que a lista de prioridades só reutiliza; e `.pageHeading`,
   `.sectionHeading`, `.eyebrow`, `.textButton` e `.avisoBar`, que são da
   casca e do que ainda vive em `app.js`. */


/* Três cartões, não quatro: críticas + a vigiar + em dia particionam o
   portefólio. A faixa por cima dá o total e distingue de imediato as EOP em
   que o utilizador é efetivo das que acompanha como suplente. */
.summaryGrid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.summaryTotal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px 16px;
  color: var(--muted);
  font-size: var(--txt-xs);
  line-height: 1.3;
}

.summaryTotal b,
.summaryTotal > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.summaryTotal b {
  color: var(--ink);
  font-weight: 650;
}

.summaryTotal strong {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.summaryRoleDot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--accent);
}

.summaryRoleDot.substitute {
  background: var(--cinza);
}

/* Atalhos: tudo o que não conta empreitadas. Cada um diz a sua unidade. */
.atalhosBar {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.atalhoChip {
  padding: 7px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.atalhoChip:hover { border-color: var(--accent, #3448b5); }
.atalhoChip b { font-size: var(--txt-sm); font-weight: 680; }
.atalhoChip small { color: var(--muted); font-size: var(--txt-xs); }

.summaryCard {
  min-height: 108px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
}

.summaryCard:hover,
.summaryCard.on {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-raised);
  filter: none;
}

.summaryCard > span:nth-child(2) {
  min-width: 0;
}

.summaryCard small,
.summaryCard b,
.summaryCard em {
  display: block;
}

.summaryCard small {
  color: var(--muted);
  font-size: var(--txt-sm);
}

.summaryCard b {
  margin-top: 1px;
  color: var(--ink);
  font-size: var(--txt-2xl);
  letter-spacing: -.04em;
}

.summaryCard em {
  color: var(--muted);
  font-size: var(--txt-xs);
  font-style: normal;
}

.summaryCard > i {
  margin-left: auto;
  color: var(--cinza);
  font-style: normal;
}

.summaryIcon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  font-weight: 750;
}

.summaryIcon.critical {
  background: #fdecee;
  color: #b4232d;
}

.summaryIcon.blue {
  background: #eaf2ff;
  color: #175cd3;
}

.summaryIcon.amber {
  background: #fff2da;
  color: #a85d00;
}

.summaryIcon.green {
  background: #e6f6ee;
  color: #087443;
}

.theme-dark .summaryIcon.critical { background: rgba(239, 101, 112, .14); color: #ff8d96; }
.theme-dark .summaryIcon.blue { background: rgba(77, 140, 240, .14); color: #81b0f7; }
.theme-dark .summaryIcon.amber { background: rgba(226, 164, 73, .14); color: #f0bd70; }
.theme-dark .summaryIcon.green { background: rgba(49, 183, 121, .14); color: #71d5a7; }

.priorityList {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.priorityItem {
  width: 100%;
  min-height: 73px;
  padding: 12px 17px;
  display: grid;
  grid-template-columns: 47px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.priorityItem:last-child {
  border-bottom: 0;
}

.priorityItem:hover {
  background: var(--subtle);
  filter: none;
}

/* O vermelho era o fundo por omissão: qualquer linha da lista de prioridade
   nascia com ar de prazo estourado, mesmo estando dentro do prazo. Passa a
   ser preciso pedi-lo. */
.priorityAge {
  width: 43px;
  height: 43px;
  display: grid;
  place-content: center;
  border-radius: var(--r-md);
  background: var(--subtle);
  color: var(--muted);
  text-align: center;
}

.priorityAge.atraso {
  background: #fdecee;
  color: #b4232d;
}

.priorityAge.aviso {
  background: #fff2da;
  color: #a85d00;
}

/* Atraso crónico: passou a tolerância e já não é o escorregão deste mês.
   Cinco linhas todas a dizer "Crítico" liam-se iguais, e 11 dias tinha o mesmo
   peso visual que 622. O contraste é a diferença - mesma família de cor, para
   continuar a ser a mesma banda do semáforo, e não uma quarta cor. */
.priorityAge.atraso.isCronico {
  background: #b4232d;
  color: #fff;
  box-shadow: inset 0 0 0 1px #8d1a22;
}

.priorityAge b,
.priorityAge small,
.priorityCopy b,
.priorityCopy small {
  display: block;
}

.priorityAge b {
  font-size: var(--txt-sm);
  line-height: 1;
}

.priorityAge small {
  margin-top: 2px;
  font-size: var(--txt-xs);
}

.priorityCopy b {
  font-size: var(--txt-sm);
}

/* O título vem do arquivo em maiúsculas e por extenso - "REABILITAÇÃO DE
   INSTALAÇÕES NO EDIFÍCIO INFANTE D. HENRIQUE (PM022/LAGOS) E NA CAFETARIA DA
   MESSE DO ALGARVE - POLO DE LAGOS (PM 11/LAGOS)" -, e a linha crescia até ele
   acabar: cinco linhas de identificação para uma pendência de duas palavras. A
   duas linhas o número da obra, que é o que identifica, continua inteiro à
   frente. */
.priorityCopy small {
  margin-top: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--txt-xs);
  line-height: 1.4;
}

.priorityItem > em {
  color: var(--cinza);
  font-style: normal;
}

@media (max-width: 1180px) {
  .summaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* Quatro células numa linha - sinal, texto, estado, seta - não cabem num ecrã
     estreito. O estado era o que sobrava: caía na coluna de 18px reservada à
     seta, e uma pastilha de 18px com `border-radius` de pastilha é uma bola de
     onde o "Crítico" saía por fora; a seta, sem coluna, ia para uma linha só
     dela no fundo do cartão.

     Duas colunas e duas linhas: à esquerda o estado por cima do sinal de dias,
     empilhados no canto; à direita o texto, a ocupar as duas linhas. A seta sai,
     porque o cartão inteiro já abre a ficha, como na lista de empreitadas.

     A primeira coluna é `auto` e não os 47px do sinal, porque a pastilha é mais
     larga do que ele e é ela que passa a mandar na largura.

     A regra que escondia a pastilha não podia funcionar: `.stateCue` declara
     `display: inline-flex !important` e ganhava sempre. */
  .priorityItem {
    min-height: 0;
    padding: 11px 13px;
    grid-template-columns: auto minmax(0, 1fr);
    /* Uma linha por parte do texto: estado, pendência, identificação. */
    grid-template-rows: auto auto auto;
    gap: 3px 12px;
    align-items: center;
  }

  /* Sem fundo. Duas caixas cheias empilhadas - "Crítico" numa e "177 dias" na
     outra, ambas em rosa - leem-se como um alarme a dobrar, e a segunda já dá a
     cor toda que é precisa. Fica a palavra na cor do estado, em maiúsculas
     pequenas, a servir de rótulo do número que está debaixo dela: é a mesma voz
     dos `.eyebrow` do resto da aplicação.

     O tema escuro repete-se no seletor por causa de `.theme-dark
     .statusPill.critico`, que tem uma classe a mais e devolvia o fundo. */
  .priorityItem .statusPill,
  .theme-dark .priorityItem .statusPill {
    grid-area: 1 / 2;
    justify-self: start;
    align-self: end;
    min-height: 0;
    padding: 0;
    gap: 4px;
    background: none;
    font-size: var(--txt-xs);
    font-weight: 720;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .priorityItem .statusPill .gcIcon {
    width: 12px;
    height: 12px;
  }

  /* O quadrado ocupa a coluna toda e centra-se nela. Empilhado por baixo do
     estado ficava encostado ao topo de um texto de quatro linhas, com o
     rótulo mais largo do que ele por cima: nada alinhava com nada. */
  .priorityItem .priorityAge {
    grid-area: 1 / 1 / 4 / 2;
    align-self: center;
  }

  /* O invólucro deixa de ser caixa: a pendência e a identificação passam a ser
     células da grelha da linha, que é onde o alinhamento se decide. */
  .priorityItem .priorityCopy {
    display: contents;
  }

  .priorityItem .priorityCopy b {
    grid-area: 2 / 2;
  }

  .priorityItem .priorityCopy small {
    grid-area: 3 / 2;
    margin-top: 0;
  }

  .priorityItem > em {
    display: none;
  }
}

@media (max-width: 620px) {
  .summaryGrid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .summaryTotal {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }

  /* Quatro lugares fixos - símbolo, rótulo, número, seta. Os números ficam
     todos encostados à seta, na mesma coluna, e leem-se de cima a baixo como
     uma coluna de valores. Antes seguiam o rótulo, e "13", "1" e "26"
     começavam cada um a uma distância diferente da margem, o que dava a três
     cartões da mesma família três alinhamentos distintos. */
  .summaryCard {
    min-height: 64px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 10px;
  }

  .summaryCard > .summaryIcon {
    grid-row: 1 / 3;
  }

  /* O invólucro do texto deixa de ser uma caixa: os três filhos passam a ser
     células da grelha do cartão, que é onde o alinhamento se decide. */
  .summaryCard > span:nth-child(2) {
    display: contents;
  }

  .summaryCard small,
  .summaryCard b,
  .summaryCard em {
    margin: 0;
    line-height: 1.25;
  }

  .summaryCard small {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .summaryCard em {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .summaryCard b {
    grid-column: 3;
    grid-row: 1 / 3;
    font-size: var(--txt-2xl);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .summaryCard > i {
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .summaryIcon {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
  }

  /* A moldura da lista somava-se à de cada linha: 19px do cartão mais 13px da
     linha davam 32px de recuo antes de começar o quadrado de 43 - num ecrã de
     375px, um sexto da largura entregue a nada. As linhas já se separam por
     traço, e sem a moldura o traço passa a ir de bordo a bordo, que é o que
     uma lista dividida quer. */
  .priorityList {
    padding: 0;
  }

  .priorityItem {
    padding: 11px 13px;
  }

  /* A visão geral móvel mostra as três prioridades que cabem antes da dobra;
     o atalho do cabeçalho abre a fila completa. */
  #priorityList > .priorityItem:nth-child(n+4) {
    display: none;
  }
}