/* ====================== ТЕМА / ТОКЕНЫ ====================== */
:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e8e8e8;
  --thead:#fafafa;
  --row-alt:#fcfcfc;
  --row-hover:#f5faff;
  --accent:#0d6efd;

  /* ширина контента страницы/таблицы */
  --page-pad: 18px;           /* боковые поля */
  --page-max: 1680px;         /* макс. ширина блока с фильтрами + таблицей */
  --table-max: var(--page-max);

  /* базовая плотность таблицы (можно докрутить классами) */
  --tbl-fz: 14px;             /* базовый кегль */
  --tbl-py: 6px;              /* вертикальный паддинг ячейки */
  --tbl-px: 10px;             /* горизонтальный паддинг ячейки */

  /* heatmap (Compare) */
  --heat-pos-bg:#d9f3e4;  --heat-pos-tx:#0f5132;
  --heat-neg-bg:#fde2e4;  --heat-neg-tx:#7f1d1d;
  --heat-neu-bg:var(--card); --heat-neu-tx:var(--text);
}
:root[data-theme="dark"]{
  --bg:#0b0f19;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --card:#101522;
  --border:#1f2937;
  --thead:#131a2a;
  --row-alt:#0f172a;
  --row-hover:#172036;
  --accent:#60a5fa;

  --heat-pos-bg:#12332a;  --heat-pos-tx:#c1f1d3;
  --heat-neg-bg:#3a1b1d;  --heat-neg-tx:#f6c5ca;
}

/* ====================== БАЗА / КОНТЕЙНЕР ====================== */
html,body{background:var(--bg);color:var(--text);}

/* bootstrap-контейнеры — на всю ширину, но внутри контент ограничим .container-narrow */
.container,
.container-sm,.container-md,.container-lg,.container-xl,.container-xxl,
.navbar .container,
.footer .container{
  max-width:none !important;
  width:100% !important;
  padding-left:var(--page-pad) !important;
  padding-right:var(--page-pad) !important;
}

/* внутренний блок страницы (фильтры + таблица): центрируем и ограничиваем ширину */
.container-narrow{
  max-width:var(--page-max);
  width:100%;
  margin:0 auto;
  padding:12px var(--page-pad);
}

/* Заголовок страницы */
.page-header{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:8px;flex-wrap:wrap;
}
.total-pill{font-size:12px;color:var(--muted);}

/* ====================== ФИЛЬТРЫ ====================== */
.filters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px 10px; align-items:center; margin-bottom:10px;
  max-width:var(--table-max);        /* ширина как у таблицы */
  margin-left:auto; margin-right:auto;
}
.filters-grid .form-control,
.filters-grid .form-select{
  width:100%; padding:6px 8px; height:32px; font-size:14px;
  border:1px solid var(--border); border-radius:6px;
  background:var(--card); color:var(--text);
}

/* Кнопки формы */
.filters-actions{display:flex;gap:8px;align-items:center;}
.filters-grid .filters-actions{grid-column:1/-1;justify-content:flex-start;}
.filters-grid .btn-apply{
  display:inline-block;padding:6px 14px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;border-radius:6px;cursor:pointer;
}
.filters-grid .btn-apply:hover{filter:brightness(.95);}
.filters-grid .btn-outline{
  display:inline-block;padding:6px 14px;border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:6px;cursor:pointer;text-decoration:none;
}
.filters-grid .btn-outline:hover{border-color:var(--accent);}

/* ====================== ТАБЛИЦА ====================== */
/* Внешняя «карточка» таблицы — не на всю ширину экрана, а до table-max и по центру */
.table-wrap{
  max-width:var(--table-max);
  margin:0 auto;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  overflow-x:auto;               /* горизонтальный скролл только если нужно */
}

/* сама таблица — адаптивная, плотность из токенов */
.data-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:var(--tbl-fz);
}
.data-table th,.data-table td{
  padding:var(--tbl-py) var(--tbl-px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* шапка — фиксируем сверху и ЦЕНТРИРУЕМ названия столбцов */
.data-table thead th{
  background:var(--thead);
  border-bottom:1px solid var(--border);
  font-weight:600;
  position:sticky; top:0; z-index:1;
  text-align:center;                 /* центр заголовков */
}
/* левые колонки — оставим выравнивание влево */
.data-table thead th.th-left{ text-align:left; }

.data-table tbody tr{border-bottom:1px solid var(--border);}
.data-table tbody tr:nth-child(odd){background:var(--row-alt);}
.data-table tbody tr:hover{background:var(--row-hover);}

/* выравнивание чисел и узкие колонки */
.text-end{text-align:right;}
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.num--small{ min-width:4.2rem; }  /* Δ */
.num-vol{   min-width:6.2rem; }
.num--pair{ min-width:7.2rem; }   /* «min / max» */

/* Вертикальные заголовки (для Δ) */
.th-vert{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  line-height:1;
  padding:6px 0 !important;
  text-align:center;
}

/* Группы колонок — скрываются классами на <body> */
.col-rb{} .col-delta{} .col-vol{}
body.hide-rb    .col-rb{display:none;}
body.hide-delta .col-delta{display:none;}
body.hide-vol   .col-vol{display:none;}

/* ====================== ПЛОТНОСТЬ В ЗАВИСИМОСТИ ОТ ВИДИМЫХ ГРУПП ====================== */
/* базовая (все группы включены) — как задали выше через --tbl-* */
body.density-cozy{
  --tbl-fz: 15px;     /* когда спрятана 1 группа — чуть крупнее шрифт */
}
body.density-roomy{
  --tbl-fz: 16px;     /* когда спрятано 2+ группы — ещё крупнее */
}

/* ====================== БЕЙДЖИ ====================== */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:18px;border:1px solid transparent;}
.badge-long {color:#0f5132;background:#d1e7dd;border-color:#badbcc;}
.badge-short{color:#842029;background:#f8d7da;border-color:#f5c2c7;}

/* ====================== ПАГИНАТОР ====================== */
.pager{
  display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:10px;
  max-width:var(--table-max); margin-left:auto; margin-right:auto;
}
.pager-link{padding:4px 10px;border:1px solid var(--border);border-radius:6px;text-decoration:none;color:var(--text);background:var(--card);}
.pager-link:hover{border-color: var(--accent);}
.pager-info{font-size:12px;color:var(--muted);}

/* ====================== NAVBAR/FOOTER DARK FIXES ====================== */
html[data-theme="dark"] .navbar.bg-white{background:#101826 !important;border-bottom-color:#1f2a3a !important;}
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-brand{color:#e6e6e6 !important;}
html[data-theme="dark"] .footer.text-muted{color:#aab1c0 !important;}

html[data-theme="dark"] .data-table thead th{background:#121a2a;}
html[data-theme="dark"] .data-table tbody tr:nth-child(odd){background:#111a2a;}
html[data-theme="dark"] .data-table tbody tr:hover{background:#162238;}

html[data-theme="dark"] .filters-grid .form-control,
html[data-theme="dark"] .filters-grid .form-select{
  background:#0f1624 !important; color:#e6e6e6 !important; border-color:#2a3444 !important;
}
html[data-theme="dark"] .filters-grid .form-control::placeholder{color:#8a93a6 !important;}

/* ====================== ПРОЧЕЕ ====================== */
.row-new{animation:rownew 1.2s ease-out 1;}
@keyframes rownew{0%{background:rgba(255,255,0,.14);} 100%{background:inherit;}}

/* ==== heat cells (Compare) ==== */
.heat{
  text-align:center; font-variant-numeric:tabular-nums;
  padding:6px 8px; border:1px solid var(--border);
  background:var(--heat-neu-bg); color:var(--heat-neu-tx);
}
.heat .sep{opacity:.7;margin:0 2px;}
.heat-pos{background:var(--heat-pos-bg);color:var(--heat-pos-tx);}
.heat-neg{background:var(--heat-neg-bg);color:var(--heat-neg-tx);}
.heat-neutral{background:var(--heat-neu-bg);color:var(--heat-neu-tx);}

/* ====== Компакт-режим (ручной) ====== */
body.compact .data-table th,
body.compact .data-table td{padding:4px 6px;font-size:12px;}
body.compact .filters-grid .form-control,
body.compact .filters-grid .form-select{height:30px;padding:4px 6px;font-size:13px;}
body.compact .btn, body.compact .pager-link{padding:4px 8px;font-size:12px;}

/* Числовые заголовки вправо */
.data-table thead th.num { text-align: right; }

/* Режим "RB и Δ выключены": чуть крупнее шрифт и поуже числовые колонки */
body.narrow-numbers .data-table th,
body.narrow-numbers .data-table td { font-size: 15px; }

body.narrow-numbers .data-table .num--pair { min-width: 6.2rem; }
body.narrow-numbers .data-table .num--small { min-width: 3.8rem; }
body.narrow-numbers .data-table .num { min-width: 4.6rem; }

/* --- NAV tools в шапке --- */
.navbar-tools { gap: 8px; }
.navbar-tools .btn { padding: 4px 10px; }
.navbar-tools .nav-toggle {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color: var(--muted);
}
.navbar-tools .nav-toggle input { transform: translateY(1px); }
.navbar-tools .nav-total {
  font-size: 12px; color: var(--muted);
  margin-right: 6px;
}

/* Тёмная тема: ссылки и кнопки в шапке */
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .navbar-brand { color:#e6e6e6 !important; }

/* --- Центрированные фильтры: 7 на ряд, 2 строки --- */
.filters-centered {
  justify-items: stretch;
  align-items: center;
}
.seven-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap: 8px 10px;
  justify-content: center;
}
@media (max-width: 1420px){
  .seven-cols { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
}
@media (max-width: 1100px){
  .seven-cols { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

/* Деталка под строкой таблицы */
tr.row-details td {
  padding: 0;
  border-top: none;
}
.details-box {
  padding: 12px 16px;
  border-left: 3px solid var(--bs-secondary);
  background: var(--bs-light);
}

/* Темная тема: используем те же CSS-переменные, что уже есть у Bootstrap */
html[data-theme="dark"] .details-box {
  background: #1f1f1f;
  border-color: #555;
  color: #ddd;
}

/* небольшая анимация появления */
.details-box[data-state="enter"] {
  animation: fadeIn 120ms ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

table.compare-backtest td, 
table.compare-backtest th {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding: 0.3rem 0.5rem;
}
table.compare-backtest th:first-child,
table.compare-backtest td:first-child {
    text-align: left;
}

/* серия в колонке Symbol — белый текст в тёмной теме */
.dark .sym-run,
.theme-dark .sym-run,
[data-theme="dark"] .sym-run,
html[data-bs-theme="dark"] .sym-run,
body[data-bs-theme="dark"] .sym-run {
  color: #fff !important;
  border-color: rgba(255,193,7,.7) !important;
  background: rgba(255,193,7,.35) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-weight: 700;
}
/* базовые (у тебя они уже есть) */
.sym-repeat{
  background: rgba(255,193,7,.18);
  border-left: 3px solid #ffb700;
  font-weight: 600;
}
.sym-run{
  margin-left: 6px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,193,7,.25);
  color: #8a6a00;
  border: 1px solid rgba(255,193,7,.45);
  white-space: nowrap;
}

/* Вариант 0 — янтарный (как было) */
.sym-repeat.sym-g0 { background: rgba(255,193,7,.18);  border-left-color: #ffb700; }
.sym-run.sym-g0    { background: rgba(255,193,7,.25);  color:#8a6a00; border-color: rgba(255,193,7,.45); }

/* Вариант 1 — бирюзовый */
.sym-repeat.sym-g1 { background: rgba(0,188,212,.16);  border-left-color: #00acc1; }
.sym-run.sym-g1    { background: rgba(0,188,212,.25);  color:#005662; border-color: rgba(0,188,212,.45); }

/* Вариант 2 — фиолетовый */
.sym-repeat.sym-g2 { background: rgba(156,39,176,.16); border-left-color: #8e24aa; }
.sym-run.sym-g2    { background: rgba(156,39,176,.25); color:#4a148c; border-color: rgba(156,39,176,.45); }

/* Вариант 3 — лаймово-зелёный */
.sym-repeat.sym-g3 { background: rgba(139,195,74,.16); border-left-color: #7cb342; }
.sym-run.sym-g3    { background: rgba(139,195,74,.25); color:#2e7d32; border-color: rgba(139,195,74,.45); }

/* Тёмная тема: делаем цифры ×N белыми в любом варианте */
.dark .sym-run,
.theme-dark .sym-run,
[data-theme="dark"] .sym-run,
html[data-bs-theme="dark"] .sym-run,
body[data-bs-theme="dark"] .sym-run {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-weight: 700;
}
/* === DP% ≥ threshold: общий базовый === */
.data-table tbody td.dp-hi{
  font-weight: 700;
  border-left: 3px solid transparent;
  /* без цвета и без !important — чтобы варианты ниже задавали оттенок */
}

/* g0 — янтарный */
.data-table tbody td.dp-hi.sym-g0{
  border-left-color: #ffb700;
  background: rgba(255,193,7,.12);
  color: inherit;
}

/* g1 — бирюзовый */
.data-table tbody td.dp-hi.sym-g1{
  border-left-color: #00acc1;
  background: rgba(0,188,212,.12);
  color: inherit;
}

/* g2 — фиолетовый */
.data-table tbody td.dp-hi.sym-g2{
  border-left-color: #8e24aa;
  background: rgba(156,39,176,.12);
  color: inherit;
}

/* g3 — лайм */
.data-table tbody td.dp-hi.sym-g3{
  border-left-color: #7cb342;
  background: rgba(139,195,74,.12);
  color: inherit;
}

/* Тёмная тема — чуть сильнее заливка */
html[data-theme="dark"] .data-table tbody td.dp-hi.sym-g0{ background: rgba(255,193,7,.18); }
html[data-theme="dark"] .data-table tbody td.dp-hi.sym-g1{ background: rgba(0,188,212,.18); }
html[data-theme="dark"] .data-table tbody td.dp-hi.sym-g2{ background: rgba(156,39,176,.18); }
html[data-theme="dark"] .data-table tbody td.dp-hi.sym-g3{ background: rgba(139,195,74,.18); }