/* VSR LIVE dashboard — auto dark/light via prefers-color-scheme */

:root {
  /* surfaces */
  --bg-base: #0a0b0e;
  --bg-sidebar: #0c0e12;
  --bg-card: #14171d;
  --bg-card-hover: #1c2029;
  --bg-card-hover-strong: #232833;
  --bg-table-header: #0f1217;
  --bg-pill-muted: #2a2d34;

  /* borders */
  --border: #1f232c;
  --border-strong: #2a2f39;
  --border-soft: #1a1d24;
  --border-input-focus: #4a5060;

  /* text */
  --text: #d8dde4;
  --text-strong: #f1f3f6;
  --text-muted: #6c7280;
  --text-soft: #98a0ac;
  --text-secondary: #9ba2ad;

  /* accent */
  --pos: #5dd39e;
  --neg: #ef6f6c;
  --warn: #f0b562;
  --info: #79a4d9;

  /* pills */
  --pill-pos-bg: #1d3a2a;
  --pill-pos-fg: #5dd39e;
  --pill-neg-bg: #3a1d22;
  --pill-neg-fg: #ef6f6c;
  --pill-info-bg: #1f2a3a;
  --pill-info-fg: #79a4d9;
  --pill-warn-bg: #3a2a1f;
  --pill-warn-fg: #f0b562;

  /* nav */
  --nav-active-bg: #1c2029;
  --nav-active-fg: #ffffff;

  /* dots */
  --dot-green: #5dd39e;
  --dot-amber: #f0b562;
  --dot-red:   #ef6f6c;
  --dot-gray:  #6c7280;

  color-scheme: dark;
}

/* explicit overrides via data-theme — wins over media query */
:root[data-theme="dark"] {
  --bg-base: #0a0b0e;
  --bg-sidebar: #0c0e12;
  --bg-card: #14171d;
  --bg-card-hover: #1c2029;
  --bg-card-hover-strong: #232833;
  --bg-table-header: #0f1217;
  --bg-pill-muted: #2a2d34;
  --border: #1f232c;
  --border-strong: #2a2f39;
  --border-soft: #1a1d24;
  --border-input-focus: #4a5060;
  --text: #d8dde4;
  --text-strong: #f1f3f6;
  --text-muted: #6c7280;
  --text-soft: #98a0ac;
  --text-secondary: #9ba2ad;
  --pos: #5dd39e;
  --neg: #ef6f6c;
  --warn: #f0b562;
  --info: #79a4d9;
  --pill-pos-bg: #1d3a2a;
  --pill-pos-fg: #5dd39e;
  --pill-neg-bg: #3a1d22;
  --pill-neg-fg: #ef6f6c;
  --pill-info-bg: #1f2a3a;
  --pill-info-fg: #79a4d9;
  --pill-warn-bg: #3a2a1f;
  --pill-warn-fg: #f0b562;
  --nav-active-bg: #1c2029;
  --nav-active-fg: #ffffff;
  --dot-green: #5dd39e;
  --dot-amber: #f0b562;
  --dot-red:   #ef6f6c;
  --dot-gray:  #6c7280;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg-base: #f5f6f8;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #eef0f4;
  --bg-card-hover-strong: #e2e6ec;
  --bg-table-header: #f7f9fc;
  --bg-pill-muted: #e5e7eb;
  --border: #e3e6ec;
  --border-strong: #cbd0d8;
  --border-soft: #eef0f4;
  --border-input-focus: #94a3b8;
  --text: #1f2937;
  --text-strong: #0f172a;
  --text-muted: #6b7280;
  --text-soft: #4b5563;
  --text-secondary: #6b7280;
  --pos: #16a34a;
  --neg: #dc2626;
  --warn: #d97706;
  --info: #2563eb;
  --pill-pos-bg: #d1fae5;
  --pill-pos-fg: #065f46;
  --pill-neg-bg: #fee2e2;
  --pill-neg-fg: #991b1b;
  --pill-info-bg: #dbeafe;
  --pill-info-fg: #1e40af;
  --pill-warn-bg: #fed7aa;
  --pill-warn-fg: #9a3412;
  --nav-active-bg: #e5e7eb;
  --nav-active-fg: #0f172a;
  --dot-green: #16a34a;
  --dot-amber: #d97706;
  --dot-red:   #dc2626;
  --dot-gray:  #6b7280;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-base: #f5f6f8;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #eef0f4;
    --bg-card-hover-strong: #e2e6ec;
    --bg-table-header: #f7f9fc;
    --bg-pill-muted: #e5e7eb;

    --border: #e3e6ec;
    --border-strong: #cbd0d8;
    --border-soft: #eef0f4;
    --border-input-focus: #94a3b8;

    --text: #1f2937;
    --text-strong: #0f172a;
    --text-muted: #6b7280;
    --text-soft: #4b5563;
    --text-secondary: #6b7280;

    --pos: #16a34a;
    --neg: #dc2626;
    --warn: #d97706;
    --info: #2563eb;

    --pill-pos-bg: #d1fae5;
    --pill-pos-fg: #065f46;
    --pill-neg-bg: #fee2e2;
    --pill-neg-fg: #991b1b;
    --pill-info-bg: #dbeafe;
    --pill-info-fg: #1e40af;
    --pill-warn-bg: #fed7aa;
    --pill-warn-fg: #9a3412;

    --nav-active-bg: #e5e7eb;
    --nav-active-fg: #0f172a;

    --dot-green: #16a34a;
    --dot-amber: #d97706;
    --dot-red:   #dc2626;
    --dot-gray:  #6b7280;

    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-base); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-base); color: var(--text);
  font-size: 13px; line-height: 1.45;
  font-feature-settings: "tnum";
  min-height: 100vh;
  /* iOS smooth touch scroll */
  -webkit-overflow-scrolling: touch;
}
a { color: inherit; text-decoration: none; }

/* layout */
.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--bg-sidebar); border-right: 1px solid var(--border-soft);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { padding: 22px 22px 18px; position: relative; }
.brand-mark { font-size: 22px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-strong); }
.brand-sub  { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.18em; margin-top: 2px; }

/* hamburger */
.menu-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border-strong); border-radius: 6px;
  width: 38px; height: 34px;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.menu-toggle span {
  display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px;
  transition: transform .15s, opacity .15s;
}
.sidebar.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sidebar.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.sidebar.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav { flex: 1; display: flex; flex-direction: column; padding: 6px 10px; }
.nav-link {
  display: block; padding: 9px 14px; border-radius: 6px;
  color: var(--text-soft); font-size: 13px; margin-bottom: 1px; transition: background .12s;
}
.nav-link:hover { background: var(--bg-card); color: var(--text); }
.nav-link.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 500; }
.sidebar-footer { padding: 14px 22px; border-top: 1px solid var(--border-soft); font-size: 11px; }
.ws-status { font-weight: 600; }
.ws-status.ok  { color: var(--pos); }
.ws-status.err { color: var(--neg); }
.ws-sub { color: var(--text-muted); margin-top: 2px; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px 12px; border-bottom: 1px solid var(--border-soft);
}
.topbar h1 { font-size: 22px; font-weight: 600; color: var(--text-strong); }
.topbar-meta { font-size: 12px; color: var(--text-muted); flex: 1; text-align: right; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--bg-card-hover); border: 1px solid var(--border-strong); border-radius: 50%;
  color: var(--text); cursor: pointer; padding: 0; margin-left: 12px;
  font-size: 13px; line-height: 1;
  transition: background .12s, transform .12s;
}
.theme-toggle:hover { background: var(--bg-card-hover-strong); transform: rotate(15deg); }

.page { padding: 22px 28px 60px; max-width: 1320px; }

/* sections */
h2 { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.10em; margin: 24px 0 10px; }

/* hero cards */
.hero { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px;
}
.card .lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.07em; line-height: 1.3; min-height: 28px; }
.card .val { font-size: 22px; font-weight: 600; margin-top: 6px; }
.card .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* tables */
.table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 14px; border-bottom: 1px solid var(--border); text-align: left;
  white-space: nowrap; }
tr:last-child td { border-bottom: none; }
th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); font-weight: 500; background: var(--bg-table-header); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.bold { font-weight: 600; }

/* state colors */
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--text-muted); }
.warn { color: var(--warn); }

/* pills */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.pill-RES_WIN, .pill-WIN_TARGET { background: var(--pill-pos-bg); color: var(--pill-pos-fg); }
.pill-RES_LOSS, .pill-LOSS_PHANTOM { background: var(--pill-neg-bg); color: var(--pill-neg-fg); }
.pill-UNRESOLVED { background: var(--bg-pill-muted); color: var(--text-muted); }
.pill-DRY  { background: var(--pill-info-bg); color: var(--pill-info-fg); }
.pill-LIVE { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
.pill-on   { background: var(--pill-pos-bg); color: var(--pill-pos-fg); }
.pill-off  { background: var(--bg-pill-muted); color: var(--text-muted); }
.pill-tripped { background: var(--pill-neg-bg); color: var(--pill-neg-fg); }

/* toggles */
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-card-hover); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  transition: background .12s; color: var(--text);
}
.toggle:hover { background: var(--bg-card-hover-strong); }
.toggle.on { background: var(--pill-pos-bg); color: var(--pill-pos-fg); border-color: var(--pill-pos-bg); }
.toggle.live { background: var(--pill-warn-bg); color: var(--pill-warn-fg); border-color: var(--pill-warn-bg); }
.toggle.live:hover { background: var(--pill-warn-bg); filter: brightness(1.1); }
.toggle.danger { background: var(--pill-neg-bg); color: var(--pill-neg-fg); border-color: var(--pill-neg-bg); }

button.btn {
  background: var(--bg-card-hover); border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text); padding: 6px 12px; cursor: pointer; font-size: 12px;
  font-family: inherit;
}
button.btn:hover { background: var(--bg-card-hover-strong); }
button.btn.primary { background: var(--pill-pos-bg); color: var(--pill-pos-fg); border-color: var(--pill-pos-bg); }
button.btn.danger  { background: var(--pill-neg-bg); color: var(--pill-neg-fg); border-color: var(--pill-neg-bg); }

input.input, select.input {
  background: var(--bg-card-hover); border: 1px solid var(--border-strong); border-radius: 6px;
  color: var(--text); padding: 6px 10px; font-size: 12px;
  font-family: inherit;
}
input.input:focus, select.input:focus { outline: none; border-color: var(--border-input-focus); }

/* grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 0 0 auto; }
.spacer { flex: 1; }

/* health page */
.health-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; }
.health-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center; }
.health-row { display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px solid var(--border); font-size: 12px; }
.health-row:last-child { border-bottom: none; }
.health-row .k { color: var(--text-muted); }

/* ── Trades page filter bar ───────────────────────────────────────────── */
.trade-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
  align-items: center;
}
.trade-filters .input { flex: 1 1 140px; min-width: 0; }
.trade-filters-reset { flex: 0 0 auto; }

/* ── Trades list ────────────────────────────────────────────────────── */
.trade-list { display: block; }
.trade-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
  display: grid;
  grid-template-columns: 130px 110px 1fr 90px 90px 90px 110px;
  align-items: center; gap: 12px;
}
.trade-card .trade-row { display: contents; }
.trade-card .trade-time { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.trade-card .trade-mkt  { font-weight: 500; }
.trade-card .trade-cap  { font-size: 12px; }
.trade-card .trade-side { font-size: 13px; }
.trade-card .trade-px   { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.trade-card .trade-pnl  { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.trade-card .trade-flag { text-align: right; }
.trade-card .trade-mode { display: none; }

@media (max-width: 800px) {
  .trade-card {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "row1 row1"
      "row2 pnl";
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .trade-card .trade-row-1 {
    display: flex; align-items: center; gap: 8px; grid-area: row1;
    flex-wrap: wrap; font-size: 11px; color: var(--text-muted);
  }
  .trade-card .trade-row-2 {
    display: flex; align-items: center; gap: 10px; grid-area: row2;
    font-size: 13px;
  }
  .trade-card .trade-time { font-size: 11px; }
  .trade-card .trade-mkt  { color: var(--text); font-size: 12px; font-weight: 600; }
  .trade-card .trade-cap  { font-size: 11px; color: var(--text-secondary); }
  .trade-card .trade-cap a { color: var(--text-secondary); }
  .trade-card .trade-mode { display: inline; font-size: 10px; }
  .trade-card .trade-side { font-size: 13px; }
  .trade-card .trade-px   { font-size: 12px; flex: 1; }
  .trade-card .trade-pnl  { font-size: 16px; grid-area: pnl; text-align: right; align-self: center; }
  .trade-card .trade-flag { display: none; }
  .trade-card .trade-row-2 .trade-flag { display: inline; flex: 0 0 auto; }
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle; margin-right: 6px; }
.dot.green  { background: var(--dot-green); }
.dot.amber  { background: var(--dot-amber); }
.dot.red    { background: var(--dot-red); }
.dot.gray   { background: var(--dot-gray); }

/* ── Tablet (≤1100px) ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero    { grid-template-columns: repeat(3, 1fr); }
  .grid-5  { grid-template-columns: repeat(3, 1fr); }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .grid-2  { grid-template-columns: 1fr; }
  .app     { grid-template-columns: 180px 1fr; }
  .page    { padding: 18px 20px 60px; }
  th, td   { padding: 8px 10px; }
}

/* ── Mobile landscape / small tablet (≤800px) ───────────────────────── */
@media (max-width: 800px) {
  body     { font-size: 12px; }
  .app     { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 30; height: auto;
             background: var(--bg-sidebar); border-right: none;
             border-bottom: 1px solid var(--border-soft); }
  .brand   { padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
  .brand-mark { font-size: 17px; }
  .brand-sub  { margin-top: 0; }
  .menu-toggle { display: flex; margin-left: auto; }

  .nav     { display: none; flex-direction: column; padding: 6px 10px 10px; gap: 2px;
             border-top: 1px solid var(--border-soft); }
  .sidebar.menu-open .nav { display: flex; }
  .nav-link { padding: 10px 14px; font-size: 14px; border-radius: 6px; }

  .sidebar-footer { display: none; }
  .sidebar.menu-open .sidebar-footer { display: flex; gap: 12px; padding: 8px 14px;
             border-top: 1px solid var(--border-soft); font-size: 11px; }

  .topbar  { padding: 12px 14px 10px; gap: 10px; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; }
  .topbar h1 { font-size: 18px; }
  .topbar-meta { font-size: 11px; }
  .page    { padding: 10px 14px 50px; }

  .hero    { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card    { padding: 10px 12px; }
  .card .lbl { min-height: 22px; font-size: 9px; }
  .card .val { font-size: 18px; margin-top: 4px; }

  .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; gap: 10px; }

  th, td   { padding: 6px 8px; font-size: 11px; }
  th       { font-size: 9px; }

  .row     { gap: 6px; }
  .toggle, button.btn, input.input, select.input { font-size: 11px; padding: 5px 8px; }

  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px !important;
  }
  .filters > .input,
  .filters > button { width: 100%; box-sizing: border-box; }
  .filters > button.btn { grid-column: 1 / -1; }

  .health-card { padding: 12px; }
  .health-card h3 { font-size: 13px; }
  .health-row { font-size: 11px; padding: 3px 0; }
}

/* ── Phone (≤480px) ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero    { grid-template-columns: 1fr 1fr; }
  .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 16px; }
  .page    { padding: 10px 10px 40px; }
  h2       { margin: 16px 0 6px; }
  .ws-sub  { display: none; }
  .row     { gap: 4px; }
}