/* ==========================================================================
   TRX.CEO 会员端共享 UI 基线（user-ui.css）
   加载位置：application/user/view/common/meta.html，必须排在 ele.css 之后，
   这样下面的 :root 覆盖才能赢过 Element Plus 的默认配色。
   只放「全站共用」的令牌与组件基线；页面私有样式仍留在各自模板里。
   ========================================================================== */

:root {
    /* ---- 主色：与导航渐变同源的蓝（#1e3c72 → #2a5298 → #4b79cf） ---- */
    --ui-primary: #2a5298;
    --ui-primary-dark: #22427a;
    --ui-primary-deep: #1e3c72;
    --ui-primary-soft: #eaeef5;
    --ui-success: #0f7a5a;
    --ui-success-soft: #e7f2ef;
    --ui-warning: #b45309;
    --ui-warning-soft: #fdf3e7;
    --ui-danger: #c81e1e;
    --ui-danger-soft: #fae9e9;
    --ui-info: #64748b;
    --ui-info-soft: #f0f1f3;

    /* ---- 文本 / 线条 / 背景 ---- */
    --ui-ink-strong: #111827;
    --ui-ink: #1f2937;
    --ui-ink-muted: #64748b;
    --ui-ink-faint: #94a3b8;
    --ui-line: #e2e8f0;
    --ui-line-strong: #cbd5e1;
    --ui-bg: #f5f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;

    /* ---- 字号（正文 14，表格 13，辅助 12） ---- */
    --ui-fs-xs: 12px;
    --ui-fs-sm: 13px;
    --ui-fs-md: 14px;
    --ui-fs-lg: 16px;
    --ui-fs-xl: 20px;
    --ui-fs-2xl: 24px;

    /* ---- 间距（4px 基准） ---- */
    --ui-sp-1: 4px;
    --ui-sp-2: 8px;
    --ui-sp-3: 12px;
    --ui-sp-4: 16px;
    --ui-sp-5: 20px;
    --ui-sp-6: 24px;

    /* ---- 圆角 / 阴影 ---- */
    --ui-r-sm: 6px;
    --ui-r-md: 10px;
    --ui-r-lg: 14px;
    --ui-r-pill: 999px;
    --ui-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --ui-shadow-2: 0 4px 12px rgba(15, 23, 42, .08);
    --ui-shadow-3: 0 12px 28px rgba(15, 23, 42, .14);

    /* ---- Element Plus 主色阶梯：按 #2a5298 与白/黑混合推导 ---- */
    --el-color-primary: #2a5298;
    --el-color-primary-light-3: #6a86b7;
    --el-color-primary-light-5: #95a9cc;
    --el-color-primary-light-7: #bfcbe0;
    --el-color-primary-light-8: #d4dcea;
    --el-color-primary-light-9: #eaeef5;
    --el-color-primary-dark-2: #22427a;
    --el-color-success: #0f7a5a;
    --el-color-success-light-3: #57a28c;
    --el-color-success-light-5: #87bdad;
    --el-color-success-light-7: #b7d7ce;
    --el-color-success-light-8: #cfe4de;
    --el-color-success-light-9: #e7f2ef;
    --el-color-success-dark-2: #0c6248;
    --el-color-warning: #b45309;
    --el-color-warning-light-3: #cb8753;
    --el-color-warning-light-5: #daa984;
    --el-color-warning-light-7: #e9cbb5;
    --el-color-warning-light-8: #f0ddce;
    --el-color-warning-light-9: #f8eee6;
    --el-color-warning-dark-2: #904207;
    --el-color-danger: #c81e1e;
    --el-color-danger-light-3: #d96262;
    --el-color-danger-light-5: #e48f8f;
    --el-color-danger-light-7: #efbcbc;
    --el-color-danger-light-8: #f4d2d2;
    --el-color-danger-light-9: #fae9e9;
    --el-color-danger-dark-2: #a01818;
    --el-color-error: #c81e1e;
    --el-color-error-light-3: #d96262;
    --el-color-error-light-5: #e48f8f;
    --el-color-error-light-7: #efbcbc;
    --el-color-error-light-8: #f4d2d2;
    --el-color-error-light-9: #fae9e9;
    --el-color-error-dark-2: #a01818;
    --el-color-info: #64748b;
    --el-color-info-light-3: #939eae;
    --el-color-info-light-5: #b2bac5;
    --el-color-info-light-7: #d1d5dc;
    --el-color-info-light-8: #e0e3e8;
    --el-color-info-light-9: #f0f1f3;
    --el-color-info-dark-2: #505d6f;

    /* ---- Element Plus 文本 / 边框 / 表格基线 ---- */
    --el-text-color-primary: #1f2937;
    --el-text-color-regular: #334155;
    --el-text-color-secondary: #64748b;
    --el-text-color-placeholder: #94a3b8;
    --el-border-color: #d7dfeb;
    --el-border-color-light: #e2e8f0;
    --el-border-color-lighter: #eaeef5;
    --el-fill-color-light: #f5f7fb;
    --el-fill-color-blank: #ffffff;
    --el-border-radius-base: 8px;
    --el-border-radius-small: 6px;
    --el-font-size-base: 14px;
    --el-table-border-color: #e2e8f0;
    --el-table-header-bg-color: #f5f7fb;
    --el-table-header-text-color: #475569;
    --el-table-text-color: #1f2937;
    --el-table-row-hover-bg-color: #eef3fb;
}

/* ---- 正文基线：中文优先的字体栈，数字用等宽便于对齐金额 ---- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--ui-ink);
    background: var(--ui-bg);
}

/* frontend.min.css 里 main.content 的 min-height 按 60px 导航算，实测导航 78px，
   这里按真实导航高度重算，避免每页都多出一截空白滚动条 */
main.content {
    min-height: calc(100vh - var(--nav-h, 78px) - 168px);
}

/* ---- 卡片基线 ---- */
.el-card {
    border-radius: var(--ui-r-md);
    border-color: var(--ui-line);
    box-shadow: var(--ui-shadow-1);
}

/* ==========================================================================
   金额 / 地址 / 操作区：全站统一的展示组件
   ========================================================================== */

/* 金额：等宽数字 + 右对齐，避免表格列宽跳动 */
.amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-align: right;
    white-space: nowrap;
    color: var(--ui-ink-strong);
}

.amount .unit,
.unit {
    margin-left: var(--ui-sp-1);
    font-size: var(--ui-fs-xs);
    font-weight: 400;
    color: var(--ui-ink-muted);
}

/* 行内金额（标签右侧、卡片内文本流）：不右对齐 */
.amount-inline {
    text-align: left;
    font-weight: 600;
}

/* 地址单元格：等宽、可省略，复制按钮常驻右侧 */
.address-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-sp-2);
    max-width: 100%;
    min-width: 0;
    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--ui-fs-sm);
}

.address-cell .address-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    /* 复制失败时仍可手动选中 */
    user-select: all;
}

.address-cell .el-button {
    flex: none;
}

/* 表格行内操作区：按钮横排、间距统一、不换行撑破列宽 */
.table-actions {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-2);
    flex-wrap: nowrap;
}

/* 卡片头部右侧的附加操作（搜索框、新增按钮等） */
.table-header-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-sp-3);
    flex-wrap: wrap;
    width: 100%;
}

/* 筛选条：横排自动换行，控件之间统一间距 */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--ui-sp-3);
    flex-wrap: wrap;
    padding: var(--ui-sp-3) var(--ui-sp-4);
    margin-bottom: var(--ui-sp-4);
    background: var(--ui-surface-soft);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-r-md);
}

.filter-bar .el-form-item {
    margin-bottom: 0;
}

/* 分页容器：右对齐，窄屏换行不溢出 */
.pagination-container {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ui-sp-2);
    margin-top: var(--ui-sp-4);
}

/* 使用提示列表：带项目符号的浅色说明块 */
.guide-list {
    margin: 0;
    padding-left: var(--ui-sp-5);
    color: var(--ui-ink-muted);
    font-size: var(--ui-fs-sm);
    line-height: 1.9;
}

.guide-list li::marker {
    color: #6a86b7;
}

/* 加载遮罩：半透明 + 居中旋转指示，替换各页裸 div */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2px);
}

.loading-spinner {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-2);
    padding: var(--ui-sp-3) var(--ui-sp-5);
    background: var(--ui-surface);
    border-radius: var(--ui-r-pill);
    box-shadow: var(--ui-shadow-2);
    color: var(--ui-ink-muted);
    font-size: var(--ui-fs-sm);
}

.loading-spinner::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid var(--ui-line-strong);
    border-top-color: var(--ui-primary);
    border-radius: 50%;
    animation: ui-spin .8s linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   状态标签：全站统一「运行中 / 已停用 / 处理中」三种语义色
   ========================================================================== */
.status-on,
.status-off,
.status-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--ui-r-pill);
    font-size: var(--ui-fs-xs);
    line-height: 1.6;
    white-space: nowrap;
}

.status-on {
    color: var(--ui-success);
    background: var(--ui-success-soft);
}

.status-off {
    color: var(--ui-ink-muted);
    background: var(--ui-info-soft);
}

.status-pending {
    color: var(--ui-warning);
    background: var(--ui-warning-soft);
}

.status-on::before,
.status-off::before,
.status-pending::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ==========================================================================
   可访问性基线
   ========================================================================== */

/* 键盘焦点环：只在键盘操作时出现，鼠标点击不受影响 */
:focus-visible {
    outline: 2px solid var(--ui-primary);
    outline-offset: 2px;
    border-radius: var(--ui-r-sm);
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 窄屏：筛选条与分页改为纵向铺满，避免横向溢出 */
@media (max-width: 767px) {
    .filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-bar .el-form-item,
    .filter-bar .el-select,
    .filter-bar .el-input {
        width: 100%;
    }

    .pagination-container {
        justify-content: center;
    }

    .table-actions {
        flex-wrap: wrap;
    }
}