/* Ledger — status site for the crypto lab bot.
   Apple HIG semantic tokens: system labels/backgrounds/fills/separators,
   systemBlue accent, SF system font stack. Utility surface — motion is
   restrained (state transitions only, ≤200ms), glass reserved for the
   sidebar chrome, cards stay solid and quiet. */

:root {
  color-scheme: light dark;

  --label:            #000000;
  --label-secondary:  rgba(60, 60, 67, 0.60);
  --label-tertiary:   rgba(60, 60, 67, 0.30);

  --bg:               #ffffff;
  --bg-grouped:       #f2f2f7;
  --bg-elevated:      #ffffff;
  --sidebar-bg:       rgba(242, 242, 247, 0.72);

  --separator:        rgba(60, 60, 67, 0.29);
  --fill-tertiary:    rgba(118, 118, 128, 0.12);
  --fill-quaternary:  rgba(116, 116, 128, 0.08);

  --blue:             #007aff;
  --blue-fill:        rgba(0, 122, 255, 0.10);
  --green:            #34c759;
  --green-fill:       rgba(52, 199, 89, 0.12);
  --red:              #ff3b30;
  --red-fill:         rgba(255, 59, 48, 0.12);
  --gray:             #8e8e93;
  --gray-fill:        rgba(142, 142, 147, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --label:            #ffffff;
    --label-secondary:  rgba(235, 235, 245, 0.60);
    --label-tertiary:   rgba(235, 235, 245, 0.30);

    --bg:               #000000;
    --bg-grouped:       #000000;
    --bg-elevated:      #1c1c1e;
    --sidebar-bg:       rgba(28, 28, 30, 0.72);

    --separator:        rgba(84, 84, 88, 0.60);
    --fill-tertiary:    rgba(118, 118, 128, 0.24);
    --fill-quaternary:  rgba(118, 118, 128, 0.18);

    --blue:             #0a84ff;
    --blue-fill:        rgba(10, 132, 255, 0.16);
    --green:            #30d158;
    --green-fill:       rgba(48, 209, 88, 0.16);
    --red:              #ff453a;
    --red-fill:         rgba(255, 69, 58, 0.16);
    --gray:             #8e8e93;
    --gray-fill:        rgba(142, 142, 147, 0.20);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-grouped);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.layout { display: flex; min-height: 100vh; }

/* ---- Sidebar (glass chrome — the one place translucency belongs) ---- */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand { padding: 4px 12px 28px; }
.sidebar-brand .name { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.sidebar-brand .tagline { color: var(--label-secondary); font-size: 12px; font-weight: 400; margin-top: 2px; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--label);
  font-size: 14px; font-weight: 400;
  transition: background-color 0.15s ease;
}
.nav-link .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.nav-link.active {
  background: var(--blue-fill);
  color: var(--blue);
  font-weight: 600;
}
.nav-link.active .icon { opacity: 1; }
.sidebar-footer { border-top: 1px solid var(--separator); padding-top: 12px; margin-top: 8px; }
.sidebar-footer a { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: var(--label-tertiary); }
.sidebar-footer .icon { width: 16px; height: 16px; opacity: 0.6; }

/* ---- Main content ---- */
.main { flex: 1; min-width: 0; padding: 40px 48px; max-width: 1120px; }

h1.page-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 24px; }
h1.page-title .title-date { color: var(--label-tertiary); font-weight: 800; }
h2.section-title { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 28px 0 12px; }

.topbar {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid var(--separator);
}
.topbar h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }
.topbar .updated { color: var(--label-tertiary); font-size: 13px; margin-left: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 999px; }
.pill.live { background: var(--red-fill); color: var(--red); }
.pill.live::before { background: var(--red); }
.pill.paper { background: var(--gray-fill); color: var(--gray); }
.pill.paper::before { background: var(--gray); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.badge.tripped { background: var(--red-fill); color: var(--red); }
.badge.clear { background: var(--gray-fill); color: var(--label-secondary); }
.badge.long { background: var(--green-fill); color: var(--green); }
.badge.short { background: var(--blue-fill); color: var(--blue); }

/* ---- Cards / grid ---- */
.hero-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.hero-card {
  flex: 1; min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--separator);
  border-radius: 20px; padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.stat-label {
  color: var(--label-secondary); font-size: 13px; font-weight: 500;
  margin-bottom: 6px;
}
.stat-value { font-size: 36px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-value.small { font-size: 20px; font-weight: 600; }
.stat-row { display: flex; align-items: baseline; gap: 10px; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.flat { color: var(--label-secondary); }

/* Solid capsule percentage pill — white text on a filled color, not a tint */
.pct-pill {
  display: inline-flex; padding: 4px 11px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.pct-pill.pos { background: var(--green); }
.pct-pill.neg { background: var(--red); }
.pct-pill.flat { background: var(--gray); }

.status-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--fill-quaternary); border: 1px solid var(--separator);
  border-radius: 12px; padding: 10px 16px; margin-bottom: 20px;
  color: var(--label-secondary); font-size: 13px;
}
.status-strip .icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }

/* ---- Watchlist (Overview strategy list) ---- */
.watchlist {
  background: var(--bg-elevated); border: 1px solid var(--separator);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.watchlist-row {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--separator);
  transition: background-color 0.15s ease;
}
.watchlist-row:last-child { border-bottom: none; }
.watchlist-row:hover { background: var(--fill-quaternary); }
.row-id { flex: 1; min-width: 0; }
.row-name { font-size: 15px; font-weight: 600; letter-spacing: -0.1px; }
.row-sub { font-size: 12px; color: var(--label-tertiary); font-weight: 500; margin-top: 2px; }
.row-chart { width: 110px; height: 34px; flex-shrink: 0; }
.row-chart.pos { color: var(--green); }
.row-chart.neg { color: var(--red); }
.row-chart.flat { color: var(--label-tertiary); }
.row-chart svg { display: block; width: 100%; height: 100%; }
.row-value { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 96px; }
.row-price { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Detail page ---- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
.stat-cards-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-cards-row > div {
  background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: 16px; padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.04);
}
.stat-cards-row .value { font-size: 20px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }

.chart-card {
  background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: 20px;
  padding: 20px; height: 300px; display: flex; gap: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--label-tertiary); padding: 8px 0; font-variant-numeric: tabular-nums; }
.chart-plot { flex: 1; position: relative; color: var(--blue); }
.chart-plot svg { width: 100%; height: 100%; }

.side-panel { display: flex; flex-direction: column; gap: 16px; }
.panel {
  background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: 20px; padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.panel h3 { font-size: 13px; font-weight: 600; color: var(--label-secondary); margin: 0 0 12px; }
.panel .row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--separator); font-size: 14px; }
.panel .row:last-child { border-bottom: none; }

.table-card {
  background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: 20px; overflow: hidden; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
}
.table-card h2 { font-size: 15px; font-weight: 600; margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--separator); }
thead { background: var(--fill-quaternary); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 20px; border-bottom: 1px solid var(--separator); }
th { color: var(--label-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr:last-child td { border-bottom: none; }
td { font-variant-numeric: tabular-nums; }
.muted { color: var(--label-tertiary); text-align: center; }

.disclaimer {
  font-size: 12px; color: var(--label-tertiary); border-top: 1px solid var(--separator);
  padding-top: 16px; margin-top: 8px; line-height: 1.5;
}

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar { position: static; width: 100%; height: auto; }
  .main { padding: 24px; }
  .detail-grid, .stat-cards-row { grid-template-columns: 1fr; }
}