/* Schedule and Save Component */

.menu-content {
  position: absolute;
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
  padding: var(--size-4);
  min-width: var(--menu-width, 280px);
  z-index: 1000;
}

.bottom-100 {
  bottom: 100%;
  margin-bottom: var(--size-1);
}

.right-50 {
  right: 50%;
  transform: translateX(50%);
}










/* Button styles */
.button.tonal {
  background: var(--surface-2);
  color: var(--text-1);
  border: 1px solid var(--surface-3);
}

.button.tonal:hover {
  background: var(--surface-3);
}

.button.filled {
  background: var(--brand-primary);
  color: var(--surface-1);
  border: none;
}

.button.filled:hover {
  background: var(--brand-primary-hover, var(--brand-primary));
  filter: brightness(0.9);
}

/* Input styles */
.input-select.outlined {
  padding: var(--size-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-2);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--font-size-1);
}

.input-select.outlined:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* Menu content animation */
details[open] .menu-content {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(50%) translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .menu-content {
    right: 0;
    left: 0;
    transform: none;
    margin: 0 var(--size-2);
    width: auto;
  }
  
  .right-50 {
    right: 0;
    transform: none;
  }
  
  .flex {
    flex-direction: column;
    align-items: stretch;
  }
  
  .flex.align-center.gap {
    flex-direction: row;
    align-items: center;
  }
}