/* watchlist.css — DANH SÁCH THEO DÕI (.wl-* namespace). CSS variables only. */

.wl-wrap { padding: 4px 2px 24px; }

/* Đóng băng title+filters+legend khi cuộn (2026-07-06) — top set ĐỘNG qua JS
   (bám ngay dưới .page-header sticky sẵn có của app). Nền đặc để hàng bên dưới
   không hiện xuyên qua khi cuộn. z-index cao hơn thead (2) để không bị đè lẫn. */
.wl-sticky-top {
    position: sticky; top: 0; z-index: 3;
    background: var(--color-bg-primary);
    padding-top: 4px; margin-bottom: -4px;
}

.wl-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
.wl-title { font-size: var(--font-size-lg); font-weight: 800; margin: 0; color: var(--color-text-primary); }
.wl-sub { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: 3px; }

.wl-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.wl-fbtn {
    font-size: var(--font-size-sm); padding: 4px 10px; border-radius: var(--border-radius-sm); cursor: pointer;
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
    border: 1px solid var(--color-border); transition: all .15s;
}
.wl-fbtn:hover { color: var(--color-text-primary); }
.wl-fbtn.on { background: var(--color-accent-primary); color: var(--color-on-accent); border-color: transparent; }

.wl-sort-sep { font-size: var(--font-size-sm); color: var(--color-text-secondary); align-self: center; margin-left: 4px; }
.wl-sbtn {
    font-size: var(--font-size-sm); padding: 4px 10px; border-radius: var(--border-radius-sm); cursor: pointer;
    background: transparent; color: var(--color-text-secondary);
    border: 1px solid var(--color-border); transition: all .15s;
}
.wl-sbtn:hover { color: var(--color-text-primary); }
.wl-sbtn.on { background: var(--color-text-primary); color: var(--color-bg-primary); border-color: transparent; }

.wl-legend {
    font-size: var(--font-size-sm); line-height: 1.5; color: var(--color-text-secondary);
    background: var(--color-bg-tertiary); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); padding: 8px 12px; margin-bottom: 12px;
}
.wl-legend i { color: var(--color-negative); }



/* overflow-x VÀ overflow-y CÙNG auto (2026-07-06): CSS không cho phép 1 khung vừa
   cuộn ngang (overflow-x:auto — cần cho 11 cột trên màn hẹp) vừa để sticky con bám
   theo cuộn TRANG NGOÀI — hễ overflow-x != visible thì overflow-y bị ép thành 'auto'
   theo spec (không cách nào tránh), khiến khung này tự thành 1 vùng cuộn RIÊNG.
   → Chấp nhận điều đó: cho khung 1 chiều cao giới hạn (max-height set qua JS =
   phần còn lại của màn hình dưới khối sticky-top), để nó cuộn dọc BÊN TRONG luôn —
   thead sticky top:0 lúc này ĐÚNG NGHĨA (bám theo đúng khung đang cuộn nó). */
.wl-table-wrap {
    overflow: auto; border: 1px solid var(--color-border); border-radius: var(--border-radius-md);
}
/* [U4 2026-07-27] Lưới 2 cột — tận dụng bề ngang, giảm nửa chiều cuộn dọc.
   2 bảng ĐỘC LẬP (mỗi bảng thead riêng để sticky đúng ở cả hai cột). */
.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.wl-grid > .wl-table:first-child { border-right: 1px solid var(--color-border); }
.wl-grid--single { grid-template-columns: 1fr; }          /* ít mã thì 1 cột cho gọn */
.wl-grid--single > .wl-table:last-child { display: none; }
/* Ngưỡng 1280px: mỗi bảng 8 cột cần ~650px → dưới mức này 2 cột sẽ bị bóp/tràn.
   JS đọc CÙNG ngưỡng (_twoCol) để dồn hết hàng vào bảng A, tránh lặp header. */
@media (max-width: 1279px) { .wl-grid { grid-template-columns: 1fr; }
    .wl-grid > .wl-table:first-child { border-right: 0; } }

.wl-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.wl-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
    text-align: left; font-weight: 700; padding: 9px 10px; white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}
/* [U4] Header cột SỐ phải căn PHẢI cho trùng trục với giá trị bên dưới.
   `.wl-table thead th` (0,1,2) vốn đè `.wl-num` (0,1,0) → header lệch giá trị. */
.wl-table thead th.wl-num { text-align: right; }
.wl-table thead th.wl-act { text-align: center; }

.wl-tr { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background .12s; }
.wl-tr:hover { background: var(--color-bg-tertiary); }
.wl-table td { padding: 8px 10px; color: var(--color-text-primary); vertical-align: middle; }
.wl-num { text-align: right; white-space: nowrap; }
.wl-sym b { font-size: var(--font-size-base); }
.wl-sig {
    display: inline-flex; align-items: center; font-size: var(--font-size-xs); font-weight: 600;
    padding: 1px 7px; border-radius: var(--border-radius-md); margin: 1px 2px;
    color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.wl-sigs { min-width: 240px; }
.wl-sig { border-radius: var(--border-radius-sm); }
.wl-sig em { font-style: normal; opacity: .6; margin-left: 4px; font-size: var(--font-size-2xs); }

.wl-fresh { color: var(--color-positive); font-weight: 700; }
.wl-moved { color: var(--color-text-secondary); }
@media (max-width: 768px) {
        .wl-table { font-size: var(--font-size-sm); }
}

/* U1b (2026-07-06): bấm dòng = biểu đồ realtime nhanh; nút 📊 = phân tích sâu AI */
.wl-act { text-align: center; width: 34px; }
.wl-deep {
    background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm); padding: 2px 6px; cursor: pointer; font-size: var(--font-size-sm);
    line-height: 1; opacity: .75;
}
.wl-deep:hover { opacity: 1; border-color: var(--color-text-secondary); }
.wl-tr { cursor: zoom-in; }

/* ─── U3 (2026-07-27): bảng gọn 8 cột, trục xếp hạng = RS ───
   Bỏ 4 cột (#/Ngành/SEPA/Điểm), gộp "Đồng thuận loại"+"Tín hiệu" → "Setup",
   thêm cột HÀNH ĐỘNG (spec mục 3.3). Xem watchlist_scoring_audit 2026-07-27. */

/* Badge đồng thuận — số ENGINE độc lập, KHÔNG còn là trục xếp hạng (chỉ tham khảo) */
.wl-cons {
    display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs); font-weight: 700; vertical-align: middle;
    color: var(--color-accent-primary);
    border: 1px solid var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
}
/* "+N" = số tín hiệu còn lại ngoài setup mạnh nhất (rê chuột xem tên) */
.wl-more {
    display: inline-block; margin-left: 5px; font-size: var(--font-size-xs); font-weight: 600;
    color: var(--color-text-secondary); cursor: help;
}

/* Cột HÀNH ĐỘNG — cột DUY NHẤT trả lời "tôi phải làm gì" */
.wl-actcol { white-space: nowrap; }
.wl-a { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-xs); font-weight: 600; }
.wl-a--ok { color: var(--color-positive); }
.wl-a--late { color: var(--color-warning); }
.wl-a--sell { color: var(--color-negative); }
.wl-a--none { color: var(--color-text-secondary); font-weight: 400; }

/* Đếm số mã mỗi chip nguồn (chip rỗng đã bị ẩn ở JS) */
.wl-src em {
    font-style: normal; margin-left: 4px; font-size: var(--font-size-xs); opacity: .7;
}

/* Nút mở rộng — mẫu shortlist + phần dư của lớp quyết định */
.wl-expand {
    display: block; width: 100%; padding: 9px; cursor: pointer;
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
    border: 0; border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm); font-weight: 600;
}
.wl-expand:hover { color: var(--color-text-primary); }

@media (max-width: 560px) {
    .wl-table { font-size: var(--font-size-xs); }
    .wl-table td, .wl-table thead th { padding: 6px 5px; }
    .wl-a { font-size: var(--font-size-xs); }
    .wl-sigs { min-width: 0; }
    /* Ẩn theo mức ưu tiên QUYẾT ĐỊNH, không cắt bừa: bỏ Giá (cột 3) và BD (cột 5) —
       giá xem được khi bấm vào biểu đồ, BD là thông tin phụ. GIỮ: Mã · Setup · RS
       (trục xếp hạng) · %chạy · Hành động · Sâu. Tránh cuộn ngang trên mobile. */
    .wl-table thead th:nth-child(3), .wl-table td:nth-child(3),
    .wl-table thead th:nth-child(5), .wl-table td:nth-child(5) { display: none; }
    /* Nhãn hành động rút gọn còn icon + chữ ngắn */
    .wl-a { gap: 2px; }
}

/* ==========================================
 * TRACK A/B dời từ trang LÃI KÉP (bước 6 hợp nhất danh mục)
 * Để RIÊNG dưới bảng chính: hai danh sách này có tiêu chí chọn khác hẳn cột
 * "đồng thuận" của bảng trên, trộn vào là làm cột đó mang hai nghĩa.
 * ========================================== */
.wl-ct-wrap {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}
.wl-ct-head {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}
.wl-ct-note {
    font-weight: 400;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-left: 0.35rem;
}
.wl-ct-block { margin-top: 0.5rem; }
.wl-ct-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.3rem;
}
.wl-ct-title em {
    font-style: normal;
    opacity: 0.6;
    margin-left: 0.2rem;
}
.wl-ct-items { display: flex; flex-wrap: wrap; gap: 4px; }
.wl-ct-item {
    padding: 2px 7px;
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    cursor: pointer;
}
.wl-ct-item:hover { border-color: var(--color-accent-primary); }
.wl-ct-ready {
    font-weight: 700;
    border-color: var(--color-positive);
    color: var(--color-positive);
}