/* =============================================================================
   ehr_style_15_stablepage_transfer.css — Transfer panel      2026-08-30

   The Transfer action card on the stable page (incJS_17_stablepage_transfer).
   Deliberately built from ehr_style_09_stablepage_auction.css's vocabulary --
   same paddings, same 11/12/13px scale, same slate palette -- because the two
   panels open into the SAME container from adjacent cards. A panel that looked
   different would read as a different part of the site.

   No framework. No @import. Class-prefixed shl_xfer_ throughout so nothing
   here can reach another screen.
   ============================================================================= */
/* QA17_20260924: Auction + Transfer panels restyled TOGETHER (they open into the same container from neighbouring
   cards) onto the theme variables, so they follow main / derby / dark / light -- the old slate text (#1e293b) was
   near-invisible on dark-theme rows. Buttons = will2's .btn-secondary look. Warning amber and ok/bad green/red
   keep their colours: they carry meaning. */


.shl_xfer_panel {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shl_xfer_title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ehr-text);
  border-bottom: 1px solid var(--ehr-primary-table-border);
  padding-bottom: 6px;
}

/* The consequences line. Sits ABOVE the input on purpose: the rules that
   decide whether this will work (unraced only, group moves are free) have to
   be read before the stable name is typed, not after it is refused. */
.shl_xfer_hint {
  font-size: 11px;
  color: var(--ehr-text-muted);
  line-height: 1.5;
  max-width: 62ch;
}

.shl_xfer_label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ehr-text-light);
}

.shl_xfer_input {
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--ehr-border);
  background: var(--ehr-bg-surface);
  color: var(--ehr-text);
  border-radius: 4px;
  width: 100%;
  max-width: 280px;
  font-family: inherit;
}

.shl_xfer_input:focus {
  outline: none;
  border-color: var(--ehr-primary-accent);
  box-shadow: 0 0 0 2px rgba(var(--ehr-primary-light-rgb), 0.25);
}

.shl_xfer_input[disabled] {
  background: var(--ehr-bg);
  color: var(--ehr-text-muted);
}

/* ── The status line ─────────────────────────────────────────────────────────
   One element, three states, written only by shl_xferNote. min-height holds
   the row open while it is empty so the confirm button does not jump up and
   down as the answer arrives and clears -- a moving button is a mis-click
   waiting to happen on a control that gives a horse away. */
.shl_xfer_note {
  font-size: 12px;
  line-height: 1.45;
  min-height: 17px;
}

.shl_xfer_note_busy { color: var(--ehr-text-muted); font-style: italic; }
.shl_xfer_note_ok   { color: #2e7d32; }
.shl_xfer_note_bad  { color: #c62828; }

.shl_xfer_btn {
  align-self: flex-start;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ehr-button-dark-bg-text);
  background: var(--ehr-primary-light);
  border: 1px solid var(--ehr-primary-table-header-color);
  border-radius: 10px;
  cursor: pointer;
}

.shl_xfer_btn:hover:not([disabled]) { background: var(--ehr-primary-light); }   /* will2's .btn-secondary has no hover shade */

/* Disabled is the DEFAULT state of this button -- it only enables once the
   server has confirmed the destination -- so it has to look unmistakably
   inert rather than merely dimmed. */
.shl_xfer_btn[disabled] {
  background: var(--ehr-border);
  border-color: var(--ehr-border);
  color: var(--ehr-text-muted);
  cursor: not-allowed;
}

/* The action card itself, alongside Management / Auct / Note. */
.shl_action_card.shl_xfer_card .shl_action_card_label { white-space: nowrap; }

@media (max-width: 520px) {
  .shl_xfer_input { max-width: 100%; }
  .shl_xfer_btn   { align-self: stretch; text-align: center; }
}