/**
 * 回帖奖励插件样式
 *
 * ⚠️ 只用 9 套主题全共有的 --mn-* 变量（已脚本核对，103 个），
 *    禁用 --mn-danger / --mn-spectrum-*（非全主题存在 → 夜间浅底浅字）。
 * ⚠️ 核心 .mn-btn 同 (0,1,0) 且后胜 → 插件内按钮样式必须提权（.rr-card .mn-btn）。
 *
 * @file plugins/reply_reward/assets/style.css
 * @package Plugin\ReplyReward
 * @version 1.0.0
 */

/* ===== 主题页卡片 ===== */
.rr-card {
    margin: 12px 0;
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-card);
    overflow: hidden;
}

.rr-card-own {
    border-color: var(--mn-primary-light, var(--mn-border));
}

.rr-card-inner {
    padding: 0;
}

.rr-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
    background: var(--mn-bg-row-hover);
    border-bottom: 1px solid var(--mn-border-light);
}

.rr-card-tag {
    margin-left: auto;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--mn-text-muted);
    background: var(--mn-bg-tag);
    border-radius: 10px;
}

.rr-card-body {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}

.rr-card-info {
    flex: 1;
    min-width: 0;
}

.rr-card-amount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mn-primary);
}

.rr-card-plus {
    font-size: 14px;
    font-weight: 400;
    color: var(--mn-text-muted);
}

.rr-card-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--mn-text-muted);
}

.rr-card-per {
    font-size: 12px;
    font-weight: 400;
    color: var(--mn-text-muted);
}

.rr-card-meta {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-text-muted);
}

/*
 * meta 内的三段信息（剩余/已发放 · 每人限 K 次 · 至 xx 结束）
 * 分隔符「·」由 ::before 生成 —— 这样窄屏换行后行首不会残留一个孤立的分隔符。
 * ⚠️ 不要改回 PHP 里硬编码 <span>·</span>：那样换行时行首会多一个点。
 */
.rr-card-meta-item + .rr-card-meta-item::before {
    content: "·";
    margin: 0 4px;
    color: var(--mn-border);
}

.rr-card-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.rr-card-status {
    font-size: 13px;
    font-weight: 500;
}

.rr-card-status-ok {
    color: var(--mn-success);
}

.rr-card-status-go {
    color: var(--mn-primary);
}

.rr-card-status-own {
    color: var(--mn-warning);
}

.rr-card-status-off {
    color: var(--mn-text-muted);
}

/* 提权：压过核心 .mn-btn（同 (0,1,0)，核心后胜） */
.rr-card .rr-card-login,
.rr-card .mn-btn {
    flex-shrink: 0;
}

/* ===== 发帖表单 ===== */
.rr-form {
    margin: 16px 0 0;
}

.rr-form-details {
    border: 1px solid var(--mn-border);
    border-radius: 8px;
    background: var(--mn-bg-card);
}

.rr-form-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mn-text);
    cursor: pointer;
    list-style: none;
}

.rr-form-summary::-webkit-details-marker {
    display: none;
}

.rr-form-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--mn-text-muted);
}

.rr-form-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--mn-border-light);
}

.rr-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.rr-form-field {
    flex: 1 1 140px;
    min-width: 0;
}

/* 提权：核心 .mn-input{width:100%} 会静默压掉插件尺寸控制 */
.rr-form .rr-field {
    width: 100%;
    box-sizing: border-box;
}

.rr-form-plan {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-primary);
}

.rr-form-plan-err {
    color: var(--mn-error);
}

.rr-form-foot {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--mn-text-muted);
}

/* ===== 后台 ===== */
.rr-admin-section {
    margin-bottom: 24px;
}

.rr-table-wrap {
    overflow-x: auto;
}

/* ---- 列宽与「不挤成两行」----
   ⚠️ 核心 .admin-table 内置 `td:nth-child(4){max-width:180px;overflow:hidden;…}` 等
      **按列序硬编码**的规则（admin.css:180-187），具体度 = (0,3,1)。
      本表第 4 列是「总额」（窄数字列），被那条限宽误压。
      插件 CSS 虽在 admin.css **之后**加载，但**同具体度才靠源序取胜** → 必须提到
      `.rr-table.rr-table td.…`（双类，(0,3,1)）与核心平权，再靠源序接管。
   ⚠️ 长文本列一律「单行 + 省略号」，完整内容放 title；**不用 word-break 换行**
      （那正是「挤成两行」的来源）。超宽由 .rr-table-wrap 横向滚动。 */
.rr-table {
    min-width: 100%;
}

.rr-table.rr-table th,
.rr-table.rr-table td {
    white-space: nowrap;
    vertical-align: middle;
}

/* 解除核心 td:nth-child(4) 的 180px 限宽（它是给核心自己的列序设计的） */
.rr-table.rr-table td:nth-child(4) {
    max-width: none;
    overflow: visible;
}

/* 长文本列三件套：显式声明，不依赖核心那条巧合同效的规则 */
.rr-table.rr-table th.rr-col-creator,
.rr-table.rr-table td.rr-col-creator,
.rr-table.rr-table th.rr-col-thread,
.rr-table.rr-table td.rr-col-thread {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rr-table.rr-table th.rr-col-id,
.rr-table.rr-table td.rr-col-id {
    width: 56px;
}

.rr-table.rr-table th.rr-col-creator,
.rr-table.rr-table td.rr-col-creator {
    min-width: 90px;
    max-width: 150px;
}

.rr-table.rr-table th.rr-col-thread,
.rr-table.rr-table td.rr-col-thread {
    min-width: 160px;
    max-width: 300px;
}

.rr-table.rr-table th.rr-col-num,
.rr-table.rr-table td.rr-col-num {
    width: 72px;
    text-align: center;
}

.rr-table.rr-table th.rr-col-progress,
.rr-table.rr-table td.rr-col-progress {
    width: 120px;
    text-align: center;
}

.rr-table.rr-table th.rr-col-status,
.rr-table.rr-table td.rr-col-status {
    width: 84px;
    text-align: center;
}

.rr-table.rr-table th.rr-col-time,
.rr-table.rr-table td.rr-col-time {
    width: 150px;
}

.rr-table.rr-table th.rr-col-action,
.rr-table.rr-table td.rr-col-action {
    width: 92px;
    text-align: right;
}

/* 行内表单（关闭奖池按钮）——核心无此类。
   ⚠️ 核心 admin.css:198 已有 `.admin-table td:last-child form{display:inline-block;vertical-align:middle}`（(0,3,1)）
      → 我这条 (0,1,0) **必被压制**。故提到同具体度：`.rr-table td.rr-col-action form`（(0,2,1)）仍不够，
      用双类 `.rr-table.rr-table td form`（(0,3,1)）与核心平权、靠源序接管，语义才真正生效。 */
.rr-table.rr-table td form.rr-inline-form {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.rr-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.rr-status {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    border-radius: 10px;
    color: var(--mn-text-muted);
    background: var(--mn-bg-tag);
}

.rr-status-active {
    color: var(--mn-success);
    background: var(--mn-alert-success-bg);
}

.rr-status-done {
    color: var(--mn-primary);
    background: var(--mn-primary-subtle, var(--mn-bg-tag));
}

.rr-status-expired,
.rr-status-closed {
    color: var(--mn-warning);
    background: var(--mn-comp-alert-warning-bg);
}

.rr-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

/* ===== 窄屏（移动端）=====
 * 断点 768px 与核心一致（modern.css:2248 合并了原 9 处 768 查询），
 * 不自造 640 之类的值 —— 否则 640~768 区间会出现「页面已切单列、卡片仍横排」的错位。
 *
 * 两处变化：
 *   ① .rr-card-body 由「左信息 / 右提示」横排改为纵向堆叠 → 右侧提示落到信息下方
 *   ② 「至 xx 结束」独占一行（行首不再是孤立的分隔符）
 */
@media (max-width: 768px) {
    .rr-card-body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .rr-card-action {
        justify-content: flex-start;
    }

    /* 到期信息换行独占一行；其 ::before 分隔符随之取消，避免行首出现孤立的「·」 */
    .rr-card-meta-expire {
        display: block;
    }

    .rr-card-meta-item + .rr-card-meta-expire::before {
        content: none;
    }

    /* 后台表格：列多且已 nowrap → 窄屏一律横向滚动，绝不靠换行挤（换行 = 高矮不齐） */
    .rr-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 窄屏下放松长文本列的 min-width，配合滚动 */
    .rr-table.rr-table th.rr-col-creator,
    .rr-table.rr-table td.rr-col-creator {
        min-width: 72px;
    }

    .rr-table.rr-table th.rr-col-thread,
    .rr-table.rr-table td.rr-col-thread {
        min-width: 140px;
    }

    .rr-table.rr-table th.rr-col-time,
    .rr-table.rr-table td.rr-col-time {
        width: 134px;
    }
}

/* ===== 回帖后页顶一次性提示（thread_show_top 钩子） =====
   仅做图标对齐；配色一律沿用核心 .mn-alert-success / .mn-alert-error
   （核心无 .mn-alert-warning，勿自造色卡）。 */
.rr-tip-icon {
    margin-right: 4px;
    color: var(--mn-warning, inherit);
}