tr[data-sailing-row].port-dimmed { display: none; }

/* Toolbar: three self-contained button groups, each visibly framed. */
.chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid #c8d4e2;
  border-radius: 6px;
  background: #f7fafd;
}

.filter-group-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a8ea3;
  margin-right: 3px;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid #c8d4e2;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 0.58rem;
  color: #4b6178;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.filter-btn:hover { border-color: #133b6d; color: #133b6d; }

.filter-btn:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: 1px;
}

.filter-btn.is-active {
  background: #133b6d;
  border-color: #133b6d;
  color: #fff;
  font-weight: 700;
}

/* A cropped timeline is a compact table, not a stretched version of the full grid.
   Its day columns retain the normal roughly-26px day scale for screenshot sharing. */
.overlap-table.is-date-cropped {
  width: auto;
  min-width: 0;
}

.overlap-table.is-date-cropped col.timeline-column { width: 26px; }

.nights-filter-btn { min-width: 26px; justify-content: center; }

.max-price-prefix { color: #4b6178; font-size: 0.62rem; font-weight: 700; }
.max-price-filter-input {
  width: 52px;
  border: 1px solid #c8d4e2;
  border-radius: 4px;
  padding: 2px 4px;
  background: #fff;
  color: #33475b;
  font: inherit;
  font-size: 0.58rem;
}

.max-price-filter-input:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: 1px;
}

/* Trip calculator: a fixed side panel that only appears once a row is picked. */
.trip-calculator {
  position: fixed;
  top: 80px;
  right: 12px;
  z-index: 20;
  width: 210px;
  padding: 10px 12px;
  border: 1px solid #c8d4e2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(19, 59, 109, 0.16);
  font-size: 0.6rem;
  color: #33475b;
}

.trip-calculator[hidden] { display: none; }

.trip-calculator-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.trip-calculator-head h3 {
  margin: 0;
  font-size: 0.62rem;
  color: #133b6d;
}

#trip-clear-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.55rem;
  color: #7a8ea3;
  cursor: pointer;
  text-decoration: underline;
}

#trip-clear-btn:hover { color: #b3261e; }

.trip-calculator-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.trip-calculator-list li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid #eef2f7;
}

.trip-calculator-list .trip-item-label { color: #33475b; }
.trip-calculator-list .trip-item-price { color: #7a8ea3; white-space: nowrap; }

.trip-calculator-totals {
  margin: 0 0 6px;
  padding-top: 6px;
  border-top: 2px solid #133b6d;
}

.trip-calculator-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.trip-calculator-totals dt { color: #7a8ea3; }
.trip-calculator-totals dd { margin: 0; font-weight: 700; color: #133b6d; }

.trip-calculator-note {
  margin: 0;
  font-size: 0.52rem;
  color: #9aa9b8;
}

/* Row-number select button: the only click target that toggles selection. */
.row-select-btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.row-select-btn:hover { border-color: #133b6d; }

.row-select-btn:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: 1px;
}

.row-select-btn.is-selected {
  background: #133b6d;
  border-color: #133b6d;
  color: #fff;
  font-weight: 700;
}

tr[data-sailing-row].is-selected-row { outline: 2px solid #133b6d; outline-offset: -2px; }

/* A calculator selection paints only the sailing's own date span, leaving the rest
   of the month readable. The brighter bar stays visible for sold-out sailings too. */
.timeline-day.is-selected-cruise-day { background: #a5f3fc; }
.sailing-bar.is-selected-cruise-bar {
  background-color: #06b6d4;
  box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.45);
  opacity: 1;
}

/* Sold out pricing toggle: swap the "SOLD OUT" label for our own last known rate.
   The price span only exists in the markup when a last-known rate is on file, so a
   row with no personalized history is untouched by this toggle either way. */
.soldout-price-text { display: none; }
.overlap-table.show-soldout-pricing .soldout-status-text { display: none; }
.overlap-table.show-soldout-pricing .soldout-price-text { display: inline; }

/* Solo pricing toggle: swap the whole FROM cell to the 1-guest search's own price. */
.solo-price-text { display: none; }
.overlap-table.show-solo-pricing .dual-price-text { display: none; }
.overlap-table.show-solo-pricing .solo-price-text { display: inline; }

/* Sailing log popup: a centered modal reusing the sailing-log-table's own row styling. */
.log-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(19, 30, 43, 0.35);
}

.log-popup-backdrop[hidden] { display: none; }

.log-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(420px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid #c8d4e2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(19, 59, 109, 0.28);
  color: #33475b;
}

.log-popup[hidden] { display: none; }

.log-popup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.log-popup-title {
  margin: 0;
  font-size: 0.72rem;
  color: #133b6d;
}

.log-popup-close {
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: #7a8ea3;
  cursor: pointer;
}

.log-popup-close:hover { color: #b3261e; }

.log-popup-empty {
  margin: 0;
  padding: 10px;
  color: var(--muted, #5c6c7c);
  font-size: 0.72rem;
  text-align: center;
}

/* Date range filter: hides sailings whose full span falls outside the picked dates. */
.date-range-sep { color: #4b6178; font-size: 0.58rem; }
.date-range-filter-input {
  border: 1px solid #c8d4e2;
  border-radius: 4px;
  padding: 2px 4px;
  background: #fff;
  color: #33475b;
  font: inherit;
  font-size: 0.58rem;
}

.date-range-filter-input:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: 1px;
}

/* Chart-line range: click two date headers to mark a range directly on the chart.
   Sailings outside the marked range are dimmed, not hidden -- they stay comparable. */
.date-column[role="button"] { cursor: pointer; }
.date-column[role="button"]:hover { background: #dde7f1; }

.date-column[role="button"]:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: -2px;
}

.date-column.is-range-endpoint { background: #133b6d !important; color: #fff !important; }
.date-column.is-range-endpoint .date-dow,
.date-column.is-range-endpoint .date-label { color: #fff; }

.range-line {
  position: absolute;
  top: 0;
  width: 3px;
  background: #000;
  z-index: 18;
  pointer-events: none;
}

tr[data-sailing-row].range-dimmed { opacity: 0.25; }

/* Watch column: marks a sailing for the scout's five-minute availability checks. */
.watch-column { width: 46px; }
.watch-cell { text-align: center; }

.watch-btn {
  border: 1px solid #c8d4e2;
  border-radius: 3px;
  background: #fff;
  padding: 1px 4px;
  font: inherit;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: #7a8ea3;
  cursor: pointer;
}

.watch-btn:hover { border-color: #133b6d; color: #133b6d; }

.watch-btn:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: 1px;
}

.watch-btn.is-watched {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
  font-weight: 700;
}

.watch-btn.is-pending { opacity: 0.5; }

/* A watched sailing is outlined in brown so the scout's targets stand out at a glance.
   A calculator selection keeps its own colour when a row is both. */
tr[data-sailing-row].is-watched-row { outline: 2px solid #7a4a1e; outline-offset: -2px; }
tr[data-sailing-row].is-watched-row.is-selected-row { outline-color: #133b6d; }

/* Month tabs: a client-side view switch over the rows already rendered, framed like the
   filter groups below it because it is the widest of the same family of controls. */
.month-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dbe3ec;
}

.month-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid #c8d4e2;
  border-radius: 4px 4px 0 0;
  background: #f7fafd;
  font: inherit;
  font-size: 0.62rem;
  color: #4b6178;
  cursor: pointer;
}

.month-tab:hover { border-color: #133b6d; color: #133b6d; }

.month-tab:focus-visible {
  outline: 2px solid #133b6d;
  outline-offset: 1px;
}

.month-tab.is-active {
  background: #133b6d;
  border-color: #133b6d;
  color: #fff;
  font-weight: 700;
}

.month-tab-count { font-size: 0.52rem; opacity: 0.75; }

/* A departed sailing keeps its row, its watch state and its history; it is only marked
   as past, because the scout stops checking it and its availability can no longer move.
   The flag is brown to read with the watched outline it most often appears inside. */
tr[data-sailing-row].is-departed-row .dates-cell,
tr[data-sailing-row].is-departed-row .ship-cell { color: #5b6470; }

.departed-flag {
  display: block;
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7a4a1e;
}