/* Schedule and Save Component */

/* Ensure parent doesn't clip the menu */
details.position-relative {
  position: relative;
  /* Don't clip overflow */
  overflow: visible !important;
}

/* Ensure parent containers don't clip */
.card__footer,
.button-group {
  overflow: visible !important;
}

.menu-content {
  position: absolute;
  background: var(--color-bg--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-3);
  padding: var(--size-4, 1.5rem);
  min-width: var(--menu-width, 280px);
  z-index: var(--layer-overlay);
  /* Ensure menu stays within viewport */
  max-width: min(35em, calc(100vw - 2rem));
}

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

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

/* Center the menu relative to the button */
details.position-relative > .menu-content {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  /* Prevent clipping at viewport edges */
  max-width: calc(100vw - 2rem);
}

/* Adjust position if it would overflow viewport */
@media (max-width: 600px) {
  details.position-relative > .menu-content {
    left: 0;
    right: 0;
    transform: none;
    margin-left: auto;
    margin-right: auto;
    width: calc(100vw - 2rem);
  }
}

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

.input-select.outlined:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
}

/* 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);
  }
}

/* Utility classes */
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.right-0 {
  right: 0;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.align-center {
  align-items: center;
}

.gap {
  gap: 1rem;
}

.pad {
  padding: 1.5rem;
}

.full-width {
  width: 100%;
}

.margin-block--start-half {
  margin-block-start: 0.5rem;
}

.margin-block--start {
  margin-block-start: 1rem;
}

.size-content-3 {
  max-width: 45ch;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .menu-content {
    right: 0;
    left: 0;
    transform: none;
    margin: 0 var(--size-2);
    width: auto;
  }

  .schedule-details {
    max-width: 100%;
    width: 100%;
  }

  .schedule-details summary {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .schedule-details summary.button {
    padding-inline: 0;
  }

  .schedule-details .menu-content {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    width: calc(100vw - 2rem) !important;
    min-width: unset !important;
    transform: none !important;
  }

  .right-50 {
    right: 0;
    transform: none;
  }

  .flex:not(.align-center) {
    flex-direction: column;
    align-items: stretch;
  }

  .flex.align-center.gap {
    flex-direction: row;
    align-items: center;
  }
}