// =============================================================================
// SchedulerToolbar Styles
// Custom toolbar for EventCalendar using Cunningham design system
// =============================================================================

.scheduler-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: var(--c--globals--colors--gray-000);
  border-bottom: 1px solid var(--c--globals--colors--gray-100);
  margin-bottom: 1rem;

  // -------------------------------------------------------------------------
  // Left section: Today button + Navigation
  // -------------------------------------------------------------------------
  &__left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  &__today-btn {
    border-radius: 20px;
    padding: 0.375rem 1rem;
  }

  &__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  &__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--c--globals--colors--gray-600);
    transition:
      background-color 0.15s,
      color 0.15s;

    &:hover {
      background-color: var(--c--globals--colors--gray-100);
      color: var(--c--globals--colors--gray-800);
    }

    &:active {
      background-color: var(--c--globals--colors--gray-200);
    }

    .material-icons {
      font-size: 1.25rem;
    }
  }

  // -------------------------------------------------------------------------
  // Center section: Title
  // -------------------------------------------------------------------------
  &__center {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  &__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--c--globals--colors--gray-800);
  }

  // -------------------------------------------------------------------------
  // Right section: View selector dropdown
  // -------------------------------------------------------------------------
  &__right {
    position: relative;
    display: flex;
    align-items: center;
  }

  &__view-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c--globals--colors--gray-700);
    transition:
      background-color 0.15s,
      color 0.15s;

    &:hover {
      background-color: var(--c--globals--colors--gray-100);
      color: var(--c--globals--colors--gray-900);
    }

    &:active {
      background-color: var(--c--globals--colors--gray-200);
    }
  }

  &__view-arrow {
    font-size: 1.25rem;
    // transition: transform 0.2s ease;

    &--open {
      transform: rotate(180deg);
    }
  }

  &__view-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 140px;
    background: white;
    border: 1px solid var(--c--globals--colors--gray-200);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
    margin-top: 0.25rem;
  }

  &__view-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--c--globals--colors--gray-700);
    transition: background-color 0.15s;
    text-align: left;

    &:hover,
    &--focused {
      background-color: var(--c--globals--colors--gray-50);
    }

    &:focus {
      outline: 2px solid var(--c--globals--colors--brand-500);
      outline-offset: -2px;
    }

    &--selected {
      color: var(--c--globals--colors--brand-500);
      font-weight: 500;
    }
  }

  &__view-check {
    font-size: 1rem;
    color: var(--c--globals--colors--brand-500);
  }
}

// =============================================================================
// Responsive adjustments
// =============================================================================
@media (max-width: 768px) {
  .scheduler-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;

    &__left {
      order: 1;
    }

    &__right {
      order: 2;
    }

    &__center {
      order: 3;
      flex-basis: 100%;
      justify-content: flex-start;
      margin-top: 0.25rem;
    }

    &__title {
      font-size: 1rem;
    }
  }
}
