/* Page-only composition for team.html.
   Shared rules live in assets/app.css, which loads first. Tokens only. */

.team-list { display: grid; gap: var(--s-4); }

/* the seat tiles double as filters, same contract as the applicants stage
   tiles: pressed tile == pressed chip (or the matching select value) */
button.kpi[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.seat-strip { --od-cols: 1; --od-gap: var(--s-3); }
@media (min-width: 540px) { .seat-strip { --od-cols: 2; } }
@media (min-width: 1024px) { .seat-strip { --od-cols: 4; } }

.team-toolbar { --od-gap: var(--s-4); flex-wrap: wrap; }
.team-toolbar > .toolbar-status { flex: 1 1 100%; }
.team-toolbar > .toolbar-search { flex: 2 1 260px; }
.team-toolbar > .toolbar-post { flex: 1 1 220px; }

/* ---------------------------------------------------------------------------
   Posting permission tag — icon plus the word, so colour is never the only cue
   --------------------------------------------------------------------------- */
.post-tag { border-color: transparent; min-height: 26px; font-size: var(--fs-small); gap: var(--s-1); }
.post-tag.is-yes { background: var(--primary-soft); color: var(--primary-hover); }
.post-tag.is-no { background: var(--surface-sunken); color: var(--stage-rejected-ink); }
.post-tag svg { width: 16px; height: 16px; }

/* a suspended seat owns nothing: quieten its name and figures, keep the row
   scannable */
tr.is-suspended .seat-name { color: var(--ink-muted); }
tr.is-suspended .mono { opacity: .72; }
.seat-figure.is-none { color: var(--ink-faint); }

.seat-actions { --od-gap: var(--s-1); justify-content: flex-end; }
@media (max-width: 767px) { .seat-actions { justify-content: flex-start; } }

/* ---------------------------------------------------------------------------
   Manage seat dialog — two views in one dialog: the seat itself, and the
   hand-over step a seat with live work has to pass through first.
   --------------------------------------------------------------------------- */
.dialog-seat {
  width: min(560px, calc(100vw - var(--s-8)));
  /* short viewports: let the whole dialog scroll rather than clip */
  max-height: min(88dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dialog-seat .dialog-body { --od-gap: var(--s-6); display: grid; color: var(--ink); }
.seat-identity { --od-gap: var(--s-3); }

.seat-facts {
  --od-gap: var(--s-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--s-3);
  background: var(--surface-sunken);
  border-radius: var(--r-control);
}
.seat-facts > .od-field { --od-gap: var(--s-1); }
.seat-fact-label {
  display: block;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.seat-fact-value { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

.level-note { display: block; font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-muted); }
.check-row .check-label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

.seat-zone { --od-gap: var(--s-2); display: grid; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.seat-zone-actions { --od-gap: var(--s-2); flex-wrap: wrap; }

.reassign-panel { --od-gap: var(--s-4); display: grid; }
.reassign-panel[hidden] { display: none; }
.reassign-callout {
  --od-gap: var(--s-3);
  padding: var(--s-3);
  background: var(--warning-soft);
  border-radius: var(--r-control);
  color: var(--stage-screening-ink);
}
.reassign-callout .reassign-text { display: block; font-size: var(--fs-small); line-height: var(--lh-small); }

@media (max-width: 767px) {
  .seat-facts { grid-template-columns: 1fr; }
}