/* --- layout: контейнер и заголовок --- */
.container-narrow{max-width:1100px;margin:0 auto;padding:12px 16px;}
.page-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
.total-pill{font-size:12px;color:#666}

/* --- фильтры --- */
.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 10px;align-items:center;margin-bottom:10px}
.filters-grid .btn-apply{justify-self:end}
.filters-grid .form-control,.filters-grid .form-select{width:100%;padding:6px 8px;border:1px solid #ccc;border-radius:6px;height:32px;font-size:14px;background:#fff}
.filters-grid .btn{display:inline-block;padding:6px 12px;border:1px solid #0d6efd;background:#0d6efd;color:#fff;border-radius:6px;cursor:pointer}
.filters-grid .btn:hover{background:#0b5ed7;border-color:#0a58ca}

/* --- таблица --- */
.table-wrap{overflow-x:auto;border:1px solid #e8e8e8;border-radius:8px}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:8px 12px;white-space:nowrap}
.data-table thead th{background:#fafafa;border-bottom:1px solid #ddd;font-weight:600;position:sticky;top:0;z-index:1}
.data-table tbody tr{border-bottom:1px solid #eee}
.data-table tbody tr:nth-child(odd){background:#fcfcfc}
.data-table tbody tr:hover{background:#f5faff}
.text-end{text-align:right}

/* --- бейджи направления --- */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:18px;border:1px solid transparent}
.badge-up{color:#0f5132;background:#d1e7dd;border-color:#badbcc}
.badge-down{color:#842029;background:#f8d7da;border-color:#f5c2c7}

/* ==== THEME TOKENS ==== */
:root {
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e8e8e8;
  --thead: #fafafa;
  --row-alt: #fcfcfc;
  --row-hover: #f5faff;
  --accent: #0d6efd;
}
:root[data-theme="dark"] {
  --bg: #0b0f19;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --card: #101522;
  --border: #1f2937;
  --thead: #131a2a;
  --row-alt: #0f172a;
  --row-hover: #172036;
  --accent: #60a5fa;
}

/* базовые */
html, body { background: var(--bg); color: var(--text); }

/* контейнер/заголовок — уже были */
.container-narrow{max-width:1100px;margin:0 auto;padding:12px 16px;}
.page-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
.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}
.filters-grid .form-control,.filters-grid .form-select{
  width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;height:32px;font-size:14px;background:var(--card);color:var(--text)
}
.filters-grid .btn{display:inline-block;padding:6px 12px;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:6px;cursor:pointer}
.filters-grid .btn:hover{filter:brightness(0.95)}

/* таблица */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--card)}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:8px 12px;white-space:nowrap}
.data-table thead th{background:var(--thead);border-bottom:1px solid var(--border);font-weight:600;position:sticky;top:0;z-index:1}
.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}

/* бейджи */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:18px;border:1px solid transparent}
.badge-up{color:#0f5132;background:#d1e7dd;border-color:#badbcc}
.badge-down{color:#842029;background:#f8d7da;border-color:#f5c2c7}

/* пагинатор */
.pager{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:10px}
.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)}

/* === DARK THEME FIXES ===
   Поддерживаем два способа: <html data-theme="dark"> ИЛИ <body class="dark"> */
html[data-theme="dark"], body.dark { background:#0b1220; color:#e6e6e6; }

/* Инпуты/селекты в блоке фильтров */
html[data-theme="dark"] .filters-grid .form-control,
body.dark .filters-grid .form-control,
html[data-theme="dark"] .filters-grid .form-select,
body.dark .filters-grid .form-select {
  background:#0f1624 !important;
  color:#e6e6e6 !important;
  border-color:#2a3444 !important;
}
html[data-theme="dark"] .filters-grid .form-control::placeholder,
body.dark .filters-grid .form-control::placeholder {
  color:#8a93a6 !important;
}

/* Кнопка Apply слегка темнее при ховере */
html[data-theme="dark"] .filters-grid .btn:hover,
body.dark .filters-grid .btn:hover {
  filter:brightness(0.95);
}

/* Тёмная шапка, не меняя классы Razor */
html[data-theme="dark"] .navbar.bg-white,
body.dark .navbar.bg-white {
  background:#101826 !important;
  border-bottom-color:#1f2a3a !important;
}
html[data-theme="dark"] .navbar .nav-link,
body.dark .navbar .nav-link { color:#e6e6e6 !important; }
html[data-theme="dark"] .navbar .navbar-brand,
body.dark .navbar .navbar-brand { color:#e6e6e6 !important; }

/* Футер читаемый */
html[data-theme="dark"] .footer.text-muted,
body.dark .footer.text-muted { color:#aab1c0 !important; }

/* Таблица (на тёмной уже норм, слегка усилить контраст) */
html[data-theme="dark"] .data-table thead th,
body.dark .data-table thead th { background:#121a2a; }
html[data-theme="dark"] .data-table tbody tr:nth-child(odd),
body.dark .data-table tbody tr:nth-child(odd) { background:#111a2a; }
html[data-theme="dark"] .data-table tbody tr:hover,
body.dark .data-table tbody tr:hover { background:#162238; }

/* Бейджи уже ок; при желании можно чуть приглушить: */
/* .badge-up { background:#cfe9dd } .badge-down { background:#f6d3d9 } */