/* =========================================================
   Backtest Results Dashboard — Dark Theme
   ========================================================= */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  --bg:          #0d1117;
  --surface:     #161b22;
  --card:        #21262d;
  --card-hover:  #2a313a;
  --panel-glow:  rgba(88, 166, 255, 0.10);
  --border:      #30363d;
  --accent:      #58a6ff;
  --accent-dim:  #1f6feb33;
  --accent-soft: #8ec2ff;
  --text:        #f0f6fc;
  --text-muted:  #8b949e;
  --green:       #3fb950;
  --green-dim:   #23883033;
  --red:         #f85149;
  --red-dim:     #9b1c1c33;
  --amber:       #d29922;
  --amber-dim:   #9b701833;
  --radius:      6px;
  --radius-lg:   10px;
  --transition:  0.15s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  background:
    radial-gradient(circle at top left, rgba(88, 166, 255, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(210, 153, 34, 0.06), transparent 18%),
    linear-gradient(180deg, #0b1016 0%, #0d1117 24%, #0b1016 100%);
  color: var(--text);
  font-family: "Segoe UI Variable", "IBM Plex Sans", "Segoe UI", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Typography helpers --- */
.text-muted  { color: var(--text-muted); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-amber  { color: var(--amber); }
.text-accent { color: var(--accent); }
.mono        { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

/* =========================================================
   Layout
   ========================================================= */

.app-header {
  background: rgba(22, 27, 34, 0.84);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(48, 54, 61, 0.8);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
}

.app-header h1 {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .01em;
  flex-shrink: 0;
}

.header-spacer { flex: 1; }

.app-main {
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px 24px 72px;
}

/* =========================================================
   Toolbar (filter bar below header)
   ========================================================= */

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.88), rgba(18, 23, 30, 0.92));
  border: 1px solid rgba(48, 54, 61, 0.85);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.toolbar label {
  font-size: .73rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

.toolbar-spacer {
  display: none;
}

.selection-counter {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}

#btn-global-favorites {
  margin-left: auto;
}

/* =========================================================
   Favorites Panel
   ========================================================= */

.favorites-block {
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18, 23, 30, 0.92), rgba(14, 18, 24, 0.94));
}

.favorites-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.favorites-header h4 {
  font-size: .92rem;
  margin-bottom: 4px;
}

.favorites-subtitle {
  color: var(--text-muted);
  font-size: .78rem;
}

.favorites-list {
  display: grid;
  gap: 12px;
}

.favorites-empty {
  padding: 12px 14px;
  border: 1px dashed rgba(48, 54, 61, 0.95);
  border-radius: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.01);
}

.favorite-card {
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 14px;
  background: rgba(33, 38, 45, 0.78);
  padding: 14px 16px;
}

.favorite-card.is-active {
  border-color: rgba(88, 166, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.10), 0 12px 24px rgba(88, 166, 255, 0.10);
}

.favorite-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.favorite-card-copy {
  min-width: 0;
  flex: 1;
}

.favorite-name {
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 4px;
}

.favorite-summary {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
}

.favorite-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: .74rem;
}

.favorite-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  margin-top: 8px;
  font-size: .73rem;
  color: var(--text-muted);
}

.favorite-stat {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(48, 54, 61, 0.85);
  background: rgba(13, 17, 23, 0.32);
  color: var(--text-muted);
}

.favorite-stat b {
  color: var(--text);
  font-weight: 700;
  margin-right: 4px;
}

.favorite-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.favorite-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.favorite-tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.10);
  color: var(--accent-soft);
  border: 1px solid rgba(88, 166, 255, 0.18);
  font-size: .72rem;
}

.favorite-modal-box {
  max-width: 520px;
}

.favorite-modal-body {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.favorite-modal-body label {
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.favorite-modal-note {
  color: var(--text-muted);
  font-size: .78rem;
  margin-top: 2px;
}

.favorite-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  line-height: 1.4;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--accent);
  color: #0d1117;
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(88, 166, 255, 0.18);
}
.btn-primary:hover:not(:disabled) { background: #79beff; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.35);
}

.btn-danger {
  background: rgba(248, 81, 73, 0.05);
  color: var(--red);
  border-color: var(--red-dim);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.12);
  border-color: rgba(248, 81, 73, 0.35);
}

.btn-amber {
  background: transparent;
  color: var(--amber);
  border-color: var(--amber-dim);
}
.btn-amber:hover:not(:disabled) { background: var(--amber-dim); }

.btn-sm { padding: 3px 8px; font-size: .75rem; }
.btn-icon { padding: 4px 6px; }

/* =========================================================
   Text inputs / selects
   ========================================================= */

.input-text, .input-select {
  background: rgba(33, 38, 45, 0.92);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 12px;
  font-size: .8rem;
  line-height: 1.4;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input-text:focus, .input-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.14);
  background: rgba(33, 38, 45, 1);
}
.input-text::placeholder { color: var(--text-muted); }

/* =========================================================
   Main Backtests Table
   ========================================================= */

.table-container {
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 18px;
  /* IMPORTANT: keep this `clip` — anything that establishes a scrolling
     context here (e.g. overflow-x: auto) becomes the sticky thead's
     reference frame, which makes thead stick 64px below the container
     top instead of below the page header, and the first data row peeks
     out above it. The combination of the 1800px .app-main cap +
     min-width: 200px on the strategy column is sufficient room for
     current strategy names. */
  overflow: clip;
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.96), rgba(13, 17, 23, 0.98));
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.24);
}

.bt-table {
  width: 100%;
  border-collapse: collapse;
}

.bt-table thead {
  /* Fully opaque — the previous 0.96 alpha let row text faintly bleed
     through the sticky header when scrolled. */
  background: #161b22;
  position: sticky;
  top: 64px;
  z-index: 50;
}

.bt-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(48, 54, 61, 0.85);
  white-space: nowrap;
}

.bt-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.75);
  font-size: .84rem;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  /* Keep all cells on a single line. If a strategy name (e.g.
     orderflow_imbalance) doesn't fit at the current viewport width, the
     table-container's overflow-x: auto provides a horizontal scrollbar
     instead of wrapping or clipping the cell. */
  white-space: nowrap;
}

/* Strategy column — first content column after the two leading fixed
   widths. Allow the column to grow with the longest strategy name. */
.bt-table th:nth-child(3),
.bt-table td:nth-child(3) {
  min-width: 200px;
}

.bt-table th:first-child,
.bt-table td:first-child {
  width: 50px;
  text-align: center;
}

.bt-table th:nth-child(2),
.bt-table td.expand-toggle {
  width: 64px;
}

.bt-table td.expand-toggle {
  text-align: center;
  white-space: nowrap;
}

.row-checkbox {
  margin: 0;
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
}

.bt-table tbody tr { background: rgba(13, 17, 23, 0.64); }
.bt-table tbody tr:nth-child(even) { background: rgba(22, 27, 34, 0.68); }
.bt-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(88, 166, 255, 0.10), rgba(88, 166, 255, 0.03));
}
.bt-table tbody tr:last-child td { border-bottom: none; }

/* Sweep parent row */
.bt-table tr.row-sweep-parent { background: var(--surface) !important; }
.bt-table tr.row-sweep-parent td:first-child {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

/* Expanded row highlight */
.bt-table tr.row-expanded { background: var(--accent-dim) !important; }

/* Selected row (checkbox checked) */
.bt-table tbody tr.row-selected {
  background: rgba(88, 166, 255, 0.12) !important;
  border-left: 3px solid var(--accent);
  padding-left: 2px;
}

/* Actions column */
.col-actions { white-space: nowrap; }
.col-actions .btn + .btn { margin-left: 4px; }
.col-tf { white-space: nowrap; }
.col-tpsl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-notes { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   Win-rate Badge
   ========================================================= */

.wr-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid transparent;
}
.wr-high,
.wr-green  { background: var(--green-dim);  color: var(--green); border-color: rgba(63, 185, 80, 0.35); }
.wr-mid,
.wr-amber  { background: var(--amber-dim);  color: var(--amber); border-color: rgba(210, 153, 34, 0.35); }
.wr-low,
.wr-red    { background: var(--red-dim);    color: var(--red); border-color: rgba(248, 81, 73, 0.35); }

/* =========================================================
   Expanded Panel (accordion content)
   ========================================================= */

.expanded-row td { padding: 0 !important; border-bottom: 2px solid var(--accent); }

.expanded-panel {
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(18, 23, 30, 0.98));
  padding: 0 20px 20px 20px;
}

.expanded-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}

.expanded-panel-header h2 {
  font-size: .95rem;
  font-weight: 600;
}

/* =========================================================
   Filter Bar (inside expanded panel)
   ========================================================= */

.filter-bar {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.94), rgba(25, 31, 39, 0.94));
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 20px;
  align-items: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.filter-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-row > label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group label {
  font-size: .73rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Direction toggles */
.direction-toggles,
.month-pills,
.dow-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.toggle-btn {
  padding: 4px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.toggle-btn.active-long  { background: var(--green-dim);  color: var(--green);  border-color: var(--green); }
.toggle-btn.active-short { background: var(--red-dim);    color: var(--red);    border-color: var(--red); }

/* Checkbox grids (months, DOW) */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chk-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(48, 54, 61, 0.95);
  background: rgba(13, 17, 23, 0.34);
  color: var(--text);
  font-size: .76rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
  user-select: none;
}

.chk-pill:hover {
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.28);
}

.chk-pill.is-disabled {
  opacity: 0.42;
  background: rgba(13, 17, 23, 0.12);
  border-color: rgba(48, 54, 61, 0.55);
  color: var(--text-muted);
  cursor: not-allowed;
}

.chk-pill.is-disabled:hover {
  background: rgba(13, 17, 23, 0.12);
  border-color: rgba(48, 54, 61, 0.55);
}

.chk-pill input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.chk-pill input:disabled {
  cursor: not-allowed;
}

.chk-pill:has(input:checked) {
  background: rgba(88, 166, 255, 0.14);
  color: #dcecff;
  border-color: rgba(88, 166, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.16) inset;
}

/* Filter action row */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Error hint */
.filter-error {
  font-size: .73rem;
  color: var(--red);
  margin-top: 4px;
  display: none;
}
.filter-error.visible { display: block; }

/* Max losses per day panel */
.max-losses-panel {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.max-losses-threshold {
  width: 80px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Exclude dates input */
.exclude-dates-input {
  width: 100%;
  max-width: 400px;
}

/* =========================================================
   Metrics Summary Strip
   ========================================================= */

.metrics-strip {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.metric-card {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.95), rgba(22, 27, 34, 0.98));
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 140px;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}

.metric-card .mc-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.metric-card .mc-value {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Strategy Parameters Block
   ========================================================= */

.params-block {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.94), rgba(24, 30, 37, 0.96));
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.param-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.param-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.44);
  border: 1px solid rgba(48, 54, 61, 0.95);
  color: var(--text);
  font-size: .78rem;
}

.param-chip b {
  color: var(--accent-soft);
  font-weight: 700;
}

.notes-text {
  margin-top: 12px;
  color: var(--text-muted);
  font-size: .8rem;
}

.params-block h3 {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.params-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.param-entry { font-size: .8rem; }
.param-entry .pk { color: var(--text-muted); }
.param-entry .pv { color: var(--text); font-weight: 500; }

/* =========================================================
   Chart containers
   ========================================================= */

.chart-block {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.96), rgba(22, 27, 34, 0.98));
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
}

.chart-container,
.chart-container-sm {
  min-height: 240px;
}

.chart-container-md {
  min-height: 380px;
}

.price-block {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.96), rgba(23, 29, 36, 0.98));
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}

.price-note {
  margin-top: 8px;
  font-size: .75rem;
}

.chart-block h3 {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.chart-placeholder {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: .8rem;
}

/* =========================================================
   Trades Table
   ========================================================= */

.trades-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.trades-block h3 {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
}

.trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}

.trades-table th {
  padding: 7px 10px;
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.trades-table th.trades-sortable {
  cursor: pointer;
  user-select: none;
}

.trades-table th.trades-sortable:hover {
  color: var(--text);
}

.trades-table th .sort-indicator {
  display: inline-block;
  min-width: 12px;
  text-align: center;
  margin-left: 4px;
  color: var(--text-muted);
}

.trades-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.trades-table tbody tr:last-child td { border-bottom: none; }
.trades-table tbody tr:hover { background: var(--card-hover); }

.trades-pager {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.trades-pager-meta {
  color: var(--text-muted);
  font-size: .78rem;
}

.trades-pager-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.trades-pager-controls .btn.is-active {
  border-color: rgba(88, 166, 255, 0.55);
  color: #c9e4ff;
  background: rgba(88, 166, 255, 0.2);
}

.dir-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
}

.pnl-pos { color: var(--green); font-weight: 600; }
.pnl-neg { color: var(--red);   font-weight: 600; }

.dir-long  { color: var(--green); background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.35); }
.dir-short { color: var(--red);   background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.35); }

/* =========================================================
   Analysis Section
   ========================================================= */

.analysis-section { margin-bottom: 20px; }

.analysis-section h3 {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.histograms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.histograms-grid > div {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.96), rgba(23, 29, 36, 0.98));
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 16px;
  padding: 16px;
}

.histograms-grid h5,
.chart-block h4,
.params-block h4,
.trades-section h4 {
  font-size: .78rem;
  font-weight: 700;
  color: #d3dbe3;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.analysis-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.scatter-block {
  background: linear-gradient(180deg, rgba(33, 38, 45, 0.96), rgba(23, 29, 36, 0.98));
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}

.scatter-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.scatter-label {
  font-size: .73rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.scatter-controls-row .input-select {
  min-width: 190px;
}

.scatter-stats-panel {
  background: rgba(33, 38, 45, 0.5);
  border: 1px solid rgba(48, 54, 61, 0.6);
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  font-size: 0.8rem;
}

.scatter-stats-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: #58a6ff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(88, 166, 255, 0.2);
}

.scatter-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.scatter-stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scatter-stat-item.scatter-stat-header {
  grid-column: 1 / -1;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
  padding-bottom: 0;
  gap: 0;
}

.scatter-stat-item.scatter-stat-header .stat-label {
  font-weight: 600;
  color: #58a6ff;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Feature A: selection statistics panel */
.scatter-selection-panel {
  background: rgba(88, 166, 255, 0.06);
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  font-size: 0.8rem;
}

.scatter-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Feature B: distribution histogram panel */
.scatter-dist-toggle-row {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.scatter-dist-panel {
  background: rgba(33, 38, 45, 0.5);
  border: 1px solid rgba(48, 54, 61, 0.6);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
}

.scatter-dist-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 0.8rem;
}

.stat-label {
  font-size: 0.75rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.stat-value {
  font-size: 0.85rem;
  color: #f0f6fc;
  font-weight: 600;
  font-family: 'Monaco', 'Courier New', monospace;
}

.filter-hint {
  color: var(--text-muted);
  font-size: .75rem;
}

.expand-toggle {
  width: 64px;
}

.bt-table td.expand-toggle .btn-expand {
  margin-right: 4px;
}

.btn-expand {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(48, 54, 61, 0.95);
  background: rgba(88, 166, 255, 0.08);
  color: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

.btn-expand:hover {
  transform: translateY(-1px);
  background: rgba(88, 166, 255, 0.16);
  border-color: rgba(88, 166, 255, 0.42);
}

.btn-new-tab,
.btn-new-tab-child {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(48, 54, 61, 0.95);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.btn-new-tab:hover,
.btn-new-tab-child:hover {
  transform: translateY(-1px);
  background: rgba(88, 166, 255, 0.14);
  border-color: rgba(88, 166, 255, 0.38);
  color: #dcecff;
}

.muted,
.text-muted {
  color: var(--text-muted);
}

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

@media (max-width: 900px) {
  .app-main {
    padding: 18px 12px 48px;
  }

  .toolbar,
  .expanded-panel,
  .filter-bar,
  .chart-block,
  .params-block {
    padding: 14px;
  }

  .bt-table th,
  .bt-table td {
    padding: 10px 8px;
  }
}

/* =========================================================
   Sweep summary panel (compact expanded view for sweep parents)
   ========================================================= */

/* Sweep parent panel must not force the outer table wider than its
   visible container (.table-container has overflow-x: clip). With a
   normal-flow inner div sized to width:100%, the td/column widths
   inherit the existing row layout (~1750px in production) and the
   chart fits inside without horizontal clipping. */
.sweep-summary-td { padding: 0; }

.sweep-summary-stickywrap {
  width: 100%;
  box-sizing: border-box;
}

.sweep-summary-panel {
  padding: 12px 16px 16px;
}

.sweep-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.sweep-summary-title {
  font-weight: 600;
  font-size: .95rem;
}

.sweep-summary-title .mono { margin-left: 8px; font-size: .8rem; }

.sweep-summary-meta {
  display: flex;
  gap: 14px;
  font-size: .82rem;
  white-space: nowrap;
}

/* Single combined-equity container — Plotly owns the height (set
   in renderSweepCombinedEquity at 380px). The width is fluid so
   the chart fills the viewport-clamped panel. */
.sweep-combined-equity {
  width: 100%;
  min-height: 380px;
}

/* Per-param sweep row in the new-backtest modal. The pinned-value
   input and the sweep-range input occupy the same slot (one is
   ``hidden`` based on the per-param "Sweep" toggle); the toggle
   sits to their right. */
.rm-param-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rm-param-row .rm-input { flex: 1 1 auto; min-width: 0; }

.rm-param-sweep-toggle {
  flex: 0 0 auto;
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.rm-param-sweep-toggle.is-disabled {
  opacity: .4;
  pointer-events: none;
}

/* =========================================================
   Nested child table (parameter sweep sub-table)
   ========================================================= */

.child-table-wrapper {
  margin: 0;
  padding: 0 0 0 32px;
  border-left: 3px solid var(--accent-dim);
}

.child-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}

.child-table th {
  padding: 7px 10px;
  text-align: left;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}

.child-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.child-table th.sortable:hover { color: var(--text); }

/* Sweep "varied parameters" hover tooltip (built in main.js, rendered on
   document.body so it escapes the table's overflow clipping). */
.sweep-tip-trigger.has-sweep-tip { cursor: help; }
.sweep-tip-popover {
  position: fixed;
  z-index: 10000;
  max-width: 340px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  text-align: left;
}
.sweep-tip-title {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  margin-bottom: 5px;
}
.sweep-tip-row { display: flex; gap: 8px; padding: 1px 0; }
.sweep-tip-key {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  font-family: var(--mono, monospace);
}
.sweep-tip-vals { color: var(--text); }

.child-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.child-table tbody tr:last-child td { border-bottom: none; }
.child-table tbody tr:hover { background: var(--card-hover); }

/* =========================================================
   Spinner
   ========================================================= */

.spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 17, 23, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.spinner-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Inline spinner (inside buttons / sections) */
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Modal (trade setup image)
   ========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-box img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  border-radius: var(--radius);
}

.modal-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  padding: 2px 8px;
  font-size: .8rem;
  line-height: 1.5;
}
.modal-close:hover { background: var(--card-hover); }

.summary-modal-box {
  width: min(1220px, 96vw);
}

.summary-modal-content {
  max-height: 74vh;
  overflow: auto;
}

.summary-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.summary-subtitle {
  color: var(--text-muted);
  font-size: .8rem;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.summary-table th,
.summary-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.75);
  text-align: left;
  vertical-align: middle;
}

.summary-table thead th {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .7rem;
  font-weight: 700;
}

.summary-table tbody tr:hover {
  background: rgba(88, 166, 255, 0.05);
}

.summary-table tbody tr:last-child td {
  border-bottom: none;
}

.summary-table .metric-name {
  color: #d6deea;
  width: 32%;
}

.summary-section-row td {
  color: var(--accent-soft);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .7rem;
  padding-top: 16px;
  background: rgba(88, 166, 255, 0.06);
}

.summary-note {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: .74rem;
}

/* =========================================================
   Empty state
   ========================================================= */

.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}

.empty-state p { margin-top: 8px; font-size: .85rem; }

/* =========================================================
   Plotly Mode Bar Styling (Dark Theme)
   ========================================================= */

/* Hide Plotly's default white/light theme mode bar buttons */
.plotly-graph-div .modebar-btn {
  background-color: transparent;
  border: none;
  color: #8b949e;
  cursor: pointer;
  padding: 4px 6px;
  margin: 2px 0;
  border-radius: 4px;
  transition: background-color var(--transition), color var(--transition);
}

.plotly-graph-div .modebar-btn:hover {
  background-color: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
}

/* Mode bar container styling */
.plotly-graph-div .modebar {
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Active/pressed state */
.plotly-graph-div .modebar-btn.active {
  background-color: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
}

/* =========================================================
   Global Favorites Panel
   ========================================================= */

#global-favorites-panel {
  background: var(--surface-2, #1a1d23);
  border: 1px solid var(--border, #2a2d35);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.gf-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2a2d35);
  background: var(--surface-3, #1e2128);
}

.gf-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
  letter-spacing: 0.02em;
}

.gf-close-btn {
  opacity: 0.6;
  font-size: 13px;
}

.gf-close-btn:hover {
  opacity: 1;
}

.gf-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.gf-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #888);
}

.gf-card {
  background: var(--surface-1, #13151a);
  border: 1px solid var(--border, #2a2d35);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.15s;
}

.gf-card:hover {
  border-color: var(--accent, #4a9eff);
}

.gf-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gf-card-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gf-run-ctx {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-cfg-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e8eaed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-filter-summary {
  font-size: 12px;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-card .favorite-stats-row {
  margin-top: 4px;
  font-size: 11px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.gf-tags {
  margin-top: 4px;
  flex-wrap: wrap;
}

.gf-meta {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 2px;
}

.gf-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-start;
  padding-top: 1px;
}

.gf-deleted-badge {
  display: inline-block;
  background: rgba(220, 60, 60, 0.15);
  color: #e06060;
  border: 1px solid rgba(220, 60, 60, 0.3);
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#btn-global-favorites.active {
  background: var(--accent, #4a9eff);
  color: #fff;
  border-color: var(--accent, #4a9eff);
}

/* =========================================================
   Utility
   ========================================================= */

.hidden { display: none !important; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-8 { gap: 8px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-0  { margin-bottom: 0; }