/* insights.css - 洞察實驗室頁專屬樣式
   通用樣式由 base.css 提供
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero KPI Grid ── */
.hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

/* ── Preview Cards ── */
.preview-card, .module-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.preview-card { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 220px; }

.preview-top, .module-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.preview-title, .module-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; }

.preview-copy, .module-copy { font-size: 0.88rem; color: var(--text-secondary); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.pill.live { background: var(--brand-soft); color: var(--brand); }
.pill.next { background: var(--profit-soft); color: var(--profit); }
.pill.plan { background: var(--gold-soft); color: var(--gold); }

/* ── Metric Stack ── */
.metric-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.metric-box {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: 14px 14px 12px;
}
.metric-box .label { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 6px; }
.metric-box .value { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; }
.metric-box .meta { margin-top: 4px; font-size: 0.78rem; color: var(--text-secondary); }

/* ── Progress ── */
.progress-wrap { display: flex; flex-direction: column; gap: 10px; }
.progress-row { display: flex; justify-content: space-between; font-size: 0.84rem; color: var(--text-secondary); }
.progress-bar { width: 100%; height: 10px; background: var(--bg-subtle); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--radius-full); }
.progress-fill.dividend { background: var(--profit); }
.progress-fill.capital { background: var(--brand); }

/* ── List Panels ── */
.list-panel { padding: 24px 24px 20px; }

.list-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }

.mini-list { display: flex; flex-direction: column; gap: 10px; }

.mini-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.mini-main { display: flex; flex-direction: column; min-width: 0; }
.mini-title { font-size: 0.92rem; font-weight: 600; }
.mini-sub { font-size: 0.78rem; color: var(--text-tertiary); }

/* ── Module Grid ── */
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.module-card { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 12px; }

/* ── Heatmap ── */
.heatmap-panel { padding: 24px; }

.heatmap-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }

.heatmap-table-wrap { overflow-x: auto; margin-bottom: 16px; }

.heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px 8px;
    min-width: 980px;
}

.heatmap-table th {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-align: center;
    white-space: nowrap;
    border-bottom: none;
}

.heatmap-table th:first-child,
.heatmap-table td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; }

.heatmap-table th:first-child { background: var(--bg); padding-right: 8px; }
.heatmap-table td:first-child { background: var(--bg); padding-right: 8px; min-width: 68px; }

.heatmap-year { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); }

.heat-cell {
    min-width: 74px;
    min-height: 68px;
    padding: 10px 8px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.heat-cell.clickable { cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.heat-cell.clickable:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.10); }
.heat-cell.selected { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.heat-cell strong { font-size: 0.88rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.heat-cell small { font-size: 0.7rem; opacity: 0.82; line-height: 1; }
.heat-cell.empty { background: var(--bg-subtle); color: var(--text-tertiary); border-color: transparent; box-shadow: none; }
.heat-cell.future { opacity: 0.55; }

.heat-total { min-width: 88px; }

.heatmap-legend { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.heatmap-legend-scale { display: flex; align-items: center; gap: 8px; }
.heatmap-legend-bar {
    width: 168px;
    height: 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, rgba(196,30,58,0.2) 0%, rgba(229,229,234,0.65) 50%, rgba(36,138,61,0.85) 100%);
}
.heatmap-legend-note { font-size: 0.8rem; color: var(--text-tertiary); }

/* ── Drilldown ── */
.drilldown-panel { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 18px; }

.drilldown-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.drilldown-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }

.drilldown-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-label { font-size: 0.78rem; color: var(--text-tertiary); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.drilldown-meta { font-size: 0.82rem; color: var(--text-tertiary); }

/* ── Broker Cards (insights) ── */
.broker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }

.broker-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: 14px 14px 12px;
}
.broker-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 8px; }
.broker-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }

/* ── Summary Panels ── */
.drilldown-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }

.summary-panel { background: var(--bg-subtle); border-radius: var(--radius-md); padding: 16px; }
.summary-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.summary-panel-title { font-size: 0.92rem; font-weight: 700; }
.summary-panel-sub { font-size: 0.78rem; color: var(--text-tertiary); }

.summary-list { display: flex; flex-direction: column; gap: 10px; }
.summary-item {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.68);
}
.summary-main { display: flex; flex-direction: column; min-width: 0; }
.summary-title { font-size: 0.88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-subline { font-size: 0.76rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-values { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.summary-value { font-size: 0.86rem; font-weight: 700; }
.summary-meta { font-size: 0.74rem; color: var(--text-tertiary); white-space: nowrap; }

/* ── Transaction List (insights drilldown) ── */
.transaction-list { display: flex; flex-direction: column; gap: 10px; }

.transaction-item {
    display: grid;
    grid-template-columns: 110px 90px minmax(0, 1.4fr) minmax(0, 1fr) 120px 120px;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}

.transaction-meta { display: flex; flex-direction: column; min-width: 0; }
.transaction-date { font-size: 0.86rem; font-weight: 600; }

.transaction-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.transaction-type.buy { background: rgba(0,113,227,0.12); color: var(--brand); }
.transaction-type.sell { background: rgba(36,138,61,0.12); color: var(--profit); }
.transaction-type.dividend { background: rgba(163,122,0,0.14); color: var(--gold); }

.transaction-stock { font-size: 0.92rem; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-sub { font-size: 0.78rem; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-note { font-size: 0.82rem; color: var(--text-secondary); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-amount { font-size: 0.9rem; font-weight: 700; text-align: right; }

/* ── Broker Compare ── */
.broker-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.broker-compare-card {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.broker-compare-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.broker-compare-title { font-size: 1rem; font-weight: 700; }
.broker-compare-sub { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 3px; }

.broker-compare-highlight {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.68);
}
.broker-compare-label { font-size: 0.78rem; color: var(--text-tertiary); }
.broker-compare-value { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; }

.broker-compare-rows { display: flex; flex-direction: column; gap: 8px; }
.broker-compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.84rem; }
.broker-compare-row span:first-child { color: var(--text-tertiary); }

.broker-compare-progress {
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.7);
    overflow: hidden;
}
.broker-compare-progress > div {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, rgba(0,113,227,0.75), rgba(36,138,61,0.85));
}

.module-note {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* ── Responsive (insights-specific) ── */
@media (max-width: 1200px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .metric-stack { grid-template-columns: 1fr; }
    .heatmap-summary { grid-template-columns: 1fr 1fr; }
    .drilldown-kpis { grid-template-columns: repeat(3, 1fr); }
    .broker-grid { grid-template-columns: 1fr 1fr; }
    .drilldown-detail-grid { grid-template-columns: 1fr; }
    .transaction-item { grid-template-columns: 100px 84px minmax(0, 1fr) minmax(0, 1fr) 110px 110px; }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .heatmap-summary { grid-template-columns: 1fr; }
    .drilldown-kpis { grid-template-columns: 1fr 1fr; }
    .broker-grid { grid-template-columns: 1fr; }
    .transaction-item { grid-template-columns: 1fr; gap: 8px; }
    .transaction-amount { text-align: left; }
}

@media (max-width: 768px) {
    .heatmap-table { min-width: 100%; border-spacing: 4px 4px; }
}