.forecast {
  cursor: pointer;
}

.forecast:not(.forecast--extended) {
  & .forecast__gusts,
  & .forecast__wave-dir,
  & .forecast__temp,
  & .forecast__cloud,
  & .forecast__rain {
    display: none;
  }
}

.forecast--web-mobile {
  & .hourly-forecast__table {
    width: 700px;
  }
}


/* ---- Hourly expand/collapse ---- */
.forecast:not(.forecast--extended) .table__cell--sub-3h {
  display: none;
}

.table__cell--time-hour--sub-3h {
  color: transparent;
}

.forecast--extended .table__cell--time-hour--sub-3h {
  color: inherit;
}

.extended-toggle {
  display: block;
  margin-left: auto;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--color-text-muted, #6b7280);
  background: none;
  border: 1px solid currentColor;
  border-radius: 4px;
  line-height: 1.4;
}

.forecast__hourly-toggle:hover {
  color: var(--color-text, #374151);
}

/* ---- View toggle ---- */
.forecast__view--day-column {
  display: none;
}

.forecast-list--day-column {
  & .forecast__view--inline {
    display: none;
  }

  & .forecast__view--day-column {
    display: block;
  }
}

/* ---- Day-grid layout (hours = rows, days = columns) ---- */
.table--forecast-day-grid {
  & .table__cell--label {
    white-space: nowrap;
    font-size: 11px;
    min-width: 36px;
  }

  & .table__cell--day-header {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    background-color: var(--color-grey-light);
    min-width: 70px;
    padding: 3px 4px;

    & .table__cell--time-day-name {
      display: block;
    }

    & .table__cell--time-day-number {
      display: block;
      font-weight: normal;
      opacity: 0.7;
    }
  }

  & .table__cell--day-hour {
    padding: 2px 4px;
    font-size: 11px;
    text-align: center;
    vertical-align: middle;
    min-width: 70px;
  }
}

.day-hour__wind {
  font-weight: 600;
  white-space: nowrap;
}

.day-hour__wave {
  font-size: 10px;
  opacity: 0.85;
  white-space: nowrap;
}

.day-hour__tide {
  font-size: 10px;
  margin-top: 1px;
  white-space: nowrap;
  padding: 1px 2px;
  border-radius: 2px;
}

/* ---- Surfline-style view ---- */
.forecast__view--sf {
  display: none;
}

.forecast-list--sf {
  & .forecast__view--inline    { display: none; }
  & .forecast__view--day-column { display: none; }
  & .forecast__view--sf         { display: block; }
}

.table--forecast-sf {
  width: 100%;
  /* Override the base table-row/table-cell display so the .sf-day wrapper div works */
  display: flex;
  flex-direction: column;

  & .table__row {
    display: flex;
    align-items: center;
  }

  & .table__cell {
    display: flex;
    align-items: center;
    padding: 5px 0;
  }

  & .table__cell--sf-time {
    font-size: 12px;
    font-weight: 700;
    color: #98a2af;
    white-space: nowrap;
    width: 32px;
    min-width: 32px;
    justify-content: flex-end;
    padding-right: 6px;
    flex-shrink: 0;
  }

  & .table__cell--sf-rating-col {
    width: 6px;
    min-width: 6px;
    align-self: stretch;
    padding: 4px 0 !important;
    flex-shrink: 0;
    border-radius: 3px;
  }

  & .table__cell--sf-swell {
    min-width: 100px;
    padding-left: 8px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
  }

  & .table__cell--sf-swell2 {
    min-width: 80px;
    padding-left: 6px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
  }

  & .table__cell--sf-wind {
    min-width: 100px;
    flex-shrink: 0;
  }

  & .table__cell--sf-energy,
  & .table__cell--sf-weather,
  & .table__cell--sf-pressure {
    min-width: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    padding: 4px 4px;
  }

  & .table__cell--sf-tide {
    min-width: 60px;
    white-space: nowrap;
    padding-left: 6px;
    flex-shrink: 0;
  }

  & .table__row--sf-header {
    & .table__cell {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #98a2af;
      border-bottom: 2px solid #e4e7ed;
      padding-bottom: 6px;
    }
  }

  & .table__row--sf-day {
    cursor: pointer;

    & .table__cell--sf-day-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      font-size: 13px;
      font-weight: 700;
      color: #171717;
      padding: 12px 4px;
      border-top: 1px solid #e4e7ed;
    }
  }

  & .table__row--sf-slot {
    border-bottom: 1px solid #e4e7ed;
    cursor: pointer;

    &:hover {
      background-color: #fafafa;
    }
  }
}

/* The sf-day wrapper is a flex child of table--forecast-sf */
.sf-day {
  display: contents; /* transparent to flex layout — rows remain direct flex children */

  & .sf-slot--detail { display: none !important; }

  &.sf-day--expanded {
    & .sf-slot--detail { display: flex !important; }
    & .sf-day__chevron { transform: rotate(180deg); }
  }
}

.sf-day__chevron {
  font-size: 18px;
  color: #98a2af;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
  flex-shrink: 0;
}

/* ---- Rating color strips — exact Surfline palette ---- */
.sf-rating--flat         { background-color: #98a2af; }
.sf-rating--very-poor    { background-color: #f4496d; }
.sf-rating--poor         { background-color: #ff9500; }
.sf-rating--poor-to-fair { background-color: #ffcd1e; }
.sf-rating--fair         { background-color: #0bd674; }
.sf-rating--fair-to-good { background-color: #009371; }
.sf-rating--good         { background-color: #6851f4; }
.sf-rating--epic         { background-color: #5c00d0; }

/* Wave height colored text — same rating colors applied to text */
.sf-rating-text--flat         { color: #98a2af; }
.sf-rating-text--very-poor    { color: #f4496d; }
.sf-rating-text--poor         { color: #ff9500; }
.sf-rating-text--poor-to-fair { color: #c79e00; } /* darkened for white-bg legibility */
.sf-rating-text--fair         { color: #0bd674; }
.sf-rating-text--fair-to-good { color: #009371; }
.sf-rating-text--good         { color: #6851f4; }
.sf-rating-text--epic         { color: #5c00d0; }

/* SF swell cards */
.sf__swell-card {
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #fafafa;
}
.sf__swell-card--primary  { border-color: #16221b; background: #f5faf6; }
.sf__swell-card--secondary { border-color: #0e11d5; background: #f5f5ff; }

.sf__swell-height          { font-weight: 800; font-size: 15px; line-height: 1; }
.sf__swell-height--secondary { font-weight: 700; font-size: 13px; color: #0e11d5; }
.sf__swell-meta   { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.sf__swell-period { font-size: 11px; color: #6b7280; }
.sf__swell-dir    { font-size: 12px; color: #6b7280; }

/* SF metric cells (energy, pressure) */
.sf__metric-value { font-size: 14px; font-weight: 700; line-height: 1; color: #171717; }
.sf__metric-unit  { font-size: 10px; color: #98a2af; margin-top: 2px; line-height: 1; }

/* SF weather cell */
.sf__weather-icon { font-size: 18px; line-height: 1; }
.sf__weather-temp { font-size: 12px; color: #374151; margin-top: 2px; }

/* SF empty placeholder */
.sf__empty { color: #d1d5db; font-size: 13px; }

/* SF wind cell */
.sf__wind-inner     { display: flex; align-items: center; gap: 10px; }
.sf__wind-text      { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sf__wind-speed     { font-size: 15px; font-weight: 700; color: #171717; }
.sf__wind-gust      { font-size: 11px; color: #98a2af; }
.sf__wind-arrow-box {
  background: rgba(185, 211, 223, 0.2);
  border-radius: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.sf__tide-height { font-weight: 600; margin-right: 3px; }
.sf__tide-state  { font-size: 11px; color: #6b7280; }
.sf__tide--high  { color: #1d4ed8; }
.sf__tide--low   { color: #b45309; }

/* ---- Toggle button placement ---- */
.forecast-layout-toggle {
  margin-bottom: 0.5rem;
  display: inline-flex;
}


.table__row--header .table__cell--fixed-width {
  height: auto !important;
  min-height: 36px !important;
}

.table__row--header .table__cell--new-day {
  font-weight: 700;
}

.table__cell--tide-high    { background-color: #1e3a5f; color: white; }
.table__cell--tide-low     { background-color: #e0f2fe; color: #0c4a6e; }
.table__cell--tide-rising  { background-color: #dcfce7; color: #14532d; }
.table__cell--tide-falling { background-color: #fef9c3; color: #713f12; }