/* ==========================================================================
   政策返点系统 — 共享设计系统
   ========================================================================== */

/* A. CSS 自定义属性
   ========================================================================== */
:root {
    /* 品牌蓝 */
    --color-brand-50:  #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;

    /* 中性灰 */
    --color-gray-50:  #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* 语义色 */
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-success-light: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-success-text: #065f46;

    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --color-warning-light: #fffbeb;
    --color-warning-soft: #fef3c7;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;

    --color-error:   #dc2626;
    --color-error-dark: #b91c1c;
    --color-error-light: #fef2f2;
    --color-error-border: #fecaca;
    --color-error-text: #991b1b;

    --color-info:    #0284c7;
    --color-info-light: #f0f9ff;
    --color-info-border: #bae6fd;
    --color-info-text: #075985;

    /* Tab 与导航模块配色（绿/橙复用 success/warning 系） */
    --color-violet:        #7c3aed;
    --color-violet-light:  #f5f3ff;
    --color-violet-border: #ddd6fe;

    --color-teal:        #0d9488;
    --color-teal-light:  #f0fdfa;
    --color-teal-border: #99f6e4;

    --color-rose:        #e11d48;
    --color-rose-light:  #fff1f2;
    --color-rose-border: #fecdd3;

    --color-indigo:        #4f46e5;
    --color-indigo-light:  #eef2ff;
    --color-indigo-border: #c7d2fe;

    /* 背景层级 */
    --bg-page:   #fafbfc;
    --bg-card:   #ffffff;
    --bg-inset:  #f1f5f9;

    /* 边框 */
    --border-default: #e2e8f0;
    --border-light:   #f1f5f9;

    /* 阴影（低透明度 slate 基调，轻商务质感） */
    --shadow-card:     0 1px 3px rgba(15,23,42,0.04);
    --shadow-dropdown: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.03);
    --shadow-modal:    0 20px 56px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.06);

    /* 圆角 */
    --radius:    6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    /* 焦点环 */
    --focus-ring: 0 0 0 2px rgba(59,130,246,0.1);
}

/* B. 基础重置
   ========================================================================== */
[x-cloak] {
    display: none !important;
}

body {
    font-size: 14px;
    color: var(--color-gray-700);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--color-brand-100);
    color: var(--color-gray-800);
}

/* —— 数字排版：等宽数字，金额/结果对齐不跳动 —— */
.tnum, .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* —— 细滚动条：贴合轻商务质感 —— */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--color-gray-300) transparent; }

/* C. 共享动画
   ========================================================================== */
@keyframes slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fade-in-up {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.animate-slide-in   { animation: slide-in   0.25s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.2s  ease-out; }

/* 骨架屏（浅色：用于白色卡片） */
.skeleton-line {
    background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 37%, var(--color-gray-200) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    height: 14px;
}

/* 骨架屏（深色：用于深色背景头部） */
.skeleton-line-dark {
    background: linear-gradient(90deg, var(--color-gray-700) 25%, var(--color-gray-600) 37%, var(--color-gray-700) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    height: 14px;
}

/* D. 组件类
   ========================================================================== */

/* —— 按钮 —— */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.btn:not(:disabled):active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* FIX: 提升 specificity 对抗 Tailwind CDN */
body .btn-primary {
    background: var(--color-brand-500) !important;
    color: #fff !important;
    border-color: var(--color-brand-500) !important;
}
body .btn-primary:hover { background: var(--color-brand-600) !important; border-color: var(--color-brand-600) !important; transition-delay: 50ms; }
body .btn-primary:active { background: var(--color-brand-700) !important; }

body .btn-secondary {
    background: #fff !important;
    color: var(--color-gray-700) !important;
    border-color: var(--color-gray-200) !important;
}
body .btn-secondary:hover { background: var(--color-gray-50) !important; border-color: var(--color-gray-300) !important; transition-delay: 50ms; }

.btn-danger {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}
.btn-danger:hover { background: var(--color-error-dark); border-color: var(--color-error-dark); transition-delay: 50ms; }

.btn-ghost {
    background: transparent;
    color: var(--color-gray-600);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--color-gray-100); color: var(--color-gray-800); transition-delay: 50ms; }

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* —— 表单控件 —— */
/* FIX: 提升 specificity 对抗 Tailwind CDN 和内联样式 */
body .input {
    width: 100%;
    padding: 6px 12px !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-gray-700);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
body .input::placeholder { color: var(--color-gray-400); }
body .input:focus {
    border-color: var(--color-brand-500);
    box-shadow: var(--focus-ring);
}

.textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-gray-700);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    resize: vertical;
    font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
}
.textarea::placeholder { color: var(--color-gray-400); }
.textarea:focus {
    border-color: var(--color-brand-500);
    box-shadow: var(--focus-ring);
}

/* —— 卡片 —— */
/* FIX: 提升 specificity 对抗 Tailwind CDN */
body .card {
    background: var(--bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* —— 弹窗 —— */
/* FIX: 提升 specificity 对抗 Tailwind CDN */
body .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
body .modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    padding: 20px;
}
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* —— Badge —— */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap; /* 防止徽章文字在窄列中折行 */
}
.badge-success { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-error   { background: var(--color-error-light);   color: var(--color-error-text);   border: 1px solid var(--color-error-border); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-info    { background: var(--color-info-light);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }
.badge-neutral { background: var(--color-gray-100); color: var(--color-gray-600); }
.badge-solid-success { background: var(--color-success); color: #fff; }

/* —— Toast —— */
.toast {
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    box-shadow: var(--shadow-dropdown);
}
.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-error); }
.toast-info    { background: var(--color-gray-800); }
.toast-warning { background: var(--color-warning); }

/* —— Tab 按钮 —— */
.tab-btn {
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-600);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--color-gray-800); background: rgba(255,255,255,0.6); }
.tab-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tab-btn-active {
    color: var(--color-brand-600);
    font-weight: 600;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04);
}

/* —— Tab 循环配色（按索引取模 5，index.html x-for 绑定 tab-accent-N） —— */
/* FIX: 提升 specificity 对抗 Tailwind CDN */
/* 常态：浅底 + 主色文字 + 同色系边框，使每张表天然高亮可区分 */
body .tab-btn.tab-accent-0 { color: var(--color-brand-600);   background: var(--color-brand-50);     border: 1px solid var(--color-brand-200); }
body .tab-btn.tab-accent-1 { color: var(--color-success);     background: var(--color-success-light); border: 1px solid var(--color-success-border); }
body .tab-btn.tab-accent-2 { color: var(--color-violet);      background: var(--color-violet-light);  border: 1px solid var(--color-violet-border); }
body .tab-btn.tab-accent-3 { color: var(--color-warning);     background: var(--color-warning-light); border: 1px solid var(--color-warning-border); }
body .tab-btn.tab-accent-4 { color: var(--color-teal);        background: var(--color-teal-light);    border: 1px solid var(--color-teal-border); }
body .tab-btn.tab-accent-0:hover { background: var(--color-brand-100); }
body .tab-btn.tab-accent-1:hover { background: #d1fae5; }
body .tab-btn.tab-accent-2:hover { background: #ede9fe; }
body .tab-btn.tab-accent-3:hover { background: var(--color-warning-soft); }
body .tab-btn.tab-accent-4:hover { background: #ccfbf1; }
/* 激活态：主色实底 + 白字，显著强于常态（写在常态之后保证覆盖） */
body .tab-btn-active.tab-accent-0,
body .tab-btn-active.tab-accent-0:hover { color: #fff; background: var(--color-brand-600);  border-color: var(--color-brand-600);  font-weight: 600; }
body .tab-btn-active.tab-accent-1,
body .tab-btn-active.tab-accent-1:hover { color: #fff; background: var(--color-success);    border-color: var(--color-success);    font-weight: 600; }
body .tab-btn-active.tab-accent-2,
body .tab-btn-active.tab-accent-2:hover { color: #fff; background: var(--color-violet);     border-color: var(--color-violet);     font-weight: 600; }
body .tab-btn-active.tab-accent-3,
body .tab-btn-active.tab-accent-3:hover { color: #fff; background: var(--color-warning);    border-color: var(--color-warning);    font-weight: 600; }
body .tab-btn-active.tab-accent-4,
body .tab-btn-active.tab-accent-4:hover { color: #fff; background: var(--color-teal);       border-color: var(--color-teal);       font-weight: 600; }

/* —— 页面头部 —— */
/* FIX: 提升 specificity 对抗 Tailwind CDN */
body .page-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 16px 20px 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    min-height: 56px;
}
body .page-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.01em;
}
.page-header-desc {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: 3px;
}
.page-header-meta {
    font-size: 12px;
    color: var(--color-gray-400);
    font-variant-numeric: tabular-nums;
}

/* —— 顶部导航（白色轻商务） —— */
/* FIX: 提升 specificity 以对抗 Tailwind CDN 运行时注入覆盖 */
body .navbar,
body nav.navbar {
    position: sticky;
    top: 0;
    z-index: 9997;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-gray-200);
}
body .navbar .nav-link {
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
body .navbar .nav-link:hover { color: var(--color-gray-800); background: var(--color-gray-100); }
body .navbar .nav-link-active,
body .navbar .nav-link-active:hover {
    color: var(--color-brand-600);
    background: var(--color-brand-50);
}

/* —— 导航栏按路由配色（href 属性选择器：navbar.php 零改动，桌面/移动菜单同时生效，
      权限隐藏部分链接时颜色不错位） —— */
/* 常态：主色文字；hover：对应色浅底 */
body .navbar .nav-link[href="/finance-payment"]         { color: var(--color-warning); }
body .navbar .nav-link[href="/finance-payment-confirm"] { color: var(--color-rose); }
body .navbar .nav-link[href="/admin-members"]           { color: var(--color-indigo); }
body .navbar .nav-link[href="/finance-payment"]:hover         { background: var(--color-warning-light); }
body .navbar .nav-link[href="/finance-payment-confirm"]:hover { background: var(--color-rose-light); }
body .navbar .nav-link[href="/admin-members"]:hover           { background: var(--color-indigo-light); }
/* 激活态：对应色浅底 + 主色文字 + 加粗 + 同色系描边（覆盖通用蓝色激活态） */
body .navbar .nav-link-active[href="/finance-payment"],
body .navbar .nav-link-active[href="/finance-payment"]:hover         { color: var(--color-warning);   background: var(--color-warning-light); box-shadow: inset 0 0 0 1px var(--color-warning-border); font-weight: 600; }
body .navbar .nav-link-active[href="/finance-payment-confirm"],
body .navbar .nav-link-active[href="/finance-payment-confirm"]:hover { color: var(--color-rose);      background: var(--color-rose-light);    box-shadow: inset 0 0 0 1px var(--color-rose-border);    font-weight: 600; }
body .navbar .nav-link-active[href="/admin-members"],
body .navbar .nav-link-active[href="/admin-members"]:hover           { color: var(--color-indigo);    background: var(--color-indigo-light);  box-shadow: inset 0 0 0 1px var(--color-indigo-border);  font-weight: 600; }

/* 导航栏移动端下拉菜单链接 */
@media (max-width: 639px) {
    .navbar .nav-link {
        display: block;
        padding: 8px 12px;
        border-radius: var(--radius);
    }
}

/* —— 结果分组头部（浅色化，替代深灰块） —— */
.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-default);
}
.group-header-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gray-900);
}
.group-header-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* —— 右键菜单 —— */
.context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    padding: 4px;
    z-index: 50;
    min-width: 140px;
}
.context-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--color-gray-700);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}
.context-menu-item:hover { background: var(--color-gray-50); }
.context-menu-item-danger:hover { background: var(--color-error-light); color: var(--color-error); }

/* —— 空状态插画 —— */
.empty-illustration {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 16px;
    display: block;
}

/* —— 空状态图标框 —— */
.empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: 20px;
    color: var(--color-gray-400);
    margin: 0 auto 12px;
}
.empty-icon-error {
    background: var(--color-error-light);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

/* —— 等宽字体 —— */
.font-mono, .mono, .line-content {
    font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
}

/* —— 行类型样式（用于 index.html 政策表） —— */
.line-item {
    min-height: 36px; /* FIX: 问题 2 - 统一所有 row 的最小高度，避免断层 */
    position: relative;
}

.line-item-title {
    font-weight: 600;
    font-size: 13px;
    border-left: 2px solid var(--color-brand-500);
    background: transparent;
    padding-left: 12px;
    padding-top: 8px; /* FIX: 统一垂直内边距 */
    padding-bottom: 8px; /* FIX: 统一垂直内边距 */
}
.line-item-bold {
    font-weight: 700;
    background: rgba(255, 251, 235, 0.5); /* warning-light / 50% */
    border-left: 2px solid var(--color-warning);
    padding-left: 12px;
    padding-top: 8px; /* FIX: 统一垂直内边距 */
    padding-bottom: 8px; /* FIX: 统一垂直内边距 */
}
.line-item-separator {
    padding: 8px 12px; /* FIX: 问题 2 - py-2 统一为 8px，避免高度跳变 */
    color: var(--color-gray-300);
    font-size: 12px;
}

/* —— 高亮标记 —— */
mark.highlight {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: inset 0 -1px 0 var(--color-warning-border);
}

/* —— CSS Logo 方块 —— */
/* FIX: 提升 specificity 对抗 Tailwind CDN */
body .logo-mark {
    width: 22px;
    height: 22px;
    background: var(--color-brand-500);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* —— 提示条 —— */
.hint-bar {
    border-left: 2px solid var(--color-brand-300);
    padding-left: 10px;
    font-size: 12px;
    color: var(--color-gray-500);
}

/* —— 警告框 —— */
.alert-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
}
.alert-success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
}
.alert-error {
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
}

/* —— 极简辅助类 —— */
.section-divider {
    height: 1px;
    background: var(--border-light);
    margin: 12px 0;
}
.card-elevated {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.text-balance {
    text-wrap: balance;
}

/* ========== 布局优化增强 (商业大厂级) ==========
 * FIX: 问题 1 - page-header 元数据分组样式 */
.page-header > div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* FIX: 问题 4 - tab 换行对齐 */
.tab-btn {
    white-space: nowrap; /* 防止标签折行 */
    min-width: 0; /* 允许 flex item 缩小 */
}

/* FIX: 问题 5 - 工具栏 grid 列间距 */
.grid-cols-12 > .col-span-8 {
    min-width: 0; /* 允许输入框弹性缩小 */
}

/* FIX: 问题 6 - 编号列固定宽度容器 */
.line-item .absolute.left-0 {
    width: 1.75rem; /* w-7 */
    text-align: right;
    user-select: none;
}

/* FIX: 问题 8 - time 标签语义化 */
time {
    font-feature-settings: "tnum"; /* 等宽数字，避免时间抖动 */
    letter-spacing: -0.02em;
}

/* 响应式增强：移动端工具栏堆叠 */
@media (max-width: 640px) {
    .grid-cols-12 > .col-span-8,
    .grid-cols-12 > .col-span-4 {
        col-span: 12;
        justify-content: space-between !important;
    }
}

/* ========== 打款历史 ERP 表格（三个打款页共享） ==========
 * 抽取自 finance-payment-confirm.html 页面级样式（原 finance-payment / finance-payment-history /
 * finance-payment-confirm 三页复制维护，修改需三处同步）。
 * .data-table 系列以 .pc-erp 作用域限定：仅三个打款页的 table-container 携带该类，
 * 避免污染同样自带 .data-table 页面级样式的 admin-members 页；
 * 页面级差异（min-width / 单元格 padding / 截断宽度）由各页内联 <style> 同选择器覆盖（后加载生效）。 */

/* Tab 分段胶囊容器（与财务打款表一致） */
.pc-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-inset, #f1f5f9);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 10px;
}

/* Tab 角标 */
.pc-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-gray-600, #4b5563);
}
.pc-tab-badge.is-hot {
    background: #f97316;
    color: #fff;
}

/* ERP 表格容器（横向滚动兜底，.pc-erp 与 .table-container 同元素） */
.pc-erp {
    overflow-x: auto;
}
.pc-erp .data-table {
    width: 100%;
    min-width: 920px; /* 防止列被过度压缩，溢出时横向滚动 + 操作列 sticky 兜底；列数较少的页面自行覆盖（history/finance-payment 为 860px） */
    border-collapse: separate; /* collapse 与 sticky 组合有边框不跟随缺陷；边框均在单元格上，切换后视觉零差异 */
    border-spacing: 0;
    background: white;
}
.pc-erp .data-table th {
    background: #f9fafb;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.pc-erp .data-table td {
    padding: 10px 12px;
    font-size: 13px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}
.pc-erp .data-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.pc-erp .data-table tbody tr:hover {
    background: #f3f6fb;
}

/* 金额列：右对齐加粗 */
.pc-amount {
    text-align: right;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 表头金额列右对齐（特异性需高于 .pc-erp .data-table th 的 text-align: left） */
.pc-erp .data-table th.pc-amount {
    text-align: right;
}

/* 内容截断 */
.pc-content-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 查看按钮：浅蓝描边样式，区别于 ghost 的无存在感，又不与实心主按钮抢视觉 */
.pc-btn-view {
    background: #eff6ff;
    color: var(--color-brand-600, #2563eb);
    border-color: #bfdbfe;
}
.pc-btn-view:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    transition-delay: 50ms;
}

/* 群聊名称截断（防止长群名撑宽该列） */
.pc-name-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 图片缩略图 */
.pc-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: #f3f4f6;
}
.pc-thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* 图片放大查看器 */
.pc-viewer-img {
    max-width: min(90vw, 900px);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
    background: #0f172a;
}
.pc-viewer-nav {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.pc-viewer-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.28); }
.pc-viewer-nav:disabled { opacity: 0.35; cursor: not-allowed; }

/* 处理信息小字 */
.pc-process-info {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.pc-process-info .pc-note {
    color: #334155;
    word-break: break-all;
}
/* 驳回原因醒目强调（红色系），提示可修改后重新提交 */
.pc-process-info .pc-note-rejected {
    color: #dc2626;
    font-weight: 600;
    word-break: break-all;
}

/* 操作按钮（小尺寸） */
.pc-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* 操作列：按钮永保持单行排列 */
.pc-erp .data-table td:last-child {
    white-space: nowrap;
}
.pc-erp .data-table td:last-child > div {
    flex-wrap: nowrap;
}

/* 操作列 sticky 右固定：横向滚动时按钮恒可见可点
   注意：加载/空状态行的 colspan td 也是 last-child，必须用 :not([colspan]) 排除 */
.pc-erp .data-table th:last-child,
.pc-erp .data-table td:last-child:not([colspan]) {
    position: sticky;
    right: 0;
    box-shadow: -8px 0 8px -8px rgba(15, 23, 42, 0.12); /* 左缘阴影作视觉分隔 */
}
.pc-erp .data-table td:last-child:not([colspan]) {
    z-index: 2; /* 压住缩略图 hover 放大 */
    background: #fff; /* 不透明，防下层列穿透 */
}
.pc-erp .data-table thead th:last-child {
    z-index: 3; /* 高于数据格 */
    background: #f9fafb;
}
/* 斑马纹与 hover 行背景同步（hover 规则必须在后，同特异性靠源码顺序取胜） */
.pc-erp .data-table tbody tr:nth-child(even) td:last-child:not([colspan]) {
    background: #fafbfc;
}
.pc-erp .data-table tbody tr:hover td:last-child:not([colspan]) {
    background: #f3f6fb;
}

/* 移动端优化 */
@media (max-width: 640px) {
    .pc-erp .data-table th, .pc-erp .data-table td { padding: 8px 8px; }
    .pc-content-cell { max-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-thumb, .pc-viewer-nav { transition: none; }
}