/* Binance-style theme: dark background, their signature yellow accent,
   and their exact green/red for gains/losses - deliberately matching
   Binance's own palette since this dashboard exists to manage a bot
   trading ON Binance, so the visual language should feel continuous
   with the exchange itself. */
:root {
  --bg: #0b0e11;
  --bg-panel: #181a20;
  --bg-panel-2: #1e2329;
  --border: #2b3139;
  --text: #eaecef;
  --text-dim: #848e9c;
  --accent: #fcd535;
  --accent-rgb: 252, 213, 53;
  --green: #0ecb81;
  --green-rgb: 14, 203, 129;
  --red: #f6465d;
  --red-rgb: 246, 70, 93;
  --amber: #f0b90b;
  --amber-rgb: 240, 185, 11;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.panel h2 {
  margin: 0 0 16px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

h1 { font-size: 22px; margin: 0 0 4px; }
.subtitle { color: var(--text-dim); margin: 0 0 24px; }

a { color: var(--accent); }

input, select, button, textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}

input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }

button {
  cursor: pointer;
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0e11; /* dark text on the yellow accent - Binance's own convention, since white-on-yellow is poor contrast */
  font-weight: 600;
  transition: opacity 0.15s;
}
button:hover { opacity: 0.88; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary { background: var(--bg-panel-2); border-color: var(--border); color: var(--text); }
button.danger { background: var(--red); border-color: var(--red); }

label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 120px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; }
.badge.ok { background: rgba(var(--green-rgb), 0.15); color: var(--green); }
.badge.warn { background: rgba(var(--amber-rgb), 0.15); color: var(--amber); }
.badge.bad { background: rgba(var(--red-rgb), 0.15); color: var(--red); }
.badge.neutral { background: rgba(132, 142, 156, 0.15); color: var(--text-dim); }

.pos { color: var(--green); }
.neg { color: var(--red); }

.error-box {
  background: rgba(var(--red-rgb), 0.1);
  border: 1px solid rgba(var(--red-rgb), 0.3);
  color: var(--red);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  display: none;
}
.error-box.show { display: block; }

.success-box {
  background: rgba(var(--green-rgb), 0.1);
  border: 1px solid rgba(var(--green-rgb), 0.3);
  color: var(--green);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  display: none;
}
.success-box.show { display: block; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.topbar nav { display: flex; align-items: center; }
.topbar nav a { margin-left: 16px; color: var(--text-dim); text-decoration: none; font-size: 13px; }
.topbar nav a:hover, .topbar nav a.active { color: var(--text); }

.nav-dropdown { position: relative; }
.nav-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0; /* the nav sits at the right edge of the page - anchor here, not left, or it overflows off-screen */
  width: 520px;
  max-width: min(520px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  z-index: 50;
}
.nav-dropdown-panel.open { display: block; }
.nav-dropdown-header {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal { max-width: 420px; width: 90%; }

.muted { color: var(--text-dim); font-size: 12px; }
.empty-state { color: var(--text-dim); font-style: italic; padding: 12px 0; }

.main-symbol-toggle, .intraday-symbol-toggle { text-decoration: none; font-weight: 600; }
.main-symbol-toggle:hover, .intraday-symbol-toggle:hover { text-decoration: underline; }
.symbol-detail-inner {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  /* This panel renders inside a <td> of the symbols table, and on
     mobile `table { white-space: nowrap }` (below) is an INHERITED
     property - it cascades down into every descendant here too unless
     reset, forcing the long leverage/stop-loss disclaimer paragraphs to
     refuse wrapping and blow this panel out to their own full intrinsic
     text width (found live: ~1300px wide inside a 375px viewport,
     scrollable only within the outer table so the page itself didn't
     visibly break, but the panel's own content was unreachable without
     scrolling sideways). Nested tables (the tier ladder) re-inherit
     nowrap correctly from their own `table` rule regardless of this. */
  white-space: normal;
}
.symbol-detail-tiers { flex: 1; min-width: 200px; }
.symbol-detail-controls { flex: 2; min-width: 280px; }
.inline-checkbox { display: flex; align-items: center; gap: 6px; margin: 0; flex: 0 0 auto; }
.inline-checkbox input { margin: 0; }

/* ---------------------------------------------------------------------
   Mobile responsiveness. This dashboard previously had no breakpoints
   at all - every table (some with 9-10 columns, e.g. the risk-migration
   table) rendered at full desktop width regardless of viewport, forcing
   the whole PAGE to scroll horizontally on any phone, and the topbar's
   title + nav fought for space on narrow screens. Two techniques below:
   1) tables scroll horizontally WITHIN themselves (never the page body)
      via `table { display: block; overflow-x: auto }` - this keeps
      thead/tbody/tr/td at their normal table-layout display roles (only
      the outer <table> becomes a block-level scroll boundary), so
      columns still align correctly, without needing a wrapper <div>
      around every single table across 3 HTML files.
   2) layout primitives (topbar, .row, buttons/inputs) get touch-
      friendlier sizing and stack vertically once horizontal space runs
      out, rather than just shrinking illegibly.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  .container { padding: 16px 12px 64px; }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .topbar nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .topbar nav a { margin-left: 0; margin-right: 16px; padding: 4px 0; }

  .panel { padding: 14px; }
  .panel h2 { font-size: 13px; }

  h1 { font-size: 19px; }

  /* Every field takes its own full-width row on mobile instead of
     cramming several 120px-min-width fields onto one line and forcing
     the page itself wider than the viewport. */
  .row > * { flex: 1 1 100%; min-width: 0; }

  /* Real bug (found from a live phone screenshot): the per-symbol
     leverage/margin/stop-loss detail panel's two-column layout (tiers
     table + controls, min-width 200px/280px = 480px combined) used to
     be set via INLINE style attributes in the JS template, which beat
     the `.row > *` rule above on specificity alone - the panel never
     actually collapsed to one column on mobile, no matter how narrow
     the screen. Moving those two columns to real classes (see
     .symbol-detail-tiers/.symbol-detail-controls above) lets this
     override win the way `.row > *` was always meant to. */
  .symbol-detail-tiers, .symbol-detail-controls { flex: 1 1 100%; min-width: 0; }

  /* The table itself becomes the horizontal-scroll boundary - the page
     body never scrolls sideways, only the table does, and only as far
     as its own content requires. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  table thead, table tbody { display: table; width: 100%; table-layout: auto; }
  th, td { padding: 8px; font-size: 12px; }

  /* Real bug (found from a live phone screenshot): `.nav-dropdown-panel`
     is `position:absolute`, which sizes/positions relative to its
     nearest POSITIONED ancestor - `.nav-dropdown`, which is only as
     wide as the "Market Scan ▾" link's own text. `width:100%` therefore
     meant "100% of that tiny link," not "100% of the viewport," so the
     panel rendered narrow and its 5-column table got badly clipped.
     `position:fixed` sizes against the VIEWPORT instead, sidestepping
     the narrow-ancestor problem entirely - fixed near the top of the
     screen with real left/right margins, rather than anchored to a
     small inline link. */
  .nav-dropdown-panel {
    position: fixed;
    top: 64px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 96px);
  }

  /* Bigger, easier-to-hit tap targets on touch screens - the desktop
     8px/10px padding is comfortable for a mouse pointer but tight for a
     fingertip. */
  input, select, button, textarea { padding: 10px 12px; font-size: 15px; }
  th, td { white-space: nowrap; }
}

@media (max-width: 480px) {
  h1 { font-size: 17px; }
  .subtitle { font-size: 12px; }
  .modal { width: 94%; }
}