/* 定义CSS变量，专为浅色模式优化 */
:root {
    --color-primary: #E50036; /* 红色，用于选项卡文字和激活背景 */
    --color-bg-payment: #FFFFFF; /* 未支付、贷款相关卡片背景色 */
    --color-text-payment: #007FBD; /* 深蓝色，用于标题、副标题、章节标题等 */
    --color-bg-execution: #DBEBFA; /* 施工中、排期中卡片背景色 */
    --color-text-execution: #007FBD; /* 施工中、排期中卡片文字色 */
    --color-text-dark: #53595D; /* 深灰文字，用于普通文本 */
    --color-text-medium: #9EA1AB; /* 中灰文字，用于次要信息 */
    --color-bg-light: #F5F7F8; /* 浅灰背景 */
    --color-border: rgba(158, 161, 171, 0.3); /* 边框颜色 */
}

/* 设置全局浅色背景 */
body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    background-image: radial-gradient(circle at top right, rgba(0, 127, 189, 0.05), transparent 30%), 
                      radial-gradient(circle at bottom left, rgba(219, 235, 250, 0.2), transparent 40%);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* --- 头部样式 --- */
.header-container {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    padding: 40px 30px;
    margin-bottom: 30px;
    color: var(--color-text-dark);
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.header-left {
    flex: 0 0 auto;
}

.header-center {
    flex: 0 1 auto;
    text-align: left;
    padding-left: 20px;
}

/* 修改：主标题颜色改为深蓝色 */
.header-center h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-payment); /* 使用深蓝色 */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 修改：副标题（用户信息）颜色改为深蓝色 */
.header-right .subtitle {
    font-size: 1.1rem;
    color: var(--color-text-payment); /* 使用深蓝色 */
    margin: 0 0 10px 0;
    font-weight: 500;
    white-space: nowrap;
}

.header-info .last-update {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    margin: 0;
    text-align: right;
}

.platform-logo {
    height: 60px;
    max-width: 200px;
    object-fit: contain;
}

/* --- 选项卡样式 --- */
/* 修改：移除背景、边框和内边距，只保留布局 */
.tabs {
    display: flex;
    margin-bottom: 30px;
    gap: 5px;
    /* padding: 5px; */
    /* background: rgba(245, 247, 248, 0.8); */
    /* backdrop-filter: blur(5px); */
    /* border-radius: 12px; */
    /* border: 1px solid var(--color-border); */
}

.tab {
    flex: 1;
    padding: 14px 20px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    /* background: white; */
    /* color: var(--color-text-medium); */
    /* border: none; */
    text-align: center;
    /* box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(0,0,0,0.05); */

    /* 新样式：默认状态为白底红字 */
    background: white;
    color: var(--color-primary); /* 红色文字 */
    border: 1px solid var(--color-primary); /* 红色边框，增强视觉 */
}

.tab.active {
    /* 修改：激活状态为红底白字 */
    background: var(--color-primary); /* 红色背景 */
    color: white; /* 白色文字 */
    box-shadow: 0 4px 15px rgba(229, 0, 54, 0.3);
    border: none; /* 移除边框 */
}

.tab:hover:not(.active) {
    background: rgba(245, 247, 248, 0.8);
    /* color: var(--color-bg-execution); */
    color: var(--color-primary); /* 悬停时保持红色文字 */
    transform: translateY(-2px);
}

/* --- 内容区域 --- */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content-inner {
    min-height: 400px;
}

/* --- 卡片样式 --- */
.card-section {
    margin-bottom: 40px;
}

/* 修改：章节标题颜色改为深蓝色 */
.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-payment); /* 使用深蓝色 */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

/* 通用卡片样式 */
.card {
    background: white;
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    color: var(--color-text-dark);
    margin-bottom: 20px;
}

/* ========== 关键修改：特定卡片配色 ========== */
/* 未支付卡片 - 使用浅蓝色背景，深蓝色文字 */
.payment-container-card {
    background: var(--color-bg-payment) !important;
    color: var(--color-text-payment) !important;
}

/* 施工中和排期中卡片 - 使用深蓝色背景，白色文字 */
.nested-card .card {
    background: var(--color-bg-execution) !important;
    color: var(--color-text-execution) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 供应商有贷款/无贷款卡片 - 使用浅蓝色背景，深蓝色文字 */
.loan-card-wrapper .card {
    background: var(--color-bg-payment) !important;
    color: var(--color-text-payment) !important;
}
/* ========== 关键修改结束 ========== */

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--color-bg-execution);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* ========== 关键修改：放大卡片标题 ========== */
.card-title {
    font-size: 1.3rem; /* 从 1.1rem 增大到 1.3rem */
    font-weight: 700; /* 加粗 */
    /* 文字颜色由父容器继承 */
}
/* ========== 关键修改结束 ========== */

.card-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 127, 189, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 修改：将图标颜色改为深蓝色 */
    color: var(--color-text-payment); /* 使用 #007FBD */
}

.card-description {
    font-size: 0.95rem;
    /* 文字颜色由父容器继承 */
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 金额数字颜色由父容器继承 */
.card-value {
    font-size: 2rem;
    font-weight: 700;
    /* color: inherit; */
    margin-bottom: 25px;
}

/* ========== 嵌套卡片布局 ========== */
.payment-container-card {
    display: flex;
    flex-direction: column;
}

.nested-card-container {
    display: flex;
    gap: 20px;
    flex: 1;
}

/* 确保第一排卡片没有下边距 */
.nested-card-container:not(.execution-cards-container) {
    margin-bottom: 0;
}

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

/* 红色卡片样式 - 已授信 */
.nested-card.credit-card .card {
    background: #ff4444 !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 浅红色卡片样式 - 待还款和已还款 */
.nested-card.light-red-card .card {
    background: #ff9999 !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ========== 结束 ========== */

/* --- 贷款卡片容器 --- */
.loan-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
}

/* 执行状态卡片容器 - 增加上边距 */
.execution-cards-container {
    margin-top: 40px !important; /* 调整这个值来控制间距大小 */
}

/* ========== 新增：金额与筛选器同行布局 ========== */
.amount-and-filter-row {
    display: flex;
    justify-content: space-between; /* 金额靠左，筛选器靠右 */
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.loan-amount-container {
    /* 金额容器，保持原有样式 */
}

/* ========== 修改：统一筛选器样式 ========== */
.filter-section {
    display: flex;
    align-items: center;
    gap: 10px; /* 减小间距 */
    margin: 0; /* 移除默认外边距 */
    flex-wrap: wrap;
}

.filter-select {
    /* 统一高度和样式 */
    height: 36px; /* 调小高度 */
    padding: 0 12px; /* 调整内边距 */
    border: 1px solid var(--color-border);
    border-radius: 8px; /* 保持圆角 */
    font-size: 0.85rem; /* 调小字体 */
    background: transparent; /* 关键修改：背景透明 */
    color: var(--color-text-dark);
    min-width: 100px; /* 调小最小宽度 */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 日期输入框样式，确保与下拉框一致 */
.filter-select[type="date"] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: transparent; /* 关键修改：背景透明 */
    color: var(--color-text-dark);
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-bg-execution);
    box-shadow: 0 0 0 2px rgba(0, 127, 189, 0.2);
}


/* --- 内嵌表格 --- */
.inner-table-container {
    margin-top: 25px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: white;
    backdrop-filter: blur(5px);
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

.detail-table th,
.detail-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}


.detail-table th {
    background-color: rgba(0, 127, 189, 0.05);
    font-weight: 600;
    color: var(--color-text-payment); /* 修改为深蓝色，与“供应商有贷款”文字颜色一致 */
    position: sticky;
    top: 0;
    z-index: 1;
}

/* --- 存证数据链接样式 --- */
.view-link {
    display: inline-block;
    padding: 6px 12px;
    background-color: var(--color-bg-execution);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.view-link:hover {
    background-color: var(--color-text-payment);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 127, 189, 0.3);
}

.view-link:active {
    transform: translateY(0);
}

/* ========== 关键修改结束 ========== */

.detail-table tbody tr:hover {
    background-color: rgba(219, 235, 250, 0.5);
}

/* --- 加载和错误状态 --- */
.loading-indicator,
.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--color-text-medium);
    background: white;
    border-radius: 16px;
    border: 1px dashed var(--color-border);
}

.loading-indicator i,
.error-message i {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--color-bg-execution);
}

.error-message i {
    color: var(--color-primary);
}

.anno-card {
    background: white;
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    color: var(--color-text-dark);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.anno-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--color-bg-execution);
}

.anno-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--color-text-payment);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 24px;
}

.anno-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-payment);
    margin-bottom: 15px;
}

.anno-card-description {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    line-height: 1.5;
}

/* ========== 新增：为 annotation 页面的卡片网格专用样式 ========== */
.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 关键：设置最小宽度280px，实现一排3个 */
    gap: 20px;
    margin-bottom: 60px;
    width: 100%;
}

/* 确保 .anno-card 在网格中正确显示 */
.anno-card {
    text-decoration: none;
    color: inherit;
}

/* ========== 专为 payment.html 页面设计的样式 ========== */

/* 页面容器：继承主平台宽度 */
.payment-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 文档区域卡片 */
.payment-document-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.payment-document-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* 章节头部 */
.payment-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e6f2ff;
}

/* 章节图标 */
.payment-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-text-payment); /* 使用深蓝色 */
    color: white;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 20px;
}

/* 章节标题：使用深蓝色 */
.payment-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-payment); /* 关键：使用深蓝色，与主平台一致 */
}

/* 章节副标题 */
.payment-section-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* 表单组 */
.payment-form-group {
    margin-bottom: 20px;
}

/* 标签 */
.payment-form-group label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #444;
}

/* 静态输入框（关键修改：添加右侧内边距） */
.payment-form-control-static {
    width: 100%;
    padding: 15px 15px; /* 明确设置左右内边距为15px */
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 16px;
    background-color: #f8f9fa;
    color: #6c757d;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

/* 表单行 */
.payment-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* 表单列 */
.payment-form-col {
    flex: 1;
}

/* 笔记/提示框 */
.payment-note {
    background: #F8F9FA;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid #6C757D;
    margin: 20px 0;
    font-size: 15px;
    color: #495057;
}

/* 签名区域 */
.payment-signature-area {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #DEE2E6;
}

/* 签名线 */
.payment-signature-line {
    height: 1px;
    background: #DEE2E6;
    margin: 40px 0 15px;
}

/* 下载按钮 */
.payment-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-text-payment) 0%, #0056b3 100%);
    color: white;
    padding: 16px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    margin: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 127, 189, 0.3);
    transition: all 0.3s ease;
}
.payment-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 127, 189, 0.4);
}
.payment-download-btn i {
    margin-right: 10px;
}

/* 返回按钮 */
.payment-back-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
}
.payment-back-btn:hover {
    background: #5a6268;
}

/* ========== 专为 contract.html 页面设计的样式 ========== */

/* 页面容器：继承主平台宽度 */
.contract-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 文档区域卡片 */
.contract-document-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contract-document-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* 章节头部 */
.contract-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e6f2ff;
}

/* 章节图标 */
.contract-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-text-payment); /* 使用深蓝色 */
    color: white;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 20px;
}

/* 章节标题：使用深蓝色 */
.contract-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-payment); /* 关键：使用深蓝色，与主平台一致 */
}

/* 章节副标题 */
.contract-section-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* 条款项目 */
.contract-clause-item {
    margin-bottom: 25px;
}

/* 条款编号 */
.contract-clause-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-text-payment); /* 使用深蓝色 */
    color: white;
    border-radius: 50%;
    font-weight: 600;
    margin-right: 12px;
}

/* 条款标题 */
.contract-clause-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-payment); /* 使用深蓝色 */
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* 条款内容 */
.contract-clause-content {
    padding-left: 44px;
    font-size: 16px;
    color: #444;
    line-height: 1.7;
}

/* 银行信息区块 */
.contract-bank-info {
    background: #F0F8FF;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    border-left: 4px solid var(--color-text-payment); /* 使用深蓝色 */
}

/* 通用笔记/提示框 */
.contract-note {
    background: #F8F9FA;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid #6C757D;
    margin: 20px 0;
    font-size: 15px;
    color: #495057;
}

/* 表单组 */
.contract-form-group {
    margin-bottom: 20px;
}

/* 标签 */
.contract-form-group label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #444;
}

/* 静态输入框（行内） */
.contract-form-control-static {
    display: inline-block;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 16px;
    background-color: #f8f9fa;
    color: #6c757d;
    vertical-align: middle;
    margin: 0 4px;
}

/* 银行信息区块内的静态文本（块级） */
.contract-bank-static {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 16px;
    background-color: #f8f9fa;
    color: #6c757d;
    margin-top: 8px;
    /* 关键：确保左右内边距对称 */
    padding: 15px 15px;
    box-sizing: border-box;
}

/* 下载按钮 */
.contract-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-text-payment) 0%, #0056b3 100%);
    color: white;
    padding: 16px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    margin: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 127, 189, 0.3);
    transition: all 0.3s ease;
}
.contract-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 127, 189, 0.4);
}
.contract-download-btn i {
    margin-right: 10px;
}

/* 返回按钮 */
.contract-back-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
}
.contract-back-btn:hover {
    background: #5a6268;
}

/* ========== 专为 invoice.html 页面设计的样式 ========== */

/* 页面容器：继承主平台宽度 */
.invoice-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 文档区域卡片 */
.invoice-document-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.invoice-document-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* 章节头部 */
.invoice-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e6f2ff;
}

/* 章节图标 */
.invoice-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-text-payment); /* 使用深蓝色 */
    color: white;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 20px;
}

/* 章节标题：使用深蓝色 */
.invoice-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-payment); /* 关键：使用深蓝色，与主平台一致 */
}

/* 章节副标题 */
.invoice-section-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* 信息行 */
.invoice-info-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* 信息列 */
.invoice-info-col {
    flex: 1;
    min-width: 250px;
}

/* 信息标签 */
.invoice-info-label {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 5px;
    font-weight: 500;
}

/* 静态输入框（用于发票信息） */
.invoice-form-control-static {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 16px;
    background-color: #f8f9fa;
    color: #6c757d;
    margin-top: 5px;
    /* 关键：确保左右内边距对称 */
    padding: 12px 15px;
    box-sizing: border-box;
}

/* 表格容器 */
.invoice-table-container {
    overflow-x: auto;
    margin: 25px 0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 表格 */
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

/* 表头 */
.invoice-table th {
    background-color: #e9ecef;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
    color: #495057;
}

/* 表格单元格 */
.invoice-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    font-size: 15px;
    background-color: #fafafa;
    color: #6c757d;
}

/* 图像预览 */
.invoice-image-preview {
    margin: 30px 0;
    text-align: center;
}

.invoice-image-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-height: 600px;
    object-fit: contain;
}

.invoice-image-caption {
    margin-top: 10px;
    font-size: 15px;
    color: #6c757d;
}

/* 下载按钮 */
.invoice-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-text-payment) 0%, #0056b3 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 127, 189, 0.3);
    transition: all 0.3s ease;
}
.invoice-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 127, 189, 0.4);
}
.invoice-download-btn i {
    margin-right: 8px;
}

/* 返回按钮 */
.invoice-back-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
}
.invoice-back-btn:hover {
    background: #5a6268;
}

/* ========== 专为 products_confirmation.html 页面设计的样式 ========== */

/* 页面容器：继承主平台宽度 */
.confirmation-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 文档区域卡片 */
.confirmation-document-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.confirmation-document-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* 章节头部 */
.confirmation-section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e6f2ff;
}

/* 章节图标 */
.confirmation-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-text-payment); /* 使用深蓝色 */
    color: white;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 20px;
}

/* 章节标题：使用深蓝色 */
.confirmation-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-payment); /* 关键：使用深蓝色，与主平台一致 */
}

/* 章节副标题 */
.confirmation-section-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* 信息网格 */
.confirmation-confirm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

/* 信息项 */
.confirmation-info-item {
    margin-bottom: 15px;
}

/* 信息标签 */
.confirmation-info-label {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 5px;
    font-weight: 500;
}

/* 静态输入框（用于信息值） */
.confirmation-form-control-static {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 16px;
    background-color: #f8f9fa;
    color: #6c757d;
    transition: border-color 0.3s, box-shadow 0.3s;
    /* 关键：确保左右内边距对称 */
    padding: 15px 15px;
    box-sizing: border-box;
}

/* 表格容器 */
.confirmation-table-container {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 表格 */
.confirmation-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

/* 表头 */
.confirmation-table th {
    background-color: #e9ecef;
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
    color: #495057;
}

/* 表格单元格 */
.confirmation-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #dee2e6;
    font-size: 15px;
}

/* 表格内小号静态文本 */
.confirmation-table-static {
    padding: 8px;
    font-size: 14px;
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-align: left;
    box-sizing: border-box;
}

/* 签名区域 */
.confirmation-signature-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* 签名框 */
.confirmation-signature-box {
    border: 1px solid #e0e0e6;
    border-radius: 12px;
    padding: 15px;
    background: #fafafa;
}

/* 签名标题 */
.confirmation-signature-title {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
    color: #000;
}

/* 签名线 */
.confirmation-signature-line {
    height: 1px;
    background: #DEE2E6;
    margin: 40px 0 15px;
}

/* 笔记区域容器 */
.confirmation-notes-section {
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-top: 20px;
}

/* 通用笔记/提示框 */
.confirmation-note {
    background: #F8F9FA;
    padding: 15px;
    border-radius: 12px;
    border-left: 4px solid #6C757D;
    margin: 20px 0;
    font-size: 15px;
    color: #495057;
}

/* 下载按钮 */
.confirmation-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-text-payment) 0%, #0056b3 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 127, 189, 0.3);
    transition: all 0.3s ease;
}
.confirmation-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 127, 189, 0.4);
}
.confirmation-download-btn i {
    margin-right: 8px;
}

/* 返回按钮 */
.confirmation-back-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
}
.confirmation-back-btn:hover {
    background: #5a6268;
}

/* ========== 专为 report.html 页面设计的样式 ========== */

/* 页面容器：继承主平台宽度 */
.report-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 文档区域卡片 */
.report-document-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.report-document-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* 章节头部 */
.report-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e6f2ff;
}

/* 章节图标 */
.report-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-text-payment); /* 使用深蓝色 */
    color: white;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 20px;
}

/* 章节标题：使用深蓝色 */
.report-section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-payment); /* 关键：使用深蓝色，与主平台一致 */
}

/* 章节副标题 */
.report-section-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

/* 信息网格 */
.report-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* 信息项 */
.report-info-item {
    margin-bottom: 15px;
}

/* 信息标签 */
.report-info-label {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 5px;
    font-weight: 500;
}

/* 信息值（用于报告中的标题性文字） */
.report-info-value {
    font-size: 17px;
    font-weight: 500;
    color: #212529;
    padding: 8px 0;
    border-bottom: 1px dashed #ced4da;
}

/* 表格容器 */
.report-table-container {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 表格 */
.report-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

/* 表头 */
.report-table th {
    background-color: #e9ecef;
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 15px;
    color: #495057;
}

/* 表格单元格 */
.report-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #dee2e6;
    font-size: 15px;
}

/* 图像画廊 */
.report-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

/* 图像项 */
.report-image-item {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
.report-image-item:hover {
    transform: translateY(-5px);
}

/* 图像 */
.report-image-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

/* 图像说明 */
.report-image-caption {
    padding: 12px;
    background: white;
    font-size: 14px;
    color: #495057;
}

/* 结论框 */
.report-conclusion {
    background: #d4edda;
    border-left: 5px solid #28a745;
    padding: 20px;
    border-radius: 12px;
    margin: 25px 0;
}

/* 签名区域 */
.report-signature-area {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #DEE2E6;
}

/* 签名线 */
.report-signature-line {
    height: 1px;
    background: #DEE2E6;
    margin: 40px 0 15px;
}

/* 签名标签 */
.report-signature-label {
    font-size: 16px;
    color: #6c757d;
}

/* 下载按钮 */
.report-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-text-payment) 0%, #0056b3 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 127, 189, 0.3);
    transition: all 0.3s ease;
}
.report-download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 127, 189, 0.4);
}
.report-download-btn i {
    margin-right: 8px;
}

/* 返回按钮 */
.report-back-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.3s;
}
.report-back-btn:hover {
    background: #5a6268;
}





/* --- 页脚 --- */
.footer {
    text-align: center;
    padding: 40px 20px 30px;
    color: var(--color-text-medium);
    font-size: 0.9rem;
    margin-top: 60px;
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
}

/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .header-container {
        padding: 30px 20px;
    }

    .header-row {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        text-align: center;
    }

    .header-center h1 {
        font-size: 2rem;
        white-space: normal;
        text-align: center;
    }

    .card {
        padding: 25px 20px;
    }

    .loan-cards-container {
        grid-template-columns: 1fr;
    }

    /* 在小屏幕上，让金额和筛选器堆叠显示 */
    .amount-and-filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .filter-section {
        width: 100%;
    }

    .payment-form-row {
        flex-direction: column;
        gap: 0;
    }
    .payment-section-title {
        font-size: 20px;
    }
    .payment-document-section {
        padding: 20px;
    }

    .contract-section-title {
        font-size: 20px;
    }
    .contract-document-section {
        padding: 20px;
    }
    .contract-clause-content {
        padding-left: 20px;
    }

    .invoice-info-row {
        flex-direction: column;
    }
    .invoice-section-title {
        font-size: 20px;
    }
    .invoice-document-section {
        padding: 20px;
    }

    .confirmation-signature-section {
        grid-template-columns: 1fr;
    }
    .confirmation-section-title {
        font-size: 20px;
    }
    .confirmation-document-section {
        padding: 20px;
    }

    .report-info-grid {
        grid-template-columns: 1fr;
    }
    .report-section-title {
        font-size: 20px;
    }
    .report-document-section {
        padding: 20px;
    }
    .report-image-gallery {
        grid-template-columns: 1fr;
    }
    #customDateRangeContainer {
        flex-direction: column !important;
        gap: 10px;
    }
    /* ========== client.html 专属：放大选项卡 ========== */
    .page-client .tabs {
        gap: 8px;
        margin-bottom: 0;
    }
    .page-client .tab {
        padding: 16px 24px;       /* 原为 14px 20px */
        font-size: 1.125rem;      /* 原为 1rem */
        font-weight: 600;
        border-radius: 10px 10px 0 0;
    }
    /* 隐藏内容区域，确保页面只显示选项卡 */
    .page-client .tab-content {
        display: none !important;
    }
    /* ========== 结束 ========== */
}