/*
 * 积分商城客户页共用样式（UlziX）
 *
 * 为什么是这个文件而不是 SCSS：主题实际下发的是 build 里的预编译产物，
 * themes/huraga/assets/scss/_pointmall.scss 从未被编译（仓库里没有 node_modules），
 * 改它线上不会有任何变化。所以沿用 quiet.css 同一条路：普通静态文件，直接 <link>，不挂版本号。
 *
 * 所有选择器都收在 .pointmall-ui 之下（积分商城每个客户页的最外层都有这个类），
 * 因此在站点其他页面里这个文件不命中任何元素。
 *
 * 页面特有的几何（栅格列宽、进度分段、盘面角度之类）仍然留在各页的作用域 <style> 里；
 * 这里只放跨页共用的东西：色值与字阶、卡片外观、小标签与说明文字、以及统一的淡底色对。
 */
.pointmall-ui {
    --pm-primary: #206bc4;
    --pm-primary-soft: #1b5fa8;
    --pm-success: #0ca678;
    --pm-success-strong: #2fb344;
    --pm-success-soft: #087443;
    --pm-warning: #d97706;
    --pm-warning-soft: #8a5a00;
    --pm-danger: #c0392b;
    --pm-danger-soft: #97231a;
    --pm-ink: #1d2b3a;
    --pm-body: #41505f;
    --pm-muted: #5b6b7d;
    --pm-faint: #7d8b9a;
    --pm-hairline: rgba(15, 23, 42, .07);
    --pm-hairline-strong: rgba(15, 23, 42, .12);
    --pm-track: rgba(15, 23, 42, .07);
    --pm-radius: 16px;
    --pm-radius-sm: 12px;
}

/* 浏览器默认的选区是深蓝底白字，和这套蓝色卡片撞在一起很脏 */
.pointmall-ui ::selection {
    background: rgba(32, 107, 196, .18);
}

/*
 * 深色模式下的同一套令牌。
 *
 * 为什么必须单独一份：上面那套 --pm-* 是浅色专用的（ink #1d2b3a、muted #5b6b7d、
 * hairline 用近黑色 alpha），站点深色由 Theme 设置决定（layout_default.html.twig:2
 * data-bs-theme），一切到深色，积分商城 12 个客户页的卡片标题就是 #1d2b3a 压在 #0b0f14 上
 * ——对比度约 1.34，等于看不见。`pm-tint-*` 更明显：它拿 --pm-*-soft 当**文字色**，
 * 而那些 soft 值是给浅底设计的深色，所以这里要一起翻成亮色，不是只改 ink 就够。
 *
 * 取值全部对齐 quiet.css 的 [data-bs-theme="dark"] 面板，不另起一套色板。
 * 选择器特异度与 .pointmall-ui 相同、位置靠后，因此覆盖成立；浅色模式一行都不受影响。
 */
[data-bs-theme="dark"] .pointmall-ui {
    --pm-primary: #7aa2f7;
    --pm-primary-soft: #bfd7ff;
    --pm-success: #22c55e;
    --pm-success-strong: #4ade80;
    --pm-success-soft: #86efac;
    --pm-warning: #fbbf24;
    --pm-warning-soft: #fcd34d;
    --pm-danger: #fb7185;
    --pm-danger-soft: #fda4af;
    --pm-ink: #e7edf7;
    --pm-body: #c8d5e8;
    --pm-muted: #a3b4cb;
    --pm-faint: #8598b1;
    --pm-hairline: rgba(255, 255, 255, .10);
    --pm-hairline-strong: rgba(255, 255, 255, .18);
    --pm-track: rgba(255, 255, 255, .14);
}

/* 卡片：一次定调，后面各页不再各写一份圆角和阴影 */
.pointmall-ui .card {
    border: 1px solid var(--pm-hairline);
    border-radius: var(--pm-radius);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

/* 卡中卡（里程碑格子、商品列表等）不再叠第二层阴影 */
.pointmall-ui .card .card {
    box-shadow: none;
}

.pointmall-ui .card-title {
    color: var(--pm-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* 老页面的表头统一成同一套字阶与分隔线 */
.pointmall-ui .table thead th {
    border-bottom: 1px solid var(--pm-hairline);
    color: var(--pm-muted);
    font-size: .8125rem;
    font-weight: 600;
}

/* ── 共用小部件 ─────────────────────────────────────────────── */

/* 主卡片（「我的积分」用的那一层，比默认更弱一点、更柔一点） */
.pointmall-ui .pm-card {
    border: 1px solid rgba(32, 107, 196, .10);
    border-radius: var(--pm-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

.pointmall-ui .pm-card .card-header.pm-card-head {
    align-items: flex-start;
    background: none;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.15rem 1.35rem .9rem;
}

.pointmall-ui .pm-h {
    color: var(--pm-ink);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.pointmall-ui .pm-sub {
    color: var(--pm-muted);
    font-size: .8125rem;
    margin: .15rem 0 0;
}

.pointmall-ui .pm-label {
    color: var(--pm-muted);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .01em;
}

/* 表格/区块下方那句解释性小字 */
.pointmall-ui .pm-note {
    border-top: 1px solid rgba(15, 23, 42, .06);
    color: var(--pm-muted);
    font-size: .8125rem;
    line-height: 1.6;
    margin: 1.1rem 0 0;
    padding-top: .9rem;
}

.pointmall-ui .pm-empty {
    color: var(--pm-muted);
    font-size: .875rem;
    padding: 2.2rem 1rem;
    text-align: center;
}

/* 金额、积分、日期一律等宽数字，避免逐行跳动 */
.pointmall-ui .pm-num {
    font-variant-numeric: tabular-nums;
}

/* 细底轨（月度分布、额度进度、连签长阶段共用一套几何） */
.pointmall-ui .pm-track {
    background: var(--pm-track);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.pointmall-ui .pm-track > i,
.pointmall-ui .pm-track > span {
    background: var(--pm-primary);
    border-radius: 999px;
    display: block;
    height: 100%;
}

/* 淡底 + 深字成对出现：只给底色不给对比度是看不见的 */
.pointmall-ui .pm-tint-blue,
.pointmall-ui .pm-tint-slate,
.pointmall-ui .pm-tint-green,
.pointmall-ui .pm-tint-amber,
.pointmall-ui .pm-tint-red {
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .45rem;
}

.pointmall-ui .pm-tint-blue {
    background: rgba(32, 107, 196, .12);
    color: var(--pm-primary-soft);
}

.pointmall-ui .pm-tint-slate {
    background: rgba(15, 23, 42, .05);
    color: var(--pm-body);
}

.pointmall-ui .pm-tint-green {
    background: rgba(12, 166, 120, .12);
    color: var(--pm-success-soft);
}

.pointmall-ui .pm-tint-amber {
    background: rgba(217, 119, 6, .14);
    color: var(--pm-warning-soft);
}

.pointmall-ui .pm-tint-red {
    background: rgba(192, 57, 43, .12);
    color: var(--pm-danger-soft);
}

@media (max-width: 767.98px) {
    .pointmall-ui .pm-card .card-header.pm-card-head {
        padding: 1rem 1rem .75rem;
    }
}

/* 客户页统一抬头（mod_pointmall_page_head.html.twig）
   与 .pm-card-head 用同一套内距与字阶，但不套卡片盒：标题带套成卡片会和下面
   第一张卡叠出两条平行线。作用域收在 .pointmall-ui 下，且 pm-head 是新类名，
   所以只命中这 11 个页面。 */
.pointmall-ui .pm-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--pm-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    padding: 0 0 .9rem;
}