/* ============================================================
 * card.css — 卡片统一样式（外壳 + 工具条 + 表格 + 文字 + 按钮 + 图表）
 * 由原 card/toolbar/table/text/button/chart 六个文件归并而来：
 * 这些都是「为实现一张 card 服务」的样式，同一语义同一样式，只此一处。
 * 组件 Shadow DOM 与宿主页面均可引入；依赖 tokens.css 提供变量与重置。
 * ============================================================ */

/* —— 卡片外壳 —— */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 16px;
    border-radius: var(--radius);
    margin: 8px 0;
    box-shadow: var(--shadow-float);
}
.card h3 {
    font-size: 17px;
    color: var(--text-dark);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}
.card h4 { font-size: 15px; color: var(--text-mid); margin: 10px 0 6px; }

/* —— 媒体元素 —— */
.card img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 16px 0;
}

/* —— 分隔线 —— */
.card hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

/* ============================================================
 * 通用组件类（多卡复用的“同一语义同一样式”，基于上方令牌）
 * 注：可折叠板块、状态徽章已升级为共享 view（section-view / state-view，自带 css），
 *     故 card.css 不再持有 .section- 系列与 .cstate；仅保留跨卡复用的原子类（卡头 .hd、后续 .chip）。
 * ============================================================ */

/* —— 卡头（value/tag/value_overview/value_scatter 等共有）—— */
.hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.hd .t{font-weight:800;font-size:16px;color:var(--tx-strong);}
.hd .sub{font-size:12px;color:var(--tx-sub);}
.hd>span:empty{display:none;}   /* 空占位 span 不参与 flex gap（.sub/.hd-x 恒渲染但可能为空） */

/* —— 自适应网格（判定块/图表块并列排布，同 value-card .d-methods）——
 * 用普通 grid div 而非 <grid-view>：后者多一层 display:contents slot，子卡内再嵌带 slot 的
 * 自定义元素（如 tag-card 的表格）时，窗口拖动会因多层 slot 边界不能及时重排深层内容而错乱。
 * auto-fill + minmax(min(430px,100%),1fr)：列数随宽度自动增减，窄容器自动塌单列且不溢出。*/
.grid-auto{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));}
/* 宽屏一行最多 2 个（赛道/否决判定块），超宽容器也不排第 3 列 */
@media(min-width:1200px){.grid-auto{grid-template-columns:repeat(2,1fr);}}

/* —— 人名/同比环比徽章 chips（统一 indicator .pf/.dt 、dividend .person-badge/.dtype-badge 、tag_mini .dtype-*）—— */
.chip{display:inline-block;padding:0 5px;font-size:10px;line-height:16px;border-radius:3px;vertical-align:middle;white-space:nowrap;}
.chip.p-tang{color:var(--chip-tang-fg);background:var(--chip-tang-bg);border:1px solid var(--chip-tang-bd);}
.chip.p-wang{color:var(--chip-wang-fg);background:var(--chip-wang-bg);border:1px solid var(--chip-wang-bd);}
.chip.p-ba  {color:var(--chip-ba-fg);  background:var(--chip-ba-bg);  border:1px solid var(--chip-ba-bd);}
.chip.p-mang{color:var(--chip-mang-fg);background:var(--chip-mang-bg);border:1px solid var(--chip-mang-bd);}
.chip.d-tong   {color:var(--chip-tong-fg);  background:var(--chip-tong-bg);  border:1px solid var(--chip-tong-bd);}
.chip.d-huan   {color:var(--chip-huan-fg);  background:var(--chip-huan-bg);  border:1px solid var(--chip-huan-bd);}
.chip.d-tongji {color:var(--chip-tongji-fg);background:var(--chip-tongji-bg);border:1px solid var(--chip-tongji-bd);}

/* 工具条(.toolbar) 及其吸顶(:host{position:sticky}) 属 <stock-select-card> 专有，
   已移至 card/stock_select_card/stock_select_card.css 由该组件私有加载。
   切勿在此写无前缀的 :host 定位规则——card.css 被每张卡的 shadow 引入，会泄漏成全部卡吸顶。 */

/* ============================================================
 * 表格（统计/折叠/明细/CAGR）—— 改列宽请只动这里。
 * ============================================================ */

/* —— 基础统计表 —— */
.stat-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.stat-table th, .stat-table td {
    border: 1px solid var(--border-table);
    padding: 8px;
    text-align: center;
    font-size: 14px;
}
.stat-table th { background: var(--bg-th); color: var(--text-th); }
/* 隔行斑马（蓝调）；td 上的语义色（买/卖/命中）会覆盖此 tr 底色 */
.stat-table tbody tr:nth-child(even):not(.row-toggle) { background: var(--bg-zebra); }

/* —— 预览折叠：默认显示前 3 行，末尾「展开/收起」行始终可见（配合 util/components/table_collapse.js）—— */
.collapsed tbody tr:nth-child(n+4):not(.row-toggle) { display: none; }
.stat-table tr.row-toggle td {
    text-align: center;
    color: var(--green);
    background: var(--bg-hover);
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}
.stat-table tr.row-toggle:hover td { background: var(--bg-hover-strong); }

/* —— 明细表（分红）—— */
.detail-table th, .detail-table td { font-size: 13px; padding: 6px 8px; }
.detail-table td.desc { text-align: left; }
.detail-table tr.pending td { color: var(--text-faint); }

/* —— CAGR 表（财务）—— */
.cagr-table { margin: 0 0 12px 0; }
.cagr-table th, .cagr-table td { padding: 5px 8px; }

/* 双表自适应：宽屏并排，窄屏堆叠 */
.overview-flex { display: flex; flex-wrap: wrap; gap: 16px; }
.overview-item { flex: 1 1 560px; min-width: 0; }

/* 宽表横向滚动（分红明细等） */
.table-wrap { overflow-x: auto; }

/* ============================================================
 * 标题 / 注释 / 徽标 / 提示框等文字型元素
 * ============================================================ */

/* 小节标题：flex 让「标题 + badge/同行提示」水平居中对齐，
   position:relative 供唐朝法 pe-picker 绝对定位居中 */
.section-title {
    font-weight: bold;
    font-size: 15px;
    color: var(--text-dark);
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    position: relative;
}
.sub-title {
    font-weight: bold;
    margin: 10px 0 4px;
    color: var(--text-mid);
    font-size: 16px;
}

/* 页面级区块标题（带左侧强调竖条）：直接铺在深蓝页底上，故用浅色字 */
.page-title {
    font-size: 16px;
    font-weight: bold;
    color: #eaf2ff;
    margin: 20px 0 8px;
    padding-left: 10px;
    border-left: 4px solid var(--accent-on-dark);
}
/* page-title 内放链接时（如返回首页导航）：继承浅色、去下划线，悬停再显示 */
.page-title a { color: inherit; text-decoration: none; }
.page-title a:hover { text-decoration: underline; }

.note { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.6; }
.chart-note { font-size: 12px; color: rgba(255, 255, 255, .82); margin: 6px 0 4px; line-height: 1.5; }

/* 单行截断工具类：内容超出一行时自动显示 …（标题/摘要等单行展示场景） */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    display: inline-block;
    background: var(--green);
    color: #fff;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 13px;
    margin-left: 8px;
}

.warn-box {
    background: var(--bg-warn);
    color: var(--text-warn);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    display: none;
}

/* ============================================================
 * 组件内切换按钮组（PE 时间范围 / 财务季度）
 * ============================================================ */

/* —— PE 时间范围按钮（激活绿）—— */
.range-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}
.range-btns button {
    padding: 2px 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-white);
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
}
.range-btns button.active { background: var(--green); color: #fff; border-color: var(--green); }

/* —— 财务季度选择按钮（激活蓝）—— */
.quarter-selector { text-align: center; margin-bottom: 12px; }
.quarter-selector button {
    padding: 4px 14px;
    margin: 0 4px;
    border: 1px solid var(--border-table);
    border-radius: 4px;
    background: var(--bg-th);
    cursor: pointer;
    font-size: 13px;
}
.quarter-selector button.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ============================================================
 * 图表容器（组件内 .chart）
 * ============================================================ */
.chart {
    width: 100%;
    height: 620px;
    border: 1px solid var(--border-soft);
    margin-top: 10px;
}
.chart--sm { height: 380px; }   /* 分红图略矮 */

.chart-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-dark);
    text-align: center;
    margin: 4px 0;
}

/* —— 移动端（媒体查询按视口求值，shadow 内同样生效）—— */
@media (max-width: 640px) {
    .card { padding: 10px 12px; }
}