/**
 * 公共组件库
 * 版本号: V.0001
 * 依赖: tokens.css
 * 说明: 从各页面内联 <style> 中抽取的共用组件。
 *       引用 class 即可，无需再写新 CSS。
 */

/* ============================================================
   qa-card — 统一卡片（首页 info-card / 帮助 help-section / 对比 compare-hero）
   ============================================================ */
.qa-card {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--c-border-subtle);
    overflow: hidden;
}
.qa-card.h-100 { height: 100%; }
.qa-card .card-header {
    background: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-border-subtle);
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    color: var(--c-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.qa-card .card-body {
    padding: var(--space-3) var(--space-4);
}

/* ============================================================
   qa-hero — 页面头区块（对比页/帮助页/分析结果库）
   ============================================================ */
.qa-hero {
    background: var(--c-surface);
    border: 1px solid var(--c-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
}
.qa-hero h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--c-fg);
}
.qa-hero p {
    color: var(--c-fg-muted);
    margin: 0 0 var(--space-3);
    font-size: 0.92rem;
}

/* ============================================================
   qa-chip — 通用 chip（首页 hint-chip / history-chip / signal-chip）
   ============================================================ */
.qa-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px var(--space-3);
    background: var(--c-accent-subtle);
    border: 1px solid rgba(61, 90, 254, 0.15);
    border-radius: var(--radius-full);
    color: var(--c-accent);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: all 0.15s;
}
.qa-chip:hover {
    background: rgba(61, 90, 254, 0.12);
    border-color: rgba(61, 90, 254, 0.3);
    color: var(--c-accent-hover);
}

/* 金融语义 chip 变体 */
.qa-chip--up      { background: var(--c-up-bg); color: var(--c-up); border-color: rgba(229, 57, 53, 0.15); }
.qa-chip--down    { background: var(--c-down-bg); color: var(--c-down); border-color: rgba(10, 143, 79, 0.15); }
.qa-chip--warn    { background: var(--c-warn-bg); color: var(--c-warn); border-color: rgba(230, 167, 0, 0.15); }
.qa-chip--info    { background: var(--c-info-bg); color: var(--c-info); border-color: rgba(25, 118, 210, 0.15); }
.qa-chip--neutral { background: var(--c-surface-alt); color: var(--c-fg-muted); border-color: var(--c-border); }

/* ============================================================
   qa-table — 数据表格
   ============================================================ */
.qa-table {
    width: 100%;
    font-size: var(--text-base);
}
.qa-table th {
    background: var(--c-surface-alt);
    color: var(--c-fg);
    font-weight: 600;
    white-space: nowrap;
}
.qa-table td,
.qa-table th {
    padding: var(--space-2) var(--space-3);
    border-color: var(--c-border);
    vertical-align: middle;
}
.qa-table tbody tr:hover {
    background: var(--c-accent-subtle);
}
.qa-table .code-col {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* ============================================================
   qa-input — 统一输入框
   ============================================================ */
.qa-input {
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-fg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qa-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.1);
}
.qa-input::placeholder {
    color: var(--c-fg-faint);
}

/* ============================================================
   qa-btn — 按钮变体
   ============================================================ */
.qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 0.15s;
    cursor: pointer;
}
.qa-btn--primary {
    background: var(--c-accent);
    color: var(--c-accent-fg);
    border: none;
}
.qa-btn--primary:hover {
    background: var(--c-accent-hover);
}
.qa-btn--ghost {
    background: transparent;
    color: var(--c-accent);
    border: 1px solid var(--c-accent);
}
.qa-btn--ghost:hover {
    background: var(--c-accent-subtle);
}
.qa-btn--danger {
    background: transparent;
    color: var(--c-danger);
    border: 1px solid var(--c-danger);
}
.qa-btn--danger:hover {
    background: rgba(220, 53, 69, 0.08);
}

/* ============================================================
   qa-alert — 提示框（info / warn / error / success）
   ============================================================ */
.qa-alert {
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-left: 3px solid;
}
.qa-alert--info {
    background: var(--c-info-bg);
    border-left-color: var(--c-info);
    color: var(--c-info-fg);
}
.qa-alert--warn {
    background: var(--c-warn-bg);
    border-left-color: var(--c-warn);
    color: var(--c-warn-fg);
}
.qa-alert--error {
    background: var(--c-up-bg);
    border-left-color: var(--c-danger);
    color: var(--c-up);
}
.qa-alert--success {
    background: var(--c-down-bg);
    border-left-color: var(--c-success);
    color: var(--c-down);
}

/* ============================================================
   qa-section-title — 区块标题（首页各区块标题行）
   ============================================================ */
.qa-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--space-8) 0 var(--space-3);
}
.qa-section-title h5 {
    margin: 0;
    color: var(--c-fg);
    font-weight: 600;
}
.qa-section-title small {
    color: var(--c-fg-faint);
}

/* ============================================================
   qa-empty — 空状态
   ============================================================ */
.qa-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--c-fg-faint);
}
.qa-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-4);
}

/* ============================================================
   qa-suggest — 搜索联想下拉（自选股添加/对比搜索/首页搜索共用）
   ============================================================ */
.qa-suggest {
    position: absolute;
    z-index: 1050;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
}
.qa-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-base);
    transition: background 0.12s;
}
.qa-suggest-item:hover,
.qa-suggest-item.active {
    background: var(--c-accent-subtle);
}

/* ============================================================
   qa-progress — 进度条
   ============================================================ */
.qa-progress {
    height: 8px;
    background: var(--c-surface-alt);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.qa-progress-bar {
    height: 100%;
    background: var(--c-accent);
    border-radius: var(--radius-full);
    transition: width 0.3s;
}

/* ============================================================
   导航栏 token 化
   ============================================================ */
.app-top-navbar {
    background: var(--nav-bg) !important;
}
.app-top-navbar .navbar-nav .nav-link {
    color: var(--nav-fg);
}
.app-top-navbar .navbar-nav .nav-link:hover,
.app-top-navbar .navbar-nav .nav-link.active {
    color: var(--nav-fg-active);
}
.app-top-navbar .navbar-brand {
    color: var(--nav-fg-active);
}