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

.flight-details-accordion {
  margin-top: 16px;

  // Mirrors Angular `board-details.scss` divider between accordion
  // tabs: a 1.3px dotted hairline (#D1DCEA), not a solid 1px border.
  .p-accordion-tab {
    border-top: 1.3px dotted colors.$border;
    overflow: hidden;
  }

  // 'Детали рейса' accordion header. Angular keeps this at 16px / 400 /
  // #333 — it's a section divider, not a page heading, so it stays quiet.
  .p-accordion-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;
    }
  }

  .p-accordion-content {
    padding: vars.$space-s2 0 16px;
    background: colors.$white;
  }
}

// ---------------------------------------------------------------------------
// Flat details rows — matches Angular's flight-details-wrapper layout.
// Each row: icon + title + status on the left, content on the right,
// dotted separator between rows.
// ---------------------------------------------------------------------------

.details-rows {
  display: flex;
  flex-direction: column;

  &__time-note {
    padding: 0 0 8px;
    margin-left: calc(29% + 24px);
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
    line-height: 1.5;
  }
}

.details-row {
  display: grid;
  grid-template-columns: 29% 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 20px 0;
  position: relative;

  // Angular draws the row separator as a 1.3px dotted hairline (#D1DCEA).
  & + .details-row {
    border-top: 1.3px dotted colors.$border;
  }

  &__header {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  // Angular's sprite icons (#service, #board, #deboard, #company, #food,
  // #additional_service) render at ~47×47 — significantly larger than a
  // typical row affordance. Scale the React placeholders accordingly so
  // the icon column has comparable weight. Keep the stroke neutral grey.
  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: colors.$light-gray;
    flex-shrink: 0;

    svg {
      width: 100%;
      height: 100%;
    }
  }

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

  // Row caption label (Регистрация / Борт / Питание на борту / etc.)
  // Angular renders at 12px in a neutral grey (#657282).
  &__title {
    font-weight: fonts.$font-regular;
    color: colors.$light-gray;
    font-size: fonts.$font-size-s;
  }

  &__subtitle {
    font-size: fonts.$font-size-m;
    font-weight: fonts.$font-bold;
    color: colors.$blue;
    word-break: break-word;
  }

  // Status label (Закончена / Идет / Ожидается). Angular sizes it 16px
  // and uses Aeroflot red (#C8102E) for the 'Finished' state.
  &__status {
    font-size: fonts.$font-size-l;
    font-weight: fonts.$font-medium;

    &--scheduled {
      color: colors.$light-gray;
    }

    &--inprogress,
    &--started {
      color: colors.$green;
    }

    &--finished {
      color: colors.$red;
    }

    &--expected {
      color: colors.$blue;
    }

    &--specified {
      color: colors.$light-gray;
    }
  }

  &__body {
    display: flex;
    align-items: flex-start;
  }

  &__times {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: vars.$space-xxl;
    width: 100%;
  }

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

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

  // Angular renders accordion time values ('15:30', '14:45') at 12px
  // regular in the brand orange — not bold dark — so the red 'Закончена'
  // status text stays the loudest element in the row.
  &__time-value {
    font-size: fonts.$font-size-s;
    font-weight: fonts.$font-regular;
    color: colors.$orange;
  }

  // Day-change badge ('-1'): Angular keeps it inline at baseline (not
  // superscript) with a slightly softer blue.
  &__day-change {
    margin-left: 4px;
    font-size: fonts.$font-size-xs;
    font-weight: fonts.$font-regular;
    color: colors.$blue-light;
    vertical-align: baseline;
  }

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

// Responsive: collapse to single column on mobile
@media (max-width: 768px) {
  .details-row {
    grid-template-columns: 1fr;
    gap: vars.$space-m2;

    &__times {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
  }
}
