/*
 * TradeLab — GUI design system (front-end only)
 * ==============================================
 * Implements the team-approved Figma file "Trading Simulator — GUI Design".
 * Link from every TradeLab page:  <link rel="stylesheet" href="/tradelab/tradelab.css">
 *
 * Tokens mirror the Figma variables (--tl-*). Color contract from the design:
 *   blue = action or selection · green/red = price movement only · muted = secondary text
 * Type: Inter (UI) + IBM Plex Mono (numbers). 8px spacing rhythm, 6px corners.
 *
 * Components: .tl-nav, .tl-btn(.primary/.secondary), .tl-badge, .tl-field, .tl-panel,
 * .tl-state(.error/.empty/.confirm/.frozen), .tl-table, .tl-modal, .tl-tabs.
 */

:root {
  --tl-canvas: #090f1c;
  --tl-surface: #101a2b;
  --tl-raised: #17243a;
  --tl-border: #2a3950;
  --tl-text: #e7edf7;
  --tl-muted: #9aaac1;
  --tl-blue: #477bf5;
  --tl-blue-soft: #1c3156;
  --tl-green: #56cea0;
  --tl-red: #f18089;
  --tl-gap8: 8px;
  --tl-gap16: 16px;
  --tl-radius: 6px;
  --tl-font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tl-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body.tl {
  margin: 0;
  min-height: 100vh;
  background: var(--tl-canvas);
  color: var(--tl-text);
  font: 400 13px/20px var(--tl-font);
}

body.tl a { color: inherit; text-decoration: none; }
.tl h1, .tl h2, .tl h3, .tl p { margin: 0; }

/* ---- Type styles (TradeLab/*) ---- */
.tl-heading { font: 600 24px/32px var(--tl-font); }
.tl-section { font: 600 16px/24px var(--tl-font); }
.tl-body { font: 400 13px/20px var(--tl-font); }
.tl-label { font: 500 12px/18px var(--tl-font); color: var(--tl-muted); }
.tl-metric { font: 400 24px/32px var(--tl-mono); }
.tl-number { font: 400 13px/20px var(--tl-mono); }
.tl-muted { color: var(--tl-muted); }
.tl-up { color: var(--tl-green); }
.tl-down { color: var(--tl-red); }
.tl-right { text-align: right; }

/* ---- Page shell ---- */
.tl-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 24px 0;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tl-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tl-page-head p { color: var(--tl-muted); margin-top: 8px; }

.tl-footer {
  margin-top: auto;
  padding: 16px 0 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font: 500 12px/18px var(--tl-font);
  color: var(--tl-muted);
}

/* ---- Navigation ---- */
.tl-nav {
  background: var(--tl-surface);
  border-bottom: 1px solid var(--tl-border);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.tl-brand { display: flex; flex-direction: column; width: 230px; }
.tl-brand strong { font: 600 16px/24px var(--tl-font); }
.tl-brand span { font: 500 12px/18px var(--tl-font); color: var(--tl-muted); }
.tl-nav-links { display: flex; gap: 32px; align-self: stretch; }
.tl-nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--tl-text);
}
.tl-nav-links a:not([aria-current="page"]) { color: var(--tl-text); opacity: 0.85; }
.tl-nav-links a:hover { opacity: 1; }
.tl-nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--tl-blue);
}
.tl-nav-spacer { flex: 1; }
.tl-nav-session { display: flex; align-items: center; gap: 16px; }
.tl-nav-session .tl-label { color: var(--tl-muted); }
.tl-nav-session a { font: 500 12px/18px var(--tl-font); color: var(--tl-muted); }
.tl-nav-session a:hover { color: var(--tl-text); }

/* ---- Buttons ---- */
.tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tl-gap8);
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  background: var(--tl-raised);
  color: var(--tl-text);
  font: 500 12px/18px var(--tl-font);
  cursor: pointer;
}
.tl-btn:hover { border-color: var(--tl-blue); }
.tl-btn.primary { background: var(--tl-blue); }
.tl-btn.primary:hover { filter: brightness(1.08); }
.tl-btn.block { width: 100%; }
.tl-btn:disabled,
.tl-btn[aria-disabled="true"] {
  background: var(--tl-surface);
  color: var(--tl-muted);
  cursor: not-allowed;
  border-color: var(--tl-border);
  filter: none;
}
.tl-btn:focus-visible, .tl-field input:focus-visible, .tl-field select:focus-visible,
.tl-search:focus-visible, .tl-switcher:focus-visible, button:focus-visible {
  outline: 2px solid var(--tl-blue);
  outline-offset: 2px;
}

/* ---- Badge ---- */
.tl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 16px;
  background: var(--tl-blue-soft);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  font: 500 12px/18px var(--tl-font);
  white-space: nowrap;
}

/* ---- Panels ---- */
.tl-panel {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  padding: 16px;
}
.tl-panel > .tl-section { margin-bottom: 8px; }
.tl-stack { display: flex; flex-direction: column; gap: 8px; }
.tl-row { display: flex; align-items: center; gap: 16px; }
.tl-row.between { justify-content: space-between; }

/* ---- Fields ---- */
.tl-field { display: flex; flex-direction: column; gap: 6px; }
.tl-field > span { font: 500 12px/18px var(--tl-font); color: var(--tl-muted); }
.tl-field input, .tl-field select, .tl-search {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  background: var(--tl-canvas);
  color: var(--tl-text);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  font: 400 13px/20px var(--tl-font);
}
.tl-field input[type="number"], .tl-field input.mono { font-family: var(--tl-mono); }
.tl-field input::placeholder, .tl-search::placeholder { color: var(--tl-muted); }
.tl-field input[aria-invalid="true"] { border-color: var(--tl-red); }
.tl-field .tl-hint { font: 500 12px/18px var(--tl-font); color: var(--tl-muted); }
.tl-field .tl-error { font: 500 12px/18px var(--tl-font); color: var(--tl-red); }
.tl-search { min-height: 36px; padding: 8px; font: 500 12px/18px var(--tl-font); }

/* ---- Feedback states ---- */
.tl-state {
  background: var(--tl-canvas);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  padding: 16px;
}
.tl-state h3 { font: 600 16px/24px var(--tl-font); margin-bottom: 4px; }
.tl-state p { color: var(--tl-muted); }
.tl-state.error { border-color: var(--tl-red); }
.tl-state.error h3 { color: var(--tl-red); }
.tl-state.confirm { border-color: var(--tl-green); }
.tl-state.confirm h3 { color: var(--tl-green); }
.tl-state.frozen { background: var(--tl-surface); }

/* ---- Tabs ---- */
.tl-tabs { display: flex; gap: 32px; align-items: center; margin-bottom: 8px; }
.tl-tab {
  background: none;
  border: 0;
  padding: 0;
  color: var(--tl-muted);
  font: 400 13px/20px var(--tl-font);
  cursor: pointer;
}
.tl-tab[aria-selected="true"] { color: var(--tl-text); font: 600 16px/24px var(--tl-font); }
.tl-tab:hover { color: var(--tl-text); }

/* ---- Tables (grid-based so columns match Figma proportions) ---- */
.tl-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tl-table th {
  background: var(--tl-raised);
  color: var(--tl-muted);
  font: 500 12px/18px var(--tl-font);
  text-align: left;
  padding: 4px 8px;
}
.tl-table th:first-child { border-radius: var(--tl-radius) 0 0 var(--tl-radius); }
.tl-table th:last-child { border-radius: 0 var(--tl-radius) var(--tl-radius) 0; }
.tl-table td { padding: 6px 8px; height: 36px; }
.tl-table .num, .tl-table th.num { text-align: right; font-family: var(--tl-mono); }
.tl-table th.num { font-family: var(--tl-font); }
.tl-table tr.you td { background: var(--tl-blue-soft); }
.tl-table tr.you td:first-child { border-radius: var(--tl-radius) 0 0 var(--tl-radius); }
.tl-table tr.you td:last-child { border-radius: 0 var(--tl-radius) var(--tl-radius) 0; }

/* ---- Modal (prototype review/confirmation frames) ---- */
.tl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.tl-modal-backdrop[hidden] { display: none; }
.tl-modal {
  width: 100%;
  max-width: 480px;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tl-modal .tl-actions { display: flex; flex-direction: column; gap: 8px; }
.tl-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.tl-summary dt { color: var(--tl-muted); }
.tl-summary dd { margin: 0; text-align: right; font-family: var(--tl-mono); }

/* ======================== Trading workspace ======================== */
.tl-operate { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tl-operate .tl-label { text-transform: uppercase; }
.tl-switcher-wrap { position: relative; }
.tl-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 474px;
  min-height: 48px;
  padding: 12px;
  background: var(--tl-raised);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  color: var(--tl-text);
  font: 400 13px/20px var(--tl-font);
  cursor: pointer;
}
.tl-switcher .caret { color: var(--tl-muted); }
.tl-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 15;
  background: var(--tl-raised);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-menu[hidden] { display: none; }
.tl-menu button {
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--tl-radius);
  padding: 8px;
  color: var(--tl-text);
  font: 400 13px/20px var(--tl-font);
  cursor: pointer;
}
.tl-menu button:hover { border-color: var(--tl-border); }
.tl-menu button[aria-selected="true"] { background: var(--tl-blue-soft); }
.tl-menu small { display: block; color: var(--tl-muted); font: 500 12px/18px var(--tl-font); }

.tl-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding: 10px 16px;
}
.tl-strip .tl-metric { display: block; }

.tl-workspace {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr) 312px;
  gap: 16px;
  align-items: stretch;
}
.tl-market { display: flex; flex-direction: column; gap: 8px; }
.tl-market-head {
  display: flex;
  justify-content: space-between;
  font: 500 12px/18px var(--tl-font);
  color: var(--tl-muted);
  padding: 0 6px;
}
.tl-market-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.tl-market-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 6px;
  min-height: 43px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--tl-radius);
  color: var(--tl-text);
  text-align: left;
  cursor: pointer;
  font: 500 12px/18px var(--tl-font);
}
.tl-market-row:hover { border-color: var(--tl-border); }
.tl-market-row[aria-selected="true"] { background: var(--tl-blue-soft); border-color: var(--tl-border); }
.tl-market-row .co { display: block; color: var(--tl-muted); }
.tl-market-row .quote { text-align: right; }
.tl-market-row .quote .tl-number { display: block; }

.tl-chart-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tl-chart-price { display: flex; align-items: baseline; gap: 16px; }
.tl-intervals { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font: 500 12px/18px var(--tl-font); }
.tl-intervals button {
  background: none; border: 0; padding: 4px 0;
  color: var(--tl-muted); font: inherit; cursor: pointer;
}
.tl-intervals button[aria-pressed="true"] { color: var(--tl-text); box-shadow: inset 0 -2px var(--tl-blue); }
.tl-intervals .candles { color: var(--tl-muted); }
.tl-chart { flex: 1; min-height: 300px; border-top: 1px solid var(--tl-border); }

.tl-ticket { display: flex; flex-direction: column; gap: 8px; }
.tl-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--tl-canvas);
  border-radius: var(--tl-radius);
}
.tl-segment button {
  min-height: 40px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--tl-radius);
  font: 400 13px/20px var(--tl-font);
  cursor: pointer;
}
.tl-segment .buy { color: var(--tl-green); }
.tl-segment .sell { color: var(--tl-red); }
.tl-segment button[aria-pressed="true"] { background: var(--tl-blue-soft); border-color: var(--tl-border); }
.tl-ticket .tl-metric { display: block; }

/* ======================== Portfolios ======================== */
.tl-split { display: grid; grid-template-columns: 302px minmax(0, 1fr); gap: 16px; align-items: start; }
.tl-portfolio-list { display: flex; flex-direction: column; gap: 8px; }
.tl-portfolio-card {
  text-align: left;
  display: block;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--tl-radius);
  padding: 12px;
  color: var(--tl-text);
  cursor: pointer;
  font: inherit;
}
.tl-portfolio-card:hover { border-color: var(--tl-border); }
.tl-portfolio-card[aria-selected="true"] { background: var(--tl-blue-soft); border-color: var(--tl-border); }
.tl-portfolio-card strong { display: block; font: 600 16px/24px var(--tl-font); }
.tl-portfolio-card .tl-label { display: block; }
.tl-portfolio-card .tl-metric { display: block; }
.tl-eyebrow { font: 500 12px/18px var(--tl-font); color: var(--tl-muted); text-transform: uppercase; }
.tl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ======================== Competitions ======================== */
.tl-comp-tabs { display: flex; align-items: center; gap: 24px; }
.tl-comp-card {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--tl-radius);
  padding: 12px;
  color: var(--tl-text);
  font: inherit;
  cursor: pointer;
}
.tl-comp-card[aria-selected="true"] { background: var(--tl-blue-soft); border-color: var(--tl-border); }
.tl-comp-card strong { display: block; font: 600 16px/24px var(--tl-font); }
.tl-comp-card .tl-number { display: block; color: var(--tl-muted); }
.tl-comp-group { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }
.tl-overview { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; }
.tl-overview .tl-metric { display: block; }

/* ======================== Manager ======================== */
.tl-manager { display: grid; grid-template-columns: minmax(0, 1fr) 516px; gap: 16px; align-items: start; }
.tl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.tl-numbered { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--tl-muted); }
.tl-numbered li::before { content: attr(data-n) "  "; color: var(--tl-muted); font-family: var(--tl-mono); }
.tl-invite { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }

/* ======================== Auth ======================== */
.tl-auth { max-width: 1440px; margin: 0 auto; padding: 36px 48px 0; display: flex; flex-direction: column; gap: 24px; min-height: 100vh; }
.tl-auth-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tl-auth-head strong { display: block; font: 600 24px/32px var(--tl-font); }
.tl-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.tl-auth-card { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.tl-auth-card form { display: flex; flex-direction: column; gap: 16px; max-width: 270px; }
.tl-auth-card form .tl-btn { width: 100%; }
.tl-auth-card .tl-state { max-width: 410px; }

/* ======================== Responsive ======================== */
@media (max-width: 1200px) {
  .tl-workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .tl-ticket-panel { grid-column: 1 / -1; }
  .tl-manager { grid-template-columns: 1fr; }
  .tl-switcher { min-width: 320px; }
}
@media (max-width: 900px) {
  .tl-nav { gap: 16px; padding: 0 12px; overflow-x: auto; }
  .tl-brand { width: auto; }
  .tl-nav-session .tl-label { display: none; }
  .tl-workspace, .tl-split, .tl-auth-grid, .tl-invite, .tl-stats, .tl-form-grid { grid-template-columns: 1fr; }
  .tl-strip { grid-template-columns: 1fr 1fr; gap: 16px; }
  .tl-overview { grid-template-columns: 1fr; }
  .tl-panel { overflow-x: auto; }
  .tl-page { padding: 16px 12px 0; }
  .tl-auth { padding: 24px 16px 0; }
}