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

.board-details-header {
  // Mirrors Angular's board-details-header host styling:
  //   padding: $space-l $space-xl (15px 20px), align-items: start,
  //   gap: $space-m (10px). Border-radius stays off — the wrapping
  //   `.frame` handles rounding.
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: vars.$space-m 16px;
  padding: vars.$space-l vars.$space-xl;
  background: colors.$white;

  &__badge { grid-column: 1; grid-row: 1; }

  &__actions-row {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-self: start;
  }

  &__events-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: vars.$space-s2;
  }

  &__last-update-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    padding: 16px;

    &__badge { grid-column: 1; grid-row: 1; }

    &__actions-row {
      grid-column: 1;
      grid-row: 2;
      justify-content: flex-start;
    }

    &__events-row { grid-row: 3; }
    &__last-update-row {
      grid-row: 4;
      justify-content: flex-start;
    }
  }
}

// Mirrors Angular's detail-header-badge-flight-number:
//   font-weight: $font-medium (500), font-size: $font-size-xl (18px).
// React previously used 28px / 600 which read as a page title and
// dwarfed the logo in the adjacent column.
.details-header-badge {
  display: flex;
  align-items: center;
  gap: vars.$space-m; // Angular h-spacing($space-m) between flight number + logo

  &__flight-number {
    display: flex;
    flex-direction: column;
    font-weight: fonts.$font-medium;
    font-size: fonts.$font-size-xl;
  }
  &__primary {
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-medium;
    color: colors.$text-color;
  }
  &__codesharing {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    margin-top: 2px;
  }

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

  &__airline-caption {
    font-size: fonts.$font-size-s;
    color: colors.$light-gray;
    text-transform: lowercase;
  }
}

.flight-events {
  display: flex;
  gap: vars.$space-m;
  align-items: center;

  // Mirrors Angular's `flight-events.component.scss`: 28px chip with
  // 0 $space-m (0 10px) padding, 3px ($border-radius) corners, thin
  // neutral border. React's 14px-rounded pill is replaced with the
  // Angular squared chip — matches the visual rhythm of the rest of
  // the card.
  &__event {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 vars.$space-m;
    border: 1px solid colors.$border;
    border-radius: vars.$border-radius;
    height: 28px;
    font-size: fonts.$font-size-s;
    line-height: 16px;
    color: colors.$text-color;
  }
}

.last-update {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: fonts.$font-size-s;
  color: colors.$text-color;

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

  .share-button-wrap {
    @media (min-width: 769px) { display: none; }
  }
}

.share-button-wrap {
  position: relative;

  .share-panel {
    position: absolute;
    top: 100%;
    right: 0;
    background: colors.$white;
    border: 1px solid colors.$border-blue;
    border-radius: vars.$border-radius;
    padding: vars.$space-xl;
    box-shadow: 0 2px 2px rgba(177, 177, 177, 0.15);
    z-index: 10;
  }

  .share-elements {
    display: flex;
    align-items: flex-start;

    > div + div {
      // Angular sets $space-m (10px) between share icons; previous 16px
      // misaligned the tile stack against the page-level overlay panel.
      margin-left: vars.$space-m;
    }

    .share-element {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      font-size: fonts.$font-size-xs;
      color: colors.$blue;
      width: 60px;
      height: 55px;
      padding-top: 32px;
      background-position: center top;
      background-repeat: no-repeat;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.2s;

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

      &.facebook { background-image: url('/assets/img/share/facebook.svg'); }
      &.vk { background-image: url('/assets/img/share/vk.svg'); }
      &.twitter { background-image: url('/assets/img/share/twitter.svg'); }
      &.copy { background-image: url('/assets/img/share/copy.svg'); }
      &.weibo {
        background-image: url('/assets/img/share/weibo.svg');
        background-size: 29px;
      }
    }
  }
}

.flight-actions {
  display: flex;
  gap: vars.$space-s2;
  align-items: center;
}
