/* ========== 执之远专利代理业务管理系统 - 主题样式 ========== */

/* ---------- 主题变量 ---------- */
:root {
    /* 默认蓝白主题 */
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-bg: #eff6ff;
    --accent: #0ea5e9;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #6366f1;

    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    --bg-hover: #f8fafc;
    --bg-sidebar: #1e293b;
    --bg-sidebar-hover: #334155;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    --text-sidebar: #cbd5e1;

    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --sidebar-width: 230px;
    --header-height: 60px;

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
}

/* 深色主题 */
[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-dark: #2563eb;
    --primary-bg: #1e3a5f;
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --bg-sidebar: #020617;
    --bg-sidebar-hover: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --text-sidebar: #94a3b8;
    --border: #334155;
    --border-light: #1e293b;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
}

/* 青绿主题 */
[data-theme="teal"] {
    --primary: #0d9488;
    --primary-light: #14b8a6;
    --primary-dark: #0f766e;
    --primary-bg: #f0fdfa;
    --accent: #06b6d4;
    --bg-sidebar: #134e4a;
    --bg-sidebar-hover: #115e59;
}

/* 暖橙主题 */
[data-theme="warm"] {
    --primary: #ea580c;
    --primary-light: #f97316;
    --primary-dark: #c2410c;
    --primary-bg: #fff7ed;
    --accent: #f59e0b;
    --bg-sidebar: #431407;
    --bg-sidebar-hover: #7c2d12;
}

/* ---------- 全局重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---------- 登录页 ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/static/assets/login-bg.jpg') center/cover no-repeat;
    opacity: 0.4;
    animation: bgZoom 20s ease-in-out infinite alternate;
}

.login-page::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15,23,42,0.7) 0%, rgba(30,58,95,0.5) 100%);
}

@keyframes bgZoom {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.login-card {
    position: relative;
    z-index: 1;
    width: 400px;
    padding: 48px 40px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .login-card {
    background: rgba(30,41,59,0.95);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
    box-shadow: 0 8px 24px rgba(37,99,235,0.4);
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.login-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.login-logo p {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.login-form .form-group { margin-bottom: 20px; }

.login-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.login-form input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: var(--transition);
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.login-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 8px;
    letter-spacing: 1px;
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(37,99,235,0.35);
}

.login-btn:active { transform: translateY(0); }

.login-error {
    background: #fef2f2;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ---------- 主布局 ---------- */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* 侧边栏 */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transition: var(--transition);
}

.sidebar-logo {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logo-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
}

.sidebar-logo-text {
    font-size: 17px;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

.sidebar-logo-sub {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.nav-section {
    margin-bottom: 8px;
}

.nav-section-title {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 14px 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--text-sidebar);
    font-size: 13.5px;
    margin-bottom: 2px;
    position: relative;
}

.nav-item:hover {
    background: var(--bg-sidebar-hover);
    color: white;
}

.nav-item.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}

.nav-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* 功能区颜色标识 */
.nav-item[data-area="patents"] { --nav-color: #3b82f6; }
.nav-item[data-area="trademarks"] { --nav-color: #10b981; }
.nav-item[data-area="finance"] { --nav-color: #f59e0b; }
.nav-item[data-area="notifications"] { --nav-color: #8b5cf6; }
.nav-item[data-area="customers"] { --nav-color: #06b6d4; }
.nav-item[data-area="settings"] { --nav-color: #64748b; }
.nav-item[data-area="dashboard"] { --nav-color: #ec4899; }

.nav-item[data-area] .nav-icon { color: var(--nav-color); }
.nav-item[data-area].active .nav-icon { color: white; }

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

/* 主内容区 */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 顶部栏 */
.header {
    height: var(--header-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.theme-switcher {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: var(--bg-main);
    border-radius: 20px;
}

.theme-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-fast);
}

.theme-dot:hover { transform: scale(1.15); }
.theme-dot.active { border-color: var(--text-primary); transform: scale(1.1); }
.theme-dot[data-theme="light"] { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.theme-dot[data-theme="dark"] { background: linear-gradient(135deg, #1e293b, #475569); }
.theme-dot[data-theme="teal"] { background: linear-gradient(135deg, #0d9488, #06b6d4); }
.theme-dot[data-theme="warm"] { background: linear-gradient(135deg, #ea580c, #f59e0b); }

.header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius);
    transition: var(--transition-fast);
}

.header-user:hover { background: var(--bg-hover); }

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.user-info { line-height: 1.3; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-role { font-size: 11px; color: var(--text-muted); }

/* 内容区 */
.content {
    flex: 1;
    padding: 24px;
    animation: fadeIn 0.3s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 卡片 ---------- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.card:hover { box-shadow: var(--shadow); }

/* 统计卡片 */
div.stats-cards {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

div.stats-cards > div.stat-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

div.stats-cards > div.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

div.stats-cards > div.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--stat-color, var(--primary));
}

/* 财务统计卡片自适应宽度（金额长不被挡） */
div.stats-cards > div.stat-card.stat-auto {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: none !important;
}

/* 紧凑看板（横向排列，节省空间） */
.compact-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.compact-stat-item {
    flex: 1;
    min-width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: var(--transition-fast);
}

.compact-stat-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.compact-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

.compact-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card[data-area="patents"] { --stat-color: #3b82f6; }
.stat-card[data-area="trademarks"] { --stat-color: #10b981; }
.stat-card[data-area="finance"] { --stat-color: #f59e0b; }
.stat-card[data-area="notifications"] { --stat-color: #8b5cf6; }

div.stats-cards > div.stat-card > .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.stats-cards > div.stat-card > .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.2;
}

div.stats-cards > div.stat-card > .stat-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 0;
    white-space: nowrap;
}

.stat-trend {
    font-size: 12px;
    margin-top: 4px;
    color: var(--success);
}

/* ---------- 筛选栏 ---------- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-bg);
}

/* ---------- 按钮 ---------- */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(37,99,235,0.35); }

.btn-default {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-default:hover { background: var(--bg-hover); border-color: var(--primary); color: var(--primary); }

.btn-danger {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
}
.btn-danger:hover { background: var(--danger); color: white; }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-fast);
}
.btn-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- 表格 ---------- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.data-table th {
    background: var(--bg-main);
    padding: 12px 14px;
    text-align: center !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
    color: var(--text-primary);
    text-align: center !important;
    transition: var(--transition-fast);
}

.data-table tbody tr {
    transition: var(--transition-fast);
}

.data-table tbody tr:hover {
    background: var(--primary-bg);
}

.data-table tbody tr:last-child td { border-bottom: none; }

/* ---------- 紧凑密度（2026-10-15 财务（新）列表）----------
   全局 .data-table 行内边距为 12px，行高约 42px；财务（新）的账户/挂款等列表行数多，
   改用 8px 紧凑密度（行高约 30px）。仅对挂载了 .dt-compact 的表格实例生效
   （组件根元素 .data-table-wrapper 接收透传 class），不影响其他页面。 */
.dt-compact .data-table td {
    padding: 8px 14px;
}

/* 年费监控池：保留列宽/排序/列配置，同时保证主行不拥挤。 */
.annual-pool-table table.data-table.configurable th {
    height: 42px;
    padding: 0 10px;
}
.annual-pool-table table.data-table.configurable > tbody > tr:not(.data-table-expanded-row) > td {
    min-height: 44px;
    padding: 9px 10px;
}
.annual-pool-table .data-table-expanded-row > td {
    border-bottom: 1px solid var(--border);
}

/* 2026-10-26 方案A：取消年度子表头的吸顶。
   原实现让子表头 sticky 在 var(--annual-main-header-height) 处（主表头下方），
   一旦主表头实际高度与该偏移不一致、或测量退化，子表头(z-index 4)会盖住
   主表头(z-index 3)，多档案展开时各子表头还会在同一位置互叠。
   现改为子表头跟随内容滚动（表头行保留），主表头照常吸顶。
   注意：通用规则 table.data-table.configurable th（styles.css:1639）用后代
   选择器，会把嵌套在展开行内的子表头也设为 sticky，必须显式重置。 */
.annual-year-table {
    border-collapse: separate;
    border-spacing: 0;
}
.annual-pool-table .data-table-expanded-row table.annual-year-table.data-table th {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}
.annual-pool-table .annual-year-table td {
    min-height: 48px;
    padding: 10px 12px;
    vertical-align: middle;
    line-height: 1.45;
}

.dt-compact .th-content {
    padding: 8px 14px;
}

/* ---------- 标签 ---------- */
.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bg-main);
    color: var(--text-secondary);
}

.tag-blue { background: #dbeafe; color: #1d4ed8; }
.tag-green { background: #d1fae5; color: #047857; }
.tag-orange { background: #ffedd5; color: #c2410c; }
.tag-red { background: #fee2e2; color: #b91c1c; }
.tag-yellow { background: #fef9c3; color: #a16207; }
.tag-purple { background: #ede9fe; color: #6d28d9; }
.tag-gray { background: #f1f5f9; color: #475569; }

[data-theme="dark"] .tag-blue { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .tag-green { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .tag-orange { background: #431407; color: #fdba74; }
[data-theme="dark"] .tag-red { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .tag-yellow { background: #422006; color: #fde047; }
[data-theme="dark"] .tag-purple { background: #2e1065; color: #c4b5fd; }

/* ---------- 标签页 ---------- */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.tab-item {
    padding: 10px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition-fast);
}

.tab-item:hover { color: var(--primary); }

.tab-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* ---------- 详情弹窗 - 分组卡片布局 ---------- */
.detail-section {
    margin-bottom: 20px;
}

.detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid var(--primary);
}

.detail-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.detail-card-item {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--bg-main);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: var(--transition-fast);
}

.detail-card-item:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.detail-card-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.detail-card-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-all;
}

/* 详情卡片基本样式 */
.detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.detail-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid var(--primary);
}

/* 突出显示的卡片（用于六档费用配置等重要区域） */
.highlight-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fbff 100%);
    border: 1px solid #bae0ff;
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.08);
    transition: var(--transition-fast);
}

.highlight-card:hover {
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
    border-color: var(--primary);
}

.highlight-card .detail-card-title {
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    padding-left: 8px;
    border-left: 3px solid var(--primary);
}

/* 计算公式提示 */
.formula-hint {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(24, 144, 255, 0.08);
    border-radius: 6px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 500;
    text-align: center;
    border: 1px dashed var(--primary);
}

/* 分区大卡片 */
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.section-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    border-bottom: 2px solid var(--primary);
}

.section-card-icon {
    font-size: 18px;
}

.section-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.section-card-body {
    padding: 20px;
}

/* 费用配置卡片特殊样式 */
.fee-section-card {
    border: 1px solid #bae0ff;
}

.fee-section-card .section-card-header {
    background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%);
    border-bottom: 2px solid var(--primary);
}

.fee-section-card .section-card-title {
    color: var(--primary);
}

/* 费用子标题 */
.fee-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6f4ff;
}

/* 结算方式选择器 */
.settlement-type-selector {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px dashed #e6f4ff;
}

.settlement-type-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.settlement-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.settlement-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--bg-main);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.settlement-option:hover {
    border-color: var(--primary);
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

.settlement-option.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, #e6f4ff 0%, #bae0ff 100%);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}

.option-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.option-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.settlement-option.active .option-text {
    color: var(--primary);
}

.option-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* 费用配置区域 */
.fee-config-area {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 详情弹窗 - 固定标签栏 ---------- */
.modal-tabs {
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    flex-shrink: 0;
}

.modal-tabs .tabs {
    margin-bottom: 0;
}

.patent-detail-modal .modal-body {
    overflow-y: auto;
    flex: 1;
    max-height: none;
}

/* ---------- 应用加载占位（2026-09-29）----------
   #app 内含 Vue 模板原文，19 个脚本加载完成前若直接显示会出现
   「{{ loginError }}」等未编译内容（外网/frp 慢网时持续数秒）。
   方案：#app 挂 v-cloak 挂载前隐藏 + 独立占位显示加载动画，
   Vue 挂载 #app 时占位被整体替换自动消失。 */
[v-cloak] {
    display: none !important;
}

#app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--bg-main, #f5f7fb);
    z-index: 9999;
}

.app-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border, #e5e9f2);
    border-top-color: var(--primary, #2563eb);
    border-radius: 50%;
    animation: appLoadSpin 0.8s linear infinite;
}

.app-loading-text {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

@keyframes appLoadSpin {
    to { transform: rotate(360deg); }
}

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 16px; }

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group { flex: 1; }

/* 2026-10-08：表单里的勾选框/单选项（label 与 input 同一行，覆盖 .form-group input 的 100% 宽度） */
.chk {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
}

.chk input {
    width: auto;
    margin: 0;
    padding: 0;
}

/* ---------- 「标签 + 控件」成组（2026-10-17 UI-7 全站统一） ----------
   用途：筛选栏/表单里凡是「一句标签 + 一个控件」的，都用 <span class="form-pair"> 包起来。
   这样 flex 换行只会发生在**组与组之间**，不会再出现
   「标签留在上一行、它的输入框掉到下一行」的错位。
   （2026-10-17 实测：收款登记弹窗的「收款日期」就是这样被拆开的） */
.form-pair {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.form-pair > label {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
}

.form-pair > .sep {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- 模态框 ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
    overflow-y: auto;
    padding: 5vh 0;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* 短表单弹窗（如编辑用户）：原生 <select> 展开面板在新版 Chrome 按页面内
   元素渲染，会被弹窗链路上任一 overflow:auto 容器裁剪（下拉只露一条缝，
   无法选角色）。裁剪层共两层：.modal-body 与 .modal-overlay——一并放开；
   backdrop-filter 同样参与面板合成裁剪，一并去除。此类弹窗内容少无滚动
   需求，均无副作用（2026-09-29）。 */
.modal-plain .modal-body {
    overflow: visible;
    flex: none;
}

.modal-overlay.modal-plain-ov {
    overflow: visible;
    backdrop-filter: none;
}

/* 弹窗内单选按钮组（替代原生 select——部分浏览器环境下拉面板被裁剪，
   见 UserEdit 角色选择，2026-09-29） */
.seg-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.seg-btn {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.seg-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.seg-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- 详情区块 ---------- */
.detail-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.detail-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

/* ---------- 分页 ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.pagination button {
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition-fast);
}

.pagination button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination span {
    font-size: 13px;
    color: var(--text-muted);
}

/* 每页行数选择器（2026-09-27）：与分页按钮视觉统一 */
.pagination .page-size-select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
}

.pagination .page-size-select:hover,
.pagination .page-size-select:focus {
    border-color: var(--primary);
}

/* ---------- 加载动画 ---------- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ---------- 空状态 ---------- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ---------- 功能区标题色条 ---------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title::before {
    content: '';
    width: 4px;
    height: 22px;
    background: var(--page-accent, var(--primary));
    border-radius: 2px;
}

.page-header[data-area="patents"] { --page-accent: #3b82f6; }
.page-header[data-area="trademarks"] { --page-accent: #10b981; }
.page-header[data-area="finance"] { --page-accent: #f59e0b; }
.page-header[data-area="notifications"] { --page-accent: #8b5cf6; }
.page-header[data-area="customers"] { --page-accent: #06b6d4; }
.page-header[data-area="settings"] { --page-accent: #64748b; }

/* ---------- 进度条 ---------- */
.progress-bar {
    height: 6px;
    background: var(--bg-main);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ---------- 可配置表格 ---------- */
.data-table-wrapper {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: visible;
    max-width: 100%;
}

.table-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    z-index: 10;
}

.table-config {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-config:hover {
    background: var(--primary-bg);
    color: var(--primary);
}

.column-config-panel {
    position: absolute;
    top: 40px;
    right: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    min-width: 180px;
    animation: fadeIn 0.2s ease;
}

.config-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
}

.config-body {
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.config-item {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.config-item:hover { background: var(--bg-hover); }

.config-item label {
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border-light);
    text-align: right;
}

/* 方案2·表格内部滚动（2026-09-27）：滚动容器限制最大高度，纵向滚动发生在
   表格内部而非整页——横向滚动条随容器底边常驻屏幕可视区，不再需要把页面
   拉到最底部才能看到。默认高度 = 视口高 - 顶栏/筛选区/分页条等约 320px；
   个别页面布局差异大时可通过局部 CSS 变量 --dt-scroll-max 覆盖。
   弹窗内的表格用 55vh 兜底，避免超出弹窗可视高度。 */
.data-table-scroll {
    overflow: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    max-height: var(--dt-scroll-max, calc(100vh - 320px));
}

.modal-body .data-table-scroll,
.modal .data-table-scroll {
    --dt-scroll-max: 55vh;
}

table.data-table.configurable {
    table-layout: fixed;
    /* 列宽行为（2026-09-27）：表格总宽由 data-table.js 以内联 style 设为 Σ列宽
       （精确模式）。背景：2026-09-26 的 width:100% 修好了"翻页列宽漂移"（原
       max-content 退化为内容驱动），但引入新问题——CSS fixed 布局在 Σ列宽 <
       表格宽度时会把余量按比例摊给每一列，拖动任一列都改变 Σ、触发重新摊派，
       表现为"调整列宽时其余列跟着变"。精确模式下列宽严格按定义执行：拖动只
       影响被拖列，Σ列宽 > 容器时由 .data-table-scroll 横向滚动、< 容器时右侧
       留白。此处 width:100% 仅作内联样式未生效时的兜底。 */
    width: 100%;
    max-width: none;
    /* 覆盖 .data-table 的 overflow:hidden：祖先非 visible 的 overflow 会阻断
       后代表头 position:sticky（表头冻结失效）。圆角裁剪改由单元格背景视觉
       上近似，header 底色与页面背景接近，边角差异可忽略。 */
    overflow: visible;
}

/* 表头冻结（2026-09-27，方案2配套）：表格内部滚动后表头用 sticky 钉在
   滚动容器顶部，下翻行时列名不滚出视野。position:sticky 与原 relative
   一样可作为 resize-handle 等绝对定位子元素的包含块，列宽拖拽不受影响。
   border-collapse:collapse 下 th 的 border-bottom 属于共享边框、不随
   sticky 单元格固定（滚动时表头底线消失），改用 inset box-shadow 画线。
   z-index 层级：普通表头 3 < 固定列（.fixed-col）5，保证横+纵双向冻结时
   固定列表头盖在普通表头之上。 */
table.data-table.configurable th {
    position: sticky;
    top: 0;
    z-index: 3;
    user-select: none;
    white-space: nowrap;
    padding: 0;
    /* BUG（2026-09-27）：原引用 var(--bg-table-header)，该变量全项目未定义，
       声明计算无效回退为透明底色——表头 sticky 固定后行内容从其下穿过产生
       重叠。改回与 .data-table th 一致的 --bg-main（不透明，暗色主题自动联动）。 */
    background: var(--bg-main);
    overflow: visible;
    border-bottom: none;
    box-shadow: inset 0 -2px 0 var(--border);
}

table.data-table.configurable th:last-child {
    border-right: none;
}

table.data-table.configurable th.drag-over {
    background: var(--primary-bg);
    border-left: 2px solid var(--primary);
}

table.data-table.configurable td {
    border-right: 1px solid var(--border-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center !important;
}

table.data-table.configurable td:last-child {
    border-right: none;
}

/* 复选框列（2026-09-26）：fixed 布局严格按定义宽度（40px）执行，
   标准 padding 12px×2 后内容区仅 12px 放不下 checkbox，溢出触发
   text-overflow:ellipsis 在复选框后显示省略号。收窄内边距并取消
   截断，保证勾选控件完整显示。 */
table.data-table.configurable td.td-select {
    padding: 8px 4px;
    text-overflow: clip;
}

.th-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s;
    box-sizing: border-box;
}

.th-content input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.th-content:hover {
    background: var(--primary-bg);
}

.sort-icon {
    font-size: 10px;
    opacity: 0.4;
}

th.sort-asc .sort-icon, th.sort-desc .sort-icon {
    opacity: 1;
    color: var(--primary);
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    background: transparent;
    z-index: 20;
    transition: background 0.2s;
}

.resize-handle::before {
    content: '';
    position: absolute;
    right: 3px;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: var(--text-muted);
    opacity: 0.7;
    transition: all 0.2s;
    border-radius: 1px;
}

.resize-handle:hover::before,
.resize-handle.active::before {
    background: var(--primary);
    opacity: 1;
    width: 3px;
    right: 2px;
    top: 10%;
    bottom: 10%;
}

.resize-handle:hover {
    background: rgba(24, 144, 255, 0.1);
}

.drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 12px;
    margin-right: 4px;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}

.loading-cell, .empty-cell {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

/* ---------- 商标图样 ---------- */
.tm-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s;
}

.tm-thumb:hover {
    transform: scale(1.1);
}

.tm-image-preview {
    width: 120px;
    height: 120px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
}

.tm-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tm-image-placeholder {
    width: 120px;
    height: 120px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-hover);
}

/* ---------- 导出配置弹窗 ---------- */
.export-columns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
}

.export-column-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1;
    transition: background 0.2s;
}

.export-column-item:hover {
    background: var(--primary-bg);
}

.export-column-item input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* 导出弹窗 - 左右两栏布局 */
.export-modal-v2 {
    width: 720px !important;
}

.export-toolbar-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
    gap: 10px;
}

.export-toolbar-v2 > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.export-toolbar-v2 label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.export-toolbar-v2 select {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 120px;
}

.export-toolbar-v2 input[type="text"] {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 160px;
    transition: border-color 0.2s;
}

.export-toolbar-v2 input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.export-toolbar-v2 .btn-sm {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

.export-toolbar-v2 .btn-sm.btn-primary {
    background: linear-gradient(135deg, #1890ff, #096dd9);
    border: none;
    color: white;
    box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}

.export-toolbar-v2 .btn-sm.btn-primary:hover {
    background: linear-gradient(135deg, #40a9ff, #1890ff);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(24, 144, 255, 0.4);
}

.export-toolbar-v2 .btn-sm.btn-danger {
    background: linear-gradient(135deg, #ff4d4f, #cf1322);
    border: none;
    color: white;
    box-shadow: 0 2px 6px rgba(255, 77, 79, 0.3);
}

.export-toolbar-v2 .btn-sm.btn-danger:hover {
    background: linear-gradient(135deg, #ff7875, #ff4d4f);
    transform: translateY(-1px);
}

.export-toolbar-v2 .btn-sm.btn-default {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.export-toolbar-v2 .btn-sm.btn-default:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.export-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.export-panel {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.export-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.export-panel-body {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    min-height: 200px;
}

.export-col-item-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 4px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.15s;
    border: 1px solid transparent;
}

.export-col-item-v2:hover {
    background: var(--primary-bg);
    border-color: var(--primary);
}

.export-col-item-v2.selected {
    background: var(--primary-bg);
    border-color: var(--primary);
}

.export-col-item-v2 input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.col-name-v2 {
    flex: 1;
    line-height: 1.2;
}

.export-sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin-bottom: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    cursor: move;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.15s;
    user-select: none;
}

.export-sort-item:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.export-sort-item.dragging {
    opacity: 0.4;
    transform: scale(0.98);
}

.sort-handle {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: -1px;
    cursor: move;
    flex-shrink: 0;
}

.sort-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary);
    color: white;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.sort-name {
    flex: 1;
    line-height: 1.2;
}

.sort-remove {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-remove:hover {
    background: #ff4d4f;
    color: white;
}

.export-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 20px;
}

.export-hint-v2 {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    background: var(--bg-hover);
}

/* 已选订单标签 */
.selected-order-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--primary-bg);
    border: 1px solid var(--primary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--primary);
}

/* 发票登记弹窗中的订单列表 */
.invoice-order-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: 6px;
}

.invoice-order-list .data-table tbody tr.selected {
    background: var(--primary-bg);
}

.invoice-order-list .data-table tbody tr:hover {
    background: var(--bg-hover);
}

.invoice-order-list .data-table tbody tr.selected:hover {
    background: var(--primary-bg);
}

.fixed-col {
    /* 同上：--bg-table-header 未定义致透明，改 --bg-main */
    background: var(--bg-main) !important;
    position: sticky;
    left: 0;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    height: 41px;
    vertical-align: middle;
}

/* 表头复选框列的垂直冻结（2026-09-27，方案2配套）：display:flex 的表格
   单元格在行内会生成匿名 table-cell 包裹层，position:sticky 被限制在该
   匿名单元格（仅一行高）内，纵向滚动时表头钉不住、还会盖过已冻结的
   表头带。表头改回 table-cell（仅作用于 thead，.fixed-col 其余用法不变），
   复选框改为 margin auto + 垂直居中。 */
table.data-table.configurable thead th.fixed-col {
    display: table-cell !important;
}

.fixed-col input[type="checkbox"] {
    margin: 0 auto;
    cursor: pointer;
    display: block;
    width: 14px;
    height: 14px;
}

/* ---------- 小尺寸按钮 ---------- */
/* BUG #24 附带修复：btn-xs 在全项目被大量使用（app.js / m3 / m6），
   但 styles.css 中此前只有 .btn-sm，没有 .btn-xs，导致这些按钮
   尺寸与普通按钮一致、在表格行内和面板头部显得过大。 */
.btn-xs {
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.4;
    gap: 4px;
}

/* ---------- 徽标 ---------- */
/* BUG #24 附带修复：badge 用于文件类型标签 / 待处理数量角标，
   此前无样式定义（全靠内联 background/color），字号与内边距失控。 */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    background: var(--bg-main);
    color: var(--text-secondary);
}

/* ---------- 导出弹窗顶部工具条内部布局 ---------- */
/* BUG #24 附带修复：export-template-bar / export-actions / export-count /
   export-label / export-template-select 在 styles.css 中均无定义。
   父容器 .export-toolbar-v2 的 justify-content:space-between 只能撑开
   这两个 div 的整体位置，其内部没有 flex 布局，label/select/按钮
   会各自换行错位。这里补齐内部布局。 */
.export-template-bar,
.export-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.export-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.export-template-select {
    padding: 6px 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text-primary);
    min-width: 120px;
    cursor: pointer;
}

.export-count {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------- 导出提示语 ---------- */
/* BUG #24 附带修复：hint-selected / hint-all 此前无定义，
   已选/全量两种导出提示无区分度（无法用颜色区分风险）。 */
.hint-selected {
    color: var(--primary);
    font-weight: 500;
}

.hint-all {
    color: var(--text-secondary);
}

/* ---------- 导入预览表格 ---------- */
/* BUG #24 附带修复：import-table 是 .data-table 的修饰类，
   此前无定义；导入预览表在弹窗内会出现双重圆角/阴影。 */
.import-table {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--border-light);
}

/* ---------- 流程时间线 ---------- */
/* BUG #24 附带修复：timeline / timeline-item 此前无定义，
   流程日志外观完全依赖内联样式。这里定义骨架类，
   与现有内联样式不冲突（内联优先级更高）。 */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-item {
    position: relative;
    transition: var(--transition-fast);
}

.timeline-item:hover {
    box-shadow: var(--shadow-sm);
}

/* ---------- 阶梯费用输入 ---------- */
/* BUG #24 附带修复：fee-tiers 此前无定义。 */
.fee-tiers {
    display: block;
}

.fee-tiers .form-row {
    margin-bottom: 8px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .form-row { flex-direction: column; gap: 0; }
    div.stats-cards { flex-direction: row !important; }
    div.stats-cards > div.stat-card { flex: 1 1 calc(50% - 5px) !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
}

/* 待拍板#4（已裁决）：多选列表的已选计数提示条——常驻显示、跨页保留 */
.selection-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin-left: 8px;
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}
.selection-bar b { color: #1890ff; }
.selection-bar a { color: #1890ff; cursor: pointer; text-decoration: underline; }

/* #52 报表图表 */
.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.report-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 14px 16px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.report-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-left: 3px solid #1677ff;
    padding-left: 8px;
}
.report-card canvas {
    width: 100% !important;
    max-height: 280px;
}
@media (max-width: 1000px) {
    .report-grid { grid-template-columns: 1fr; }
}