/* int_trade dashboard skin.
 *
 * This file exists because the CSP carries no 'unsafe-inline' for styles. The rules
 * below used to sit in a <style> block in base.html, where the browser blocked them
 * and the page still answered 200 — the failure mode this estate keeps paying for.
 * A stylesheet served from 'self' needs no nonce and cannot be forgotten.
 */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

.navbar { background-color: #fff; border-bottom: 1px solid #e9ecef; }
.sidebar { background-color: #f8f9fa; min-height: calc(100vh - 56px); }
.sidebar .nav-link.active { font-weight: 600; color: #0d6efd; }

.panel { min-height: 360px; }
.panel-state { display: none; }
.panel-state.is-active { display: block; }

.state-loading { text-align: center; padding: 24px; }
.state-empty { text-align: center; color: #6c757d; padding: 24px; }
.state-error {
  background-color: #f8d7da; color: #721c24;
  padding: 12px; border-radius: 4px; margin: 12px 0;
}

/* The Overview badges. HALT is the one control on this page that can stop the system,
 * so its state is a colour AND a word — a colour alone is unreadable to ~8% of men. */
.halt-on { background-color: #dc3545; }
.halt-off { background-color: #198754; }
.mode-shadow { background-color: #6c757d; }
.mode-live { background-color: #fd7e14; }

.metric-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; }
.metric-value { font-size: 1.25rem; font-weight: 600; }

.updated-at { font-size: 0.8rem; color: #6c757d; }

.busy { opacity: 0.6; pointer-events: none; }

/* The typed-LIVE gate. Conspicuous in the SOURCE, not only in the stylesheet — the
 * warning text is written in capitals in the template for the same reason. */
.live-gate { border: 2px solid #fd7e14; border-radius: 6px; padding: 12px; }

/* Market panel's variance-ratio gate status — outside a `.table`, so Bootstrap's own
 * `.table-danger`/`.table-warning` (scoped to table cells) would be a dead class here.
 * The status word itself already says "not permitted"/"permitted" — colour is a second
 * cue, not the only one, same reasoning as `.halt-on`/`.halt-off` above. */
.vr-not-permitted {
  background-color: #f8d7da; color: #721c24; padding: 2px 6px; border-radius: 4px;
}

/* ── The brand wordmark ──────────────────────────────────────────────────────────
 * Included by every top bar from templates/_brand.html. The crown is an inline SVG
 * taking `currentColor`, so ONE declaration colours it; there is no icon font in this
 * app and the CSP admits no origin that could serve one.
 *
 * The capitals are applied HERE and not typed into the template: a screen reader
 * announces a proper-cased word rather than spelling out an acronym, and if this
 * stylesheet ever fails to load the page degrades to a readable name.
 */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-crown { color: #d4af37; fill: currentColor; flex: 0 0 auto; }
.brand-name {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 1.05rem;
}

/* ── The public landing page (/login/, served at www.sternbergfinkel.com) ────────
 * Scoped to `body.landing` throughout. The seven authenticated screens never carry
 * that class, so nothing here can reach a panel, a badge or a table.
 *
 * `data-bs-theme="dark"` on the same element does the rest — Bootstrap 5.3.3's own
 * dark tokens give the card, the inputs, the labels and the alert their colours, so
 * there is no second form skin to keep in step with the first. What Bootstrap does
 * NOT give is black: its dark `--bs-body-bg` is #212529. The brief says black, so the
 * page and the top bar say #000 and the card sits a shade above it.
 */
body.landing { background-color: #000; }
.landing .navbar { background-color: #000; border-bottom: 1px solid #1c1c1c; }
.landing .navbar-brand, .landing .brand-name { color: #ffffff; }

.landing-shell { padding: 1rem 0 2rem; }

/* 1024x1536 at 910 KB. Unbounded it is taller than the viewport and pushes the form —
 * the only control on the page — below the fold on every laptop. `contain` keeps the
 * portrait undistorted at any column width; the source already has a black background,
 * so it dissolves into the page with no mask. */
#landing-broker {
  height: 74vh;
  max-height: min(74vh, 780px);
  width: auto; max-width: 100%;
  object-fit: contain;
}

.landing-tagline {
  color: #f1ece2;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.005em;
  margin-bottom: 1.75rem;
  max-width: 28ch;
}

.landing-card {
  background-color: #0b0c0e;
  border: 1px solid #26282c;
  border-radius: 10px;
}
.landing-card .card-body { padding: 1.75rem; }
.landing-card-title {
  font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: 1.25rem; color: #ffffff;
}
/* The one accent on the page, so the primary action reads as the brand's. */
.landing-card .btn-primary {
  background-color: #d4af37; border-color: #d4af37; color: #14110a; font-weight: 600;
}
.landing-card .btn-primary:hover:not(:disabled),
.landing-card .btn-primary:focus-visible:not(:disabled) {
  background-color: #e0bf51; border-color: #e0bf51; color: #14110a;
}

/* Vertical centring is lg-and-up ONLY, and deliberately so: at 1440x900 the block is
 * 666px tall inside an 836px well, so centring it is free. The 64px subtracted is the
 * MEASURED 59px navbar plus slack: at an exact 59 the page overflowed by 2px and grew a
 * scrollbar on a screen whose content fits. Stacked on a phone the same
 * content is TALLER than the viewport, and a centred grid whose content overflows clips
 * at the TOP — the tagline would be the part that disappears. `safe` is belt and braces
 * for the in-between widths. */
@media (min-width: 992px) {
  .landing-shell {
    display: grid;
    align-content: safe center;
    min-height: calc(100vh - 64px);
  }
}

@media (max-width: 991.98px) {
  /* Stacked: the portrait becomes a header image and must not cost the form the fold. */
  /* 26vh, not 34: at 34 the card's bottom landed 28px below a 390x844 fold, so the
   * one control on the page needed a scroll to reach. */
  #landing-broker { height: 26vh; max-height: 26vh; }
  .landing-tagline { max-width: none; text-align: center; }
  .landing-card-title { text-align: center; }
}