/*
 * PAGE INTRO — saudação/título de página com elemento à direita.
 * Reutilizável: título grande (+ subtítulo opcional) à esquerda e um item
 * de contexto à direita (ex.: pílula de data).
 */
.page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.page-intro__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.page-intro__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Coluna à direita do cabeçalho: data em cima, navegação de mês embaixo. */
.page-intro__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

/* Seletor de mês: um botão (mês atual) que abre um popover com atalhos +
   calendário de meses. Âncora do popover (position relative). O year-picker
   é a variante só-ano: compartilha gatilho, popover e presets por grupo de
   seletores (fonte única); só a posição do popover e a grade divergem. */
.month-picker,
.year-picker {
  position: relative;
  display: inline-flex;
}

/* Botão-gatilho: ícone + "Mês Ano" + seta. Aparência de input/controle. */
.month-picker__trigger,
.year-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.month-picker__trigger:hover,
.year-picker__trigger:hover { border-color: var(--color-accent-muted); }
.month-picker__trigger[aria-expanded="true"],
.year-picker__trigger[aria-expanded="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.month-picker__icon,
.year-picker__icon { display: flex; color: var(--color-text-muted); }
.month-picker__icon svg,
.year-picker__icon svg { width: 1rem; height: 1rem; }
.month-picker__caret,
.year-picker__caret { width: 1rem; height: 1rem; color: var(--color-text-muted); }

/* Popover: posição calculada em JS (position: fixed) para escapar de qualquer
   contexto de empilhamento de ancestrais (faixas com animação/transform). top
   e left são definidos ao abrir; atalhos à esquerda + calendário à direita. */
.month-picker__pop,
.year-picker__pop {
  z-index: var(--z-overlay);
  display: flex;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.month-picker__pop { position: fixed; }

.month-picker__presets,
.year-picker__presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-right: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg);
}
.month-picker__preset {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.month-picker__preset:hover { background-color: var(--color-hover); }
.month-picker__preset--active,
.month-picker__preset--active:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-link);
  font-weight: var(--weight-medium);
}

.month-picker__cal { padding: var(--space-3); }
.month-picker__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.month-picker__year {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.month-picker__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.month-picker__nav:hover { background-color: var(--color-hover); color: var(--color-text); }
.month-picker__nav svg { width: 1rem; height: 1rem; }

.month-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}
.month-picker__month {
  padding: var(--space-2) var(--space-3);
  min-width: 3.25rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.month-picker__month:hover { background-color: var(--color-hover); }
.month-picker__month--active {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
}
.month-picker__month--active:hover { background-color: var(--color-accent-hover); }

/* ---- Year picker: o que NÃO é compartilhado com o month-picker acima. ---- */
.year-picker__current { font-variant-numeric: tabular-nums; }

/* Popover ancorado à direita do gatilho (position: absolute, não o fixed do
   month-picker) para não estourar a borda da tela no fim da barra. */
.year-picker__pop {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
}
/* Anos em grade de 3 colunas (como os meses do month-picker): 10+ anos ficam
   compactos em poucas linhas em vez de uma lista gigante. Rola se passar. */
.year-picker__years {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  padding: var(--space-3);
  max-height: 15rem;
  overflow-y: auto;
}
.year-picker__opt {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* Nos anos (grade), célula centrada e compacta; o preset à esquerda fica como
   está (alinhado à esquerda). */
.year-picker__years .year-picker__opt {
  padding: var(--space-2) var(--space-3);
  min-width: 3.5rem;
  text-align: center;
}
.year-picker__opt:hover { background-color: var(--color-hover); }
.year-picker__opt--active,
.year-picker__opt--active:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
}

/* ---- Seletor de DATA (calendário de dias). Reusa o popover/cabeçalho do
   month-picker; só a grade muda para 7 colunas (semana). ---- */
.date-picker__cal { padding: var(--space-3); min-width: 15rem; }

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

.date-picker__weekdays {
  margin-bottom: var(--space-1);
}
.date-picker__weekdays span {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
}

.date-picker__cell--empty {
  visibility: hidden;
}

.date-picker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.date-picker__day:hover { background-color: var(--color-hover); }

/* Hoje: anel discreto. Selecionado: preenchido na cor de marca. */
.date-picker__day--today { box-shadow: inset 0 0 0 1px var(--color-border); }
.date-picker__day--active,
.date-picker__day--active:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
  box-shadow: none;
}

/* Dias entre o início e o fim do intervalo: fundo suave da marca. */
.date-picker__day--range {
  background-color: var(--color-accent-soft);
  color: var(--color-link);
  border-radius: 0;
}

/* Data livre: ícone + texto, sem caixa. Reutilizável. */
.date-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.date-label__icon {
  display: flex;
  color: var(--color-text-muted);
}

.date-label__icon svg {
  width: 1rem;
  height: 1rem;
}

/* Mobile: empilha e centraliza (saudação, data e seletor de mês alinhados ao
   centro, sem ficar jogado pro canto). */
@media (max-width: 560px) {
  .page-intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .page-intro__aside {
    align-items: center;
    width: 100%;
  }
  .month-picker {
    justify-content: center;
  }
}