/**
 * Manic Pixels Web OS — Calendar Tray CSS
 * Popover de calendário anexado ao relógio da taskbar.
 *
 * Todos os overrides do Flatpickr usam #mp-calendar-popover como pai
 * para não depender de classe adicionada dinamicamente via onReady.
 */

/* ── Popover container ──────────────────────────────────────────────────── */

.mp-calendar-popover {
  position:      fixed;
  z-index:       9700;
  width:         280px;

  background:    var(--mp-menu-bg, rgba(27,30,46,0.96));
  border:        1px solid var(--mp-menu-border, rgba(255,255,255,0.10));
  border-radius: var(--mp-menu-radius, 10px);
  box-shadow:    var(--mp-menu-shadow, 0 8px 32px rgba(0,0,0,0.50));
  backdrop-filter: blur(var(--mp-menu-blur, 20px));
  -webkit-backdrop-filter: blur(var(--mp-menu-blur, 20px));

  overflow:      hidden;
  opacity:       0;
  transform:     translateY(6px) scale(0.97);
  transform-origin: bottom right;
  transition:    opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.mp-calendar-popover--visible {
  opacity:       1;
  transform:     translateY(0) scale(1);
  pointer-events: all;
}

/* ── Header com data por extenso ────────────────────────────────────────── */

.mp-cal-header {
  padding:       14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.mp-cal-datetime {
  font-family:   var(--mp-font-ui, system-ui, sans-serif);
  font-size:     12px;
  font-weight:   600;
  color:         rgba(255,255,255,0.70);
  letter-spacing: 0.01em;
}

/* ── Wrap do picker inline ──────────────────────────────────────────────── */

.mp-cal-picker-wrap {
  padding:       8px 0 4px;
}

/* Esconde o input oculto que o Flatpickr inline cria */
.mp-cal-picker-wrap input[type="text"],
.mp-cal-picker-wrap input[type="hidden"] {
  display: none !important;
}

/* ── Override Flatpickr — aplica para qualquer calendário dentro do popover */

#mp-calendar-popover .flatpickr-calendar {
  background:    transparent !important;
  border:        none !important;
  box-shadow:    none !important;
  width:         100% !important;
  font-family:   var(--mp-font-ui, system-ui, sans-serif) !important;
  font-size:     12px !important;
  color:         var(--mp-menu-fg, #e8e8f0) !important;
}

#mp-calendar-popover .flatpickr-months {
  padding:       0 8px 6px;
  background:    transparent !important;
}

#mp-calendar-popover .flatpickr-month {
  color:         rgba(255,255,255,0.80) !important;
  fill:          rgba(255,255,255,0.80) !important;
  height:        28px;
  background:    transparent !important;
}

#mp-calendar-popover .flatpickr-current-month {
  font-size:     13px !important;
  font-weight:   600;
  color:         rgba(255,255,255,0.90) !important;
}

/* Dropdown nativo do mês — remove aparência nativa, aplica tema */
#mp-calendar-popover .flatpickr-monthDropdown-months {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  background:    transparent !important;
  color:         rgba(255,255,255,0.85) !important;
  font-weight:   600;
  border:        none !important;
  cursor:        pointer;
  padding:       0 4px;
  font-size:     13px;
}

#mp-calendar-popover .flatpickr-monthDropdown-months option {
  background:    #1e2132;
  color:         rgba(239,240,241,0.92);
}

/* Input numérico do ano */
#mp-calendar-popover .numInput,
#mp-calendar-popover .numInputWrapper input {
  background:    transparent !important;
  color:         rgba(255,255,255,0.85) !important;
  font-weight:   600;
  border:        none !important;
  font-size:     13px !important;
}

#mp-calendar-popover .numInputWrapper span {
  border:        none !important;
  right:         0;
}

#mp-calendar-popover .numInputWrapper span:after {
  border-left-color:  rgba(255,255,255,0.40) !important;
  border-right-color: rgba(255,255,255,0.40) !important;
}

/* Nomes dos dias da semana */
#mp-calendar-popover .flatpickr-weekdays {
  background:    transparent !important;
}

#mp-calendar-popover .flatpickr-weekdaycontainer {
  display:       flex;
  gap:           0;
}

#mp-calendar-popover .flatpickr-weekday {
  color:         rgba(255,255,255,0.35) !important;
  font-size:     10px !important;
  font-weight:   600 !important;
  text-transform: uppercase;
  flex:          1;
  text-align:    center;
  background:    transparent !important;
}

/* Grade de dias */
#mp-calendar-popover .flatpickr-innerContainer,
#mp-calendar-popover .flatpickr-rContainer {
  background:    transparent !important;
  width:         100%;
}

#mp-calendar-popover .dayContainer {
  padding:       0 8px;
  width:         100% !important;
  min-width:     0 !important;
  max-width:     none !important;
  display:       flex;
  flex-wrap:     wrap;
  background:    transparent !important;
}

#mp-calendar-popover .flatpickr-days {
  width:         100% !important;
  background:    transparent !important;
}

#mp-calendar-popover .flatpickr-day {
  color:         rgba(255,255,255,0.65) !important;
  border:        none !important;
  border-radius: 6px !important;
  background:    transparent !important;
  width:         calc(100% / 7) !important;
  max-width:     none !important;
  flex-basis:    calc(100% / 7) !important;
  height:        30px !important;
  line-height:   30px !important;
  font-size:     11px !important;
  transition:    background 0.10s, color 0.10s;
}

#mp-calendar-popover .flatpickr-day:hover {
  background:    rgba(255,255,255,0.10) !important;
  color:         rgba(255,255,255,0.90) !important;
}

#mp-calendar-popover .flatpickr-day.today {
  font-weight:   700;
  background:    rgba(61, 174, 233, 0.20) !important;
  color:         var(--mp-accent, #3daee9) !important;
}

#mp-calendar-popover .flatpickr-day.selected {
  background:    var(--mp-accent, #3daee9) !important;
  color:         #fff !important;
}

#mp-calendar-popover .flatpickr-day.prevMonthDay,
#mp-calendar-popover .flatpickr-day.nextMonthDay {
  color:         rgba(255,255,255,0.20) !important;
}

/* Setas de navegação mês anterior / próximo */
#mp-calendar-popover .flatpickr-prev-month,
#mp-calendar-popover .flatpickr-next-month {
  color:         rgba(255,255,255,0.50) !important;
  fill:          rgba(255,255,255,0.50) !important;
  padding:       4px 8px !important;
  top:           4px !important;
}

#mp-calendar-popover .flatpickr-prev-month:hover,
#mp-calendar-popover .flatpickr-next-month:hover {
  color:         rgba(255,255,255,0.85) !important;
  fill:          rgba(255,255,255,0.85) !important;
  background:    rgba(255,255,255,0.08) !important;
  border-radius: 4px;
}

#mp-calendar-popover .flatpickr-prev-month svg,
#mp-calendar-popover .flatpickr-next-month svg {
  fill: inherit !important;
}