/* ================================================================
   Auction POC — auction.css
   Shared by listing/, item/, mine/, watchlist/. Requires tokens.css
   (design tokens, reset, .container, .page-content).
   ================================================================ */

/* Single source for the status palette used by chips/banners/pills
   below — avoids the same hex repeated ~15 times and the alpha-tier
   drift that causes. Two alpha tiers by convention: 15% for small
   chips/pills, 12% for larger blocks (banners, status messages). */
:root {
  --au-green: #52c41a;
  --au-red: #ff4d4f;
  --au-blue: #1890ff;
  --au-gray: #8c8c8c;
  --au-yellow: #faad14;
  /* "Lost" is a real negative outcome, not neutral — keep it visually
     distinct from "ended"/"not participating" gray. */
  --au-muted-red: #b3696a;
}

.au-wrap {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-5xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* ── Cross-page nav row (listing / item / mine / watchlist) ── */

.au-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.au-nav-link {
  font-size: 0.82rem;
  color: var(--color-text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.au-nav-link:hover {
  color: var(--color-text-primary);
}

/* ── Sign-in gate (mine / watchlist) ── */

.au-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-height));
  padding: var(--spacing-3xl) var(--spacing-xl);
}

.au-gate-box {
  max-width: 320px;
}

.au-gate-title {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.au-gate-sub {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  line-height: var(--line-height-sm);
}

.au-gate-box .au-btn-primary {
  margin-top: var(--spacing-lg);
}

/* ── Tabs (My Auctions) ── */

.au-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: var(--border-normal) solid var(--color-border-light);
}

.au-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-tertiary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.au-tab:hover {
  color: var(--color-text-primary);
}

.au-tab--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

.au-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── "Your status" chip variants (My Auctions cards) ── */

.au-chip-leading, .au-chip-won { background: color-mix(in srgb, var(--au-green) 15%, transparent); color: var(--au-green); }
.au-chip-outbid                { background: color-mix(in srgb, var(--au-red) 15%, transparent);   color: var(--au-red); }
.au-chip-lost                  { background: color-mix(in srgb, var(--au-muted-red) 15%, transparent); color: var(--au-muted-red); }

/* ── Watchlist card + unwatch action ── */

.au-watch-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.au-watch-item--removing {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.au-watch-item--error {
  outline: 2px solid var(--au-red);
  border-radius: var(--radius-lg);
}

.au-poc-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  border: var(--border-normal) solid var(--color-accent);
  border-radius: var(--radius-max);
  padding: 2px 10px;
  width: fit-content;
}

/* ── Listing: page header + filter ── */

.au-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  padding-bottom: var(--spacing-xl);
  border-bottom: var(--border-normal) solid var(--color-border-light);
  margin-bottom: var(--spacing-sm);
}

.au-page-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.au-page-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-bolder);
  color: var(--color-text-primary);
  line-height: var(--line-height-xs);
}

.au-page-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: var(--line-height-sm);
  max-width: 480px;
}

.au-filter-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.au-result-count {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

.au-label {
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-tertiary);
}

.au-label--changed {
  color: var(--au-yellow);
  transition: color 0.3s ease;
}

.au-select,
.au-input {
  appearance: none;
  background: var(--color-surface-overlay);
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 9px 12px;
  outline: none;
}

.au-select:focus,
.au-input:focus {
  border-color: var(--color-accent);
}

.au-select:disabled,
.au-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Listing: grid ── */

.au-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  transition: opacity 0.15s ease;
}

.au-card-link {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s;
}

.au-card-link:hover {
  border-color: var(--color-accent);
}

.au-card-image {
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-overlay);
  background-size: cover;
  background-position: center;
}

.au-card-image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 0.78rem;
}

.au-card-body {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.au-card-title {
  font-size: 0.92rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-sm);
}

.au-card-price {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

.au-card-meta {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

/* ── Status chips (shared by cards + detail) ── */

.au-chip {
  display: inline-block;
  width: fit-content;
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: var(--radius-max);
}

.au-chip-live      { background: color-mix(in srgb, var(--au-green) 15%, transparent); color: var(--au-green); }
.au-chip-scheduled { background: color-mix(in srgb, var(--au-blue) 15%, transparent);  color: var(--au-blue); }
.au-chip-ended     { background: color-mix(in srgb, var(--au-gray) 15%, transparent);  color: var(--au-gray); }

/* ── Status row (live/scheduled/ended chip + watch pill, item detail) ── */

.au-status-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* A <button> version of .au-chip — same pill shape, but reset to remove
   default button chrome and add the two watch/watching states. */
.au-chip-watch {
  background: color-mix(in srgb, var(--au-gray) 15%, transparent);
  color: var(--au-gray);
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.au-chip-watch:hover {
  background: color-mix(in srgb, var(--au-gray) 25%, transparent);
}

.au-chip-watch--active {
  background: color-mix(in srgb, var(--au-yellow) 15%, transparent);
  color: var(--au-yellow);
}

.au-chip-watch--active:hover {
  background: color-mix(in srgb, var(--au-yellow) 25%, transparent);
}

/* ── Empty / loading states ── */

.au-empty {
  padding: var(--spacing-3xl);
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.au-empty a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── Detail layout ── */

.au-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--spacing-2xl);
  margin-top: var(--spacing-md);
}

@media (max-width: 720px) {
  .au-detail-grid {
    grid-template-columns: 1fr;
  }
}

.au-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-overlay);
  aspect-ratio: 1 / 1;
}

.au-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.au-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.au-title {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: var(--font-weight-bolder);
  color: var(--color-text-primary);
  line-height: var(--line-height-xs);
}

.au-description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: var(--line-height-sm);
}

/* ── Winner banner ── */

.au-winner-banner {
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  padding: 10px 14px;
  border-radius: var(--radius-md);
}

.au-winner-banner--you    { background: color-mix(in srgb, var(--au-green) 12%, transparent);  color: var(--au-green); }
.au-winner-banner--other  { background: color-mix(in srgb, var(--au-gray) 12%, transparent);   color: var(--au-gray); }
.au-winner-banner--unsold { background: color-mix(in srgb, var(--au-yellow) 12%, transparent);  color: var(--au-yellow); }

/* ── Price row ── */

.au-price-row {
  display: flex;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  padding: var(--spacing-lg) 0;
  border-top: var(--border-normal) solid var(--color-border-light);
  border-bottom: var(--border-normal) solid var(--color-border-light);
}

.au-price-cell {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.au-price-label {
  font-size: 0.68rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.au-price-value {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bolder);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.au-price-value--sub {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
}

/* Countdown urgency — otherwise "time left" gets no more visual weight
   than the other two price cells regardless of how close it is to zero. */
.au-price-value--soon {
  color: var(--au-yellow);
}

.au-price-value--urgent {
  color: var(--au-red);
  font-weight: var(--font-weight-bolder);
}

/* ── Your status ── */

.au-your-status {
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  width: fit-content;
}

.au-your-status-leading, .au-your-status-won { background: color-mix(in srgb, var(--au-green) 12%, transparent); color: var(--au-green); }
.au-your-status-outbid                        { background: color-mix(in srgb, var(--au-red) 12%, transparent);   color: var(--au-red); }
.au-your-status-lost                          { background: color-mix(in srgb, var(--au-muted-red) 12%, transparent); color: var(--au-muted-red); }

/* ── Bid box ── */

.au-bid-box {
  background: var(--color-surface);
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.au-bid-input-row {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.au-bid-input-row .au-input {
  flex: 1;
}

.au-bid-hint {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-sm);
  line-height: var(--line-height-sm);
}

.au-bid-note {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: var(--border-normal) solid var(--color-border-light);
}

/* Neutral/informational by default (e.g. "Placing bid…") — errors get the
   --error modifier explicitly, rather than every status message defaulting
   to looking like a failure. */
.au-status {
  font-size: 0.82rem;
  font-weight: var(--font-weight-medium);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin-top: var(--spacing-sm);
  background: color-mix(in srgb, var(--au-yellow) 12%, transparent);
  color: var(--au-yellow);
}

.au-status--error {
  background: color-mix(in srgb, var(--au-red) 12%, transparent);
  color: var(--au-red);
}

.au-status--success {
  background: color-mix(in srgb, var(--au-green) 12%, transparent);
  color: var(--au-green);
}

.au-status-action {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}

/* ── Bid-history card-head actions (updated hint + refresh) ── */

.au-card-head-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.au-updated-hint {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

/* ── Buttons ── */

.au-btn-primary {
  background: var(--color-button);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-button-text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  padding: 9px 20px;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.au-btn-primary:hover {
  opacity: 0.88;
}

.au-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.au-btn-ghost {
  display: inline-block;
  background: none;
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 6px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.au-btn-ghost:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-primary);
}

.au-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Bid history card + table ── */

.au-card {
  background: var(--color-surface);
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

/* .au-detail's own children (nav / detail-grid / this card) aren't a flex
   column with a gap like .au-wrap's other direct children, so this needs
   its own top margin — matching .au-wrap's own inter-section gap size. */
.au-bid-history-card {
  margin-top: var(--spacing-lg);
}

.au-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.au-section-title {
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.au-table-wrap {
  overflow-x: auto;
}

.au-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.au-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.67rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  border-bottom: var(--border-normal) solid var(--color-border-light);
  white-space: nowrap;
}

.au-table td {
  padding: 8px 10px;
  color: var(--color-text-secondary);
  border-bottom: var(--border-normal) solid var(--color-border-light);
}

.au-table tr:last-child td {
  border-bottom: none;
}

/* ── Card management page ── */

.au-card-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.au-sandbox-legend {
  font-size: 0.78rem;
  color: var(--color-text-tertiary);
}

.au-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.au-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
}

.au-card-row-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.au-card-row-brand {
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.au-card-row-exp {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

.au-card-row-actions {
  display: flex;
  gap: var(--spacing-sm);
}