/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Trader Dashboard */
:root { --ink: #1a1a19; --muted: #6b6b68; --surface: #fcfcfb; --line: #e4e4e1; --up: #008300; --down: #e34948; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 15px/1.4 system-ui, -apple-system, sans-serif; }
.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
.controls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.controls input, .controls select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.controls input { width: 8em; text-transform: uppercase; }
.controls input[type=submit] { width: auto; text-transform: none; cursor: pointer; }
.alert { padding: 10px 12px; border: 1px solid var(--down); border-radius: 6px; color: var(--down); }
.stats { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; }
.stat .label { font-size: 13px; color: var(--muted); }
.stat .value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .value.up { color: var(--up); }
.stat .value.down { color: var(--down); }
.stat .note { font-size: 13px; color: var(--muted); }
.chart { position: relative; height: 460px; }

/* Sign in */
.page.narrow { max-width: 360px; }
.topbar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.who { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: var(--muted); }
.who form { display: inline; }
.linklike { background: none; border: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.login { display: flex; flex-direction: column; gap: 12px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.login input[type=submit] { align-self: flex-start; cursor: pointer; }