@use "../../../../styles/colors" as colors;
@use "../../../../styles/variables" as vars;
@use "../../../../styles/fonts" as fonts;

.flight-schedule {
  background: colors.$white;
  border-radius: vars.$border-radius;
  padding: 0 24px;

  &__accordion {
    border-top: 1px solid colors.$border;
  }

  // 'Расписание рейса' header — 16px / 400 / #333 to match the sibling
  // 'Детали рейса' collapse row above.
  &__header {
    padding: 16px 0;
    cursor: pointer;
    font-weight: fonts.$font-regular;
    font-size: fonts.$font-size-l;
    color: colors.$text-color;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
      color: colors.$blue;
    }
  }

  &__chevron {
    font-size: fonts.$font-size-s;
    color: colors.$text-color;
  }

  &__content {
    padding: 4px 0 16px;
  }

  &__body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: vars.$space-s2 0 4px;
  }

  &__col {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &__label {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }

  // Angular shows each value ('15:30' / '17:00') at 12px / 400 in the
  // brand orange (so dep/arr times read as number-groups), but uses
  // 16px / 500 / #333 for the duration ('1ч. 30мин.') because it's a
  // magnitude rather than a clock time. Use --duration modifier to
  // distinguish them at the render layer.
  &__value {
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-regular;
    color: colors.$orange;

    &--duration {
      font-size: fonts.$font-size-l;
      font-weight: fonts.$font-medium;
      color: colors.$text-color;
    }
  }

  &__offset {
    margin-left: 6px;
    font-size: 11px;
    font-weight: fonts.$font-regular;
    color: colors.$light-gray;
  }

  &__days-section {
    margin-top: vars.$space-xl;
  }

  // 'Дни выполнения рейса' label — Angular shows it in sentence case at
  // 12px / #333. Keep the color soft but drop the caps transform.
  &__section-title {
    font-size: fonts.$font-size-s;
    color: colors.$text-color;
    margin-bottom: vars.$space-s2;
  }

  &__note {
    margin-top: vars.$space-m2;
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    font-style: normal;
  }

  @media (max-width: 768px) {
    &__body {
      grid-template-columns: 1fr;
      gap: vars.$space-m2;
    }
  }
}

// Mirrors Angular `flight-schedule.component.scss .days .day`: filled
// $day-color (#e6f1fb) pill with a 5px/10px padding and no border. The
// inactive day uses $day-color-inactive (#f6f6f6) and a transparentized
// gray label — no outlined-box treatment, which is what the previous
// React port had.
.days-of-week-strip {
  display: flex;
  gap: vars.$space-m;
  flex-wrap: wrap;

  .day {
    padding: vars.$space-s vars.$space-m;
    border-radius: vars.$border-radius;
    background-color: colors.$day-color;
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-regular;
    color: colors.$text-color;

    &--inactive {
      background-color: colors.$day-color-inactive;
      color: rgba(colors.$gray, 0.5);
    }
  }
}
