/* Calendário do Jornada, no lugar do painel do navegador.

   O `<input type="date">` abre um calendário desenhado pelo sistema
   operacional — aquele com o quadrado azul e a tipografia do Chrome. Nenhum CSS
   alcança ele. Por isso o painel é nosso, e o input fica escondido como fonte
   de verdade (ver date-picker.js).

   O card segue o mesmo desenho de `.day-card-actions-menu` e
   `.select-menu-list`: borda #dfe6ef, raio 12px, sombra 0 18px 38px. */

.date-picker { position: relative; }

/* O mês da bonificação fica numa barra baixa. A largura cabe "Novembro de 2026"
   e o ícone; a altura segue o campo de data ao lado. */
.pay-toolbar .date-picker-month,
.pay-bar .date-picker-month {
  flex: 0 0 auto;
  width: 13rem;
}

/* O input continua no DOM (é ele que o app lê e escreve), só não aparece.
   `display:none` o tiraria da validação de formulário e de leitores de tela. */
.date-picker-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* O gatilho tem a cara dos demais filtros: mesmos tokens de altura, raio e
   borda, com o ícone de calendário no lugar da seta. */
.date-picker > input.date-picker-trigger {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  margin: 0 !important;
  padding: 0 42px 0 14px !important;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-control-radius);
  background: #fff;
  color: #263a53;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.date-picker > input.date-picker-trigger:hover { border-color: var(--ui-control-border-hover); }

.date-picker > input.date-picker-trigger.is-empty { color: #97a6ba; font-weight: 600; }

/* O ícone se centraliza na ALTURA DO CAMPO, e não no bloco inteiro.
   Com `top: 50%` ele ficava no meio de `.date-picker` — e esse bloco contém
   também a ajuda de campo que fica à vista (a que tem `id`, spec-design-card
   §6). Em 21/09/2026 a linha de origem das datas do desligamento ("Calculado:
   término + 10 dias") fez o bloco crescer de 43 para 70px, e o calendário
   desceu 13px para fora do centro do campo. O campo tem a altura do token; o
   ícone passa a usar o mesmo token, e o que vier embaixo não o desloca mais. */
.date-picker-open {
  position: absolute;
  z-index: 1;
  top: calc(var(--j-float-label-slot, 0px) + var(--ui-control-height, 42px) / 2);
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7f99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") no-repeat center/15px;
  cursor: pointer;
}
.date-picker-open:hover { background-color: #f1f5fa; }
.date-picker-open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.date-picker > input.date-picker-trigger:focus-visible,
.date-picker > input.date-picker-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus);
}

/* --- o painel --- */
.date-picker-panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + 8px);
  left: 50%;
  width: 258px;
  transform: translateX(-50%);
  padding: 10px;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(18, 37, 65, .16);
}

/* Guarda obrigatória: `.hidden` e `.date-picker-panel` empatam em
   especificidade, e a ordem das folhas decidiria. */
.date-picker-panel.hidden { display: none; }

/* Abre para cima quando não cabe embaixo — a decisão é do JS, medindo contra a
   caixa que recorta (o diálogo, não a janela). */
.date-picker-panel.select-menu-list-acima {
  top: auto;
  bottom: calc(100% + 8px);
}

.date-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.date-picker-titulo {
  color: #25364d;
  font-size: 13px;
  font-weight: 750;
  text-transform: capitalize;
}

/* Pílula também aqui: em botão quadrado de 28px isso vira círculo, e casa com
   o fundo do título ao lado, no mesmo cabeçalho. */
.date-picker-nav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-pill);
  /* O glifo ‹ › tem métrica alta: centralizado pela caixa, ele ASSENTA baixo.
     4px de padding embaixo, com box-sizing:border-box, sobem o desenho 2px
     sem mudar o tamanho do botão nem a posição do círculo do hover. */
  padding: 0 0 4px;
  background: transparent;
  color: #5a6b82;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.date-picker-nav:hover { background: #f1f5fa; color: var(--color-primary); }
.date-picker-nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.date-picker-week,
.date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker-week {
  margin-bottom: 4px;
  color: #8fa0b5;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.date-picker-day {
  display: grid;
  place-items: center;
  height: 29px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3e5169;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.date-picker-day:hover:not(:disabled) { background: #f1f5fa; }
.date-picker-day:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Dia de outro mês fica visível mas apagado: some-lo quebraria a grade. */
.date-picker-day.is-outside { color: #b8c4d3; font-weight: 500; }
.date-picker-day:disabled { color: #cfd8e3; cursor: not-allowed; }

/* Hoje se distingue por contorno; o dia escolhido, por preenchimento. Dois
   sinais diferentes, para os dois poderem aparecer ao mesmo tempo. */
.date-picker-day.is-today { box-shadow: inset 0 0 0 1px #b9c9e2; }
.date-picker-day.is-selected {
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
}
.date-picker-day.is-selected:hover { background: var(--color-primary-hover, #2f5fd0); }

.date-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
}

.date-picker-acao {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  background: #f1f4f9;
  color: #49617e;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.date-picker-acao:hover { background: #e6ecf5; }
.date-picker-acao.is-primary { background: var(--color-primary-soft); color: var(--color-primary); }
.date-picker-acao:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

@media (max-width: 720px) {
  .date-picker-panel { width: min(268px, calc(100vw - 48px)); }
}

/* O título vira botão: clicar nele abre a escolha de mês, e dali a de ano.
   Chegar a uma data distante clicando ‹ mês a mês era o que tornava o
   calendário lento.

   Sem seta indicando que abre: o fundo que aparece ao passar o mouse já diz
   que é clicável, e uma seta a mais competiria com as duas de navegação que
   ficam ao lado. */
.date-picker-titulo.is-clicavel {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  color: #25364d;
  cursor: pointer;
}
.date-picker-titulo.is-clicavel:hover { background: #f1f5fa; color: var(--color-primary); }
.date-picker-titulo.is-clicavel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Grade de meses e de anos: 3 colunas, células mais largas que as de dia.
   A altura total fica próxima da grade de dias, para o painel não pular de
   tamanho ao trocar de vista. */
.date-picker-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* A grade de meses fica em 4 colunas e 3 linhas, mais baixa que a de 3×4.
   O painel do dia continua com a largura de sempre; só as células estreitam. */
.date-picker-cells.is-meses {
  grid-template-columns: repeat(4, 1fr);
}

.date-picker-cell {
  display: grid;
  place-items: center;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #3e5169;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-transform: capitalize;
  cursor: pointer;
}
.date-picker-cell:hover:not(:disabled) { background: #f1f5fa; }
.date-picker-cell:disabled { color: #cfd8e3; cursor: not-allowed; }
.date-picker-cell:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.date-picker-cell.is-today { box-shadow: inset 0 0 0 1px #b9c9e2; }
.date-picker-cell.is-selected {
  background: var(--color-primary);
  color: #fff;
}