/**
 * css/red_packet.css —— 红包管理页（红包发放记录 / 红包领取记录）
 *
 * 表格基础样式复用 css/finance.css 的 .finance-table / .text-right / .mono 等，
 * 本文件只补充红包特有的样式：状态标签配色、红包ID 列宽控制。
 *
 * 页面结构（与 finance.js 一致）：
 *   .red-packet-table        列表表格（同时带 finance-table 类）
 *   .status-tag              红包状态标签（active / completed / expired 三色）
 */

/* ---------- 状态标签 ---------- */

/* 状态标签：与 finance.css 的 .type-tag 视觉一致，仅配色区分语义 */
.status-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-family: Menlo, Consolas, monospace;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* active：进行中（绿色，与「正常」语义一致） */
.status-tag.status-active {
    color: var(--color-success, #16a34a);
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.30);
}

/* completed：已领完（蓝色，正向完成态） */
.status-tag.status-completed {
    color: var(--color-primary, #2563eb);
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.30);
}

/* expired：已过期（灰色，失效态） */
.status-tag.status-expired {
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-color: var(--color-border);
}

/* 未知状态值：保持中性配色，避免历史脏数据显示异常 */
.status-tag:not(.status-active):not(.status-completed):not(.status-expired) {
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border-color: var(--color-border);
}

/* ---------- 列宽控制 ---------- */

/* 红包表列数较多（发放记录 13 列），压缩 ID 类列的留白 */
.red-packet-table th,
.red-packet-table td {
    white-space: nowrap;
}

/* 群组ID / 消息ID 为长数字（Telegram chat_id 为负数且很长），
   等宽字体 + 不换行，避免数字被拆行影响阅读 */
.red-packet-table .mono {
    font-family: Menlo, Consolas, monospace;
}

/* 窄屏下放宽表格最小宽度，保证出现横向滚动条而不是挤压列 */
@media (max-width: 1200px) {
    .red-packet-table {
        min-width: 1100px;
    }
}