@use '../styles/variables' as *;

.avail {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: $radius-xl;
  box-shadow: $shadow-sm;
  overflow: hidden;

  &__header {
    display: flex;
    align-items: center;
    gap: $spacing-3;
    padding: $spacing-4 $spacing-6;
    background: linear-gradient(135deg, $primary-700, $primary-500);
    color: #fff;
  }

  &__header-icon { flex-shrink: 0; opacity: 0.9; }

  &__title {
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    color: #fff;
  }

  &__header-sub {
    font-size: $font-size-xs;
    color: rgba(255,255,255,0.75);
    margin-left: auto;

    @media (max-width: $bp-sm) { display: none; }
  }

  &__filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: $spacing-4;
    padding: $spacing-5 $spacing-6;
    border-bottom: 1px solid var(--clr-border);

    @media (max-width: $bp-sm) { grid-template-columns: 1fr; }
  }

  &__filter-group {
    display: flex;
    flex-direction: column;
    gap: $spacing-2;
  }

  &__label {
    display: flex;
    align-items: center;
    gap: $spacing-1;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
  }

  &__input,
  &__select {
    padding: $spacing-3 $spacing-4;
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
    border-radius: $radius-base;
    font-size: $font-size-sm;
    color: var(--clr-text);
    font-family: $font-family-base;
    outline: none;
    transition: border-color $transition-fast, box-shadow $transition-fast;

    &:focus {
      border-color: $primary-400;
      box-shadow: 0 0 0 3px rgba($primary-400, 0.18);
    }
  }

  &__select { cursor: pointer; }

  &__slots { padding: $spacing-5 $spacing-6; }

  &__slots-label {
    display: flex;
    align-items: center;
    gap: $spacing-2;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: var(--clr-text);
    margin-bottom: $spacing-4;
  }

  &__slots-hint {
    font-size: $font-size-xs;
    font-weight: $font-weight-normal;
    color: var(--clr-text-muted);
  }

  &__grid {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-2;
    margin-bottom: $spacing-4;
  }

  &__slot {
    padding: $spacing-2 $spacing-3;
    border-radius: $radius-base;
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    font-family: $font-family-mono;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background $transition-fast, transform $transition-fast, box-shadow $transition-fast;

    &--free {
      background: $accent-50;
      border-color: $accent-200;
      color: $accent-700;

      &:hover {
        background: $accent-100;
        transform: translateY(-1px);
        box-shadow: $shadow-sm;
      }
    }

    &--taken {
      background: var(--clr-surface-raised, #{$gray-50});
      border-color: var(--clr-border);
      color: var(--clr-text-muted);
      cursor: not-allowed;
      text-decoration: line-through;
    }
  }

  &__legend {
    display: flex;
    align-items: center;
    gap: $spacing-5;
    font-size: $font-size-xs;
    color: var(--clr-text-muted);
  }

  &__legend-free,
  &__legend-taken {
    display: inline-flex;
    align-items: center;
    gap: $spacing-2;

    &::before {
      content: '';
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: $radius-sm;
    }
  }

  &__legend-free::before {
    background: $accent-50;
    border: 1px solid $accent-200;
  }

  &__legend-taken::before {
    background: var(--clr-surface-raised, #{$gray-50});
    border: 1px solid var(--clr-border);
  }

  &__msg {
    font-size: $font-size-sm;
    color: var(--clr-text-muted);
    padding: $spacing-4 0;
  }
}
