/* Giao diện tối — nạp SAU CÙNG trong <head> (sau mọi CSS khác, kể cả các <style> mà JS
   tự chèn vào <head> lúc chạy) để mọi rule ở đây đều có tiền tố [data-theme="dark"], tức
   độ đặc hiệu (specificity) luôn cao hơn rule gốc dạng .class thường — nhờ vậy các override
   dưới đây thắng bất kể thứ tự nạp trong DOM, kể cả với style do JS chèn muộn hơn. */

[data-theme="dark"] {
  --ink: #e7efe9;
  --muted: #8aa39b;
  --paper: #0e1613;
  --card: #16211d;
  --line: #28352f;
  --green: #2dd4a1;
  --green2: #23c98c;
  --red: #ff6b73;
  --amber: #eab35a;
  --navy: #12332f;
}

/* ---- Khung chính: topbar / nav / search / nút icon ---- */
[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
[data-theme="dark"] .topbar { background: rgba(14, 22, 19, .92); border-color: var(--line); }
[data-theme="dark"] .search { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .search span { color: #5f756d; }
[data-theme="dark"] .icon-btn { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .hamburger-btn { background: var(--card); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] nav a { color: #7f9992; }
[data-theme="dark"] .status { background: rgba(35, 168, 122, .14); }
[data-theme="dark"] .theme-toggle { background: var(--card); border-color: var(--line); color: var(--ink); }

/* ---- Panel / bảng / tab dùng chung mọi trang ---- */
[data-theme="dark"] .panel { background: var(--card); border-color: var(--line); box-shadow: 0 3px 14px rgba(0, 0, 0, .3); }
[data-theme="dark"] .periods, [data-theme="dark"] .tabs { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .periods button.active, [data-theme="dark"] .tabs button.active { background: var(--card); box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
[data-theme="dark"] .donut:after { background: var(--card); }
[data-theme="dark"] .flat { background: #37453f; }
[data-theme="dark"] .breadth-list > div { border-top-color: var(--line); }
[data-theme="dark"] .pulse-note { background: rgba(35, 168, 122, .12); }
[data-theme="dark"] td { border-bottom-color: var(--line); }
[data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, .035); }
[data-theme="dark"] .symbol-icon { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .rs-track { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .flow-item { border-bottom-color: var(--line); }
[data-theme="dark"] .bar { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] footer { color: var(--muted); }
[data-theme="dark"] .table-wrap:not(.no-mobile-cards) tr { background: var(--card); }
/* Từng ô "aio-group" (khối ngành, có header + hàng mã) vẫn giữ nền trắng để màu tín hiệu
   I/M/O luôn rõ — nhưng phần NỀN XUNG QUANH (khung ngoài + khoảng trống giữa các cột do các
   cột dài ngắn khác nhau) trước đây bị ép trắng theo, tạo mảng trắng trống trơn giữa dashboard
   tối. Đổi phần khung/khoảng trống này sang tối, chỉ riêng các khối ngành mới ở lại màu sáng. */
[data-theme="dark"] .aio-panel .aio-grid-shell, [data-theme="dark"] .aio-panel .aio-grid { background: var(--card) !important; }
[data-theme="dark"] .aio-tools input, [data-theme="dark"] .aio-tools select { background: var(--card); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .aio-empty { background: var(--card); color: var(--muted); }

/* ---- Bảng tổng hợp trạng thái dòng chảy + đánh giá giai đoạn thị trường (chèn động bằng JS) ---- */
[data-theme="dark"] .flow-download,
[data-theme="dark"] .flow-state-card small,
[data-theme="dark"] .flow-legend,
[data-theme="dark"] .flow-hint,
[data-theme="dark"] .regime-sub,
[data-theme="dark"] .regime-card small,
[data-theme="dark"] .regime-tools span,
[data-theme="dark"] .regime-legend { color: var(--muted); }
[data-theme="dark"] .flow-state-card,
[data-theme="dark"] .regime-card { border-color: var(--line); background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .flow-chart-wrap,
[data-theme="dark"] .flow-status-chart,
[data-theme="dark"] .flow-index-chart,
[data-theme="dark"] .flow-regime-chart,
[data-theme="dark"] .regime-wrap { background: var(--card) !important; border-color: var(--line) !important; }
[data-theme="dark"] .flow-z { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .flow-tools button,
[data-theme="dark"] .regime-tools button { border-color: var(--line); background: var(--card); color: var(--ink); }
[data-theme="dark"] .flow-alert { background: rgba(255, 255, 255, .06); color: var(--muted); }
[data-theme="dark"] .flow-alert.zone { background: rgba(217, 164, 65, .18); color: #f0c675; }
[data-theme="dark"] .flow-alert.peak { background: rgba(255, 107, 115, .18); color: #ff8b8f; }
[data-theme="dark"] .regime-badge { background: rgba(35, 168, 122, .16); color: #4fe0ac; }
[data-theme="dark"] .regime-badge.defensive { background: rgba(255, 107, 115, .16); color: #ff8b8f; }

/* ---- Bảng dòng tiền lệnh lớn / robot radar / trinh sát cá mập (đã dùng biến sẵn, chỉ vài chỗ cố định) ---- */
[data-theme="dark"] .robot-source-banner.live { background: rgba(35, 168, 122, .16); }
[data-theme="dark"] .robot-source-banner.historical { background: rgba(217, 164, 65, .16); color: #f0c675; }
[data-theme="dark"] .bigflow-btn.ghost { background: transparent; }
[data-theme="dark"] .bigflow-btn.ghost:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .bigflow-panel .badge { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .bigflow-panel .badge.teal { background: rgba(35, 168, 122, .16); }
[data-theme="dark"] .bigflow-side.buy { background: rgba(35, 168, 122, .16); }
[data-theme="dark"] .bigflow-side.sell { background: rgba(255, 107, 115, .16); }
[data-theme="dark"] .funds-source-note code { background: rgba(255, 255, 255, .08); color: var(--ink); }
[data-theme="dark"] .funds-label.new { background: rgba(35, 168, 122, .16); }
[data-theme="dark"] .funds-label.up { background: rgba(35, 168, 122, .12); }
[data-theme="dark"] .funds-label.down { background: rgba(255, 107, 115, .14); }
[data-theme="dark"] .funds-label.exit { background: rgba(255, 255, 255, .07); color: #9fb3ad; }

/* ---- Modal đăng nhập/đăng ký (auth.css) ---- */
[data-theme="dark"] .auth-modal { background: var(--card); box-shadow: 0 28px 80px rgba(0, 0, 0, .55); }
[data-theme="dark"] .auth-close { background: rgba(255, 255, 255, .08); color: var(--ink); }
[data-theme="dark"] .auth-promo { background: linear-gradient(145deg, #12332f 0%, #16211d 58%, #241d10 100%); border-right-color: var(--line); }
[data-theme="dark"] .auth-promo p { color: #93aaa2; }
[data-theme="dark"] .auth-benefits span { color: #cfe3db; }
[data-theme="dark"] .auth-benefits i { background: rgba(35, 168, 122, .18); color: #4fe0ac; }
[data-theme="dark"] .auth-brand { color: var(--ink); }
[data-theme="dark"] .auth-field span { color: #8aa39c; }
[data-theme="dark"] .auth-field input { background: #0f1a17; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .auth-switch { color: #8aa39c; }
[data-theme="dark"] .auth-avatar { background: rgba(35, 168, 122, .18); color: #4fe0ac; }
[data-theme="dark"] .auth-user-card p { color: var(--muted); }
[data-theme="dark"] .auth-logout { background: transparent; border-color: var(--line); color: #ff8b8f; }
[data-theme="dark"] .zalo-contact { background: var(--card); }

/* ---- Khung biểu đồ nến (terminal-chart.css) — bản thân canvas Lightweight Charts đã được
   cấu hình màu tối riêng trong chart-terminal.js, đây chỉ là phần khung/toolbar xung quanh ---- */
[data-theme="dark"] .terminal-chart { background: var(--card); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .terminal-toolbar,
[data-theme="dark"] .range-bar,
[data-theme="dark"] .tv-attribution { background: var(--card); border-color: var(--line); }
[data-theme="dark"] .ticker-chip { border-color: var(--line); }
[data-theme="dark"] .ticker-chip span { border-color: #3a4d47; }
[data-theme="dark"] .timeframes button,
[data-theme="dark"] .tool-button,
[data-theme="dark"] .zoom-button,
[data-theme="dark"] .range-bar button { color: #8aa39c; }
[data-theme="dark"] .timeframes button.active, [data-theme="dark"] .timeframes button:hover,
[data-theme="dark"] .tool-button.active, [data-theme="dark"] .tool-button:hover,
[data-theme="dark"] .range-bar button.active, [data-theme="dark"] .range-bar button:hover { background: rgba(35, 168, 122, .16); color: #59e0ae; }
[data-theme="dark"] .tool-divider { background: var(--line); }
[data-theme="dark"] .zoom-button { border-color: var(--line); }
[data-theme="dark"] .terminal-info { border-color: var(--line); }
[data-theme="dark"] .terminal-info span, [data-theme="dark"] .range-bar span, [data-theme="dark"] .tv-attribution { color: #7f9992; }

/* ---- Các panel phụ của trang cổ phiếu: RS / áp lực giao dịch / đảo chiều xu hướng / backtest
   (chèn động bằng chart-terminal.js — luôn nền trắng cố định trước đây) ---- */
[data-theme="dark"] .rs-panel, [data-theme="dark"] .pressure-panel,
[data-theme="dark"] .xtrend-panel, [data-theme="dark"] .backtest-panel,
[data-theme="dark"] .trend-panel, [data-theme="dark"] .chart-layout-toolbar {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] .rs-head, [data-theme="dark"] .rs-footer,
[data-theme="dark"] .pressure-head, [data-theme="dark"] .pressure-footer,
[data-theme="dark"] .xtrend-head, [data-theme="dark"] .xtrend-footer,
[data-theme="dark"] .backtest-head, [data-theme="dark"] .backtest-metrics,
[data-theme="dark"] .backtest-metrics div, [data-theme="dark"] .backtest-footer,
[data-theme="dark"] .backtest-trades, [data-theme="dark"] .backtest-trades-table th,
[data-theme="dark"] .backtest-trades-table td { border-color: var(--line); }
[data-theme="dark"] .rs-head small, [data-theme="dark"] .rs-footer,
[data-theme="dark"] .rs-meta span, [data-theme="dark"] .pressure-head small,
[data-theme="dark"] .pressure-footer, [data-theme="dark"] .xtrend-head small,
[data-theme="dark"] .xtrend-footer, [data-theme="dark"] .backtest-head small,
[data-theme="dark"] .backtest-metrics small, [data-theme="dark"] .backtest-footer,
[data-theme="dark"] .backtest-trades-head span, [data-theme="dark"] .backtest-trades-table th,
[data-theme="dark"] .backtest-trades-table td.reason-cell { color: var(--muted); }
[data-theme="dark"] .rs-meta span { border-color: var(--line); }
[data-theme="dark"] .trend-current, [data-theme="dark"] .pressure-current,
[data-theme="dark"] .xtrend-current { background: rgba(255, 255, 255, .07); color: var(--ink); }
[data-theme="dark"] .trend-current.positive { background: rgba(35, 168, 122, .16); color: #4fe0ac; }
[data-theme="dark"] .trend-current.negative { background: rgba(255, 107, 115, .16); color: #ff8b8f; }
[data-theme="dark"] .backtest-modes button, [data-theme="dark"] .chart-layout-actions button,
[data-theme="dark"] .chart-window-bar button { border-color: var(--line); background: var(--card); color: #8aa39c; }
[data-theme="dark"] .backtest-modes .backtest-open-badge { background: rgba(217, 164, 65, .16); color: #f0c675; border-color: rgba(217, 164, 65, .3); }
[data-theme="dark"] .backtest-modes .backtest-open-badge.positive { background: rgba(35, 168, 122, .16); color: #4fe0ac; border-color: rgba(35, 168, 122, .3); }
[data-theme="dark"] .backtest-modes .backtest-open-badge.negative { background: rgba(255, 107, 115, .16); color: #ff8b8f; border-color: rgba(255, 107, 115, .3); }
[data-theme="dark"] .backtest-trades-table th { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .backtest-trades-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .backtest-trades-table tbody tr.open-row { background: rgba(217, 164, 65, .1); }
[data-theme="dark"] .backtest-trades-table tbody tr.open-row:hover { background: rgba(217, 164, 65, .16); }
[data-theme="dark"] .backtest-trades-table .pnl-positive { color: #4fe0ac; }
[data-theme="dark"] .backtest-trades-table .pnl-negative { color: #ff8b8f; }
[data-theme="dark"] .backtest-trades-empty { color: var(--muted); }
[data-theme="dark"] .chart-window { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
[data-theme="dark"] .chart-window-bar { background: rgba(255, 255, 255, .04); border-color: var(--line); }
[data-theme="dark"] .chart-window-bar b { color: var(--ink); }
