.simple-calendar {
  position: absolute;
  background: var(--color-bg-body);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  min-width: 220px;
  color: var(--color-text-primary);
}

.simple-calendar table,
.calendar-table {
  border-collapse: collapse;
  width: 100%;
}

.simple-calendar th,
.calendar-table th {
  background-color: var(--color-bg-light);
  padding: var(--spacing-sm);
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.simple-calendar td,
.calendar-table td {
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-md);
  text-align: center;
  transition: var(--transition-fast);
  cursor: pointer;
}

.simple-calendar td:hover,
.calendar-day:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-primary);
}

.simple-calendar button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--color-link);
  transition: var(--transition-fast);
}

.simple-calendar button:hover {
  color: var(--color-link-hover);
}

.simple-calendar span,
.calendar-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.calendar-range-selected {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.calendar-start-selected {
  background-color: var(--color-success);
  color: var(--color-text-light);
}

.calendar-hover-range {
  background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.calendar-th {
  padding: var(--spacing-xs);
  text-align: center;
}

.calendar-day {
  cursor: pointer;
  text-align: center;
  padding: var(--spacing-xs);
}

.calendar-hover {
  background-color: var(--color-bg-hover);
}

.calendar-today {
    border: 2px solid var(--color-success);
    border-radius: var(--border-radius-circle);
    padding: var(--spacing-xs);
    box-sizing: border-box;
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
}

/* ============================================
   Calendário Mês/Ano Popup
   ============================================ */
#calendario-mes-ano-popup {
    position: absolute;
    background: var(--color-bg-body);
    border: var(--border-width) solid var(--color-border);
    padding: var(--spacing-md);
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-md);
}

#calendario-mes-ano-popup select {
    margin-right: var(--spacing-xs);
}

#calendario-mes-ano-popup button {
    margin-left: var(--spacing-xs);
}