/* Shared UI components used across pages.
 *
 * IMPORTANT: This file does NOT define design tokens (CSS variables) —
 * each page defines its own :root vars before linking this stylesheet.
 *
 * Components below use a small set of vars with literal fallbacks, so
 * the file works correctly even if a page hasn't defined every token.
 * Cross-page color consistency depends on both pages defining the
 * SAME values for: --bg, --surface, --border, --border-bright, --accent,
 * --text. The "muted text" variable name differs between pages
 * historically (--text-mute on /sell, --text-dim on /), so this file
 * uses --ui-muted with a hardcoded fallback.
 */

/* --- Tab nav (BUY / SELL) --- */
.tab-nav {
  display: flex;
  border-bottom: 1px solid var(--border, #2a3138);
  margin-bottom: 28px;
  gap: 0;
}
.tab-nav a {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ui-muted, #8a9098);
  text-decoration: none;
  padding: 14px 28px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.tab-nav a:hover { color: var(--text, #e8e6e1); }
.tab-nav a.active {
  color: var(--accent, #c8ff00);
  border-bottom-color: var(--accent, #c8ff00);
}

/* --- Steam login chip (header) --- */
.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface, #161c22);
  border: 1px solid var(--border-bright, #38434f);
  padding: 8px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text, #e8e6e1);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: border-color 120ms;
  cursor: pointer;
}
.auth-chip:hover { border-color: var(--accent, #c8ff00); }
.auth-chip img {
  width: 22px; height: 22px;
  border-radius: 2px;
}
.auth-chip .logout {
  color: var(--ui-muted, #8a9098);
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--border, #2a3138);
  font-size: 11px;
}
.auth-chip .logout:hover { color: var(--accent, #c8ff00); }

/* --- Steam login chip — dropdown variant (logged-in state) ---
 * When the user is logged in, the chip becomes a button that toggles
 * an attached menu with "MY ORDERS" and "LOGOUT".
 */
.auth-chip-wrap-inner {
  position: relative;
  display: inline-block;
}
.auth-chip-button {
  /* Inherits all .auth-chip styles. <button> resets matter though: */
  font: inherit;
  font-family: "JetBrains Mono", monospace;
  margin: 0;
}
.auth-chip-button:focus { outline: none; }
.auth-chip-button:focus-visible {
  border-color: var(--accent, #c8ff00);
}
.auth-chip-caret {
  margin-left: 4px;
  font-size: 10px;
  color: var(--ui-muted, #8a9098);
  transition: color 120ms;
}
.auth-chip-button:hover .auth-chip-caret { color: var(--accent, #c8ff00); }
.auth-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface, #161c22);
  border: 1px solid var(--border-bright, #38434f);
  display: none;
  z-index: 100;
  /* Match the chip's square aesthetic */
}
.auth-chip-menu.open { display: block; }
.auth-chip-menu-item {
  display: block;
  padding: 12px 16px;
  color: var(--text, #e8e6e1);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-top: 1px solid var(--border, #2a3138);
  transition: color 120ms, background 120ms;
}
.auth-chip-menu-item:first-child { border-top: none; }
.auth-chip-menu-item:hover {
  color: var(--accent, #c8ff00);
  background: var(--surface-2, #1c2228);
}

/* --- Order status badges ---
 * Used on /my-orders rows and /order/{id}-{token} header.
 * Color tokens already defined per-page: --warn, --accent, --good, --bad,
 * --text-mute. We map status -> color via modifier classes.
 */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.status-badge.s-awaiting   { color: var(--warn, #e09e3a); }
.status-badge.s-progress   { color: var(--accent, #c8ff00); }
.status-badge.s-completed  { color: var(--good, #6dc36a); }
.status-badge.s-declined   { color: var(--bad, #e04a48); }
.status-badge.s-cancelled  { color: var(--ui-muted, #8a9098); }
.status-badge.s-expired    { color: var(--ui-muted, #8a9098); }

/* --- Filter pills (used on /my-orders) ---
 * A row of mutually exclusive radio-like chips. Active chip uses the
 * accent border + accent text.
 */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.filter-pill {
  background: var(--surface, #161c22);
  border: 1px solid var(--border-bright, #38434f);
  color: var(--ui-muted, #8a9098);
  padding: 9px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.filter-pill:hover { color: var(--text, #e8e6e1); }
.filter-pill.active {
  color: var(--accent, #c8ff00);
  border-color: var(--accent, #c8ff00);
}

/* --- Order list (used on /my-orders) ---
 * Each row is a card that's also a clickable link to /order/{id}-{token}.
 * Layout: status | items thumbnail + count | total | created | payment | chevron
 * Grid-based so it stays neat at all widths.
 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--surface, #161c22);
  border: 1px solid var(--border, #2a3138);
  color: var(--text, #e8e6e1);
  text-decoration: none;
  transition: border-color 120ms;
}
.order-row:hover { border-color: var(--accent, #c8ff00); }
.order-row .or-status { /* status badge column */ }
.order-row .or-items {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.order-row .or-items-thumb {
  width: 40px;
  height: 40px;
  background: var(--surface-2, #1c2228);
  flex-shrink: 0;
  object-fit: contain;
}
.order-row .or-items-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.order-row .or-items-name {
  font-family: "Sora", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8e6e1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.order-row .or-items-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ui-muted, #8a9098);
  letter-spacing: 0.05em;
}
.order-row .or-total {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e8e6e1);
  text-align: right;
}
.order-row .or-total .cny {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--ui-muted, #8a9098);
  margin-top: 2px;
}
.order-row .or-created {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ui-muted, #8a9098);
  text-align: right;
  letter-spacing: 0.05em;
}
.order-row .or-payment {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ui-muted, #8a9098);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 800px) {
  .order-row {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .order-row .or-total,
  .order-row .or-created,
  .order-row .or-payment {
    grid-column: 1 / -1;
    text-align: left;
  }
  .order-row .or-items-name { max-width: 100%; }
}