/* People · Dashboard "O que precisa de mim hoje?" — cartões de alerta com
   ação direta embutida, para nenhuma tarefa de RH obrigar a sair daqui. */

/* [data-view] tem vários blocos de topo (KPIs, presenças+aniversário,
   estado "tudo em dia", secções de lista) sem nenhum wrapper flex/grid
   próprio — sem isto ficam colados uns aos outros. */
[data-view] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.hr-dash-section[data-empty="true"] {
  display: none;
}

.hr-dash-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hr-dash-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.hr-dash-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--navy-050);
  color: var(--navy-700);
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.hr-dash-card__body {
  flex: 1;
  min-width: 0;
}

.hr-dash-card__title {
  font-weight: 700;
  color: var(--navy-800);
  font-size: var(--fs-base);
}

.hr-dash-card__meta {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hr-dash-card__urgency {
  flex-shrink: 0;
}

.hr-dash-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Cartão com texto longo e vários botões (horas extra): os botões passam
   para uma linha própria, por baixo do texto, alinhados à direita. */
.hr-dash-card--stack { flex-wrap: wrap; }
.hr-dash-card--stack .hr-dash-card__body { flex: 1 1 0; min-width: 0; }
.hr-dash-card--stack .hr-dash-card__actions { flex-basis: 100%; flex-wrap: wrap; justify-content: flex-end; }

.hr-dash-empty-list {
  padding: var(--sp-3) 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* .empty define display:flex, o que anula o atributo hidden que o JS liga/desliga. */
.hr-dash-empty[hidden] {
  display: none;
}

.hr-dash-empty .empty__icon.empty__icon--done {
  background: var(--state-done-bg);
  color: var(--state-done);
}

.hr-dash-empty-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.hr-dash-empty-all__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--state-done-bg);
  color: var(--state-done);
  margin-bottom: var(--sp-4);
}

.hr-dash-empty-all__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--navy-900);
}

.hr-dash-empty-all__text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

@media (max-width: 720px) {
  .hr-dash-card {
    flex-wrap: wrap;
  }
  .hr-dash-card__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================================
   VISÃO GERAL — KPIs de topo (contratos, avaliações, férias e
   documentação em falta) seguindo a mesma linguagem de cartão do
   módulo Manu (.stat, ver dashboard.css): compactos, alinhados à
   esquerda, sem espaço morto. Por baixo, presenças do dia e o
   próximo aniversário usam o mesmo .panel das secções de listas.
   ============================================================ */

.stat--contracts { --stat-color: var(--navy-600); --stat-bg: var(--navy-050); }
.stat--evaluations { --stat-color: #6f42c1; --stat-bg: rgba(111, 66, 193, 0.12); }
.stat--vacation { --stat-color: #0f8a8a; --stat-bg: rgba(15, 138, 138, 0.12); }
.stat--leave { --stat-color: #c76a00; --stat-bg: rgba(255, 149, 0, 0.14); }
.stat--hourbank { --stat-color: #5e5ce6; --stat-bg: rgba(94, 92, 230, 0.12); }

.grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--6 { grid-template-columns: minmax(0, 1fr); } }

.grid--4 .stat .stack {
  flex: 1;
  min-width: 0;
}

.grid--4 .stat .stat__icon {
  align-self: center;
}

.hr-stat__eye {
  --eye-size: 40px;
  position: absolute;
  top: calc(50% - var(--eye-size) / 2);
  right: var(--sp-2);
  width: var(--eye-size);
  height: var(--eye-size);
}

/* O texto do data-tip abre por cima do botão, mas .stat e .panel cortam o que
   sai deles (overflow:hidden) — aqui abre para o lado / para baixo, por dentro. */
.hr-stat__eye[data-tip]::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + var(--sp-2));
  transform: translateY(-50%);
}

.panel__header .panel__meta[data-tip]::after {
  top: calc(100% + var(--sp-1));
  bottom: auto;
  left: auto;
  right: 0;
  transform: none;
}

.hr-dash-group-title {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
}

.hr-dash-group-title:first-child {
  margin-top: 0;
}

.grid--4 .stat__hint {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-stat__label-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hr-stat__label-row .badge {
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Férias: carrossel vertical de próximos colaboradores ---------- */

.hr-carousel {
  --carousel-h: 44px;
  height: var(--carousel-h);
  overflow: hidden;
}

.hr-carousel__track {
  transition: transform 450ms var(--ease);
}

.hr-carousel__slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--carousel-h);
}

.hr-carousel__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy-800);
}

.hr-carousel__name.is-ongoing::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: var(--r-full);
  background: var(--state-done);
  vertical-align: middle;
}

.hr-carousel__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hr-carousel__dots {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-self: center;
  margin-right: var(--sp-8);
}

.hr-carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--grey-300);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}

.hr-carousel__dot.is-active {
  background: var(--stat-color, var(--navy-600));
  transform: scale(1.35);
}

@media (prefers-reduced-motion: reduce) {
  .hr-carousel__track { transition: none; }
}

/* ---------- Próximo Aniversário (cartão .panel compacto) ---------- */

.hr-highlight-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 96px;
}

.hr-highlight-primary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.hr-highlight-next {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.hr-highlight-next__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-500);
}

.hr-highlight-next__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--navy-050);
  color: var(--navy-700);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.hr-highlight-next__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--navy-800);
}

.hr-highlight-next__days {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-muted);
}

.hr-highlight-text {
  flex: 1;
  min-width: 0;
  gap: var(--sp-1);
}

.hr-highlight-value {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-highlight-hint {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.hr-highlight-hint--done {
  color: var(--state-done);
}

/* ---------- Presenças: donut + lista do dia ---------- */

.hr-presence-body {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.hr-presence-donut {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.hr-presence-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hr-presence-donut__track {
  fill: none;
  stroke: var(--grey-100);
  stroke-width: 12;
}

.hr-presence-donut__value {
  fill: none;
  stroke: var(--state-done);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset var(--t-med, 300ms);
}

.hr-presence-donut__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hr-presence-donut__pct {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--navy-900);
}

.hr-presence-donut__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.hr-presence-summary {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 640px) {
  .hr-presence-body {
    flex-direction: column;
    align-items: stretch;
  }
  .hr-presence-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hr-presence-stat {
  --stat-color: var(--grey-500);
  --stat-bg: var(--grey-050);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--stat-bg);
}

.hr-presence-stat__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--stat-color);
}

.hr-presence-stat strong {
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--stat-color);
}

.hr-presence-stat--present { --stat-color: var(--state-done); --stat-bg: var(--state-done-bg); }
.hr-presence-stat--late { --stat-color: #b8860b; --stat-bg: var(--gold-100); }
.hr-presence-stat--absent { --stat-color: var(--state-late); --stat-bg: var(--state-late-bg); }
.hr-presence-stat--pending { --stat-color: var(--grey-500); --stat-bg: var(--grey-100); }

.hr-presence-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.hr-presence-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.hr-presence-row__name {
  flex: 1;
  min-width: 0;
  color: var(--navy-800);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Dashboard (desktop) — alinhado à direção "liquid glass" já
   aplicada ao resto do People (ver people.css) e do módulo Manu
   (dashboard.css/tarefas.css/...): cartões translúcidos com blur,
   cor só no ícone/indicador, nunca em bordas sólidas garridas.
   As variáveis --pp-* vêm de people.css, sempre carregado antes
   desta folha nas páginas do People.
   ============================================================ */
@media (min-width: 1025px) {
  .stat {
    background: var(--pp-glass-bg-strong);
    border: 1px solid var(--pp-glass-border);
    border-radius: 20px;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 14px 32px -22px rgba(20, 30, 60, 0.2);
  }

  .stat::before { display: none; }
  .stat:hover { box-shadow: 0 18px 38px -20px rgba(20, 30, 60, 0.28); }
  .stat__label { color: var(--pp-tertiary); }
  .stat__value { color: var(--pp-ink); letter-spacing: -0.02em; }
  .stat__hint { color: var(--pp-secondary); }

  .stat--contracts { --stat-color: var(--pp-ink-soft); --stat-bg: rgba(120, 120, 128, 0.12); }
  .stat--evaluations { --stat-color: #af52de; --stat-bg: rgba(191, 90, 242, 0.14); }
  .stat--vacation { --stat-color: #30b0c7; --stat-bg: rgba(48, 176, 199, 0.14); }
  .stat--hourbank { --stat-color: #5e5ce6; --stat-bg: rgba(94, 92, 230, 0.14); }
  .stat--late { --stat-color: var(--pp-danger); --stat-bg: var(--pp-danger-soft); }

  .hr-highlight-value { color: var(--pp-ink); }
  .hr-highlight-hint { color: var(--pp-secondary); }
  .hr-highlight-hint--done { color: var(--pp-success); }
  .hr-dash-group-title { color: var(--pp-tertiary); }
  .hr-dash-empty .empty__icon.empty__icon--done { background: var(--pp-success-soft); color: var(--pp-success); }
  .hr-carousel__name { color: var(--pp-ink); }
  .hr-carousel__name.is-ongoing::before { background: var(--pp-success); }
  .hr-carousel__meta { color: var(--pp-secondary); }
  .hr-carousel__dot { background: rgba(120, 120, 128, 0.3); }
  .hr-highlight-next { border-top-color: var(--pp-hairline); }
  .hr-highlight-next__label { color: var(--pp-tertiary); }
  .hr-highlight-next__name { color: var(--pp-ink-soft); }
  .hr-highlight-next__days { color: var(--pp-secondary); }

  .hr-presence-stat--present { --stat-color: var(--pp-success); --stat-bg: var(--pp-success-soft); }
  .hr-presence-stat--late { --stat-color: var(--pp-warning); --stat-bg: var(--pp-warning-soft); }
  .hr-presence-stat--absent { --stat-color: var(--pp-danger); --stat-bg: var(--pp-danger-soft); }
  .hr-presence-stat--pending { --stat-color: var(--pp-tertiary); --stat-bg: rgba(120, 120, 128, 0.1); }
}

/* ============================================================
   Layout mais arejado: resumo (métricas) no topo, presenças e
   aniversário a seguir, alertas em duas colunas. Mais espaço
   entre blocos e cartões maiores, para nada ficar espremido.
   ============================================================ */
[data-view] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  align-content: start;
  padding-bottom: var(--sp-8);
  flex: 1;
  min-height: 0;
}

[data-view][hidden] { display: none; }

[data-view] > .grid,
[data-view] > .hr-dash-heading,
[data-view] > .hr-dash-empty-all { grid-column: 1 / -1; }

[data-view] > .grid { gap: var(--sp-4); }

/* "Tudo em dia": as secções de alertas continuam no DOM mesmo vazias
   (só ficam display:none via .hr-dash-section[data-empty="true"]), por
   isso o cartão de estado vazio nunca é :last-child a sério — testa-se
   antes se está visível (sem o atributo hidden, que o JS liga/desliga).
   Nesse estado deve esticar até ao fundo da área de conteúdo (nível do
   fim do menu lateral) em vez de deixar espaço morto por baixo; grid
   não estica só uma linha facilmente, por isso muda-se para flex-column
   só aqui (sem alertas em duas colunas para desenhar). */
[data-view]:has(> .hr-dash-empty-all:not([hidden])) {
  display: flex;
  flex-direction: column;
}

[data-view] > .hr-dash-empty-all:not([hidden]) {
  flex: 1;
  min-height: 0;
  justify-content: center;
}

.hr-dash-heading {
  margin: var(--sp-2) 0 calc(var(--sp-2) * -1);
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hr-dash-heading[hidden] { display: none; }

/* Métricas */
.grid--6 .stat {
  align-items: center;
  gap: var(--sp-4);
  min-height: 116px;
  padding: var(--sp-5);
}

.grid--6 .stat .stat__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}

.grid--6 .stat .stat__icon .icon { width: 24px; height: 24px; }
.grid--6 .stat__value { font-size: 2rem; line-height: 1.1; margin: 2px 0; }
.grid--6 .stat__hint { font-size: var(--fs-sm); }

/* Presenças */
.hr-presence-body { gap: var(--sp-6); padding: var(--sp-2) 0; }
.hr-presence-donut { width: 140px; height: 140px; }
.hr-presence-summary { gap: var(--sp-4); }

.hr-presence-stat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 92px;
  padding: var(--sp-4);
  border-radius: 18px;
}

.hr-presence-stat strong { font-size: 2rem; line-height: 1; }

/* Aniversário */
.hr-highlight-body { gap: var(--sp-4); min-height: 140px; padding: var(--sp-5); }

/* Secções de alertas: duas colunas (ver [data-view]) */
.hr-dash-section .panel__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.hr-dash-list { gap: var(--sp-3); }

@media (max-width: 1280px) {
  [data-view] { grid-template-columns: minmax(0, 1fr); }
}

/* Modal "Agendar Lembrete" — opções rápidas de prazo + campo personalizado */
.quick-reminder__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.quick-reminder__options .btn.is-active {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}

.quick-reminder__custom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: end;
  margin-top: var(--sp-4);
}

/* Sem risca colorida lateral nos cartões: a cor já está no ícone (em todos os tamanhos de ecrã). */
.stat::before { display: none; }