/* The camp-wide Schedule overview.
 *
 * Every colour is a token from tokens.css (guardrail 10). Territory colours are
 * not written here at all — they are rows in the `territory` table, so the
 * screen paints them as inline styles straight from the API, with the token in
 * front as `var(--t-<key>, <api hex>)`. The rules below carry a neutral token
 * as the fallback for when that value is missing. Nothing here may hold a raw
 * colour value; `npm run check` enforces it.
 *
 * Two arrangements of one payload: a sticky timetable above 900px, a
 * collapsible day agenda below it.
 */

.ov-head { margin-bottom: var(--space-4); }

/* During the burn the header carries the design's Live door on its right. */
.ov-head--burn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  justify-content: space-between;
}

.ov-livecta { margin-top: 0; }

/* --- filter chips --------------------------------------------------------- */

/* One control band, not three stacked rows. The design never spends more than a
 * single row of the page on filters — it hangs two selects off the right of the
 * heading that names what you are filtering. Ours has more to filter, so it
 * gets its own band, but the band is one block of controls with the selects at
 * the end of it rather than a chip row, a chip row and a select row. */
.ov-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.ov-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  align-self: center;
}

/* The chip itself is `.filter-chip` in app.css — one primitive, shared with the
 * tally's sort and the agenda's expand-all. Only the two chips that carry a
 * meaning of their own are coloured here. */
.filter-chip--gap.is-on { background: var(--gap); border-color: var(--gap); color: var(--gap-bg); }
.filter-chip--prem.is-on { background: var(--t-prem-t); border-color: var(--t-prem); color: var(--t-prem-deep); }

/* Pushed to the end of the band, the way the design hangs Pod and Day off the
 * right-hand edge of the row above the grid. The pair never breaks apart —
 * stacked, they turn a control band into a column of dead space. */
.ov-selects { display: flex; flex: none; gap: var(--space-3); margin-left: auto; }
.ov-selects .filter { flex: 0 0 150px; }

/* --- desktop: the sticky timetable ---------------------------------------- */

/* Both header rows are pinned, so the role and the time stay readable however
 * far into the week you have scrolled. The role row's `top` has to equal the
 * territory band's height exactly — 30px, kept in step by hand below. */
.ov-gridwrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  overflow: auto;
  max-height: 74vh;
}

.ov-grid { display: grid; min-width: 720px; }

.ov-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 50px;
  padding: var(--space-2) var(--space-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--size-small);
  text-align: left;
  text-decoration: none;
}

.ov-cell-text {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-cell-sub {
  font-size: var(--size-kicker);
  color: inherit;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-cell-meta { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }

/* Carries the coverage level's colour and nothing else. */
.ov-meter { display: inline-flex; flex: none; }

.ov-gapcount { color: var(--gap); font-weight: var(--weight-bold); }

.ov-corner {
  grid-row: span 2;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 6;
  background: var(--card);
  color: var(--soft);
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
}

.ov-band {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 30px;
  justify-content: center;
  padding-block: var(--space-1);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  font-family: var(--font-display);
}

.ov-colhead {
  position: sticky;
  top: 30px;             /* = .ov-band's height */
  z-index: 4;
  min-height: 44px;
  background: var(--card);
  font-weight: var(--weight-semibold);
}

/* The day separator spans the whole table; its label rides the horizontal
 * scroll so the date is still there when you are three territories across. */
.ov-dayband {
  grid-column: 1 / -1;
  min-height: 38px;
  background: var(--card);
  border-right: 0;
}

.ov-dayband-text {
  position: sticky;
  left: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--size-micro);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

.ov-rowhead {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--panel);
  font-weight: var(--weight-semibold);
}

.ov-cell--absent { background: var(--card); color: var(--soft); }
.ov-cell--closed { background: var(--card); color: var(--soft); }
.ov-cell--open { color: var(--soft); }
.ov-cell--premium { background: var(--t-prem-t); color: var(--t-prem-deep); }
.ov-cell--needed { background: var(--gap-bg); color: var(--gap); font-weight: var(--weight-bold); }
.ov-cell--filled, .ov-cell--mine { color: var(--ink); }
.ov-cell--mine { box-shadow: inset 3px 0 0 var(--ink); }

a.ov-cell:hover { outline: 2px solid var(--ink); outline-offset: -2px; }

/* The pod filter dims what is not that pod rather than removing it — a pod
 * lead wants their coverage inside the whole picture. */
.ov-cell.is-dim { opacity: 0.34; }

/* --- phone: the collapsible day agenda ------------------------------------ */

/* No box around a day. The design's day is a kicker with a hairline under it
 * and its rows below, one clear of the next by whitespace — see the agenda in
 * the design file, `margin-bottom: 20px` and no surface at all. */
.ov-agenda { display: flex; flex-direction: column; gap: 20px; }

.ov-day-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ov-caret { flex: none; width: 14px; color: var(--soft); align-self: center; }

.ov-day-name {
  flex: 1;
  font-size: var(--size-kicker);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

.ov-day-count {
  flex: none;
  font-size: var(--size-micro);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}


.ov-day-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.ov-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ov-block-time {
  flex: 0 0 100%;
  font-size: var(--size-body);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.ov-block-groups { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }

.ov-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-slot);
  background: var(--card);
  min-height: 44px;
}

.ov-group-name {
  flex: none;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
}

.ov-group-window {
  flex: none;
  font-size: var(--size-micro);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}

.ov-group-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--size-body);
}

.ov-person { white-space: nowrap; }
.ov-person.is-dim { opacity: 0.4; }
.ov-nobody { color: var(--gap); font-weight: var(--weight-semibold); }

/* A link to the seat it names, so it answers to --tap-min like every other
 * thing on this screen somebody presses. */
.ov-gap {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--soft);
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.ov-gap.is-short { background: var(--gap-bg); color: var(--gap); }

/* --- phone tuning --------------------------------------------------------- */

@media (max-width: 900px) {
  .ov-chiprow {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* The chips scroll sideways rather than stacking four rows deep, which is
     * what the design asks for on a phone. */
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .ov-chiprow::-webkit-scrollbar { display: none; }

  .ov-selects { flex: 1 1 100%; margin-left: 0; }
  .ov-selects .filter { flex: 1 1 140px; }

  .ov-block-time { flex: 0 0 100%; }
}