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

// ---------------------------------------------------------------------------
// Leg route strip — Angular's flight-details-wrapper layout.
// ---------------------------------------------------------------------------

.leg-route {
  // Angular gives the route strip a tall top padding so the status text
  // ('Прибыл', 'Вылетел') has room above the progress bar, and a smaller
  // bottom padding leading into the time-details block.
  padding: vars.$space-xxl vars.$space-xl 0;

  // Asymmetric grid (matches Angular's flight-route):
  //   depart-time   depart-station   status/progress   arrive-time   arrive-station
  // The center 'status' column takes ~40% of the row so the progress
  // bar has visual weight; both time columns stay narrow.
  &__main {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(300px, 2.5fr) auto minmax(120px, 1fr);
    gap: 24px;
    align-items: center;
  }

  &__times {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  // Route-strip times. Angular: 20px/500/colors.$blue-dark bold navy; strike-through
  // slot underneath renders at 12px in the brand orange.
  &__time {
    font-size: fonts.$font-size-xl1;
    font-weight: fonts.$font-medium;
    color: colors.$blue-dark;
    line-height: 1.1;

    &-strike {
      font-size: fonts.$font-size-s;
      color: colors.$orange;
      text-decoration: line-through;
      margin-top: 2px;
    }
  }

  &__day-change {
    font-size: fonts.$font-size-s;
    color: colors.$blue;
    vertical-align: super;
    margin-left: 4px;
  }

  &__station {
    min-width: 0;
  }

  // City name (Санкт-Петербург / Москва). Angular: 14px/regular/#333 —
  // the large departure/arrival time is the visual anchor, not the city.
  &__city {
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-regular;
    color: colors.$text-color;
  }

  &__airport {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    margin-top: 2px;
  }

  &__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 180px;
    gap: 4px;
  }

  &__status-text {
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-medium;
    color: colors.$blue;
  }

  &__bar {
    width: 100%;
    height: 2px;
    background: colors.$border;
    position: relative;
  }

  &__bar-inner {
    height: 100%;
    background: colors.$blue;
    width: 0;
    transition: width 0.2s ease;
  }

  &__center--finished {
    .leg-route__status-text {
      color: colors.$green;
      text-align: right;
      align-self: flex-end;
    }
    .leg-route__bar-inner { background: colors.$green; }
    .leg-route__plane-marker { color: colors.$green; }
  }

  &__center--in-flight {
    .leg-route__status-text { color: colors.$green; }
    .leg-route__bar-inner { background: colors.$green; }
    .leg-route__plane-marker { color: colors.$green; }
  }

  &__center--progress {
    .leg-route__status-text { color: colors.$blue; }
  }

  &__center--delayed {
    .leg-route__status-text { color: colors.$orange; }
  }

  &__center--cancelled {
    .leg-route__status-text { color: colors.$red; }
    // Light tint of $red (C8102E) for the track — derived from the
    // brand token rather than a one-off hex so palette refactors keep
    // the cancelled bar in step with the other red accents.
    .leg-route__bar { background: rgba(colors.$red, 0.2); }
    .leg-route__bar-inner { background: colors.$red; }
  }

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

  &__progress-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    margin-top: 4px;
  }

  &__progress-label {
    display: flex;
    flex-direction: column;
    gap: 2px;

    &--left { text-align: left; }
    &--right { text-align: right; }
  }

  &__progress-value {
    font-weight: fonts.$font-bold;
    color: colors.$text-color;
  }

  &__plane-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: colors.$white;
    border-radius: 50%;
    pointer-events: none;

    svg {
      transform: rotate(90deg);
    }
  }

  &__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: vars.$space-xxl;
    margin-top: vars.$space-xl;
    padding-top: vars.$space-xl;
    // Angular uses a 1.3px dotted hairline (#D1DCEA) between the route
    // strip and the time-details block.
    border-top: 1.3px dotted colors.$border;
  }

  &__details-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: vars.$space-xl;

    &--arrival {
      justify-self: end;
    }
  }

  // Time-details block under the route strip. Angular keeps the whole
  // block compact: 12px labels in neutral grey, 12px regular values in
  // brand orange, and a small 10px date line in #333 below.
  &__detail {
    display: flex;
    flex-direction: column;
    gap: 2px;

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

    &-value {
      font-size: fonts.$font-size-s;
      font-weight: fonts.$font-regular;
      color: colors.$blue-dark;
    }

    &-offset {
      font-weight: fonts.$font-regular;
      font-size: fonts.$font-size-xs;
      color: colors.$light-gray;
      margin-left: 4px;
    }

    &-date {
      font-size: fonts.$font-size-xs;
      color: colors.$text-color;
    }
  }

  @include screen.mobile {
    &__main {
      grid-template-columns: 1fr;
      gap: vars.$space-m;
    }

    &__details {
      grid-template-columns: 1fr;
      gap: vars.$space-m;
    }
  }
}

.flight-details {
  &__estimated-note {
    padding: 0 vars.$space-xl vars.$space-xl;
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
    line-height: 1.5;
  }

  &--error,
  &--not-found {
    padding: vars.$space-xl;
    text-align: center;
  }

  &__status {
    padding: vars.$space-m vars.$space-xl;
  }

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: vars.$space-xl;
  }

  // Page H1. Angular applies the global h1 rule (42px regular) — match it
  // here and clamp down on narrower viewports like Angular does.
  &__flight-number {
    font-size: fonts.$font-size-xxxl;
    font-weight: fonts.$font-regular;
    color: colors.$white;
    margin: 0;
    line-height: 1.2;

    @include screen.smTablet {
      font-size: fonts.$font-size-xxxl--tablet;
    }
    @include screen.mobile {
      font-size: fonts.$font-size-xxxl--mobile;
    }
  }

  &__overall-status {
    font-weight: fonts.$font-medium;
  }

  &__operating {
    padding: 0 vars.$space-xl vars.$space-xl;
    color: colors.$light-gray;
  }

  &__flying-time {
    padding: vars.$space-xl;
    color: colors.$light-gray;
  }

  &__legs {
    padding: 0 vars.$space-xl;
  }

  &__leg {
    padding: vars.$space-xl 0;

    &:not(:last-child) {
      border-bottom: 1px dashed colors.$border;
    }
  }

  &__leg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: vars.$space-m;
  }

  &__leg-index {
    font-weight: fonts.$font-medium;
  }

  &__leg-stations {
    display: flex;
    justify-content: space-between;

    @include screen.mobile {
      flex-direction: column;
      gap: vars.$space-xl;
    }
  }

  &__leg-departure,
  &__leg-arrival {
    display: flex;
    flex-direction: column;
    gap: vars.$space-s;
  }

  &__leg-duration {
    display: flex;
    align-items: center;
    color: colors.$light-gray;
  }

  &__station-code {
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-medium;
  }

  &__station-name,
  &__station-city {
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
  }

  &__terminal,
  &__gate,
  &__bag-belt {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
  }

  &__time {
    font-size: fonts.$font-size-l;
  }

  &__time-actual {
    font-size: fonts.$font-size-s;
    color: colors.$orange;
  }

  &__time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
  }

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

  &__time-value {
    font-weight: fonts.$font-bold;
    color: colors.$text-color;
  }

  &__time-offset {
    color: colors.$light-gray;
    font-size: 11px;
  }

  &__time-date {
    color: colors.$light-gray;
    font-size: 11px;
  }

  &__time-row--actual &__time-value {
    color: colors.$orange;
  }

  &__footer-notes {
    padding: vars.$space-s vars.$space-xl vars.$space-xl;
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
    line-height: 1.5;

    p {
      margin: 0 0 6px;
    }
  }

  &__aircraft {
    margin-top: vars.$space-m;
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
  }

  &__accordion-title {
    padding: vars.$space-xl vars.$space-xl vars.$space-s;
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-bold;
    color: colors.$text-color;
    border-top: 1px solid colors.$border;
    margin-top: vars.$space-m;
  }

  // Angular overrides ported (without ::ng-deep)
  .flight-props-caption {
    width: 30%;
  }

  .flight-details-section__caption {
    width: calc(30% - #{vars.$space-xl});
  }

  .board-details-day-selector {
    @include screen.mobile {
      display: flex;
      flex-direction: column;
      padding: vars.$space-xl;
    }
  }
}
