/* ══════════════════════════════════════════════════════════════════
   TRUNG TÂM BOT — trang #bot-hub (js/bot-portfolio-renderer.js)
   Namespace .bph-*. Chỉ dùng TOKEN CHỦ (--color-* / --space-* / --font-size-*),
   không hex viết cứng, không fallback hex (fallback hex = chế độ tối sai).
   Thành phần dùng chung (.dna-table, .dna-chip, .dna-empty…) lấy từ components/dna.css.
   ══════════════════════════════════════════════════════════════════ */

.bph { display: flex; flex-direction: column; gap: var(--space-md); }

.bph-pos { color: var(--color-positive); }
.bph-neg { color: var(--color-negative); }

/* ── đầu trang ── */
.bph-head {
    display: flex; flex-wrap: wrap; gap: var(--space-md);
    align-items: flex-start; justify-content: space-between;
}
.bph-head .dna-footnote { max-width: 74ch; margin-top: var(--space-xs); }

.bph-sec {
    font-size: var(--font-size-lg); font-weight: 650; margin: var(--space-md) 0 0;
    display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
}
.bph-lede { max-width: 84ch; margin-top: var(--space-xs); }

/* ── dải NAV theo thị trường ── */
.bph-navstrip {
    display: grid; gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.bph-tile {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); padding: var(--space-md);
}
.bph-tile-mk {
    font-size: var(--font-size-2xs); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--color-text-muted);
}
.bph-tile-nav {
    font-size: var(--font-size-2xl); font-weight: 600; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; margin-top: 2px;
}
.bph-tile-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-sm); margin: var(--space-xs) 0;
    font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums;
}
.bph-nosum { max-width: 74ch; }
.bph-spark { display: block; }

/* ── dải cảnh báo ── */
.bph-alerts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bph-alert {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--font-size-xs); padding: 5px 11px;
    border: 1px solid var(--color-border); border-radius: var(--border-radius-full);
    background: var(--color-bg-secondary); color: var(--color-text-secondary);
}
.bph-alert.is-warn {
    background: var(--color-neutral-bg); color: var(--color-neutral);
    border-color: var(--color-neutral);
}
.bph-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ── bảng ── */
.bph-table { font-size: var(--font-size-sm); }
.bph-table th.bph-sortable { cursor: pointer; user-select: none; }
.bph-table th.bph-sortable:hover { color: var(--color-text-primary); }
.bph-table th[aria-sort] { color: var(--color-accent-primary); }
.bph-table td { vertical-align: middle; }
.bph-sym { font-weight: 650; letter-spacing: -.01em; }
.bph-stale { color: var(--color-neutral); }
.bph-persona {
    font-size: var(--font-size-xs); color: var(--color-text-secondary);
    max-width: 280px; white-space: normal;
}
.bph-brain {
    background: var(--color-accent-bg); color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}
/* dòng LÀN của sổ chung — thụt vào để thấy nó phụ thuộc dòng quỹ phía trên */
.bph-sub .bph-sym { padding-left: var(--space-md); }
.bph-t2 { font-size: var(--font-size-xs); }

/* ── thanh rủi ro: giá nằm đâu giữa stop và mục tiêu ── */
.bph-rail {
    position: relative; height: 5px; min-width: 112px;
    border-radius: 3px; background: var(--color-bg-tertiary);
}
.bph-rail-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; opacity: .55; }
.bph-rail-pin {
    position: absolute; top: -3px; width: 2px; height: 11px;
    border-radius: 1px; background: var(--color-text-primary);
}
.bph-rail-tp {
    position: absolute; top: -2px; right: 0; width: 2px; height: 9px;
    border-radius: 1px; background: var(--color-accent-primary);
}
.bph-rail.is-ok   .bph-rail-fill { background: var(--color-positive); }
.bph-rail.is-warm .bph-rail-fill { background: var(--color-neutral); }
.bph-rail.is-hot  .bph-rail-fill { background: var(--color-negative); }
.bph-rail.is-brk  .bph-rail-fill { background: var(--color-negative); opacity: .9; }
.bph-rail-lbl {
    display: flex; justify-content: space-between; gap: var(--space-sm);
    font-size: var(--font-size-2xs); color: var(--color-text-muted);
    font-variant-numeric: tabular-nums; margin-top: 3px;
}

/* ── luật hiển thị (tầng lưu vết, gập) ── */
.bph-rules {
    border: 1px solid var(--color-border); border-radius: var(--border-radius-md);
    background: var(--color-bg-secondary); padding: var(--space-sm) var(--space-md);
}
.bph-rules > summary {
    cursor: pointer; font-size: var(--font-size-xs); font-weight: 600;
    color: var(--color-text-secondary);
}
.bph-rules-body {
    display: grid; gap: var(--space-sm); margin-top: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.bph-rule { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-sm); }
.bph-rule-k {
    font-size: var(--font-size-xs); font-weight: 700;
    color: var(--color-accent-primary); font-variant-numeric: tabular-nums;
}
.bph-rule b { font-size: var(--font-size-xs); }

/* ── màn hẹp: bảng tự cuộn ngang trong khung của nó (.dna-table-wrap lo),
   dải NAV xuống một cột, thanh rủi ro hẹp lại ── */
@media (max-width: 768px) {
    .bph-navstrip { grid-template-columns: 1fr; }
    .bph-head { flex-direction: column; }
    .bph-rail { min-width: 92px; }
    .bph-persona { max-width: 200px; }
}