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

.day-grouped-flight-list {
  display: flex;
  flex-direction: column;
  // Angular's `schedule-days .frame` lays day blocks flush — no gap; a
  // single 1.3px hairline divider between siblings is drawn from the
  // group's `::before` (see &__group + &__group below).
  gap: 0;

  // When the column-headers row immediately follows the week-tabs inside
  // the sticky card (the Angular-parity layout), cancel the WeekTabs
  // bottom margin so the two sit flush together.
  .week-tabs + &__column-headers,
  .week-tabs + * + &__column-headers {
    margin-top: 0;
  }
  .week-tabs:has(+ &__column-headers),
  .week-tabs:has(+ * + &__column-headers) {
    margin-bottom: 0;
  }

  &__column-headers {
    display: grid;
    // Match FlightCard schedule grid column widths so labels align
    // with their data columns (see Angular's schedule-list-flight-header).
    grid-template-columns:
      80px 120px 100px minmax(45px, 240px) 100px 100px minmax(45px, 240px) 10px;
    gap: 16px;
    padding: 10px 24px;
    color: colors.$light-gray;
    font-size: 11px;
    font-weight: fonts.$font-medium;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid colors.$border;
    // Put every column label on the same top baseline so "ВЫЛЕТ *" /
    // "ПРИЛЕТ *" with their sort arrows don't push the row taller
    // than "РЕЙС" / "ВРЕМЯ В ПУТИ". Each cell is top-aligned; the sort
    // stack is absolute-positioned relative to the cell so it doesn't
    // expand the row.
    align-items: start;

    // The first two header labels span the first two grid columns.
    > span:nth-child(1) { grid-column: 1; }
    > span:nth-child(2) { grid-column: 2 / span 2; }
    > span:nth-child(3) { grid-column: 4 / span 1; } // ВЫЛЕТ over dep-station
    > span:nth-child(4) { grid-column: 5 / span 1; } // ВРЕМЯ В ПУТИ over duration
    > span:nth-child(5) { grid-column: 7 / span 1; } // ПРИЛЕТ over arr-station
  }

  &__col-sortable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  &__col-asterisk {
    margin-left: 2px;
    font-size: 0.85em;
  }

  &__sort-group {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    line-height: 0;
    // Shrink the two 6px triangles so they fit within one text line
    // height without inflating the header row.
    font-size: 0;
  }

  &__sort {
    background: transparent;
    border: 0;
    padding: 0;
    // Global `button { min-height: 35px }` in styles/_buttons.scss would
    // otherwise inflate each 6px triangle to 35px and double the column
    // header row height.
    min-height: 0;
    height: 6px;
    cursor: pointer;
    color: colors.$border-blue;
    line-height: 0;
    border-radius: 2px;
    display: block;

    svg { display: block; }

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

  // Angular's `schedule-days .frame` renders each day flat — no per-group
  // border or rounded corners. A 1.3px top hairline divides siblings,
  // inset 20px on both sides (see `flight-border-top` mixin in
  // schedule-search-result.scss). The divider is drawn via a `::before`
  // on every group except the first.
  &__group {
    background: colors.$white;
    position: relative;
  }

  &__group + &__group::before {
    content: "";
    position: absolute;
    top: 0;
    left: vars.$space-xl;
    right: vars.$space-xl;
    height: 1.3px;
    background: colors.$border;
    z-index: 1;
  }

  // Angular's `schedule-search-result-day` stacks the weekday above the
  // date (small-gray "Вторник" on top, bold "21 Апреля" below). The
  // chevron stays vertically centered against the stacked title.
  &__header {
    display: flex;
    align-items: center;
    gap: vars.$space-m2;
    padding: vars.$space-xl;
    background: colors.$white;
    cursor: pointer;
    user-select: none;

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

    &:focus-visible {
      outline: 2px solid colors.$blue;
      outline-offset: -2px;
    }
  }

  // Empty-day header should not change background on hover (mirrors
  // Angular's disabled-looking row with cursor:default + opacity 0.5).
  &__group--empty &__header:hover {
    background: colors.$white;
  }

  &__header-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.15;
  }

  &__weekday {
    color: colors.$light-gray;
    font-size: 13px;
    text-transform: capitalize;
  }

  &__date {
    margin: 0;
    color: colors.$blue-dark;
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-medium;
    line-height: 1.1;
  }

  // The SVG path is an UP-pointing chevron (apex at top). Angular's
  // `arrow-down-icon` uses the same path and applies `rotate(180deg)`
  // by default (down, "click to expand") and `rotate(0deg)` when
  // `[rotated]=true` i.e. expanded (up, "click to collapse").
  &__chevron {
    margin-left: auto;
    color: colors.$blue;
    transition: transform 0.2s ease;
    transform: rotate(0deg);

    &--collapsed {
      transform: rotate(180deg);
    }
  }

  // Empty days (no flights for that date) render faded + no chevron,
  // mirroring Angular's `[style.opacity]="scheduleItem.flights.length ? '1' : '0.5'"`.
  &__group--empty &__header {
    cursor: default;
    opacity: 0.5;
  }

}
