/* trading.css: Trading Square (gifts, deliveries, trades); staff waitlist; invite codes. */
/* ── Trading Square (gifts/deliveries/trades) ─────────────────────────── */
.offer-builder__section {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px 16px;
    margin-bottom: 16px;
}
/* The gift/deliver/trade compose forms and the Trade card's own "Add My Side" form
   all wrap `tradeOfferBuilder` (currency inputs + item/pet pickers) — real width-hungry
   content, not the app's typical narrow single-field form the global `form` rule (under
   "FORMS") is sized for. Opts out the same way `.marketplace-bulk-form` does. */
.offer-builder-form { max-width: none; }
.offer-builder__section legend { padding: 0 4px; }
.offer-builder__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.offer-builder__row:last-child { border-bottom: none; }
.offer-builder__row input[type="number"] { max-width: 90px; margin-left: auto; }
/* A row/button becomes part of the offer the moment a qty > 0 is entered or a pet is
   clicked: this highlight (plus the .offer-builder__check mark and the live "You're
   offering" summary below) is what actually signals that, since neither previously had
   any visible feedback: the item row had no state change at all, and the pet button's
   old .is-active class had no matching CSS rule anywhere in this file. */
.offer-builder__row.is-selected {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}
.offer-builder__check {
    color: var(--color-primary);
    font-weight: 700;
}
.offer-builder__row-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.offer-pet-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) { .offer-pet-pick:hover { border-color: var(--color-primary); } }
.offer-pet-pick:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.offer-pet-pick.is-selected {
    border-color: var(--color-primary);
    background: var(--bg-hover);
}
.offer-builder__summary {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.offer-builder__summary .offer-builder__row-list { margin-top: 6px; }
.offer-builder__row-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trade-sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 12px 0;
}
.trade-side {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
}
.history-row {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 14px;
}
.history-row__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.history-row__head .mono { margin-left: auto; color: var(--text-muted); }
.history-row__contents {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.history-row__side .eyebrow { display: block; margin-bottom: 4px; }
@media (max-width: 640px) {
    .history-row__contents { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .trade-sides { grid-template-columns: 1fr; }
}

/* ---- Staff: Waitlist (/staff/waitlist/) ---- */
/* Reuses .error-filters / .error-bulkbar / .staff-pagination wholesale: the
   two staff list tables are the same interaction, so only the state badges and
   the export strip are specific to this page. Deliberately NOT reusing
   .badge-unresolved for "Unsubscribed": that badge is red because an unresolved
   error needs action, whereas an unsubscribe is a legitimate finished state. */
.badge-waiting  { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-invited  { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-gone     { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-subtle); }
.waitlist-row--gone td { opacity: 0.55; }
.waitlist-staff__export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.waitlist-staff__export-note { color: var(--text-muted); font-size: 0.78rem; }

/* ---- Invite codes (/staff/invites/ and the player-facing /invites/) ---- */
/* Reuses the waitlist page's state badges, .staff-pagination and .staff-readouts:
   same table, same states. Only the two compose forms and the player's own
   code list need rules of their own. */
.invite-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; }
.invite-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: none; }
.invite-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); width: 100%; }
.invite-form input, .invite-form textarea { width: 100%; }
.invite-form--email textarea { resize: vertical; }
.field-hint { color: var(--text-muted); font-size: 0.74rem; font-weight: 400; }
.invite-row--spent td { opacity: 0.55; }

.invite-allowance { margin: 0 0 14px; color: var(--text-secondary); font-size: 0.9rem; }
.invite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.invite-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}
.invite-list__item--spent { opacity: 0.6; }
.invite-list__code { font-size: 1.05rem; font-weight: 700; letter-spacing: 2px; }
.invite-list__link { flex: 1 1 260px; min-width: 0; font-size: 0.78rem; }
.invite-list__meta { color: var(--text-muted); font-size: 0.76rem; margin-left: auto; }
.invite-referral-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.invite-referral-list__item { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; }