/*
  prospects.css - THE PROSPECTS CONSOLE (slice D1; REQ-LEAD-P1..P6; R-1023-30)
  ===========================================================================
  Layout for the Prospects list, the prospect drawer, the booking form and the trials section. Greyscale Primer first: borders fall back
  to currentColor, text and surfaces come from the --theme-* tokens the skin owns, and there is no state colour here (a "Needs rebook" or a
  status reads as text with an outline, never as a green/amber/red). Controls keep the 44px target and the 5px radius cap (bento-grid.css).
*/

.bu-pros {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-md);
  min-width: 0;
}

.bu-pros .bu-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
}

.bu-pros-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs);
}

.bu-pros-chip {
  min-height: 44px;
  padding: 0 var(--structure-gap-sm);
  font: inherit;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  border-color: var(--theme-border-subtle, currentColor);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

.bu-pros-chip[aria-pressed="true"] {
  border-width: 2px;
  border-color: var(--theme-border-active, currentColor);
  font-weight: var(--structure-weight-medium);
}

.bu-pros-chip:focus-visible,
.bu-pros-name:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 1px;
}

.bu-pros-count {
  color: var(--theme-text-muted, inherit);
}

.bu-pros-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
}

.bu-pros-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main action" "sub action";
  gap: 2px var(--structure-gap-md);
  align-items: center;
  padding: var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  border-color: var(--theme-border-subtle, currentColor);
  background-color: var(--theme-bg-card, transparent);
}

.bu-pros-row > .bu-pros-main { grid-area: main; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--structure-gap-xs); }
.bu-pros-row > .bu-pros-sub { grid-area: sub; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--structure-gap-sm); }
.bu-pros-row > .bu-btn { grid-area: action; white-space: nowrap; }

.bu-pros-name {
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-weight: var(--structure-weight-medium);
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.bu-pros-status {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  padding: 0 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: currentColor;
  font-size: var(--structure-text-xs);
}

.bu-pros-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs);
  margin-block: var(--structure-gap-sm);
}

.bu-pros-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
}

.bu-pros-list > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs) var(--structure-gap-sm);
  align-items: baseline;
  padding-block: var(--structure-gap-xs);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--theme-border-subtle, currentColor);
}

.bu-pros-contact {
  list-style: none;
  margin: 0 0 var(--structure-gap-sm);
  padding: 0;
}

.bu-pros-check {
  display: flex;
  align-items: flex-start;
  gap: var(--structure-gap-xs);
  min-height: 44px;
}

.bu-pros-results {
  list-style: none;
  margin: 0 0 var(--structure-gap-sm);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bu-pros-classes {
  border: 0;
  margin: 0 0 var(--structure-gap-sm);
  padding: 0;
}

.bu-pros-form,
.bu-pros-book {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
}

.bu-pros-drawer {
  width: min(440px, 100%);
}

.bu-pros-trials {
  margin-block: var(--structure-gap-sm);
}

@media (max-width: 768px) {
  .bu-pros-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "sub" "action";
  }
}

/* ===========================================================================
   D2: CSV import / export panel and the QR poster block (owner only). Greyscale first; no state colour: a problem row reads as text with an
   outline and its label, never red/amber/green. Targets keep the 44px minimum.
   =========================================================================== */

.bu-pros-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-xs);
}

.bu-pros-poster,
.bu-pros-csv {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  border-color: var(--theme-border-subtle, currentColor);
  padding: var(--structure-gap-sm) var(--structure-gap-md);
}

.bu-pros-poster > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: var(--structure-weight-medium);
}

.bu-pros-csv {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-pros-csv h3,
.bu-pros-csv h4 {
  margin: 0;
}

.bu-pros-csv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--structure-gap-sm);
}

@media (min-width: 640px) {
  .bu-pros-csv-row {
    grid-template-columns: 1fr 1fr;
  }
}

.bu-pros-csv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--structure-gap-xs);
  padding: var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  border-color: var(--theme-border-subtle, currentColor);
}

.bu-pros-csv-pick {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

/* the file input is visually hidden but stays in the tab order; its label is the button */
.bu-pros-csv-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bu-pros-csv-card:focus-within .bu-pros-csv-pick {
  outline: 3px solid currentColor;
  outline-offset: 1px;
}

.bu-pros-csv-preview {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
}

.bu-pros-csv-map summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.bu-pros-csv-mapfield {
  max-width: 28rem;
}

.bu-pros-csv-mode {
  border: 0;
  margin: 0;
  padding: 0;
}

.bu-pros-csv-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 22rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-xs);
}

.bu-pros-csv-rowitem {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--structure-gap-sm);
  padding: var(--structure-gap-xs) var(--structure-gap-sm);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  border-color: var(--theme-border-subtle, currentColor);
}

.bu-pros-csv-rowitem[data-outcome="error"] {
  border-width: 2px;
  border-color: var(--theme-border-active, currentColor);
}

.bu-pros-csv-rownum {
  font-weight: var(--structure-weight-medium);
}

.bu-pros-csv-rowoutcome {
  text-transform: none;
  font-weight: var(--structure-weight-medium);
}

.bu-pros-csv-rowitem > .bu-text-sm {
  flex-basis: 100%;
}

.bu-pros-csv-tick {
  align-items: flex-start;
}

.bu-pros-csv-tick label {
  flex: 1 1 auto;
}

/* RW-23: an overdue call-back. The words ("Overdue: ...") and the "!" carry the meaning; the state colour (calendar-render.css, tokens only) only adds to them. */
.bu-pros-overdue {
  display: inline-block;
  padding: 0 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: currentColor;
  font-size: var(--structure-text-xs);
  font-weight: var(--structure-weight-bold);
}