@import url("/assets/flatpickr.min-4f3ac0dd.css");

/* O flatpickr envolve o input neste wrapper quando `static: true`. */
.flatpickr-wrapper {
  display: block;
  inline-size: 100%;
}

/* Ancorado ao wrapper, alinhado à esquerda do input: largura compacta fixa em
   inputs largos (não estica junto), mas nunca maior que o próprio input — em
   telas/inputs estreitos o calendário encolhe junto. */
.flatpickr-calendar.static {
  inline-size: min(100%, 17rem);
  inset-inline-start: 0;
}

/* Quando não há espaço abaixo, o flatpickr marca `arrowBottom` e o calendário abre para cima. */
.flatpickr-calendar.static.arrowBottom {
  inset-block-end: calc(100% + 2px);
  inset-block-start: auto;
}

/* Mesma lógica do datepicker do CssZero (surface/border/text/primary), com as
   variáveis do componente mapeadas para os tokens do tema do projeto. O modo
   escuro só troca esses valores — as regras abaixo valem para os dois temas. */
.flatpickr-calendar {
  --day-size: 1.75rem;

  --superficie: var(--color-white);
  --borda: var(--color-gray-200);
  --texto: var(--color-gray-700);
  --texto-secundario: var(--color-gray-500);
  --texto-desabilitado: var(--color-gray-500);
  --fundo-realce: var(--color-gray-100);
  --seta: var(--color-gray-400);
  --selecao: var(--color-blue-600);
  --texto-selecao: var(--color-white);

  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);

  .flatpickr-innerContainer {
    justify-content: center;
    padding-block-end: 0.5rem;
  }

  .flatpickr-rContainer {
    inline-size: 100%;
  }

  .flatpickr-days {
    inline-size: 100%;
  }

  .dayContainer {
    inline-size: 100%;
    max-inline-size: none;
    min-inline-size: 0;
  }

  .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 var(--borda);
  }

  /* O flatpickr posiciona o bloco mês/ano de forma absoluta dentro de uma faixa de
     altura fixa com `overflow: hidden`. Em calendários estreitos isso recorta o
     seletor de ano e a borda do seletor de mês. Aqui o cabeçalho vira um flex
     simples: encolhe o nome do mês e nunca esconde nem corta o ano. */
  .flatpickr-months {
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0.25rem;

    .flatpickr-month {
      block-size: auto;
      color: var(--texto);
      min-inline-size: 0;
      overflow: visible;
    }

    .flatpickr-prev-month,
    .flatpickr-next-month {
      align-items: center;
      block-size: 1.5rem;
      border-radius: var(--radius-md);
      display: flex;
      flex: none;
      inline-size: 1.5rem;
      justify-content: center;
      padding: 0;
      position: static;
    }

    .flatpickr-prev-month:hover,
    .flatpickr-next-month:hover {
      background: var(--fundo-realce);
    }

    .flatpickr-current-month {
      align-items: center;
      block-size: auto;
      display: flex;
      font-size: var(--text-sm);
      gap: 0.75rem;
      inline-size: 100%;
      inset-inline-start: auto;
      justify-content: center;
      padding: 0;
      position: static;
      transform: none;
    }

    /* Ano: largura fixa e sem encolher, para permanecer sempre visível. */
    .flatpickr-current-month .numInputWrapper {
      flex: none;
      inline-size: 3.5rem;
    }

    /* Rótulo estático do mês (`monthSelectorType: "static"`); o clique abre o
       painel `.datepicker-meses`, montado pelo controller. */
    span.cur-month {
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      margin: 0;
      padding-block: 0.25rem;
      padding-inline: 0.5rem;
      transition: background-color 0.2s;

      &:hover {
        background: var(--fundo-realce);
      }
    }

    svg {
      fill: var(--seta);
    }

    .flatpickr-prev-month:hover svg {
      fill: var(--texto);
    }

    .flatpickr-next-month:hover svg {
      fill: var(--texto);
    }
  }

  .numInputWrapper {
    input {
      color: var(--texto);
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
      line-height: 1.25rem;
      /* Reserva a coluna das setas à direita, para elas não cobrirem o número. */
      padding-inline-end: 0.875rem;
      text-align: center;
    }

    /* Setas de incremento/decremento com as imagens de seta do projeto, no
       lugar dos triângulos de borda do flatpickr. */
    span {
      border: 0;
      inline-size: 0.875rem;
      padding: 0;

      &::after {
        border: 0;
        content: "";
        inset: 0;
        position: absolute;

        background-color: var(--seta);
        mask: url("/assets/seta_filtro_cima-e234b28a.svg") no-repeat center / 0.5rem;
      }

      &.arrowDown::after {
        mask-image: url("/assets/seta_filtro_baixo-df69cee7.svg");
      }

      &:hover {
        background: transparent;

        &::after {
          background-color: var(--texto);
        }
      }
    }

    &:hover {
      background: transparent;
    }
  }

  .flatpickr-weekday {
    color: var(--texto-secundario);
    font-weight: var(--font-weight-normal);
  }

  .flatpickr-time {
    .hasTime & {
      border-top-color: var(--borda);
    }

    .hasTime.noCalendar & {
      border: 0;
    }

    .numInput {
      background: transparent;
      color: var(--texto);
    }

    .flatpickr-time-separator {
      color: var(--texto);
    }

    .flatpickr-am-pm {
      background: transparent;
      color: var(--texto);
    }
  }

  .flatpickr-day {
    border-color: transparent !important;
    border-radius: var(--radius-lg);
    box-shadow: none !important;
    color: var(--texto);
    height: var(--day-size);
    line-height: var(--day-size);
    margin-block-start: 0.5rem;
    max-width: none;

    &:is(.hidden) {
      visibility: visible;
    }

    &:is(.inRange) {
      border-radius: 0;
    }

    &:is(.today, .inRange, :hover, :focus) {
      background: var(--fundo-realce);
      color: var(--texto);
    }

    &:is(
      .flatpickr-disabled,
      .flatpickr-disabled:hover,
      .prevMonthDay,
      .nextMonthDay,
      .notAllowed,
      .notAllowed.prevMonthDay,
      .notAllowed.nextMonthDay
    ) {
      color: var(--texto-desabilitado);
    }

    &:is(
      .selected,
      .startRange,
      .endRange,
      .selected.inRange,
      .startRange.inRange,
      .endRange.inRange,
      .selected:focus,
      .startRange:focus,
      .endRange:focus,
      .selected:hover,
      .startRange:hover,
      .endRange:hover,
      .selected.prevMonthDay,
      .startRange.prevMonthDay,
      .endRange.prevMonthDay,
      .selected.nextMonthDay,
      .startRange.nextMonthDay,
      .endRange.nextMonthDay
    ) {
      background: var(--selecao);
      color: var(--texto-selecao);
    }
  }

  /* Painel de escolha de mês, aberto pelo clique no rótulo do mês. */
  .datepicker-meses {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(3, 1fr);
    inset-block-start: 2.5rem;
    inset-inline: 0.5rem;
    padding: 0.5rem;
    position: absolute;
    z-index: 10;
  }

  .datepicker-meses__opcao {
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--texto);
    cursor: pointer;
    font-size: var(--text-sm);
    padding-block: 0.375rem;
    transition: background-color 0.2s;

    &:hover {
      background: var(--fundo-realce);
    }
  }

  .datepicker-meses__opcao--atual {
    background: var(--selecao);
    color: var(--texto-selecao);

    &:hover {
      background: var(--selecao);
    }
  }

  &::before, &::after {
    display: none;
  }
}

.dark .flatpickr-calendar {
  --superficie: var(--color-grafite-medio);
  --borda: var(--color-cinza-escuro);
  --texto: var(--color-cinza-quase-branco);
  --texto-secundario: var(--color-cinza-claro);
  --texto-desabilitado: var(--color-cinza-medio);
  --fundo-realce: var(--color-grafite-claro);
  --seta: var(--color-cinza-medio);
  --selecao: var(--color-cinza-escuro);
  --texto-selecao: var(--color-cinza-quase-branco);
}