/* ============================================================
   地产运营驾驶舱 · 数据穿透（drill-through）
   从看板指标 逐层钻到 Excel 单元格与公式
   ============================================================ */

/* ── KPI 卡片可穿透提示 ── */
.kpi-card { cursor: pointer; position: relative; transition: box-shadow .18s, transform .18s; }
.kpi-card:hover { box-shadow: 0 6px 18px rgba(26,58,92,.14); transform: translateY(-1px); }
.kpi-card::after {
    content: '穿透 ▸'; position: absolute; right: 10px; top: 9px;
    font-size: 10px; color: var(--accent); opacity: 0; transition: opacity .18s; letter-spacing: .5px;
}
.kpi-card:hover::after { opacity: .9; }

/* 表格行可点击 */
.data-table tbody tr[data-drill] { cursor: pointer; }
.data-table tbody tr[data-drill]:hover { background: #f0f7ff !important; }
.data-table tbody tr[data-drill] td:first-child { position: relative; }

/* ── 遮罩 ── */
#drillMask {
    position: fixed; inset: 0; background: rgba(15,23,42,.26);
    opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 900;
}
#drillMask.show { opacity: 1; pointer-events: auto; }

/* ── 抽屉主体 ── */
#drillPanel {
    position: fixed; top: 0; right: 0; height: 100vh; width: 600px; max-width: 95vw;
    background: #fff; box-shadow: -14px 0 36px rgba(15,23,42,.2);
    transform: translateX(101%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
    z-index: 901; display: flex; flex-direction: column;
}
#drillPanel.show { transform: none; }

.dp-head { background: linear-gradient(135deg, #1a3a5c 0%, #2c5282 100%); color: #fff; padding: 14px 18px 16px; flex-shrink: 0; }
.dp-crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .78; margin-bottom: 8px; flex-wrap: wrap; }
.dp-crumb span.sep { opacity: .5; }
.dp-crumb b { font-weight: 600; opacity: 1; }
.dp-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dp-title { font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.dp-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dp-value .u { font-size: 12px; font-weight: 500; opacity: .8; margin-left: 4px; }
.dp-sub { font-size: 12px; opacity: .8; margin-top: 6px; }
.dp-close {
    position: absolute; top: 12px; right: 14px; background: rgba(255,255,255,.14);
    border: none; color: #fff; width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.dp-close:hover { background: rgba(255,255,255,.28); }
.dp-back {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff;
    font-size: 12px; padding: 3px 10px; border-radius: 12px; cursor: pointer; margin-right: 6px;
}
.dp-back:hover { background: rgba(255,255,255,.24); }

.dp-body { flex: 1; overflow: auto; padding: 16px 18px 24px; }
.dp-body::-webkit-scrollbar { width: 8px; }
.dp-body::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 4px; }

.dp-sec { margin-bottom: 18px; }
.dp-sec-title {
    font-size: 12px; font-weight: 700; color: #2c5282; letter-spacing: .6px;
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.dp-sec-title::before { content: ''; width: 3px; height: 12px; background: var(--accent); border-radius: 2px; }

.dp-caliber { background: #f7fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: #4a5568; line-height: 1.75; }
.dp-caliber code {
    display: inline-block; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
    padding: 1px 6px; font-family: ui-monospace, Consolas, monospace; color: #2b6cb0; font-size: 12px;
}
.dp-caliber .note { color: #a0aec0; }

.dp-parts { border: 1px solid #e8eef4; border-radius: 8px; overflow: hidden; }
.dp-part {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
    border-bottom: 1px solid #f0f4f8; background: #fff; transition: background .14s;
}
.dp-part:last-child { border-bottom: none; }
.dp-part:hover { background: #f2f8ff; }
.dp-part .p-name { flex: 1; font-size: 13px; color: #1a202c; }
.dp-part .p-name em { font-style: normal; font-size: 11px; color: #a0aec0; margin-left: 6px; }
.dp-part .p-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #2d3748; }
.dp-part .p-val.neg { color: #c53030; }
.dp-part .p-val.pos { color: #2f855a; }
.dp-part .p-go { color: #cbd5e0; font-size: 12px; }
.dp-part:hover .p-go { color: var(--accent); }
.dp-part .p-bar { height: 4px; border-radius: 2px; background: #3182ce; opacity: .75; width: 46px; flex-shrink: 0; }

.dp-cells { border: 1px solid #e8eef4; border-radius: 8px; overflow: hidden; }
.dp-cell-row { padding: 8px 12px; border-bottom: 1px solid #f0f4f8; font-size: 12.5px; }
.dp-cell-row:last-child { border-bottom: none; }
.dp-cell-row .c-top { display: flex; align-items: center; gap: 8px; }
.dp-cell-row .c-field { color: #4a5568; flex: 1; }
.dp-cell-row .c-val { font-weight: 600; font-variant-numeric: tabular-nums; color: #1a202c; }
.dp-cell-row .c-f { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: #2b6cb0; margin-top: 3px; word-break: break-all; }
.dp-cell-row .c-note { font-size: 11px; color: #a0aec0; margin-top: 2px; }

.ref-chip {
    display: inline-block; background: #ebf8ff; border: 1px solid #bee3f8; color: #2b6cb0;
    border-radius: 4px; padding: 0 6px; font-family: ui-monospace, Consolas, monospace;
    font-size: 11.5px; cursor: pointer; margin: 2px 4px 2px 0; transition: all .14s;
}
.ref-chip:hover { background: #3182ce; color: #fff; border-color: #3182ce; }

.src-chip {
    display: inline-flex; align-items: center; gap: 4px; background: #edf2f7; color: #2d3748;
    border-radius: 4px; padding: 2px 8px; font-family: ui-monospace, Consolas, monospace;
    font-size: 11.5px; cursor: pointer; border: 1px solid #e2e8f0;
}
.src-chip:hover { background: #3182ce; color: #fff; border-color: #3182ce; }

.dp-foot {
    flex-shrink: 0; border-top: 1px solid #e8eef4; padding: 10px 18px; background: #fafcfe;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 11.5px; color: #a0aec0;
}
.dp-foot button {
    background: #fff; border: 1px solid #cbd5e0; color: #4a5568; border-radius: 6px;
    padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.dp-foot button:hover { border-color: var(--accent); color: var(--accent); }

/* ── 顶栏实时同步状态 ── */
.sync-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255,255,255,.72); }
.sync-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: #48bb78; box-shadow: 0 0 0 3px rgba(72,187,120,.2); }
.sync-meta .dot.warn { background: #ecc94b; box-shadow: 0 0 0 3px rgba(236,201,75,.2); }
.sync-meta .dot.off { background: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,.2); }
.sync-meta b { color: #fff; font-weight: 600; }

/* ── AI 回答里的溯源角标 ── */
.cite-chip {
    display: inline-block; background: #ebf8ff; border: 1px solid #bee3f8; color: #2b6cb0;
    border-radius: 4px; padding: 0 6px; margin: 4px 4px 0 0; font-size: 11px; cursor: pointer;
    font-family: ui-monospace, Consolas, monospace;
}
.cite-chip:hover { background: #3182ce; color: #fff; }

/* 数据来源标注 */
.dp-empty { text-align: center; color: #a0aec0; font-size: 13px; padding: 30px 0; }