/* ===== 全站共享业务组件 =====
   定位：跨页面复用的组件(页头/返回链接/报表卡/筛选条/数据表骨架/按钮)只在此处定义一份。
   新组件先查此处；页面级 css(reports/browse/uploads)只放该页独有样式，不要再"同款复述"。
   尺寸走 main.css 的控件 token(--control-*)，配色走 :root 变量(见 docs/配色规范.md)。
   加载顺序 main.css → components.css → 页面级 css，故页面级可按需覆盖(需覆盖时写明理由)。 */

/* ── 页头(标题 + 副标题) ── */
.page-head { margin-bottom: 1.1rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 680; letter-spacing: -.01em; color: var(--c-text); }
.page-head .page-sub { margin-top: .28rem; font-size: .82rem; color: var(--c-text-secondary); }

/* ── 面包屑里的返回上级链接 ── */
.cb-back { color: var(--c-text-secondary); }
.cb-back:hover { color: var(--c-primary); }

/* ── 报表/数据卡片外壳(堆叠间距等排版归页面级) ── */
.report { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* ── 切片条(实体 / 财年 / 期间 / 搜索…)：尺寸一律走控件 token；全站吸顶 ──
   0907 吸顶(报表四页 + 数据清单共此一份)：滚动到顶时钉在顶栏正下方(top=--topbar-h)，
   层级 15 介于顶栏(20)与内容(auto)之间——甜甜圈 .donut 是 position:relative/z-index:auto
   且排在筛选条之后，不显式给层级就会盖上来(层级表见 main.css)。
   背景取页面底色 --c-bg，并用等量负外边距铺满 .content 的整条画布宽(--content-pad)，
   使滚过去的卡片连同其投影都不会从筛选条两侧漏出；上下留白走 --filters-pad-y、
   钉高走 --filters-h(锚点补偿 --sticky-h 按它算)，一律不写字面值。
   原生 <select> 下拉、title 气泡由浏览器画在顶层，不受本层级影响。 */
.filters {
  position: sticky; top: var(--topbar-h); z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  min-height: var(--filters-h);
  margin: 0 calc(-1 * var(--content-pad)) 1.3rem;
  padding: var(--filters-pad-y) var(--content-pad);
  background: var(--c-bg); box-shadow: var(--shadow-card);
}
.filters label { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--c-text-secondary); }
.filters select { padding: var(--control-pad-y) var(--control-pad-x); border: 1px solid var(--c-border-strong); border-radius: var(--control-radius); background: var(--c-surface); color: var(--c-text); font-size: var(--control-font); box-shadow: var(--shadow-card); }
/* 提交按钮左右留白比 select 更宽(文字短、需点击面积)，故 pad-x 不走 token */
.filters button { padding: .34rem .8rem; border: 1px solid var(--c-primary); border-radius: var(--control-radius); background: var(--c-primary); color: var(--c-text-inverse); font-size: var(--control-font); cursor: pointer; }
/* 条尾说明(展示币种 / 行数统计)靠右 */
.filters .rp-cur { margin-left: auto; font-size: .78rem; color: var(--c-text-secondary); font-variant-numeric: tabular-nums; }
/* 条尾动作位(导出等)靠右 */
.filters .rp-act { margin-left: auto; }
/* 两者同时出现时(返利页=展示单位 + 导出按钮)只由 .rp-cur 顶到行尾,动作紧随其后：
   flex 的 auto 外边距会**均分**剩余空间,两个 auto 会把说明甩到行中间。 */
.filters .rp-cur ~ .rp-act { margin-left: 0; }

/* ── 数据表骨架(报表页 / 数据清单共用) ──
   .t = 数据表专用(width:100%)。勿把此类名用于非 <table> 元素:会被撑满宽致文字左偏(曾致甜甜圈标签跑位) */
.t { width: 100%; border-collapse: collapse; font-size: .84rem; }
.t th { text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--c-text-secondary); padding: .45rem .55rem; border-bottom: 1px solid var(--c-border); }
.t td { padding: .5rem .55rem; border-bottom: 1px solid var(--c-border); vertical-align: middle; color: var(--c-text); }
.t tbody tr:hover td { background: color-mix(in srgb, var(--c-primary-tint) 45%, transparent); }
.t th.num, .t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.t .empty { padding: 1.6rem; text-align: center; color: var(--c-text-muted); }

/* ── 宽表横滚容器(报表四页所有表 + 数据清单共用；0907 抽共享，原 .inv-table-wrap/.t-wrap 已删) ──
   规矩：**每张数据表都套一层 .t-scroll**，窄画布下横滚这一张表，页面主体不横滚。
   min-width:0 是必需的——容器常落在 grid/flex 轨道里(如 .rep-body 的 260px+1fr)，
   不收 0 的话内表会把轨道顶宽、滚动条永远不出现。内表宽度下限走 --table-min-w(main.css)，
   页面级 css 一律不再写死表宽。
   注意 overflow-x:auto 会让 overflow-y 一并计算成 auto(CSS 规范)，故容器内不要放
   position:sticky 的元素(全站吸顶的筛选条在表外，无碍)；单元格内的 ⚠ 角标、chip、
   省略号 title 都在表格盒内，不受裁切。 */
.t-scroll { min-width: 0; overflow-x: auto; }
.t-scroll > .t { min-width: var(--table-min-w); }

/* ── 按钮(上传表单 / 报表导出共用) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .5rem .95rem; border-radius: var(--radius-pill); line-height: 1;
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  color: var(--c-text); font-size: .84rem; font-weight: 550; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg { width: 15px; height: 15px; display: block; flex: none; }
.btn.primary { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-text-inverse); }
.btn.primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.btn:focus-visible { outline: 3px solid var(--c-primary-ring); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }