/* /Components/Dialogs/AccountPickerDialog.razor.rz.scp.css */
/* 主容器 */
.account-picker-container[b-ppgrl7dclh] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    min-width: 800px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 标题栏 */
.account-picker-header[b-ppgrl7dclh] {
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-picker-header-left[b-ppgrl7dclh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-picker-title[b-ppgrl7dclh] {
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.account-picker-close-btn[b-ppgrl7dclh] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
}

    .account-picker-close-btn:hover[b-ppgrl7dclh] {
        background: rgba(255, 255, 255, 0.2) !important;
    }

/* 搜索栏 */
.account-picker-search[b-ppgrl7dclh] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-wrap: wrap;
}

.account-picker-search-input[b-ppgrl7dclh] {
    flex: 1;
    min-width: 200px;
}

    .account-picker-search-input .rz-textbox[b-ppgrl7dclh] {
        background: white !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
    }

.account-picker-search-btn[b-ppgrl7dclh] {
    background: #10b981 !important;
    border: none !important;
    color: white !important;
}

.account-picker-reset-btn[b-ppgrl7dclh] {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
}

/* ========== 桌面端表格 ========== */
.account-picker-table-desktop[b-ppgrl7dclh] {
    padding: 0 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.account-picker-grid[b-ppgrl7dclh] {
    height: 400px;
    display: flex;
    flex-direction: column;
}

/* 表格样式覆盖 */
[b-ppgrl7dclh] .account-picker-grid .rz-datatable {
    height: 100% !important;
}

[b-ppgrl7dclh] .account-picker-grid .rz-datatable-data {
    overflow-y: auto !important;
    flex: 1;
}

[b-ppgrl7dclh] .account-picker-grid .rz-datatable thead th {
    background: #f8f9fa !important;
    color: #333 !important;
    border-bottom: 1px solid #e9ecef !important;
}

[b-ppgrl7dclh] .account-picker-grid .rz-datatable tbody td {
    color: #555 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

[b-ppgrl7dclh] .account-picker-grid .rz-datatable tbody tr:hover {
    background: #f8f9fa !important;
}

/* 滚动条样式 */
[b-ppgrl7dclh] .account-picker-grid .rz-datatable-data::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-ppgrl7dclh] .account-picker-grid .rz-datatable-data::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

[b-ppgrl7dclh] .account-picker-grid .rz-datatable-data::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

    [b-ppgrl7dclh] .account-picker-grid .rz-datatable-data::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }

/* ========== 移动端卡片 ========== */
.account-picker-card-mobile[b-ppgrl7dclh] {
    display: none;
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.account-picker-card-header[b-ppgrl7dclh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
    color: #666;
    font-size: 13px;
}

.account-picker-card-pagination[b-ppgrl7dclh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-info[b-ppgrl7dclh] {
    font-size: 13px;
    color: #666;
}

.account-picker-card-list[b-ppgrl7dclh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-card[b-ppgrl7dclh] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

    .account-card:hover[b-ppgrl7dclh] {
        background: #f0fdf4;
        transform: translateX(2px);
    }

.account-card-selected[b-ppgrl7dclh] {
    background: #f0fdf4;
    border-color: #10b981;
}

.account-card-radio[b-ppgrl7dclh] {
    padding-top: 2px;
}

    .account-card-radio input[b-ppgrl7dclh] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #10b981;
    }

.account-card-content[b-ppgrl7dclh] {
    flex: 1;
}

.account-card-name[b-ppgrl7dclh] {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.account-card-info[b-ppgrl7dclh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

.card-label[b-ppgrl7dclh] {
    color: #999;
}

.empty-data[b-ppgrl7dclh] {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* ========== 底部按钮 ========== */
.account-picker-footer[b-ppgrl7dclh] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .account-picker-container[b-ppgrl7dclh] {
        min-width: auto;
        width: 100%;
    }

    .account-picker-table-desktop[b-ppgrl7dclh] {
        display: none;
    }

    .account-picker-card-mobile[b-ppgrl7dclh] {
        display: flex;
        flex-direction: column;
    }

    .account-picker-search[b-ppgrl7dclh] {
        flex-direction: column;
    }

    .account-picker-search-input[b-ppgrl7dclh] {
        width: 100%;
    }

    .account-picker-search-btn[b-ppgrl7dclh],
    .account-picker-reset-btn[b-ppgrl7dclh] {
        width: 100%;
    }

    .account-card-info[b-ppgrl7dclh] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .account-picker-card-mobile[b-ppgrl7dclh] {
        display: none;
    }
}

@media (max-width: 480px) {
    .account-card-info[b-ppgrl7dclh] {
        grid-template-columns: 1fr;
    }

    .account-card-name[b-ppgrl7dclh] {
        font-size: 14px;
    }
}
/* /Components/Dialogs/BWLoginDialog.razor.rz.scp.css */

/* 验证码输入框样式 */
.code-input-container .rz-textbox[b-q5ac4aeg4y] {
    text-align: center;
    font-size: 20px;
    letter-spacing: 8px;
    font-weight: 500;
}

/* 移除数字输入框的箭头 */
.code-input-container input[type=number][b-q5ac4aeg4y]::-webkit-inner-spin-button,
.code-input-container input[type=number][b-q5ac4aeg4y]::-webkit-outer-spin-button {
    opacity: 0;
    position: absolute;
    right: 0;
}
/* /Components/Dialogs/GoodsTaxCodePickerDialog.razor.rz.scp.css */
/* 主容器 */
.goods-picker-container[b-77vecsu47w] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    min-width: 1000px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 标题栏 */
.goods-picker-header[b-77vecsu47w] {
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goods-picker-header-left[b-77vecsu47w] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.goods-picker-title[b-77vecsu47w] {
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.goods-picker-close-btn[b-77vecsu47w] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
}

    .goods-picker-close-btn:hover[b-77vecsu47w] {
        background: rgba(255, 255, 255, 0.2) !important;
    }

/* 搜索栏 */
.goods-picker-search[b-77vecsu47w] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.goods-picker-search-input[b-77vecsu47w] {
    flex: 1;
}

    .goods-picker-search-input .rz-textbox[b-77vecsu47w] {
        background: white !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
    }

.goods-picker-reset-btn[b-77vecsu47w] {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
}

/* 统计信息 */
.goods-picker-stats[b-77vecsu47w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f0fdf4;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #e9ecef;
}

    .goods-picker-stats strong[b-77vecsu47w] {
        color: #10b981;
    }

.goods-picker-stats-total[b-77vecsu47w] {
    color: #999;
}

/* ========== 桌面端表格容器 ========== */
.goods-picker-table-desktop[b-77vecsu47w] {
    padding: 0 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ========== 表格滚动样式 ========== */
.goods-picker-grid[b-77vecsu47w] {
    height: 450px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 表格主体滚动 */
[b-77vecsu47w] .goods-picker-grid .rz-datatable-data {
    overflow-y: auto !important;
    flex: 1;
}

/* 表头固定不滚动 */
[b-77vecsu47w] .goods-picker-grid .rz-datatable-thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
}

/* 滚动条样式（可选） */
[b-77vecsu47w] .goods-picker-grid .rz-datatable-data::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-77vecsu47w] .goods-picker-grid .rz-datatable-data::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

[b-77vecsu47w] .goods-picker-grid .rz-datatable-data::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

    [b-77vecsu47w] .goods-picker-grid .rz-datatable-data::-webkit-scrollbar-thumb:hover {
        background: #a0a0a0;
    }

/* 单选框列 */
.goods-radio-cell[b-77vecsu47w] {
    text-align: center;
}

/* 表格样式覆盖 */
[b-77vecsu47w] .goods-picker-grid .rz-datatable thead th {
    background: #f8f9fa !important;
    color: #333 !important;
    border-bottom: 1px solid #e9ecef !important;
}

[b-77vecsu47w] .goods-picker-grid .rz-datatable tbody td {
    color: #555 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

[b-77vecsu47w] .goods-picker-grid .rz-datatable tbody tr:hover {
    background: #f8f9fa !important;
}

/* 移动端卡片 */
.goods-picker-card-mobile[b-77vecsu47w] {
    display: none;
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.goods-picker-card-list[b-77vecsu47w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goods-card[b-77vecsu47w] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

    .goods-card:hover[b-77vecsu47w] {
        background: #f0fdf4;
        transform: translateX(2px);
    }

.goods-card-selected[b-77vecsu47w] {
    background: #f0fdf4;
    border-color: #10b981;
}

.goods-card-radio[b-77vecsu47w] {
    padding-top: 2px;
}

    .goods-card-radio input[b-77vecsu47w] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #10b981;
    }

.goods-card-content[b-77vecsu47w] {
    flex: 1;
}

.goods-card-name[b-77vecsu47w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.goods-tax-code[b-77vecsu47w] {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
}

.goods-status[b-77vecsu47w] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
}

.status-enabled[b-77vecsu47w] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.status-disabled[b-77vecsu47w] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.goods-card-title[b-77vecsu47w] {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.goods-card-subtitle[b-77vecsu47w] {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

.goods-card-info[b-77vecsu47w] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

.card-label[b-77vecsu47w] {
    color: #999;
}

/* 移动端分页 */
.goods-picker-card-pagination[b-77vecsu47w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.page-info[b-77vecsu47w] {
    font-size: 13px;
    color: #666;
}

/* 详情区域 */
.goods-detail-section[b-77vecsu47w] {
    margin: 16px 20px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.goods-detail-header[b-77vecsu47w] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.goods-detail-grid[b-77vecsu47w] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    font-size: 12px;
}

.detail-label[b-77vecsu47w] {
    color: #999;
}

.goods-detail-grid div[b-77vecsu47w] {
    color: #555;
}

/* 底部按钮 */
.goods-picker-footer[b-77vecsu47w] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
}

.empty-data[b-77vecsu47w] {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* 加载动画样式 */
.loading-spinner-sm[b-77vecsu47w] {
    width: 24px;
    height: 24px;
    border: 2px solid #e9ecef;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-77vecsu47w 0.6s linear infinite;
}

@keyframes spin-b-77vecsu47w {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .goods-picker-container[b-77vecsu47w] {
        min-width: auto;
        width: 100%;
    }

    .goods-picker-table-desktop[b-77vecsu47w] {
        display: none;
    }

    .goods-picker-card-mobile[b-77vecsu47w] {
        display: flex;
        flex-direction: column;
    }

    .goods-picker-search[b-77vecsu47w] {
        flex-direction: column;
    }

    .goods-picker-search-input[b-77vecsu47w] {
        width: 100%;
    }

    .goods-picker-reset-btn[b-77vecsu47w] {
        width: 100%;
    }

    .goods-detail-grid[b-77vecsu47w] {
        grid-template-columns: 1fr 1fr;
    }

    .goods-card-info[b-77vecsu47w] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .goods-picker-card-mobile[b-77vecsu47w] {
        display: none;
    }
}

@media (max-width: 480px) {
    .goods-detail-grid[b-77vecsu47w] {
        grid-template-columns: 1fr;
    }

    .goods-card-name[b-77vecsu47w] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Dialogs/InvoiceDetailDialog.razor.rz.scp.css */
/* 主容器 */
.invoice-dialog-container[b-ut8khvsgxg] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

/* 标题栏 */
.invoice-dialog-header[b-ut8khvsgxg] {
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-dialog-header-left[b-ut8khvsgxg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-dialog-title[b-ut8khvsgxg] {
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.invoice-dialog-close-btn[b-ut8khvsgxg] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
}

/* 发票主体 */
.invoice-body[b-ut8khvsgxg] {
    padding: 20px;
    background: white;
}

/* 发票头部 */
.invoice-header[b-ut8khvsgxg] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
}

.invoice-type[b-ut8khvsgxg] {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
}

.invoice-type-blue[b-ut8khvsgxg] {
    color: #000;
}

.invoice-type-red[b-ut8khvsgxg] {
    color: #ff4444;
}

.invoice-header-info[b-ut8khvsgxg] {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 12px;
    color: #666;
    flex-wrap: wrap;
}

/* 红字发票标识 */
.red-invoice-badge[b-ut8khvsgxg] {
    text-align: center;
    margin-bottom: 16px;
}

    .red-invoice-badge span[b-ut8khvsgxg] {
        display: inline-block;
        padding: 4px 12px;
        background: #ff4444;
        color: white;
        font-size: 12px;
        font-weight: bold;
        border-radius: 4px;
    }

/* 购销双方信息 */
.party-info-desktop[b-ut8khvsgxg] {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.party-card[b-ut8khvsgxg] {
    flex: 1;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px;
}

.party-title[b-ut8khvsgxg] {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 13px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.party-content[b-ut8khvsgxg] {
    font-size: 12px;
    line-height: 1.7;
    color: #555;
}

.party-label[b-ut8khvsgxg] {
    color: #888;
}

/* 原发票信息 */
.original-invoice-info[b-ut8khvsgxg] {
    margin-bottom: 16px;
    padding: 10px;
    background: #fff5f5;
    border: 1px solid #ffcccc;
    border-radius: 8px;
    font-size: 12px;
    color: #ff4444;
}

/* 货物明细标题 */
.detail-title[b-ut8khvsgxg] {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 桌面端表格 */
.detail-table-desktop[b-ut8khvsgxg] {
    display: block;
    margin-bottom: 20px;
}

.table-wrapper[b-ut8khvsgxg] {
    overflow-x: auto;
}

.invoice-detail-table[b-ut8khvsgxg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid #e8e8e8;
}

    .invoice-detail-table th[b-ut8khvsgxg],
    .invoice-detail-table td[b-ut8khvsgxg] {
        padding: 8px 6px;
        border: 1px solid #e8e8e8;
    }

    .invoice-detail-table th[b-ut8khvsgxg] {
        background: #f5f5f5;
        font-weight: 500;
        text-align: center;
    }

    .invoice-detail-table td[b-ut8khvsgxg] {
        color: #333;
    }

    .invoice-detail-table tfoot tr[b-ut8khvsgxg] {
        background: #fafafa;
        font-weight: bold;
    }

.text-right[b-ut8khvsgxg] {
    text-align: right;
}

.text-center[b-ut8khvsgxg] {
    text-align: center;
}

/* 移动端卡片 */
.detail-card-mobile[b-ut8khvsgxg] {
    display: none;
    margin-bottom: 20px;
}

.detail-card-item[b-ut8khvsgxg] {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.detail-card-item-name[b-ut8khvsgxg] {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
}

.detail-card-item-grid[b-ut8khvsgxg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 12px;
}

.detail-card-label[b-ut8khvsgxg] {
    color: #888;
}

.detail-card-total[b-ut8khvsgxg] {
    background: #e8f5e9;
    border-radius: 10px;
    padding: 10px;
    text-align: right;
    font-weight: bold;
    font-size: 12px;
}

/* 价税合计 */
.amount-summary[b-ut8khvsgxg] {
    margin-bottom: 16px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
}

.amount-summary-row[b-ut8khvsgxg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.amount-chinese[b-ut8khvsgxg] {
    font-size: 13px;
    font-weight: bold;
}

.amount-number[b-ut8khvsgxg] {
    font-size: 16px;
    font-weight: bold;
}

.amount-number-red[b-ut8khvsgxg] {
    color: #ff4444;
}

.amount-number-default[b-ut8khvsgxg] {
    color: #d32f2f;
}

.amount-detail[b-ut8khvsgxg] {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

/* 备注信息 */
.remark-section[b-ut8khvsgxg] {
    margin-bottom: 16px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
}

.remark-title[b-ut8khvsgxg] {
    font-weight: bold;
    font-size: 12px;
}

.remark-content[b-ut8khvsgxg] {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* 发票底部 */
.invoice-footer[b-ut8khvsgxg] {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
    font-size: 11px;
    color: #999;
    flex-wrap: wrap;
    gap: 8px;
}

/* 底部按钮区域 */
.invoice-dialog-footer[b-ut8khvsgxg] {
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #e8e8e8;
    background: #fafafa;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .invoice-header-info[b-ut8khvsgxg] {
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }

    .party-info-desktop[b-ut8khvsgxg] {
        flex-direction: column;
        gap: 12px;
    }

    .detail-table-desktop[b-ut8khvsgxg] {
        display: none;
    }

    .detail-card-mobile[b-ut8khvsgxg] {
        display: block;
    }
}

@media (max-width: 480px) {
    .invoice-body[b-ut8khvsgxg] {
        padding: 16px;
    }

    .invoice-type[b-ut8khvsgxg] {
        font-size: 18px;
    }

    .party-content div[b-ut8khvsgxg] {
        display: flex;
        flex-direction: column;
        margin-bottom: 6px;
    }

    .party-label[b-ut8khvsgxg] {
        width: auto;
        margin-bottom: 2px;
    }

    .detail-card-item-grid[b-ut8khvsgxg] {
        grid-template-columns: 1fr;
    }

    .amount-summary-row[b-ut8khvsgxg] {
        flex-direction: column;
        text-align: center;
    }

    .invoice-footer[b-ut8khvsgxg] {
        flex-direction: column;
        text-align: center;
    }

    .invoice-dialog-footer[b-ut8khvsgxg] {
        flex-direction: column;
    }

        .invoice-dialog-footer .rz-button[b-ut8khvsgxg] {
            width: 100%;
        }
}
/* /Components/Dialogs/InvoicePickerDialog.razor.rz.scp.css */

.invoice-picker-dialog[b-hdv3m6skms] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

/* 对话框头部 */
.dialog-header[b-hdv3m6skms] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.dialog-title[b-hdv3m6skms] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

    .dialog-title i[b-hdv3m6skms] {
        font-size: 24px;
        color: #667eea;
    }

/* 内容区域 */
.dialog-content[b-hdv3m6skms] {
    flex: 1;
    overflow: auto;
    padding: 20px 24px;
}

/* 当前公司信息 */
.current-company-info[b-hdv3m6skms] {
    background: #f0f9ff;
    border-left: 3px solid #3b82f6;
    padding: 10px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 14px;
}

.info-label[b-hdv3m6skms] {
    color: #6b7280;
}

.info-value[b-hdv3m6skms] {
    font-weight: 600;
    color: #1f2937;
}

/* 搜索区域 */
.search-section[b-hdv3m6skms] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.search-row[b-hdv3m6skms] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

    .search-row:last-child[b-hdv3m6skms] {
        margin-bottom: 0;
    }

.search-field[b-hdv3m6skms] {
    flex: 1;
    min-width: 180px;
}

.field-label[b-hdv3m6skms] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
}

.date-range-inputs[b-hdv3m6skms],
.amount-inputs[b-hdv3m6skms] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-inputs .rz-datepicker[b-hdv3m6skms],
    .amount-inputs .rz-numeric[b-hdv3m6skms] {
        flex: 1;
    }

.date-separator[b-hdv3m6skms],
.amount-separator[b-hdv3m6skms] {
    color: #9ca3af;
    font-size: 12px;
}

.keyword-search[b-hdv3m6skms] {
    flex: 1.5;
}

.filter-item[b-hdv3m6skms] {
    flex: 1;
}

.search-actions[b-hdv3m6skms] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex: 0.5;
}

/* 表格容器 */
.table-container[b-hdv3m6skms] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* 表格单元格样式 */
.cell-text[b-hdv3m6skms] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-number[b-hdv3m6skms] {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 500;
    color: #3b82f6;
}

/* 状态标签 */
.status-badge[b-hdv3m6skms] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-normal[b-hdv3m6skms] {
    background: #dbeafe;
    color: #1e40af;
}

.status-redinvoice[b-hdv3m6skms] {
    background: #fee2e2;
    color: #991b1b;
}

.status-voided[b-hdv3m6skms] {
    background: #fef3c7;
    color: #92400e;
}

.status-success[b-hdv3m6skms] {
    background: #d1fae5;
    color: #065f46;
}

.status-failed[b-hdv3m6skms] {
    background: #ffe4e6;
    color: #9f1239;
}

.status-pending[b-hdv3m6skms] {
    background: #fef3c7;
    color: #92400e;
}

/* 对话框底部 */
.dialog-footer[b-hdv3m6skms] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.selection-info[b-hdv3m6skms] {
    flex: 1;
}

.selected-info[b-hdv3m6skms] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #10b981;
}

    .selected-info i[b-hdv3m6skms] {
        font-size: 18px;
    }

.footer-buttons[b-hdv3m6skms] {
    display: flex;
    gap: 12px;
}

/* Radzen 组件样式覆盖 */
.rz-dropdown[b-hdv3m6skms],
.rz-textbox[b-hdv3m6skms],
.rz-datepicker[b-hdv3m6skms],
.rz-numeric[b-hdv3m6skms] {
    width: 100%;
    border-radius: 6px;
}

    .rz-dropdown .rz-dropdown-trigger[b-hdv3m6skms],
    .rz-datepicker .rz-datepicker-trigger[b-hdv3m6skms] {
        background: transparent;
    }

/* 表格行悬停效果 */
.rz-data-grid-row:hover[b-hdv3m6skms] {
    background: #f3f4f6;
    cursor: pointer;
}

/* 选中的行 */
.rz-data-grid-row.rz-row-selected[b-hdv3m6skms] {
    background: #eff6ff;
}

/* 响应式调整 */
@@media (max-width: 768px) {
    .dialog-content[b-hdv3m6skms] {
        padding: 12px;
    }

    .search-row[b-hdv3m6skms] {
        flex-direction: column;
    }

    .search-field[b-hdv3m6skms] {
        min-width: 100%;
    }

    .search-actions[b-hdv3m6skms] {
        flex-direction: row;
    }
}
/* /Components/Dialogs/PaymentDialog.razor.rz.scp.css */
/* /Components/Dialogs/PaymentIssueDialog.razor.rz.scp.css */
/* /Components/Dialogs/SelectRedInvoiceDetail.razor.rz.scp.css */

.invoice-picker-dialog[b-wu4o0lzyz2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
}

/* 对话框头部 */
.dialog-header[b-wu4o0lzyz2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}

.dialog-title[b-wu4o0lzyz2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

    .dialog-title i[b-wu4o0lzyz2] {
        font-size: 24px;
        color: #667eea;
    }

/* 内容区域 */
.dialog-content[b-wu4o0lzyz2] {
    flex: 1;
    overflow: auto;
    padding: 20px 24px;
}

/* 当前公司信息 */
.current-company-info[b-wu4o0lzyz2] {
    background: #f0f9ff;
    border-left: 3px solid #3b82f6;
    padding: 10px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 14px;
}

.info-label[b-wu4o0lzyz2] {
    color: #6b7280;
}

.info-value[b-wu4o0lzyz2] {
    font-weight: 600;
    color: #1f2937;
}

/* 搜索区域 */
.search-section[b-wu4o0lzyz2] {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
}

.search-row[b-wu4o0lzyz2] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

    .search-row:last-child[b-wu4o0lzyz2] {
        margin-bottom: 0;
    }

.search-field[b-wu4o0lzyz2] {
    flex: 1;
    min-width: 180px;
}

.field-label[b-wu4o0lzyz2] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 6px;
}

.date-range-inputs[b-wu4o0lzyz2],
.amount-inputs[b-wu4o0lzyz2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-inputs .rz-datepicker[b-wu4o0lzyz2],
    .amount-inputs .rz-numeric[b-wu4o0lzyz2] {
        flex: 1;
    }

.date-separator[b-wu4o0lzyz2],
.amount-separator[b-wu4o0lzyz2] {
    color: #9ca3af;
    font-size: 12px;
}

.keyword-search[b-wu4o0lzyz2] {
    flex: 1.5;
}

.filter-item[b-wu4o0lzyz2] {
    flex: 1;
}

.search-actions[b-wu4o0lzyz2] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex: 0.5;
}

/* 表格容器 */
.table-container[b-wu4o0lzyz2] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* 表格单元格样式 */
.cell-text[b-wu4o0lzyz2] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-number[b-wu4o0lzyz2] {
    font-family: 'Monaco', 'Menlo', monospace;
    font-weight: 500;
    color: #3b82f6;
}

/* 状态标签 */
.status-badge[b-wu4o0lzyz2] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-normal[b-wu4o0lzyz2] {
    background: #dbeafe;
    color: #1e40af;
}

.status-redinvoice[b-wu4o0lzyz2] {
    background: #fee2e2;
    color: #991b1b;
}

.status-voided[b-wu4o0lzyz2] {
    background: #fef3c7;
    color: #92400e;
}

.status-success[b-wu4o0lzyz2] {
    background: #d1fae5;
    color: #065f46;
}

.status-failed[b-wu4o0lzyz2] {
    background: #ffe4e6;
    color: #9f1239;
}

.status-pending[b-wu4o0lzyz2] {
    background: #fef3c7;
    color: #92400e;
}

/* 对话框底部 */
.dialog-footer[b-wu4o0lzyz2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
}

.selection-info[b-wu4o0lzyz2] {
    flex: 1;
}

.selected-info[b-wu4o0lzyz2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #10b981;
}

    .selected-info i[b-wu4o0lzyz2] {
        font-size: 18px;
    }

.footer-buttons[b-wu4o0lzyz2] {
    display: flex;
    gap: 12px;
}

/* Radzen 组件样式覆盖 */
.rz-dropdown[b-wu4o0lzyz2],
.rz-textbox[b-wu4o0lzyz2],
.rz-datepicker[b-wu4o0lzyz2],
.rz-numeric[b-wu4o0lzyz2] {
    width: 100%;
    border-radius: 6px;
}

    .rz-dropdown .rz-dropdown-trigger[b-wu4o0lzyz2],
    .rz-datepicker .rz-datepicker-trigger[b-wu4o0lzyz2] {
        background: transparent;
    }

/* 表格行悬停效果 */
.rz-data-grid-row:hover[b-wu4o0lzyz2] {
    background: #f3f4f6;
    cursor: pointer;
}

/* 选中的行 */
.rz-data-grid-row.rz-row-selected[b-wu4o0lzyz2] {
    background: #eff6ff;
}

/* 响应式调整 */
@@media (max-width: 768px) {
    .dialog-content[b-wu4o0lzyz2] {
        padding: 12px;
    }

    .search-row[b-wu4o0lzyz2] {
        flex-direction: column;
    }

    .search-field[b-wu4o0lzyz2] {
        min-width: 100%;
    }

    .search-actions[b-wu4o0lzyz2] {
        flex-direction: row;
    }
}
/* /Components/Dialogs/SysEnvironmentDialog.razor.rz.scp.css */
/* EnvironmentForm.css */

/* 卡片容器 */
.environment-card[b-lv2sn1asal] {
    padding: 0;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
}

/* 内容区域 */
.environment-content[b-lv2sn1asal] {
    padding: 24px;
}

/* 表单网格 - 两列布局 */
.form-grid-two-column[b-lv2sn1asal] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

/* 全宽字段 (占两列) */
.form-field-full[b-lv2sn1asal] {
    grid-column: 1 / -1;
}

/* 表单字段 */
.form-field[b-lv2sn1asal] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-lv2sn1asal] {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

    .form-label.required[b-lv2sn1asal]::after {
        content: " *";
        color: #e74c3c;
    }

    .form-label .label-text[b-lv2sn1asal] {
        display: inline-block;
    }

/* 表单控件通用样式 */
.form-control[b-lv2sn1asal] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
    color: #333;
    min-height: 36px;
}

    .form-control:focus[b-lv2sn1asal] {
        border-color: #1890ff;
        outline: none;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    .form-control:disabled[b-lv2sn1asal] {
        background-color: #f5f5f5;
        color: #999;
        cursor: not-allowed;
    }

    .form-control.readonly-text[b-lv2sn1asal] {
        background-color: #fafafa;
        padding: 8px 12px;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        min-height: 36px;
        display: flex;
        align-items: center;
        color: #333;
    }

/* Radzen组件覆盖样式 */
.rz-dropdown[b-lv2sn1asal] {
    width: 100% !important;
}

    .rz-dropdown .rz-dropdown-trigger[b-lv2sn1asal] {
        border-radius: 6px;
    }

.rz-textbox[b-lv2sn1asal],
.rz-password[b-lv2sn1asal] {
    width: 100% !important;
}

/* 验证错误样式 */
.rz-validator-message[b-lv2sn1asal] {
    font-size: 12px;
    color: #e74c3c;
    margin-top: 4px;
}

/* 按钮区域 */
.form-actions[b-lv2sn1asal] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

    .form-actions .btn[b-lv2sn1asal] {
        flex: 1;
        padding: 10px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .form-actions .btn-primary[b-lv2sn1asal] {
        background-color: #1890ff;
        color: #fff;
    }

        .form-actions .btn-primary:hover[b-lv2sn1asal] {
            background-color: #40a9ff;
        }

        .form-actions .btn-primary:active[b-lv2sn1asal] {
            background-color: #096dd9;
        }

    .form-actions .btn-secondary[b-lv2sn1asal] {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #d9d9d9;
    }

        .form-actions .btn-secondary:hover[b-lv2sn1asal] {
            background-color: #e8e8e8;
        }

/* 响应式 - 小屏幕显示单列 */
@media (max-width: 640px) {
    .form-grid-two-column[b-lv2sn1asal] {
        grid-template-columns: 1fr;
    }

    .form-field-full[b-lv2sn1asal] {
        grid-column: 1;
    }

    .environment-content[b-lv2sn1asal] {
        padding: 16px;
    }

    .form-actions[b-lv2sn1asal] {
        flex-direction: column;
    }

        .form-actions .btn[b-lv2sn1asal] {
            flex: none;
            width: 100%;
        }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ========== 全局设置 - 禁止整体滚动 ========== */
html[b-jud4y9x0fs], body[b-jud4y9x0fs] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 主容器 - 占满全屏，禁止滚动 */
.main-container[b-jud4y9x0fs] {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* 动态背景 */
.animated-bg[b-jud4y9x0fs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -2;
}

    .animated-bg[b-jud4y9x0fs]::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: moveBackground-b-jud4y9x0fs 20s linear infinite;
    }

@keyframes moveBackground-b-jud4y9x0fs {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}

/* 应用包装器 - 占满全屏，禁止滚动 */
.app-wrapper[b-jud4y9x0fs] {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ========== 左侧菜单栏 ========== */
.sidebar[b-jud4y9x0fs] {
    width: 280px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* 桌面端折叠样式 - 宽度变为0 */
@media (min-width: 769px) {
    .sidebar.collapsed[b-jud4y9x0fs] {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        min-width: 0 !important;
    }
}

/* 移动端样式 - 使用固定定位 */
@media (max-width: 768px) {
    .sidebar[b-jud4y9x0fs] {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        z-index: 1000;
        transform: translateX(0);
    }

        /* 移动端折叠时位移隐藏 */
        .sidebar.collapsed[b-jud4y9x0fs] {
            width: 280px !important;
            transform: translateX(-100%);
        }
}

.sidebar-header[b-jud4y9x0fs] {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    white-space: nowrap;
}

.logo-wrapper[b-jud4y9x0fs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text[b-jud4y9x0fs] {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(135deg, #fff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px;
}

/* 菜单区域 - 独立滚动 */
.sidebar-menu[b-jud4y9x0fs] {
    flex: 1;
    padding: 20px 12px;
    overflow-y: auto;
    min-height: 0;
}

    /* 菜单区域滚动条样式 */
    .sidebar-menu[b-jud4y9x0fs]::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-menu[b-jud4y9x0fs]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
    }

    .sidebar-menu[b-jud4y9x0fs]::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.4);
        border-radius: 2px;
    }

/* 自定义 Radzen 菜单样式 */
[b-jud4y9x0fs] .rz-panel-menu {
    background: transparent !important;
}

    [b-jud4y9x0fs] .rz-panel-menu .rz-panel-menu-group-title {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 12px 16px 8px !important;
    }

    [b-jud4y9x0fs] .rz-panel-menu .rz-panel-menu-item {
        color: rgba(255, 255, 255, 0.8) !important;
        border-radius: 12px !important;
        margin: 4px 0 !important;
        transition: all 0.3s ease !important;
    }

        [b-jud4y9x0fs] .rz-panel-menu .rz-panel-menu-item:hover {
            background: rgba(99, 102, 241, 0.2) !important;
            color: #a78bfa !important;
            transform: translateX(4px);
        }

    [b-jud4y9x0fs] .rz-panel-menu .rz-panel-menu-item-active {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)) !important;
        color: white !important;
        border-left: 3px solid #6366f1 !important;
    }

/* 底部用户信息卡片 */
.sidebar-footer[b-jud4y9x0fs] {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    white-space: nowrap;
}

.user-info-card[b-jud4y9x0fs] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

    .user-info-card:hover[b-jud4y9x0fs] {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

.user-avatar[b-jud4y9x0fs] {
    flex-shrink: 0;
}

[b-jud4y9x0fs] .user-avatar .rz-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
}

.user-details[b-jud4y9x0fs] {
    flex: 1;
    overflow: hidden;
}

.user-name[b-jud4y9x0fs] {
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role[b-jud4y9x0fs] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    white-space: nowrap;
}

/* ========== 右侧内容区 ========== */
.main-content[b-jud4y9x0fs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* 顶部栏 */
.top-bar[b-jud4y9x0fs] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.top-bar-left[b-jud4y9x0fs] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.page-title[b-jud4y9x0fs] {
    color: white;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.top-bar-right[b-jud4y9x0fs] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.datetime[b-jud4y9x0fs] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
}

/* ========== 内容区域 - 独立滚动 ========== */
.content-area[b-jud4y9x0fs] {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    min-height: 0;
    animation: fadeInUp-b-jud4y9x0fs 0.5s ease-out;
}

@keyframes fadeInUp-b-jud4y9x0fs {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 内容区域滚动条样式 ========== */
.content-area[b-jud4y9x0fs]::-webkit-scrollbar {
    width: 6px;
}

.content-area[b-jud4y9x0fs]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.content-area[b-jud4y9x0fs]::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 3px;
}

    .content-area[b-jud4y9x0fs]::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.8);
    }

/* ========== 移动端遮罩层 ========== */
.sidebar-overlay[b-jud4y9x0fs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    animation: fadeIn-b-jud4y9x0fs 0.2s ease;
}

/* 桌面端隐藏遮罩层 */
@media (min-width: 769px) {
    .sidebar-overlay[b-jud4y9x0fs] {
        display: none;
    }
}

@keyframes fadeIn-b-jud4y9x0fs {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========== 全局加载遮罩层 ========== */
.global-modal-mask[b-jud4y9x0fs] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn-b-jud4y9x0fs 0.2s ease-out;
}

.loading-content[b-jud4y9x0fs] {
    text-align: center;
    background: rgba(30, 30, 47, 0.95);
    padding: 24px 36px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 160px;
}

.loading-spinner[b-jud4y9x0fs] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-jud4y9x0fs 0.8s linear infinite;
    margin: 0 auto 12px;
}

.loading-text[b-jud4y9x0fs] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

@keyframes spin-b-jud4y9x0fs {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ruke0j6aog],
.components-reconnect-repeated-attempt-visible[b-ruke0j6aog],
.components-reconnect-failed-visible[b-ruke0j6aog],
.components-pause-visible[b-ruke0j6aog],
.components-resume-failed-visible[b-ruke0j6aog],
.components-rejoining-animation[b-ruke0j6aog] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-retrying[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-failed[b-ruke0j6aog],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ruke0j6aog] {
    display: block;
}


#components-reconnect-modal[b-ruke0j6aog] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ruke0j6aog 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ruke0j6aog 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ruke0j6aog 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ruke0j6aog]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ruke0j6aog 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ruke0j6aog {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ruke0j6aog {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ruke0j6aog {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ruke0j6aog] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ruke0j6aog] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ruke0j6aog] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ruke0j6aog] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ruke0j6aog] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ruke0j6aog] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ruke0j6aog] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ruke0j6aog 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ruke0j6aog] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ruke0j6aog {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Accounts/Edit.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-il6j2ib7wi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-il6j2ib7wi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-il6j2ib7wi] {
    grid-column: span 2;
}

.form-label[b-il6j2ib7wi] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-il6j2ib7wi]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-il6j2ib7wi] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-il6j2ib7wi] {
    padding: 24px;
    animation: fadeInUp-b-il6j2ib7wi 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-il6j2ib7wi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-il6j2ib7wi] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-il6j2ib7wi] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-il6j2ib7wi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-il6j2ib7wi] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-il6j2ib7wi] {
        grid-column: span 2;
    }

.form-label[b-il6j2ib7wi] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-il6j2ib7wi]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-il6j2ib7wi],
.form-field .rz-password[b-il6j2ib7wi],
.form-field .rz-dropdown[b-il6j2ib7wi],
.form-field .rz-numeric[b-il6j2ib7wi],
.form-field .rz-textarea[b-il6j2ib7wi] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-il6j2ib7wi],
    .form-field .rz-password:focus[b-il6j2ib7wi],
    .form-field .rz-dropdown:focus[b-il6j2ib7wi],
    .form-field .rz-numeric:focus[b-il6j2ib7wi],
    .form-field .rz-textarea:focus[b-il6j2ib7wi] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-il6j2ib7wi] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-il6j2ib7wi] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-il6j2ib7wi] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-il6j2ib7wi] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-il6j2ib7wi] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-il6j2ib7wi] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-il6j2ib7wi] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-il6j2ib7wi] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-il6j2ib7wi] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-il6j2ib7wi] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-il6j2ib7wi] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-il6j2ib7wi] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-il6j2ib7wi] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-il6j2ib7wi] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-il6j2ib7wi {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-il6j2ib7wi] {
        padding: 16px;
    }

    .form-grid[b-il6j2ib7wi] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-il6j2ib7wi] {
        grid-column: span 1;
    }

    .form-actions[b-il6j2ib7wi] {
        justify-content: center;
    }

    .page-header[b-il6j2ib7wi] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-il6j2ib7wi] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-il6j2ib7wi] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-il6j2ib7wi], select[b-il6j2ib7wi], textarea[b-il6j2ib7wi] {
    width: 100%;
}
/* /Components/Pages/Accounts/EditMine.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-dbkj63xjzl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-dbkj63xjzl] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-dbkj63xjzl] {
    grid-column: span 2;
}

.form-label[b-dbkj63xjzl] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-dbkj63xjzl]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-dbkj63xjzl] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-dbkj63xjzl] {
    padding: 24px;
    animation: fadeInUp-b-dbkj63xjzl 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-dbkj63xjzl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-dbkj63xjzl] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-dbkj63xjzl] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-dbkj63xjzl] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-dbkj63xjzl] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-dbkj63xjzl] {
        grid-column: span 2;
    }

.form-label[b-dbkj63xjzl] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-dbkj63xjzl]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-dbkj63xjzl],
.form-field .rz-password[b-dbkj63xjzl],
.form-field .rz-dropdown[b-dbkj63xjzl],
.form-field .rz-numeric[b-dbkj63xjzl],
.form-field .rz-textarea[b-dbkj63xjzl] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-dbkj63xjzl],
    .form-field .rz-password:focus[b-dbkj63xjzl],
    .form-field .rz-dropdown:focus[b-dbkj63xjzl],
    .form-field .rz-numeric:focus[b-dbkj63xjzl],
    .form-field .rz-textarea:focus[b-dbkj63xjzl] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-dbkj63xjzl] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-dbkj63xjzl] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-dbkj63xjzl] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-dbkj63xjzl] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-dbkj63xjzl] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-dbkj63xjzl] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-dbkj63xjzl] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-dbkj63xjzl] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-dbkj63xjzl] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-dbkj63xjzl] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-dbkj63xjzl] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-dbkj63xjzl] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-dbkj63xjzl] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-dbkj63xjzl] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-dbkj63xjzl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-dbkj63xjzl] {
        padding: 16px;
    }

    .form-grid[b-dbkj63xjzl] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-dbkj63xjzl] {
        grid-column: span 1;
    }

    .form-actions[b-dbkj63xjzl] {
        justify-content: center;
    }

    .page-header[b-dbkj63xjzl] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-dbkj63xjzl] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-dbkj63xjzl] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-dbkj63xjzl], select[b-dbkj63xjzl], textarea[b-dbkj63xjzl] {
    width: 100%;
}
/* /Components/Pages/Accounts/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-t30vgh27jv], body[b-t30vgh27jv] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-t30vgh27jv] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-t30vgh27jv 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-t30vgh27jv] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-t30vgh27jv] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
/* ========== 搜索栏 ========== */
.search-bar[b-t30vgh27jv] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1rem;
}

/* 搜索行布局 - 增加行间距 */
.search-row[b-t30vgh27jv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem; /* 增加行间距 */
}

    /* 最后一行不需要底部间距 */
    .search-row:last-child[b-t30vgh27jv] {
        margin-bottom: 0;
    }

    /* 第一行与第二行之间增加额外间距（可选） */
    .search-row:first-child[b-t30vgh27jv] {
        margin-bottom: 1.5rem;
    }

/* 搜索字段通用样式 */
.search-field[b-t30vgh27jv] {
    flex: 1;
    min-width: 120px;
}

/* 开票公司字段（虚拟账户时显示） */
.company-field[b-t30vgh27jv] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-t30vgh27jv] {
    flex: 0 0 auto;
    min-width: auto;
}

/* 日期字段 */
.date-field[b-t30vgh27jv] {
    flex: 1;
    min-width: 140px;
}

/* 关键字字段 */
.keyword-field[b-t30vgh27jv] {
    flex: 2;
    min-width: 200px;
}

/* 下拉框字段 */
.dropdown-field[b-t30vgh27jv] {
    flex: 1;
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-t30vgh27jv] {
    flex: 1;
    min-width: 130px;
    color: white;
}

/* 操作按钮组 */
.search-field.action-buttons[b-t30vgh27jv] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 搜索栏 Placeholder 白色 ========== */
/* RadzenTextBox 的 Placeholder */
[b-t30vgh27jv] .search-field .rz-textbox::placeholder,
[b-t30vgh27jv] .date-field .rz-textbox::placeholder,
[b-t30vgh27jv] .amount-field .rz-textbox::placeholder,
[b-t30vgh27jv] .keyword-field .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 兼容不同浏览器 */
[b-t30vgh27jv] .search-field .rz-textbox::-webkit-input-placeholder,
[b-t30vgh27jv] .date-field .rz-textbox::-webkit-input-placeholder,
[b-t30vgh27jv] .amount-field .rz-textbox::placeholder,
[b-t30vgh27jv] .keyword-field .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] .search-field .rz-textbox::-moz-placeholder,
[b-t30vgh27jv] .date-field .rz-textbox::-moz-placeholder,
[b-t30vgh27jv] .amount-field .rz-textbox::placeholder,
[b-t30vgh27jv] .keyword-field .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] .search-field .rz-textbox:-ms-input-placeholder,
[b-t30vgh27jv] .date-field .rz-textbox:-ms-input-placeholder,
[b-t30vgh27jv] .amount-field .rz-textbox::placeholder,
[b-t30vgh27jv] .keyword-field .rz-textbox:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDatePicker 的 Placeholder */
[b-t30vgh27jv] .rz-datepicker .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] .rz-datepicker .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] .rz-datepicker .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenNumeric 的 Placeholder */
[b-t30vgh27jv] .rz-numeric .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] .rz-numeric .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] .rz-numeric .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDropDown 的 Placeholder 样式 */
[b-t30vgh27jv] .rz-dropdown .rz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-t30vgh27jv] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-t30vgh27jv] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}
/* 统一所有输入框的 Placeholder 为白色 */
[b-t30vgh27jv] input::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] input::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] input::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-t30vgh27jv] input:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 表头样式 - 使用 background-image 避免滚动时背景丢失 */
[b-t30vgh27jv] .rz-datatable thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

    /* 表头 hover 效果 */
    [b-t30vgh27jv] .rz-datatable thead th:hover {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    }

/* 排序图标颜色 */
[b-t30vgh27jv] .rz-datatable thead .rz-sort-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 排序激活状态 */
[b-t30vgh27jv] .rz-datatable thead .rz-sort-active .rz-sort-icon {
    color: #6366f1 !important;
}

/* 表格行样式 */
[b-t30vgh27jv] .rz-datatable tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

    [b-t30vgh27jv] .rz-datatable tbody tr:hover {
        background: rgba(99, 102, 241, 0.1) !important;
    }

[b-t30vgh27jv] .rz-datatable tbody td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 8px !important;
}

/* 固定列样式 */
[b-t30vgh27jv] .rz-datatable .rz-datatable-frozen-columns thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
}

/* ========== 分页样式 ========== */
[b-t30vgh27jv] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-t30vgh27jv] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-t30vgh27jv] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-t30vgh27jv] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 输入框样式 ========== */
[b-t30vgh27jv] .search-field .rz-textbox,
[b-t30vgh27jv] .date-field .rz-textbox,
[b-t30vgh27jv] .keyword-field .rz-textbox {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

    [b-t30vgh27jv] .search-field .rz-textbox:focus,
    [b-t30vgh27jv] .date-field .rz-textbox:focus,
    [b-t30vgh27jv] .keyword-field .rz-textbox:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 下拉框样式 */
[b-t30vgh27jv] .rz-dropdown {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-t30vgh27jv] .rz-dropdown .rz-dropdown-trigger {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 下拉框输入框的 Placeholder */
    [b-t30vgh27jv] .rz-dropdown .rz-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 下拉框选中值的颜色 */
    [b-t30vgh27jv] .rz-dropdown .rz-dropdown-value {
        color: white !important;
    }

/* 数值输入框样式 */
[b-t30vgh27jv] .rz-numeric {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-t30vgh27jv] .rz-numeric .rz-textbox {
        color: white !important;
    }

    /* 数值输入框按钮样式 */
    [b-t30vgh27jv] .rz-numeric .rz-numeric-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 日期选择器样式 */
/* ========== RadzenDatePicker 完整样式修复 ========== */

/* 1. DatePicker 容器背景 - 与其他输入框一致 */
[b-t30vgh27jv] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex;
    align-items: center;
}

    [b-t30vgh27jv] .rz-datepicker .rz-inputtext {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
        color: white;
    }

    /* 4. 触发器按钮样式 */
    [b-t30vgh27jv] .rz-datepicker .rz-datepicker-trigger {
        background: transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 0 !important;
        margin: 0 0 !important;
    }

        [b-t30vgh27jv] .rz-datepicker .rz-datepicker-trigger:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: white !important;
        }

    /* 5. 聚焦状态 - 与其他输入框一致 */
    [b-t30vgh27jv] .rz-datepicker.rz-state-focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 6. 日历弹窗样式 */
[b-t30vgh27jv] .rz-datepicker-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* ========== 按钮样式 ========== */
.action-buttons[b-t30vgh27jv] {
    display: flex;
    gap: 8px;
}

/* ========== 用户单元格 ========== */
.user-cell[b-t30vgh27jv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========== 状态标签 ========== */
.status-badge[b-t30vgh27jv] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-t30vgh27jv] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-t30vgh27jv] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ========== 动画 ========== */
@keyframes fadeInUp-b-t30vgh27jv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式布局 ========== */
@media (max-width: 1200px) {
    .company-field[b-t30vgh27jv],
    .keyword-field[b-t30vgh27jv] {
        flex: 1;
        min-width: 150px;
    }

    .dropdown-field[b-t30vgh27jv] {
        min-width: 140px;
    }

    .amount-field[b-t30vgh27jv] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-container[b-t30vgh27jv] {
        padding: 16px;
    }

    .search-field[b-t30vgh27jv],
    .company-field[b-t30vgh27jv],
    .date-field[b-t30vgh27jv],
    .keyword-field[b-t30vgh27jv],
    .dropdown-field[b-t30vgh27jv],
    .amount-field[b-t30vgh27jv] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-t30vgh27jv] {
            flex: 1 1 100%;
            justify-content: flex-end;
        }

    .company-btn[b-t30vgh27jv] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-t30vgh27jv] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ========== Tooltip 层级确保显示 ========== */
[b-t30vgh27jv] .rz-tooltip {
    z-index: 9999 !important;
}

/* ========== 空数据样式 ========== */
[b-t30vgh27jv] .rz-datatable .rz-datatable-empty-row td {
    text-align: center;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 自定义 Tooltip 触发元素的样式 */
[b-t30vgh27jv] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-t30vgh27jv] .rz-text:hover {
        color: #818cf8 !important;
    }
/* /Components/Pages/Accounts/New.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-yp9150ggmv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-yp9150ggmv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-yp9150ggmv] {
    grid-column: span 2;
}

.form-label[b-yp9150ggmv] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-yp9150ggmv]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-yp9150ggmv] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-yp9150ggmv] {
    padding: 24px;
    animation: fadeInUp-b-yp9150ggmv 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-yp9150ggmv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-yp9150ggmv] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-yp9150ggmv] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-yp9150ggmv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-yp9150ggmv] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-yp9150ggmv] {
        grid-column: span 2;
    }

.form-label[b-yp9150ggmv] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-yp9150ggmv]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-yp9150ggmv],
.form-field .rz-password[b-yp9150ggmv],
.form-field .rz-dropdown[b-yp9150ggmv],
.form-field .rz-numeric[b-yp9150ggmv],
.form-field .rz-textarea[b-yp9150ggmv] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-yp9150ggmv],
    .form-field .rz-password:focus[b-yp9150ggmv],
    .form-field .rz-dropdown:focus[b-yp9150ggmv],
    .form-field .rz-numeric:focus[b-yp9150ggmv],
    .form-field .rz-textarea:focus[b-yp9150ggmv] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-yp9150ggmv] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-yp9150ggmv] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-yp9150ggmv] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-yp9150ggmv] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-yp9150ggmv] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-yp9150ggmv] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-yp9150ggmv] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-yp9150ggmv] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-yp9150ggmv] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-yp9150ggmv] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-yp9150ggmv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-yp9150ggmv] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-yp9150ggmv] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-yp9150ggmv] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-yp9150ggmv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-yp9150ggmv] {
        padding: 16px;
    }

    .form-grid[b-yp9150ggmv] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-yp9150ggmv] {
        grid-column: span 1;
    }

    .form-actions[b-yp9150ggmv] {
        justify-content: center;
    }

    .page-header[b-yp9150ggmv] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-yp9150ggmv] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-yp9150ggmv] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-yp9150ggmv], select[b-yp9150ggmv], textarea[b-yp9150ggmv] {
    width: 100%;
}
/* /Components/Pages/Customers/WechatRegisters.razor.rz.scp.css */
/* Register.razor.css */

/* ===== 整体容器 ===== */
.register-container[b-qtuqh5m0ex] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 30px;
    background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
    position: relative;
}

/* ===== 背景装饰 ===== */
.register-bg[b-qtuqh5m0ex] {
    position: fixed;
    top: -50%;
    right: -30%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

    .register-bg[b-qtuqh5m0ex]::after {
        content: '';
        position: fixed;
        bottom: -30%;
        left: -20%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

/* ===== 注册卡片 ===== */
.register-card[b-qtuqh5m0ex] {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px 24px 28px;
    box-shadow: 0 20px 60px rgba(16, 185, 129, 0.12), 0 8px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease;
}

/* ===== 头部 ===== */
.register-header[b-qtuqh5m0ex] {
    text-align: center;
    margin-bottom: 28px;
}

.logo-wrapper[b-qtuqh5m0ex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

    .logo-wrapper .logo-icon[b-qtuqh5m0ex] {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #10b981, #059669);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

.logo-text[b-qtuqh5m0ex] {
    font-size: 22px;
    font-weight: 700;
    color: #065f46;
    letter-spacing: 1px;
}

.register-header h3[b-qtuqh5m0ex] {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px 0;
}

.register-header .subtitle[b-qtuqh5m0ex] {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
}

/* ===== 表单网格 ===== */
.form-grid[b-qtuqh5m0ex] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
    margin-bottom: 24px;
}

/* 在移动端全部变为单列 */
@media (max-width: 480px) {
    .form-grid[b-qtuqh5m0ex] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ===== 表单字段 ===== */
.form-field[b-qtuqh5m0ex] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .form-field.full-width[b-qtuqh5m0ex] {
        grid-column: 1 / -1;
    }

.form-label[b-qtuqh5m0ex] {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 2px;
}

    .form-label.required[b-qtuqh5m0ex]::after {
        content: '*';
        color: #ef4444;
        margin-left: 2px;
        font-size: 14px;
    }

/* ===== Radzen 组件样式覆盖 ===== */
.form-field :deep(.rz-textbox)[b-qtuqh5m0ex],
.form-field :deep(.rz-dropdown)[b-qtuqh5m0ex],
.form-field :deep(.rz-datepicker)[b-qtuqh5m0ex] {
    width: 100% !important;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    padding: 10px 14px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: #f8fafc;
    min-height: 44px;
}

.form-field :deep(.rz-textbox:focus)[b-qtuqh5m0ex],
.form-field :deep(.rz-dropdown:focus-within)[b-qtuqh5m0ex],
.form-field :deep(.rz-datepicker:focus-within)[b-qtuqh5m0ex] {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: #ffffff;
}

.form-field :deep(.rz-textarea)[b-qtuqh5m0ex] {
    width: 100% !important;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    padding: 10px 14px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: #f8fafc;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.form-field :deep(.rz-textarea:focus)[b-qtuqh5m0ex] {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    background: #ffffff;
}

/* 下拉框弹出菜单在移动端的优化 */
.form-field :deep(.rz-dropdown-panel)[b-qtuqh5m0ex] {
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    max-height: 200px;
}

.form-field :deep(.rz-dropdown-item)[b-qtuqh5m0ex] {
    padding: 10px 16px;
    font-size: 15px;
}

/* 日期选择器优化 */
.form-field :deep(.rz-datepicker .rz-inputtext)[b-qtuqh5m0ex] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 15px;
    width: 100%;
}

/* 验证消息在移动端的显示 */
.form-field :deep(.rz-validator-message)[b-qtuqh5m0ex] {
    font-size: 12px;
    color: #ef4444;
    padding: 2px 0;
}

/* ===== 按钮区域 ===== */
.form-actions[b-qtuqh5m0ex] {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

    .form-actions :deep(.rz-button)[b-qtuqh5m0ex] {
        border-radius: 12px;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 600;
        height: 48px;
        border: none;
        transition: all 0.2s ease;
    }

    .form-actions :deep(.rz-button-primary)[b-qtuqh5m0ex] {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        flex: 1;
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
    }

    .form-actions :deep(.rz-button-primary:hover)[b-qtuqh5m0ex] {
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4);
    }

    .form-actions :deep(.rz-button-primary:active)[b-qtuqh5m0ex] {
        transform: scale(0.98);
    }

    .form-actions :deep(.rz-button-secondary)[b-qtuqh5m0ex] {
        background: #f1f5f9;
        color: #475569;
        flex: 0 0 auto;
        min-width: 80px;
    }

    .form-actions :deep(.rz-button-secondary:hover)[b-qtuqh5m0ex] {
        background: #e2e8f0;
    }

    /* ===== 加载状态 ===== */
    .form-actions :deep(.rz-button.rz-state-loading)[b-qtuqh5m0ex] {
        pointer-events: none;
    }

/* ===== 移动端额外优化 ===== */
@media (max-width: 480px) {
    .register-card[b-qtuqh5m0ex] {
        padding: 24px 16px 20px;
        border-radius: 20px;
    }

    .register-header h3[b-qtuqh5m0ex] {
        font-size: 18px;
    }

    .logo-wrapper .logo-icon[b-qtuqh5m0ex] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .logo-text[b-qtuqh5m0ex] {
        font-size: 18px;
    }

    .form-field :deep(.rz-textbox)[b-qtuqh5m0ex],
    .form-field :deep(.rz-dropdown)[b-qtuqh5m0ex],
    .form-field :deep(.rz-datepicker)[b-qtuqh5m0ex] {
        padding: 8px 12px;
        font-size: 14px;
        min-height: 40px;
        border-radius: 8px;
    }

    .form-actions :deep(.rz-button)[b-qtuqh5m0ex] {
        height: 44px;
        font-size: 15px;
        padding: 10px 16px;
        border-radius: 10px;
    }
}

/* ===== 安全区域适配（刘海屏） ===== */
@supports (padding: max(0px)) {
    .register-container[b-qtuqh5m0ex] {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(30px, env(safe-area-inset-bottom));
    }
}
/* /Components/Pages/Environments/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-ajdzpwqiqn], body[b-ajdzpwqiqn] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-ajdzpwqiqn] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-ajdzpwqiqn 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-ajdzpwqiqn] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-ajdzpwqiqn] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
/* ========== 搜索栏 ========== */
.search-bar[b-ajdzpwqiqn] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1rem;
}

/* 搜索行布局 - 增加行间距 */
.search-row[b-ajdzpwqiqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem; /* 增加行间距 */
}

    /* 最后一行不需要底部间距 */
    .search-row:last-child[b-ajdzpwqiqn] {
        margin-bottom: 0;
    }

    /* 第一行与第二行之间增加额外间距（可选） */
    .search-row:first-child[b-ajdzpwqiqn] {
        margin-bottom: 1.5rem;
    }

/* 搜索字段通用样式 */
.search-field[b-ajdzpwqiqn] {
    flex: 1;
    min-width: 120px;
}

/* 开票公司字段（虚拟账户时显示） */
.company-field[b-ajdzpwqiqn] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-ajdzpwqiqn] {
    flex: 0 0 auto;
    min-width: auto;
}

/* 日期字段 */
.date-field[b-ajdzpwqiqn] {
    flex: 1;
    min-width: 140px;
}

/* 关键字字段 */
.keyword-field[b-ajdzpwqiqn] {
    flex: 2;
    min-width: 200px;
}

/* 下拉框字段 */
.dropdown-field[b-ajdzpwqiqn] {
    flex: 1;
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-ajdzpwqiqn] {
    flex: 1;
    min-width: 130px;
    color: white;
}

/* 操作按钮组 */
.search-field.action-buttons[b-ajdzpwqiqn] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 搜索栏 Placeholder 白色 ========== */
/* RadzenTextBox 的 Placeholder */
[b-ajdzpwqiqn] .search-field .rz-textbox::placeholder,
[b-ajdzpwqiqn] .date-field .rz-textbox::placeholder,
[b-ajdzpwqiqn] .amount-field .rz-textbox::placeholder,
[b-ajdzpwqiqn] .keyword-field .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 兼容不同浏览器 */
[b-ajdzpwqiqn] .search-field .rz-textbox::-webkit-input-placeholder,
[b-ajdzpwqiqn] .date-field .rz-textbox::-webkit-input-placeholder,
[b-ajdzpwqiqn] .amount-field .rz-textbox::placeholder,
[b-ajdzpwqiqn] .keyword-field .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] .search-field .rz-textbox::-moz-placeholder,
[b-ajdzpwqiqn] .date-field .rz-textbox::-moz-placeholder,
[b-ajdzpwqiqn] .amount-field .rz-textbox::placeholder,
[b-ajdzpwqiqn] .keyword-field .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] .search-field .rz-textbox:-ms-input-placeholder,
[b-ajdzpwqiqn] .date-field .rz-textbox:-ms-input-placeholder,
[b-ajdzpwqiqn] .amount-field .rz-textbox::placeholder,
[b-ajdzpwqiqn] .keyword-field .rz-textbox:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDatePicker 的 Placeholder */
[b-ajdzpwqiqn] .rz-datepicker .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] .rz-datepicker .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] .rz-datepicker .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenNumeric 的 Placeholder */
[b-ajdzpwqiqn] .rz-numeric .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] .rz-numeric .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] .rz-numeric .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDropDown 的 Placeholder 样式 */
[b-ajdzpwqiqn] .rz-dropdown .rz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-ajdzpwqiqn] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-ajdzpwqiqn] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}
/* 统一所有输入框的 Placeholder 为白色 */
[b-ajdzpwqiqn] input::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] input::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] input::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ajdzpwqiqn] input:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 表头样式 - 使用 background-image 避免滚动时背景丢失 */
[b-ajdzpwqiqn] .rz-datatable thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

    /* 表头 hover 效果 */
    [b-ajdzpwqiqn] .rz-datatable thead th:hover {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    }

/* 排序图标颜色 */
[b-ajdzpwqiqn] .rz-datatable thead .rz-sort-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 排序激活状态 */
[b-ajdzpwqiqn] .rz-datatable thead .rz-sort-active .rz-sort-icon {
    color: #6366f1 !important;
}

/* 表格行样式 */
[b-ajdzpwqiqn] .rz-datatable tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

    [b-ajdzpwqiqn] .rz-datatable tbody tr:hover {
        background: rgba(99, 102, 241, 0.1) !important;
    }

[b-ajdzpwqiqn] .rz-datatable tbody td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 8px !important;
}

/* 固定列样式 */
[b-ajdzpwqiqn] .rz-datatable .rz-datatable-frozen-columns thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
}

/* ========== 分页样式 ========== */
[b-ajdzpwqiqn] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-ajdzpwqiqn] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-ajdzpwqiqn] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-ajdzpwqiqn] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 输入框样式 ========== */
[b-ajdzpwqiqn] .search-field .rz-textbox,
[b-ajdzpwqiqn] .date-field .rz-textbox,
[b-ajdzpwqiqn] .keyword-field .rz-textbox {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

    [b-ajdzpwqiqn] .search-field .rz-textbox:focus,
    [b-ajdzpwqiqn] .date-field .rz-textbox:focus,
    [b-ajdzpwqiqn] .keyword-field .rz-textbox:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 下拉框样式 */
[b-ajdzpwqiqn] .rz-dropdown {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-ajdzpwqiqn] .rz-dropdown .rz-dropdown-trigger {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 下拉框输入框的 Placeholder */
    [b-ajdzpwqiqn] .rz-dropdown .rz-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 下拉框选中值的颜色 */
    [b-ajdzpwqiqn] .rz-dropdown .rz-dropdown-value {
        color: white !important;
    }

/* 数值输入框样式 */
[b-ajdzpwqiqn] .rz-numeric {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-ajdzpwqiqn] .rz-numeric .rz-textbox {
        color: white !important;
    }

    /* 数值输入框按钮样式 */
    [b-ajdzpwqiqn] .rz-numeric .rz-numeric-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 日期选择器样式 */
/* ========== RadzenDatePicker 完整样式修复 ========== */

/* 1. DatePicker 容器背景 - 与其他输入框一致 */
[b-ajdzpwqiqn] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex;
    align-items: center;
}

    [b-ajdzpwqiqn] .rz-datepicker .rz-inputtext {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
        color: white;
    }

    /* 4. 触发器按钮样式 */
    [b-ajdzpwqiqn] .rz-datepicker .rz-datepicker-trigger {
        background: transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 0 !important;
        margin: 0 0 !important;
    }

        [b-ajdzpwqiqn] .rz-datepicker .rz-datepicker-trigger:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: white !important;
        }

    /* 5. 聚焦状态 - 与其他输入框一致 */
    [b-ajdzpwqiqn] .rz-datepicker.rz-state-focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 6. 日历弹窗样式 */
[b-ajdzpwqiqn] .rz-datepicker-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* ========== 按钮样式 ========== */
.action-buttons[b-ajdzpwqiqn] {
    display: flex;
    gap: 8px;
}

/* ========== 用户单元格 ========== */
.user-cell[b-ajdzpwqiqn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========== 状态标签 ========== */
.status-badge[b-ajdzpwqiqn] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-ajdzpwqiqn] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-ajdzpwqiqn] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ========== 动画 ========== */
@keyframes fadeInUp-b-ajdzpwqiqn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式布局 ========== */
@media (max-width: 1200px) {
    .company-field[b-ajdzpwqiqn],
    .keyword-field[b-ajdzpwqiqn] {
        flex: 1;
        min-width: 150px;
    }

    .dropdown-field[b-ajdzpwqiqn] {
        min-width: 140px;
    }

    .amount-field[b-ajdzpwqiqn] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-container[b-ajdzpwqiqn] {
        padding: 16px;
    }

    .search-field[b-ajdzpwqiqn],
    .company-field[b-ajdzpwqiqn],
    .date-field[b-ajdzpwqiqn],
    .keyword-field[b-ajdzpwqiqn],
    .dropdown-field[b-ajdzpwqiqn],
    .amount-field[b-ajdzpwqiqn] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-ajdzpwqiqn] {
            flex: 1 1 100%;
            justify-content: flex-end;
        }

    .company-btn[b-ajdzpwqiqn] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-ajdzpwqiqn] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ========== Tooltip 层级确保显示 ========== */
[b-ajdzpwqiqn] .rz-tooltip {
    z-index: 9999 !important;
}

/* ========== 空数据样式 ========== */
[b-ajdzpwqiqn] .rz-datatable .rz-datatable-empty-row td {
    text-align: center;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 自定义 Tooltip 触发元素的样式 */
[b-ajdzpwqiqn] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-ajdzpwqiqn] .rz-text:hover {
        color: #818cf8 !important;
    }
/* /Components/Pages/Gateways/Methods/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-pfw3xir25j], body[b-pfw3xir25j] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-pfw3xir25j] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-pfw3xir25j 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-pfw3xir25j] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-pfw3xir25j] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
/* ========== 搜索栏 ========== */
.search-bar[b-pfw3xir25j] {
    flex-shrink: 0;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1rem;
}

/* 搜索行布局 - 增加行间距 */
.search-row[b-pfw3xir25j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem; /* 增加行间距 */
}

    /* 最后一行不需要底部间距 */
    .search-row:last-child[b-pfw3xir25j] {
        margin-bottom: 0;
    }

    /* 第一行与第二行之间增加额外间距（可选） */
    .search-row:first-child[b-pfw3xir25j] {
        margin-bottom: 1.5rem;
    }

/* 搜索字段通用样式 */
.search-field[b-pfw3xir25j] {
    flex: 1;
    min-width: 120px;
}

/* 开票公司字段（虚拟账户时显示） */
.company-field[b-pfw3xir25j] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-pfw3xir25j] {
    flex: 0 0 auto;
    min-width: auto;
}

/* 日期字段 */
.date-field[b-pfw3xir25j] {
    flex: 1;
    min-width: 140px;
}

/* 关键字字段 */
.keyword-field[b-pfw3xir25j] {
    flex: 2;
    min-width: 200px;
}

/* 下拉框字段 */
.dropdown-field[b-pfw3xir25j] {
    flex: 1;
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-pfw3xir25j] {
    flex: 1;
    min-width: 130px;
    color: white;
}

/* 操作按钮组 */
.search-field.action-buttons[b-pfw3xir25j] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 搜索栏 Placeholder 白色 ========== */
/* RadzenTextBox 的 Placeholder */
[b-pfw3xir25j] .search-field .rz-textbox::placeholder,
[b-pfw3xir25j] .date-field .rz-textbox::placeholder,
[b-pfw3xir25j] .amount-field .rz-textbox::placeholder,
[b-pfw3xir25j] .keyword-field .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 兼容不同浏览器 */
[b-pfw3xir25j] .search-field .rz-textbox::-webkit-input-placeholder,
[b-pfw3xir25j] .date-field .rz-textbox::-webkit-input-placeholder,
[b-pfw3xir25j] .amount-field .rz-textbox::placeholder,
[b-pfw3xir25j] .keyword-field .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] .search-field .rz-textbox::-moz-placeholder,
[b-pfw3xir25j] .date-field .rz-textbox::-moz-placeholder,
[b-pfw3xir25j] .amount-field .rz-textbox::placeholder,
[b-pfw3xir25j] .keyword-field .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] .search-field .rz-textbox:-ms-input-placeholder,
[b-pfw3xir25j] .date-field .rz-textbox:-ms-input-placeholder,
[b-pfw3xir25j] .amount-field .rz-textbox::placeholder,
[b-pfw3xir25j] .keyword-field .rz-textbox:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDatePicker 的 Placeholder */
[b-pfw3xir25j] .rz-datepicker .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] .rz-datepicker .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] .rz-datepicker .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenNumeric 的 Placeholder */
[b-pfw3xir25j] .rz-numeric .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] .rz-numeric .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] .rz-numeric .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDropDown 的 Placeholder 样式 */
[b-pfw3xir25j] .rz-dropdown .rz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-pfw3xir25j] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-pfw3xir25j] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}
/* 统一所有输入框的 Placeholder 为白色 */
[b-pfw3xir25j] input::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] input::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] input::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-pfw3xir25j] input:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 表头样式 - 使用 background-image 避免滚动时背景丢失 */
[b-pfw3xir25j] .rz-datatable thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

    /* 表头 hover 效果 */
    [b-pfw3xir25j] .rz-datatable thead th:hover {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    }

/* 排序图标颜色 */
[b-pfw3xir25j] .rz-datatable thead .rz-sort-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 排序激活状态 */
[b-pfw3xir25j] .rz-datatable thead .rz-sort-active .rz-sort-icon {
    color: #6366f1 !important;
}

/* 表格行样式 */
[b-pfw3xir25j] .rz-datatable tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

    [b-pfw3xir25j] .rz-datatable tbody tr:hover {
        background: rgba(99, 102, 241, 0.1) !important;
    }

[b-pfw3xir25j] .rz-datatable tbody td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 8px !important;
}

/* 固定列样式 */
[b-pfw3xir25j] .rz-datatable .rz-datatable-frozen-columns thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
}

/* ========== 分页样式 ========== */
[b-pfw3xir25j] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-pfw3xir25j] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-pfw3xir25j] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-pfw3xir25j] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 输入框样式 ========== */
[b-pfw3xir25j] .search-field .rz-textbox,
[b-pfw3xir25j] .date-field .rz-textbox,
[b-pfw3xir25j] .keyword-field .rz-textbox {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

    [b-pfw3xir25j] .search-field .rz-textbox:focus,
    [b-pfw3xir25j] .date-field .rz-textbox:focus,
    [b-pfw3xir25j] .keyword-field .rz-textbox:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 下拉框样式 */
[b-pfw3xir25j] .rz-dropdown {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-pfw3xir25j] .rz-dropdown .rz-dropdown-trigger {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 下拉框输入框的 Placeholder */
    [b-pfw3xir25j] .rz-dropdown .rz-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 下拉框选中值的颜色 */
    [b-pfw3xir25j] .rz-dropdown .rz-dropdown-value {
        color: white !important;
    }

/* 数值输入框样式 */
[b-pfw3xir25j] .rz-numeric {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-pfw3xir25j] .rz-numeric .rz-textbox {
        color: white !important;
    }

    /* 数值输入框按钮样式 */
    [b-pfw3xir25j] .rz-numeric .rz-numeric-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 日期选择器样式 */
/* ========== RadzenDatePicker 完整样式修复 ========== */

/* 1. DatePicker 容器背景 - 与其他输入框一致 */
[b-pfw3xir25j] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex;
    align-items: center;
}

    [b-pfw3xir25j] .rz-datepicker .rz-inputtext {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
        color: white;
    }

    /* 4. 触发器按钮样式 */
    [b-pfw3xir25j] .rz-datepicker .rz-datepicker-trigger {
        background: transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 0 !important;
        margin: 0 0 !important;
    }

        [b-pfw3xir25j] .rz-datepicker .rz-datepicker-trigger:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: white !important;
        }

    /* 5. 聚焦状态 - 与其他输入框一致 */
    [b-pfw3xir25j] .rz-datepicker.rz-state-focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 6. 日历弹窗样式 */
[b-pfw3xir25j] .rz-datepicker-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* ========== 按钮样式 ========== */
.action-buttons[b-pfw3xir25j] {
    display: flex;
    gap: 8px;
}

/* ========== 用户单元格 ========== */
.user-cell[b-pfw3xir25j] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========== 状态标签 ========== */
.status-badge[b-pfw3xir25j] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-pfw3xir25j] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-pfw3xir25j] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ========== 动画 ========== */
@keyframes fadeInUp-b-pfw3xir25j {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式布局 ========== */
@media (max-width: 1200px) {
    .company-field[b-pfw3xir25j],
    .keyword-field[b-pfw3xir25j] {
        flex: 1;
        min-width: 150px;
    }

    .dropdown-field[b-pfw3xir25j] {
        min-width: 140px;
    }

    .amount-field[b-pfw3xir25j] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-container[b-pfw3xir25j] {
        padding: 16px;
    }

    .search-field[b-pfw3xir25j],
    .company-field[b-pfw3xir25j],
    .date-field[b-pfw3xir25j],
    .keyword-field[b-pfw3xir25j],
    .dropdown-field[b-pfw3xir25j],
    .amount-field[b-pfw3xir25j] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-pfw3xir25j] {
            flex: 1 1 100%;
            justify-content: flex-end;
        }

    .company-btn[b-pfw3xir25j] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-pfw3xir25j] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ========== Tooltip 层级确保显示 ========== */
[b-pfw3xir25j] .rz-tooltip {
    z-index: 9999 !important;
}

/* ========== 空数据样式 ========== */
[b-pfw3xir25j] .rz-datatable .rz-datatable-empty-row td {
    text-align: center;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 自定义 Tooltip 触发元素的样式 */
[b-pfw3xir25j] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-pfw3xir25j] .rz-text:hover {
        color: #818cf8 !important;
    }

/* ========== 类型标签 ========== */
.type-badge[b-pfw3xir25j] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.type-system[b-pfw3xir25j] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.type-invoice[b-pfw3xir25j] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.type-payment[b-pfw3xir25j] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

/* ========== 状态标签 ========== */
.status-badge[b-pfw3xir25j] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-online[b-pfw3xir25j] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.status-deprecated[b-pfw3xir25j] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.status-offline[b-pfw3xir25j] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* ========== 操作按钮 ========== */
.action-buttons[b-pfw3xir25j] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.dashboard-container[b-rp405ex2xj] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 桌面端表格默认显示 */
.desktop-table[b-rp405ex2xj] {
    display: block;
}

.mobile-cards[b-rp405ex2xj] {
    display: none;
}

/* 移动端卡片样式 */
@media (max-width: 768px) {
    .desktop-table[b-rp405ex2xj] {
        display: none;
    }

    .mobile-cards[b-rp405ex2xj] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .invoice-card[b-rp405ex2xj], .payment-card[b-rp405ex2xj] {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.2s ease;
    }

        .invoice-card:hover[b-rp405ex2xj], .payment-card:hover[b-rp405ex2xj] {
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-2px);
        }

    .card-header-row[b-rp405ex2xj] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .invoice-number[b-rp405ex2xj], .payment-name[b-rp405ex2xj] {
        font-size: 14px;
        font-weight: 600;
        color: white;
    }

    .card-body[b-rp405ex2xj] {
        margin-bottom: 12px;
    }

    .info-row[b-rp405ex2xj] {
        display: flex;
        margin-bottom: 6px;
        font-size: 13px;
    }

        .info-row .label[b-rp405ex2xj] {
            width: 60px;
            color: rgba(255, 255, 255, 0.5);
        }

        .info-row .value[b-rp405ex2xj] {
            flex: 1;
            color: rgba(255, 255, 255, 0.8);
            word-break: break-all;
        }

    .card-footer-row[b-rp405ex2xj] {
        display: flex;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .empty-data[b-rp405ex2xj] {
        text-align: center;
        padding: 40px;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
    }

    /* 移动端欢迎卡片调整 */
    .welcome-card[b-rp405ex2xj] {
        padding: 20px !important;
        flex-direction: column !important;
        text-align: center;
    }

    .welcome-content h1[b-rp405ex2xj] {
        font-size: 22px !important;
    }

    .stats-brief[b-rp405ex2xj] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .stat-item[b-rp405ex2xj] {
        min-width: 80px;
    }

    .stat-number[b-rp405ex2xj] {
        font-size: 18px !important;
    }

    .welcome-icon[b-rp405ex2xj] {
        margin-top: 16px;
    }

    /* 移动端统计卡片调整 */
    .stats-row[b-rp405ex2xj] {
        flex-direction: column;
        padding: 16px !important;
    }

    .stats-main[b-rp405ex2xj] {
        flex-direction: column;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0 !important;
        padding-bottom: 16px !important;
        margin-bottom: 16px;
    }

    .stat-divider-vertical[b-rp405ex2xj] {
        display: none;
    }

    .stat-item-large[b-rp405ex2xj] {
        width: 100%;
        text-align: center;
    }

        .stat-item-large .stat-value[b-rp405ex2xj] {
            font-size: 28px !important;
        }

    .stats-trends[b-rp405ex2xj] {
        width: 100%;
        justify-content: space-around;
    }

    .trend-item[b-rp405ex2xj] {
        text-align: center;
        min-width: auto;
    }

    .trend-header[b-rp405ex2xj] {
        justify-content: center;
    }

    .stats-footer[b-rp405ex2xj] {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .footer-divider[b-rp405ex2xj] {
        display: none;
    }

    .footer-item[b-rp405ex2xj] {
        flex-direction: row !important;
        gap: 4px;
    }

    .card-header[b-rp405ex2xj] {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-row[b-rp405ex2xj] {
        flex-direction: column;
    }

    .stats-main[b-rp405ex2xj] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .stats-trends[b-rp405ex2xj] {
        justify-content: flex-start;
    }
}

/* 公共样式 */
.stats-brief[b-rp405ex2xj] {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.stat-number[b-rp405ex2xj] {
    color: white;
    font-size: 24px;
    font-weight: 600;
}

.stat-label[b-rp405ex2xj] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.stat-divider[b-rp405ex2xj] {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
}

.welcome-card[b-rp405ex2xj] {
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
}

.welcome-content h1[b-rp405ex2xj] {
    color: white;
    font-size: 28px;
    margin-bottom: 8px;
}

.welcome-content p[b-rp405ex2xj] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
}

/* 主统计卡片 */
.main-stat-card[b-rp405ex2xj] {
    padding: 0;
    overflow: hidden;
}

    .main-stat-card .card-header[b-rp405ex2xj] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
    }

.header-left[b-rp405ex2xj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .header-left h3[b-rp405ex2xj] {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: white;
    }

.period-badge[b-rp405ex2xj] {
    background: rgba(99, 102, 241, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    color: #a78bfa;
}

/* 统计行 */
.stats-row[b-rp405ex2xj] {
    display: flex;
    padding: 20px;
    gap: 30px;
}

.stats-main[b-rp405ex2xj] {
    flex: 1;
    display: flex;
    gap: 30px;
    align-items: center;
    padding-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item-large[b-rp405ex2xj] {
    flex: 1;
}

    .stat-item-large .stat-label[b-rp405ex2xj] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 8px;
    }

    .stat-item-large .stat-value[b-rp405ex2xj] {
        font-size: 32px;
        font-weight: 700;
        color: white;
        margin-bottom: 8px;
    }

.stat-divider-vertical[b-rp405ex2xj] {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
}

/* 趋势区域 */
.stats-trends[b-rp405ex2xj] {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.trend-item[b-rp405ex2xj] {
    min-width: 130px;
}

.trend-header[b-rp405ex2xj] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.trend-value[b-rp405ex2xj] {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
}

    .trend-value .trend-number[b-rp405ex2xj] {
        font-size: 22px;
        font-weight: 700;
    }

    .trend-value .trend-unit[b-rp405ex2xj] {
        font-size: 12px;
        margin-left: 4px;
        font-weight: normal;
    }

.trend-up-value[b-rp405ex2xj] {
    color: #10b981;
}

.trend-down-value[b-rp405ex2xj] {
    color: #ef4444;
}

/* 底部汇总 */
.stats-footer[b-rp405ex2xj] {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-item[b-rp405ex2xj] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

    .footer-item strong[b-rp405ex2xj] {
        color: white;
        font-size: 16px;
    }

.footer-divider[b-rp405ex2xj] {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 16px;
}

/* 趋势指示器 */
.trend-indicator[b-rp405ex2xj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 20px;
}

.trend-up[b-rp405ex2xj] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.trend-down[b-rp405ex2xj] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 最近记录卡片 */
.recent-invoices[b-rp405ex2xj] {
    padding: 20px;
    border-radius: 16px;
}

.card-header[b-rp405ex2xj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .card-header h3[b-rp405ex2xj] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        color: white;
    }

/* 状态标签 */
.status-badge[b-rp405ex2xj] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-rp405ex2xj] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-warning[b-rp405ex2xj] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-danger[b-rp405ex2xj] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-info[b-rp405ex2xj] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* 滚动条样式 */
.recent-invoices[b-rp405ex2xj]  .rz-datatable {
    overflow-x: auto;
}
/* /Components/Pages/Invioices/FastRed.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-3mhtqmxd74] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-3mhtqmxd74] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-3mhtqmxd74] {
    grid-column: span 2;
}

.form-label[b-3mhtqmxd74] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-3mhtqmxd74]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-3mhtqmxd74] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-3mhtqmxd74] {
    padding: 24px;
    animation: fadeInUp-b-3mhtqmxd74 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-3mhtqmxd74] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-3mhtqmxd74] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-3mhtqmxd74] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-3mhtqmxd74] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-3mhtqmxd74] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-3mhtqmxd74] {
        grid-column: span 2;
    }

.form-label[b-3mhtqmxd74] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-3mhtqmxd74]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-3mhtqmxd74],
.form-field .rz-password[b-3mhtqmxd74],
.form-field .rz-dropdown[b-3mhtqmxd74],
.form-field .rz-numeric[b-3mhtqmxd74],
.form-field .rz-textarea[b-3mhtqmxd74] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-3mhtqmxd74],
    .form-field .rz-password:focus[b-3mhtqmxd74],
    .form-field .rz-dropdown:focus[b-3mhtqmxd74],
    .form-field .rz-numeric:focus[b-3mhtqmxd74],
    .form-field .rz-textarea:focus[b-3mhtqmxd74] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-3mhtqmxd74] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-3mhtqmxd74] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-3mhtqmxd74] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-3mhtqmxd74] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-3mhtqmxd74] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-3mhtqmxd74] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-3mhtqmxd74] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-3mhtqmxd74] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-3mhtqmxd74] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-3mhtqmxd74] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-3mhtqmxd74] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-3mhtqmxd74] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-3mhtqmxd74] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-3mhtqmxd74] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-3mhtqmxd74 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-3mhtqmxd74] {
        padding: 16px;
    }

    .form-grid[b-3mhtqmxd74] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-3mhtqmxd74] {
        grid-column: span 1;
    }

    .form-actions[b-3mhtqmxd74] {
        justify-content: center;
    }

    .page-header[b-3mhtqmxd74] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-3mhtqmxd74] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-3mhtqmxd74] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-3mhtqmxd74], select[b-3mhtqmxd74], textarea[b-3mhtqmxd74] {
    width: 100%;
}
/* /Components/Pages/Invioices/InvoiceDetailItem.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-pevvacz2cc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-pevvacz2cc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-pevvacz2cc] {
    grid-column: span 2;
}

.form-label[b-pevvacz2cc] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-pevvacz2cc]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-pevvacz2cc] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-pevvacz2cc] {
    padding: 24px;
    animation: fadeInUp-b-pevvacz2cc 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-pevvacz2cc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-pevvacz2cc] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-pevvacz2cc] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-pevvacz2cc] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-pevvacz2cc] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-pevvacz2cc] {
        grid-column: span 2;
    }

.form-label[b-pevvacz2cc] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-pevvacz2cc]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-pevvacz2cc],
.form-field .rz-password[b-pevvacz2cc],
.form-field .rz-dropdown[b-pevvacz2cc],
.form-field .rz-numeric[b-pevvacz2cc],
.form-field .rz-textarea[b-pevvacz2cc] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-pevvacz2cc],
    .form-field .rz-password:focus[b-pevvacz2cc],
    .form-field .rz-dropdown:focus[b-pevvacz2cc],
    .form-field .rz-numeric:focus[b-pevvacz2cc],
    .form-field .rz-textarea:focus[b-pevvacz2cc] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-pevvacz2cc] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-pevvacz2cc] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-pevvacz2cc] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-pevvacz2cc] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-pevvacz2cc] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-pevvacz2cc] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-pevvacz2cc] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-pevvacz2cc] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-pevvacz2cc] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-pevvacz2cc] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-pevvacz2cc] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-pevvacz2cc] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-pevvacz2cc] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-pevvacz2cc] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-pevvacz2cc {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-pevvacz2cc] {
        padding: 16px;
    }

    .form-grid[b-pevvacz2cc] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-pevvacz2cc] {
        grid-column: span 1;
    }

    .form-actions[b-pevvacz2cc] {
        justify-content: center;
    }

    .page-header[b-pevvacz2cc] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-pevvacz2cc] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-pevvacz2cc] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-pevvacz2cc], select[b-pevvacz2cc], textarea[b-pevvacz2cc] {
    width: 100%;
}
/* /Components/Pages/Invioices/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-kxfsvhsuhd], body[b-kxfsvhsuhd] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-kxfsvhsuhd] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-kxfsvhsuhd 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-kxfsvhsuhd] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-kxfsvhsuhd] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-kxfsvhsuhd] {
    display: flex;
    gap: 8px;
}

/* ========== 搜索栏 ========== */
.search-bar[b-kxfsvhsuhd] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ====== 搜索折叠切换头部 ====== */
.search-toggle[b-kxfsvhsuhd] {
    display: none;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

    .search-toggle:hover[b-kxfsvhsuhd] {
        background: rgba(255, 255, 255, 0.06);
    }

.toggle-left[b-kxfsvhsuhd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-icon[b-kxfsvhsuhd] {
    font-size: 16px;
}

.toggle-title[b-kxfsvhsuhd] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.filter-badge[b-kxfsvhsuhd] {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 30px;
    line-height: 20px;
}

.toggle-arrow[b-kxfsvhsuhd] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

    .toggle-arrow.open[b-kxfsvhsuhd] {
        transform: rotate(180deg);
    }

/* ====== 搜索内容体 ====== */
.search-body[b-kxfsvhsuhd] {
    padding: 0 1rem 1rem 1rem;
    transition: all 0.3s ease;
}

.search-row[b-kxfsvhsuhd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

    .search-row:first-child[b-kxfsvhsuhd] {
        margin-bottom: 1.25rem;
    }

/* 搜索字段通用样式 */
.search-field[b-kxfsvhsuhd] {
    flex: 1;
    min-width: 120px;
}

.company-field[b-kxfsvhsuhd] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-kxfsvhsuhd] {
    flex: 0 0 auto;
    min-width: auto;
}

.date-field[b-kxfsvhsuhd] {
    flex: 1;
    min-width: 140px;
}

.keyword-field[b-kxfsvhsuhd] {
    flex: 2;
    min-width: 200px;
}

.dropdown-field[b-kxfsvhsuhd] {
    flex: 1;
    min-width: 120px;
}

.amount-field[b-kxfsvhsuhd] {
    flex: 1;
    min-width: 130px;
    color: white;
}

.action-buttons[b-kxfsvhsuhd] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 输入框通用样式 ========== */
.search-textbox[b-kxfsvhsuhd] {
    width: 100%;
}

    .search-textbox .rz-textbox[b-kxfsvhsuhd] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
    }

        .search-textbox .rz-textbox:focus[b-kxfsvhsuhd] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

/* ========== 日期选择器样式 ========== */
.date-picker[b-kxfsvhsuhd] {
    width: 100%;
}

    .date-picker .rz-datepicker[b-kxfsvhsuhd] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
    }

        .date-picker .rz-datepicker .rz-inputtext[b-kxfsvhsuhd] {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 8px !important;
            width: 100%;
            display: flex;
            align-items: center;
            color: white;
        }

        .date-picker .rz-datepicker .rz-datepicker-trigger[b-kxfsvhsuhd] {
            background: transparent !important;
            border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            .date-picker .rz-datepicker .rz-datepicker-trigger:hover[b-kxfsvhsuhd] {
                background: rgba(255, 255, 255, 0.05) !important;
            }

        .date-picker .rz-datepicker.rz-state-focus[b-kxfsvhsuhd] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

        .date-picker .rz-datepicker .rz-textbox[b-kxfsvhsuhd]::placeholder {
            color: var(--rz-input-placeholder-color);
            opacity: 0.7 !important;
        }

    .date-picker .rz-datepicker-popup[b-kxfsvhsuhd] {
        background: rgba(30, 30, 47, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
    }

/* ========== 下拉框样式 ========== */
.search-dropdown[b-kxfsvhsuhd] {
    width: 100%;
}

    .search-dropdown .rz-dropdown[b-kxfsvhsuhd] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .search-dropdown .rz-dropdown .rz-dropdown-trigger[b-kxfsvhsuhd] {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .search-dropdown .rz-dropdown .rz-placeholder[b-kxfsvhsuhd] {
            color: var(--rz-input-placeholder-color);
        }

        .search-dropdown .rz-dropdown .rz-dropdown-value[b-kxfsvhsuhd] {
            color: white !important;
        }

/* ========== 数值输入框样式 ========== */
.amount-input[b-kxfsvhsuhd] {
    width: 100%;
}

    .amount-input .rz-numeric[b-kxfsvhsuhd] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .amount-input .rz-numeric .rz-textbox[b-kxfsvhsuhd] {
            color: white !important;
        }

        .amount-input .rz-numeric .rz-numeric-button[b-kxfsvhsuhd] {
            background: rgba(255, 255, 255, 0.05) !important;
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .amount-input .rz-numeric .rz-textbox[b-kxfsvhsuhd]::placeholder {
            color: var(--rz-input-placeholder-color);
            opacity: 0.7 !important;
        }

/* ========== 统一 Placeholder ========== */
[b-kxfsvhsuhd] input::placeholder {
    color: var(--rz-input-placeholder-color) !important;
    /*opacity: 0.7 !important;*/
}

[b-kxfsvhsuhd] input::-webkit-input-placeholder {
    color: var(--rz-input-placeholder-color) !important;
    /*opacity: 0.7 !important;*/
}

[b-kxfsvhsuhd] input::-moz-placeholder {
    color: var(--rz-input-placeholder-color) !important;
    /*opacity: 0.7 !important;*/
}

[b-kxfsvhsuhd] input:-ms-input-placeholder {
    color: var(--rz-input-placeholder-color) !important;
    /*opacity: 0.7 !important;*/
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-kxfsvhsuhd] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-kxfsvhsuhd] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}

    [b-kxfsvhsuhd] .rz-datatable thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-weight: 500 !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        [b-kxfsvhsuhd] .rz-datatable thead th:hover {
            background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
        }

    [b-kxfsvhsuhd] .rz-datatable thead .rz-sort-icon {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    [b-kxfsvhsuhd] .rz-datatable thead .rz-sort-active .rz-sort-icon {
        color: #6366f1 !important;
    }

    [b-kxfsvhsuhd] .rz-datatable tbody tr {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.3s ease !important;
    }

        [b-kxfsvhsuhd] .rz-datatable tbody tr:hover {
            background: rgba(99, 102, 241, 0.1) !important;
        }

    [b-kxfsvhsuhd] .rz-datatable tbody td {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 12px 8px !important;
    }

    [b-kxfsvhsuhd] .rz-datatable .rz-datatable-frozen-columns thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    }

    [b-kxfsvhsuhd] .rz-datatable .rz-datatable-empty-row td {
        text-align: center;
        padding: 40px !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

/* ========== 分页样式 ========== */
[b-kxfsvhsuhd] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-kxfsvhsuhd] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-kxfsvhsuhd] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-kxfsvhsuhd] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 状态标签 ========== */
.status-badge[b-kxfsvhsuhd] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-kxfsvhsuhd] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-warning[b-kxfsvhsuhd] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-danger[b-kxfsvhsuhd] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-info[b-kxfsvhsuhd] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* ========== 操作按钮 ========== */
.action-buttons[b-kxfsvhsuhd] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== Tooltip ========== */
[b-kxfsvhsuhd] .rz-tooltip {
    z-index: 9999 !important;
}

[b-kxfsvhsuhd] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-kxfsvhsuhd] .rz-text:hover {
        color: #818cf8 !important;
    }

/* ========== 移动端卡片列表 ========== */
.card-mobile[b-kxfsvhsuhd] {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0 4px 4px 4px;
}

.mobile-list-header[b-kxfsvhsuhd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
    flex-shrink: 0;
}

    .mobile-list-header .count-label[b-kxfsvhsuhd] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
    }

        .mobile-list-header .count-label strong[b-kxfsvhsuhd] {
            color: rgba(255, 255, 255, 0.9);
        }

    .mobile-list-header .page-info[b-kxfsvhsuhd] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
    }

/* ====== 可滚动的卡片列表 ====== */
.invoice-list-scroll[b-kxfsvhsuhd] {
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

    .invoice-list-scroll[b-kxfsvhsuhd]::-webkit-scrollbar {
        width: 3px;
    }

    .invoice-list-scroll[b-kxfsvhsuhd]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
    }

    .invoice-list-scroll[b-kxfsvhsuhd]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

.invoice-card[b-kxfsvhsuhd] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

    .invoice-card:active[b-kxfsvhsuhd] {
        transform: scale(0.98);
    }

.card-header[b-kxfsvhsuhd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invoice-number[b-kxfsvhsuhd] {
    font-size: 14px;
    font-weight: 600;
    color: white;
    word-break: break-all;
}

.card-body .info-row[b-kxfsvhsuhd] {
    display: flex;
    margin-bottom: 4px;
    font-size: 13px;
}

.card-body .info-label[b-kxfsvhsuhd] {
    width: 70px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.card-body .info-value[b-kxfsvhsuhd] {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    word-break: break-all;
}

.card-actions[b-kxfsvhsuhd] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

.empty-data[b-kxfsvhsuhd] {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 移动端分页控件 ========== */
.mobile-pagination[b-kxfsvhsuhd] {
    display: none;
    flex-shrink: 0;
    padding: 12px 4px 4px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pagination-info[b-kxfsvhsuhd] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.pagination-controls[b-kxfsvhsuhd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .pagination-controls .rz-button[b-kxfsvhsuhd] {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

        .pagination-controls .rz-button:hover:not(:disabled)[b-kxfsvhsuhd] {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .pagination-controls .rz-button:disabled[b-kxfsvhsuhd] {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .pagination-controls .rz-button .rz-button-icon[b-kxfsvhsuhd] {
            font-size: 16px !important;
        }

.page-indicator[b-kxfsvhsuhd] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 50px;
    text-align: center;
}

.pagination-size[b-kxfsvhsuhd] {
    flex: 0 0 auto;
}

.page-size-dropdown[b-kxfsvhsuhd] {
    width: 100px;
}

    .page-size-dropdown .rz-dropdown[b-kxfsvhsuhd] {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        min-height: 32px !important;
    }

        .page-size-dropdown .rz-dropdown .rz-dropdown-value[b-kxfsvhsuhd] {
            color: rgba(255, 255, 255, 0.8) !important;
            font-size: 12px !important;
        }

        .page-size-dropdown .rz-dropdown .rz-dropdown-trigger[b-kxfsvhsuhd] {
            color: rgba(255, 255, 255, 0.4) !important;
        }

/* ========== 移动端下拉弹窗样式 ========== */
[b-kxfsvhsuhd] .rz-dropdown-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

    [b-kxfsvhsuhd] .rz-dropdown-popup .rz-dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 8px 16px !important;
    }

        [b-kxfsvhsuhd] .rz-dropdown-popup .rz-dropdown-item:hover {
            background: rgba(99, 102, 241, 0.2) !important;
        }

    [b-kxfsvhsuhd] .rz-dropdown-popup .rz-state-selected {
        background: rgba(99, 102, 241, 0.3) !important;
        color: white !important;
    }

/* ========== 动画 ========== */
@keyframes fadeInUp-b-kxfsvhsuhd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* ========== 桌面端样式 (≥769px) ========== */
/* ============================================================ */
@media (min-width: 769px) {
    /* 桌面端：搜索栏始终展开，不显示折叠切换头 */
    .search-toggle[b-kxfsvhsuhd] {
        display: none !important;
    }

    .search-body[b-kxfsvhsuhd] {
        display: block !important;
        padding: 0 1rem 1rem 1rem !important;
    }

    .search-bar[b-kxfsvhsuhd] {
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .card-mobile[b-kxfsvhsuhd] {
        display: none !important;
    }

    .table-scroll-container[b-kxfsvhsuhd] {
        display: block !important;
    }
}

/* ============================================================ */
/* ========== 移动端样式 (≤768px) ========== */
/* ============================================================ */
@media (max-width: 768px) {
    .page-container[b-kxfsvhsuhd] {
        padding: 12px;
        height: 100dvh;
        border-radius: 16px;
    }

    .page-header[b-kxfsvhsuhd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

        .page-header h2[b-kxfsvhsuhd] {
            font-size: 18px;
        }

    .header-actions[b-kxfsvhsuhd] {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }

        .header-actions .rz-button[b-kxfsvhsuhd] {
            font-size: 12px !important;
            padding: 4px 10px !important;
        }

    /* ====== 移动端搜索栏折叠样式 ====== */
    .search-bar[b-kxfsvhsuhd] {
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .search-toggle[b-kxfsvhsuhd] {
        display: flex !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .search-bar.collapsed .search-body[b-kxfsvhsuhd] {
        display: none !important;
        max-height: 0 !important;
        padding: 0 1rem !important;
        overflow: hidden;
    }

    .search-bar.expanded .search-body[b-kxfsvhsuhd] {
        display: block !important;
        max-height: 800px !important;
        padding: 0.75rem 1rem 1rem 1rem !important;
    }

    .search-bar.expanded .search-toggle[b-kxfsvhsuhd] {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .search-field[b-kxfsvhsuhd],
    .company-field[b-kxfsvhsuhd],
    .date-field[b-kxfsvhsuhd],
    .keyword-field[b-kxfsvhsuhd],
    .dropdown-field[b-kxfsvhsuhd],
    .amount-field[b-kxfsvhsuhd] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-kxfsvhsuhd] {
            flex: 1 1 100%;
            justify-content: flex-end;
            margin-left: 0;
        }

    .company-btn[b-kxfsvhsuhd] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-kxfsvhsuhd] {
        flex-direction: row;
        gap: 6px;
    }

        .action-buttons .rz-button[b-kxfsvhsuhd] {
            flex: 1;
        }

    .search-row:first-child[b-kxfsvhsuhd] {
        margin-bottom: 0.75rem;
    }

    /* ====== 移动端表格隐藏，卡片显示 ====== */
    .table-scroll-container[b-kxfsvhsuhd] {
        display: none !important;
    }

    .card-mobile[b-kxfsvhsuhd] {
        display: flex !important;
    }

    /* 显示移动端分页 */
    .mobile-pagination[b-kxfsvhsuhd] {
        display: flex !important;
    }
}

/* ============================================================ */
/* ========== 小屏手机 (≤480px) ========== */
/* ============================================================ */
@media (max-width: 480px) {
    .page-container[b-kxfsvhsuhd] {
        padding: 10px;
        border-radius: 12px;
    }

    .page-header h2[b-kxfsvhsuhd] {
        font-size: 16px;
    }

    .search-toggle[b-kxfsvhsuhd] {
        padding: 8px 12px;
    }

    .toggle-title[b-kxfsvhsuhd] {
        font-size: 13px;
    }

    .filter-badge[b-kxfsvhsuhd] {
        font-size: 10px;
        padding: 0 8px;
        line-height: 18px;
    }

    .search-body[b-kxfsvhsuhd] {
        padding: 0 0.75rem 0.75rem 0.75rem !important;
    }

    .search-row[b-kxfsvhsuhd] {
        gap: 0.5rem;
    }

    .invoice-card[b-kxfsvhsuhd] {
        padding: 10px 12px;
    }

    .invoice-number[b-kxfsvhsuhd] {
        font-size: 13px;
    }

    .card-body .info-row[b-kxfsvhsuhd] {
        font-size: 12px;
    }

    .card-body .info-label[b-kxfsvhsuhd] {
        width: 60px;
    }

    .card-header[b-kxfsvhsuhd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mobile-list-header .count-label[b-kxfsvhsuhd] {
        font-size: 12px;
    }

    .mobile-list-header .page-info[b-kxfsvhsuhd] {
        font-size: 12px;
    }

    .empty-data[b-kxfsvhsuhd] {
        padding: 30px 20px;
        font-size: 14px;
    }

    /* 移动端分页小屏适配 */
    .mobile-pagination[b-kxfsvhsuhd] {
        padding: 10px 0 2px 0;
        gap: 6px;
    }

    .pagination-info[b-kxfsvhsuhd] {
        font-size: 11px;
        flex: 1 1 100%;
        text-align: center;
    }

    .pagination-controls[b-kxfsvhsuhd] {
        flex: 1;
        justify-content: center;
    }

    .pagination-size[b-kxfsvhsuhd] {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .page-size-dropdown[b-kxfsvhsuhd] {
        width: 80px;
    }

    .page-indicator[b-kxfsvhsuhd] {
        font-size: 12px;
        min-width: 40px;
    }

    .pagination-controls .rz-button[b-kxfsvhsuhd] {
        min-width: 28px !important;
        height: 28px !important;
    }
}
/* /Components/Pages/Invioices/MyInvoices.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-ex9vrx34sb], body[b-ex9vrx34sb] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-ex9vrx34sb] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-ex9vrx34sb 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-ex9vrx34sb] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-ex9vrx34sb] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* ========== 搜索栏 ========== */
/* ========== 搜索栏行间距优化 ========== */

/* 搜索行布局 - 增加底部间距 */
.search-row[b-ex9vrx34sb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem; /* 增加行间距 */
}

    /* 第一行和第二行之间间距 */
    .search-row:first-child[b-ex9vrx34sb] {
        margin-bottom: 1.25rem;
    }

    /* 第二行和第三行之间间距 */
    .search-row:nth-child(2)[b-ex9vrx34sb] {
        margin-bottom: 1.25rem;
    }

    /* 最后一行不需要底部间距 */
    .search-row:last-child[b-ex9vrx34sb] {
        margin-bottom: 10px;
    }

    /* 可选：如果需要更大的间距 */
    .search-row:first-child[b-ex9vrx34sb] {
        margin-bottom: 1.5rem; /* 第一行与第二行间距更大 */
    }

/* 搜索字段通用样式 */
.search-field[b-ex9vrx34sb] {
    flex: 1;
    min-width: 120px;
}

/* 开票公司字段（虚拟账户时显示） */
.company-field[b-ex9vrx34sb] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-ex9vrx34sb] {
    flex: 0 0 auto;
    min-width: auto;
}

/* 日期字段 */
.date-field[b-ex9vrx34sb] {
    flex: 1;
    min-width: 140px;
}

/* 关键字字段 */
.keyword-field[b-ex9vrx34sb] {
    flex: 2;
    min-width: 200px;
}

/* 下拉框字段 */
.dropdown-field[b-ex9vrx34sb] {
    flex: 1;
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-ex9vrx34sb] {
    flex: 1;
    min-width: 130px;
    color: white;
}

/* 操作按钮组 */
.search-field.action-buttons[b-ex9vrx34sb] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 搜索栏 Placeholder 白色 ========== */
/* RadzenTextBox 的 Placeholder */
[b-ex9vrx34sb] .search-field .rz-textbox::placeholder,
[b-ex9vrx34sb] .date-field .rz-textbox::placeholder,
[b-ex9vrx34sb] .amount-field .rz-textbox::placeholder,
[b-ex9vrx34sb] .keyword-field .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 兼容不同浏览器 */
[b-ex9vrx34sb] .search-field .rz-textbox::-webkit-input-placeholder,
[b-ex9vrx34sb] .date-field .rz-textbox::-webkit-input-placeholder,
[b-ex9vrx34sb] .amount-field .rz-textbox::placeholder,
[b-ex9vrx34sb] .keyword-field .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] .search-field .rz-textbox::-moz-placeholder,
[b-ex9vrx34sb] .date-field .rz-textbox::-moz-placeholder,
[b-ex9vrx34sb] .amount-field .rz-textbox::placeholder,
[b-ex9vrx34sb] .keyword-field .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] .search-field .rz-textbox:-ms-input-placeholder,
[b-ex9vrx34sb] .date-field .rz-textbox:-ms-input-placeholder,
[b-ex9vrx34sb] .amount-field .rz-textbox::placeholder,
[b-ex9vrx34sb] .keyword-field .rz-textbox:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDatePicker 的 Placeholder */
[b-ex9vrx34sb] .rz-datepicker .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] .rz-datepicker .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] .rz-datepicker .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenNumeric 的 Placeholder */
[b-ex9vrx34sb] .rz-numeric .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] .rz-numeric .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] .rz-numeric .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDropDown 的 Placeholder 样式 */
[b-ex9vrx34sb] .rz-dropdown .rz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-ex9vrx34sb] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-ex9vrx34sb] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}
/* 统一所有输入框的 Placeholder 为白色 */
[b-ex9vrx34sb] input::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] input::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] input::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-ex9vrx34sb] input:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 表头样式 - 使用 background-image 避免滚动时背景丢失 */
[b-ex9vrx34sb] .rz-datatable thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

    /* 表头 hover 效果 */
    [b-ex9vrx34sb] .rz-datatable thead th:hover {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    }

/* 排序图标颜色 */
[b-ex9vrx34sb] .rz-datatable thead .rz-sort-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 排序激活状态 */
[b-ex9vrx34sb] .rz-datatable thead .rz-sort-active .rz-sort-icon {
    color: #6366f1 !important;
}

/* 表格行样式 */
[b-ex9vrx34sb] .rz-datatable tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

    [b-ex9vrx34sb] .rz-datatable tbody tr:hover {
        background: rgba(99, 102, 241, 0.1) !important;
    }

[b-ex9vrx34sb] .rz-datatable tbody td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 8px !important;
}

/* 固定列样式 */
[b-ex9vrx34sb] .rz-datatable .rz-datatable-frozen-columns thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
}

/* ========== 分页样式 ========== */
[b-ex9vrx34sb] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-ex9vrx34sb] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-ex9vrx34sb] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-ex9vrx34sb] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 输入框样式 ========== */
[b-ex9vrx34sb] .search-field .rz-textbox,
[b-ex9vrx34sb] .date-field .rz-textbox,
[b-ex9vrx34sb] .keyword-field .rz-textbox {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

    [b-ex9vrx34sb] .search-field .rz-textbox:focus,
    [b-ex9vrx34sb] .date-field .rz-textbox:focus,
    [b-ex9vrx34sb] .keyword-field .rz-textbox:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 下拉框样式 */
[b-ex9vrx34sb] .rz-dropdown {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-ex9vrx34sb] .rz-dropdown .rz-dropdown-trigger {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 下拉框输入框的 Placeholder */
    [b-ex9vrx34sb] .rz-dropdown .rz-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 下拉框选中值的颜色 */
    [b-ex9vrx34sb] .rz-dropdown .rz-dropdown-value {
        color: white !important;
    }
    [b-ex9vrx34sb] .rz-dropdown .rz-dropdown-label {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    [b-ex9vrx34sb] .rz-dropdown .rz-inputtext {
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 数值输入框样式 */
[b-ex9vrx34sb] .rz-numeric {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-ex9vrx34sb] .rz-numeric .rz-textbox {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 数值输入框按钮样式 */
    [b-ex9vrx34sb] .rz-numeric .rz-numeric-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 日期选择器样式 */
[b-ex9vrx34sb] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-ex9vrx34sb] .rz-datepicker .rz-textbox {
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* ========== 按钮样式 ========== */
.action-buttons[b-ex9vrx34sb] {
    display: flex;
    gap: 8px;
}

/* ========== 用户单元格 ========== */
.user-cell[b-ex9vrx34sb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========== 状态标签 ========== */
.status-badge[b-ex9vrx34sb] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-ex9vrx34sb] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-ex9vrx34sb] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ========== 动画 ========== */
@keyframes fadeInUp-b-ex9vrx34sb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式布局 ========== */
@media (max-width: 1200px) {
    .company-field[b-ex9vrx34sb],
    .keyword-field[b-ex9vrx34sb] {
        flex: 1;
        min-width: 150px;
    }

    .dropdown-field[b-ex9vrx34sb] {
        min-width: 140px;
    }

    .amount-field[b-ex9vrx34sb] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-container[b-ex9vrx34sb] {
        padding: 16px;
    }

    .search-field[b-ex9vrx34sb],
    .company-field[b-ex9vrx34sb],
    .date-field[b-ex9vrx34sb],
    .keyword-field[b-ex9vrx34sb],
    .dropdown-field[b-ex9vrx34sb],
    .amount-field[b-ex9vrx34sb] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-ex9vrx34sb] {
            flex: 1 1 100%;
            justify-content: flex-end;
        }

    .company-btn[b-ex9vrx34sb] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-ex9vrx34sb] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ========== Tooltip 层级确保显示 ========== */
[b-ex9vrx34sb] .rz-tooltip {
    z-index: 9999 !important;
}

/* ========== 空数据样式 ========== */
[b-ex9vrx34sb] .rz-datatable .rz-datatable-empty-row td {
    text-align: center;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 自定义 Tooltip 触发元素的样式 */
[b-ex9vrx34sb] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-ex9vrx34sb] .rz-text:hover {
        color: #818cf8 !important;
    }
/* ========== RadzenDatePicker 完整样式修复 ========== */

/* 1. DatePicker 容器背景 - 与其他输入框一致 */
[b-ex9vrx34sb] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex;
    align-items: center;
}

    [b-ex9vrx34sb] .rz-datepicker .rz-inputtext {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
        color: white;
    }

    /* 4. 触发器按钮样式 */
    [b-ex9vrx34sb] .rz-datepicker .rz-datepicker-trigger {
        background: transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 0 !important;
        margin: 0 0 !important;
    }

        [b-ex9vrx34sb] .rz-datepicker .rz-datepicker-trigger:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: white !important;
        }

    /* 5. 聚焦状态 - 与其他输入框一致 */
    [b-ex9vrx34sb] .rz-datepicker.rz-state-focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 6. 日历弹窗样式 */
[b-ex9vrx34sb] .rz-datepicker-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}
/* 页面标题样式 */
.page-title-section[b-ex9vrx34sb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title-section h2[b-ex9vrx34sb] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        background: linear-gradient(135deg, #fff, #a5b4fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-subtitle[b-ex9vrx34sb] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 8px;
}

/* 日期范围选择器 */
.date-range-wrapper[b-ex9vrx34sb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-wrapper .rz-datepicker[b-ex9vrx34sb] {
        flex: 1;
    }

.date-separator[b-ex9vrx34sb] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* 统计卡片 */
.stats-cards[b-ex9vrx34sb] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stat-card[b-ex9vrx34sb] {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .stat-card:hover[b-ex9vrx34sb] {
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px);
    }

.stat-icon[b-ex9vrx34sb] {
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-info[b-ex9vrx34sb] {
    flex: 1;
}

.stat-value[b-ex9vrx34sb] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.stat-label[b-ex9vrx34sb] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* 状态标签样式 */
.status-badge[b-ex9vrx34sb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-dot[b-ex9vrx34sb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-success[b-ex9vrx34sb] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-warning[b-ex9vrx34sb] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-danger[b-ex9vrx34sb] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-info[b-ex9vrx34sb] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}
/* 发票类型标签 */
.type-badge[b-ex9vrx34sb] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-blue[b-ex9vrx34sb] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.type-red[b-ex9vrx34sb] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 特殊标记样式 */
.special-mark[b-ex9vrx34sb] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 4px;
    font-size: 12px;
}

/* 购方单元格样式 */
.buyer-cell[b-ex9vrx34sb] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

/* 搜索栏优化 */
.date-range-field[b-ex9vrx34sb] {
    flex: 2;
    min-width: 280px;
}

.keyword-field[b-ex9vrx34sb] {
    flex: 1;
    min-width: 150px;
}

.dropdown-field[b-ex9vrx34sb] {
    flex: 1;
    min-width: 130px;
}

.action-buttons[b-ex9vrx34sb] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}
/* /Components/Pages/Invioices/New.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-r9914zofsh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-r9914zofsh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-r9914zofsh] {
    grid-column: span 2;
}

.form-label[b-r9914zofsh] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-r9914zofsh]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-r9914zofsh] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-r9914zofsh] {
    padding: 24px;
    animation: fadeInUp-b-r9914zofsh 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-r9914zofsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-r9914zofsh] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-r9914zofsh] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-r9914zofsh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-r9914zofsh] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-r9914zofsh] {
        grid-column: span 2;
    }

.form-label[b-r9914zofsh] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-r9914zofsh]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-r9914zofsh],
.form-field .rz-password[b-r9914zofsh],
.form-field .rz-dropdown[b-r9914zofsh],
.form-field .rz-numeric[b-r9914zofsh],
.form-field .rz-textarea[b-r9914zofsh] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-r9914zofsh],
    .form-field .rz-password:focus[b-r9914zofsh],
    .form-field .rz-dropdown:focus[b-r9914zofsh],
    .form-field .rz-numeric:focus[b-r9914zofsh],
    .form-field .rz-textarea:focus[b-r9914zofsh] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-r9914zofsh] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-r9914zofsh] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-r9914zofsh] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-r9914zofsh] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-r9914zofsh] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-r9914zofsh] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-r9914zofsh] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-r9914zofsh] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-r9914zofsh] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-r9914zofsh] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-r9914zofsh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-r9914zofsh] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-r9914zofsh] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-r9914zofsh] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-r9914zofsh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-r9914zofsh] {
        padding: 16px;
    }

    .form-grid[b-r9914zofsh] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-r9914zofsh] {
        grid-column: span 1;
    }

    .form-actions[b-r9914zofsh] {
        justify-content: center;
    }

    .page-header[b-r9914zofsh] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-r9914zofsh] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-r9914zofsh] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-r9914zofsh], select[b-r9914zofsh], textarea[b-r9914zofsh] {
    width: 100%;
}
/* /Components/Pages/Login.razor.rz.scp.css */

/* 全局样式 */
.login-container[b-i7ejblr0kh] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

    /* 背景动态效果 */
    .login-container[b-i7ejblr0kh]::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: moveBackground 20s linear infinite;
    }

#keyframes moveBackground[b-i7ejblr0kh] {
    0% {
        transform: translate(0, 0);
    }

    100%[b-i7ejblr0kh] {
        transform: translate(50px, 50px);
    }
}

/* 毛玻璃卡片 */
.glass-card[b-i7ejblr0kh] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 32px;
    padding: 48px 40px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.6s ease-out;
    position: relative;
    z-index: 1;
}

#keyframes fadeInUp[b-i7ejblr0kh] {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to[b-i7ejblr0kh] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 品牌区域 */
.brand-section[b-i7ejblr0kh] {
    text-align: center;
    margin-bottom: 40px;
}

.logo-wrapper[b-i7ejblr0kh] {
    margin-bottom: 20px;
    display: inline-block;
    animation: pulse 2s infinite;
}

#keyframes pulse[b-i7ejblr0kh] {
    0%, 100% {
        transform: scale(1);
    }

    50%[b-i7ejblr0kh] {
        transform: scale(1.05);
    }
}

.title[b-i7ejblr0kh] {
    color: white;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.subtitle[b-i7ejblr0kh] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin: 0;
}

/* 表单区域 */
.form-section[b-i7ejblr0kh] {
    margin-bottom: 30px;
}

.options-bar[b-i7ejblr0kh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    color: white;
}

.register-link[b-i7ejblr0kh] {
    text-align: center;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

/* 分割线 */
.divider[b-i7ejblr0kh] {
    text-align: center;
    margin: 30px 0 20px;
    position: relative;
}

    .divider[b-i7ejblr0kh]::before,
    .divider[b-i7ejblr0kh]::after {
        content: '';
        position: absolute;
        top: 50%;
        width: calc(50% - 70px);
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
    }

    .divider[b-i7ejblr0kh]::before {
        left: 0;
    }

    .divider[b-i7ejblr0kh]::after {
        right: 0;
    }

    .divider span[b-i7ejblr0kh] {
        background: transparent;
        padding: 0 15px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
    }

/* 社交按钮组 */
.social-buttons[b-i7ejblr0kh] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* 自定义输入框样式 */
[b-i7ejblr0kh] .rz-textbox,
[b-i7ejblr0kh] .rz-password {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease !important;
}

    [b-i7ejblr0kh] .rz-textbox:focus,
    [b-i7ejblr0kh] .rz-password:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    }

    [b-i7ejblr0kh] .rz-textbox::placeholder,
    [b-i7ejblr0kh] .rz-password::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

/* 自定义按钮样式 */
[b-i7ejblr0kh] .rz-button {
    border-radius: 12px !important;
    padding: 12px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[b-i7ejblr0kh] .rz-button-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none !important;
}

    [b-i7ejblr0kh] .rz-button-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
    }

[b-i7ejblr0kh] .rz-button-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

    [b-i7ejblr0kh] .rz-button-secondary:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px);
    }

/* 复选框样式 */
[b-i7ejblr0kh] .rz-checkbox {
    color: white !important;
}

/* 响应式设计 */
@@media (max-width: 640px) {
    .glass-card[b-i7ejblr0kh] {
        margin: 20px;
        padding: 32px 24px;
    }

    .title[b-i7ejblr0kh] {
        font-size: 28px;
    }

    .social-buttons[b-i7ejblr0kh] {
        flex-direction: column;
    }
}


/* 遮罩层样式 */
.global-modal-mask[b-i7ejblr0kh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

.loading-content[b-i7ejblr0kh] {
    text-align: center;
    background: rgba(30, 30, 47, 0.95);
    padding: 24px 36px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 160px;
}

.loading-spinner[b-i7ejblr0kh] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

.loading-text[b-i7ejblr0kh] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}
/* /Components/Pages/Logs/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-bamvcbw4oh], body[b-bamvcbw4oh] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-bamvcbw4oh] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-bamvcbw4oh 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-bamvcbw4oh] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-bamvcbw4oh] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* ========== 搜索栏 ========== */
/* ========== 搜索栏行间距优化 ========== */

/* 搜索行布局 - 增加底部间距 */
.search-row[b-bamvcbw4oh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem; /* 增加行间距 */
}

    /* 第一行和第二行之间间距 */
    .search-row:first-child[b-bamvcbw4oh] {
        margin-bottom: 1.25rem;
    }

    /* 第二行和第三行之间间距 */
    .search-row:nth-child(2)[b-bamvcbw4oh] {
        margin-bottom: 1.25rem;
    }

    /* 最后一行不需要底部间距 */
    .search-row:last-child[b-bamvcbw4oh] {
        margin-bottom: 10px;
    }

    /* 可选：如果需要更大的间距 */
    .search-row:first-child[b-bamvcbw4oh] {
        margin-bottom: 1.5rem; /* 第一行与第二行间距更大 */
    }

/* 搜索字段通用样式 */
.search-field[b-bamvcbw4oh] {
    flex: 1;
    min-width: 120px;
}

/* 开票公司字段（虚拟账户时显示） */
.company-field[b-bamvcbw4oh] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-bamvcbw4oh] {
    flex: 0 0 auto;
    min-width: auto;
}

/* 日期字段 */
.date-field[b-bamvcbw4oh] {
    flex: 1;
    min-width: 140px;
}

/* 关键字字段 */
.keyword-field[b-bamvcbw4oh] {
    flex: 2;
    min-width: 200px;
}

/* 下拉框字段 */
.dropdown-field[b-bamvcbw4oh] {
    flex: 1;
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-bamvcbw4oh] {
    flex: 1;
    min-width: 130px;
    color: white;
}

/* 操作按钮组 */
.search-field.action-buttons[b-bamvcbw4oh] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 搜索栏 Placeholder 白色 ========== */
/* RadzenTextBox 的 Placeholder */
[b-bamvcbw4oh] .search-field .rz-textbox::placeholder,
[b-bamvcbw4oh] .date-field .rz-textbox::placeholder,
[b-bamvcbw4oh] .amount-field .rz-textbox::placeholder,
[b-bamvcbw4oh] .keyword-field .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 兼容不同浏览器 */
[b-bamvcbw4oh] .search-field .rz-textbox::-webkit-input-placeholder,
[b-bamvcbw4oh] .date-field .rz-textbox::-webkit-input-placeholder,
[b-bamvcbw4oh] .amount-field .rz-textbox::placeholder,
[b-bamvcbw4oh] .keyword-field .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] .search-field .rz-textbox::-moz-placeholder,
[b-bamvcbw4oh] .date-field .rz-textbox::-moz-placeholder,
[b-bamvcbw4oh] .amount-field .rz-textbox::placeholder,
[b-bamvcbw4oh] .keyword-field .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] .search-field .rz-textbox:-ms-input-placeholder,
[b-bamvcbw4oh] .date-field .rz-textbox:-ms-input-placeholder,
[b-bamvcbw4oh] .amount-field .rz-textbox::placeholder,
[b-bamvcbw4oh] .keyword-field .rz-textbox:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDatePicker 的 Placeholder */
[b-bamvcbw4oh] .rz-datepicker .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] .rz-datepicker .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] .rz-datepicker .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenNumeric 的 Placeholder */
[b-bamvcbw4oh] .rz-numeric .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] .rz-numeric .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] .rz-numeric .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDropDown 的 Placeholder 样式 */
[b-bamvcbw4oh] .rz-dropdown .rz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-bamvcbw4oh] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-bamvcbw4oh] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}
/* 统一所有输入框的 Placeholder 为白色 */
[b-bamvcbw4oh] input::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] input::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] input::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-bamvcbw4oh] input:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 表头样式 - 使用 background-image 避免滚动时背景丢失 */
[b-bamvcbw4oh] .rz-datatable thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

    /* 表头 hover 效果 */
    [b-bamvcbw4oh] .rz-datatable thead th:hover {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    }

/* 排序图标颜色 */
[b-bamvcbw4oh] .rz-datatable thead .rz-sort-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 排序激活状态 */
[b-bamvcbw4oh] .rz-datatable thead .rz-sort-active .rz-sort-icon {
    color: #6366f1 !important;
}

/* 表格行样式 */
[b-bamvcbw4oh] .rz-datatable tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

    [b-bamvcbw4oh] .rz-datatable tbody tr:hover {
        background: rgba(99, 102, 241, 0.1) !important;
    }

[b-bamvcbw4oh] .rz-datatable tbody td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 8px !important;
}

/* 固定列样式 */
[b-bamvcbw4oh] .rz-datatable .rz-datatable-frozen-columns thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
}

/* ========== 分页样式 ========== */
[b-bamvcbw4oh] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-bamvcbw4oh] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-bamvcbw4oh] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-bamvcbw4oh] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 输入框样式 ========== */
[b-bamvcbw4oh] .search-field .rz-textbox,
[b-bamvcbw4oh] .date-field .rz-textbox,
[b-bamvcbw4oh] .keyword-field .rz-textbox {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

    [b-bamvcbw4oh] .search-field .rz-textbox:focus,
    [b-bamvcbw4oh] .date-field .rz-textbox:focus,
    [b-bamvcbw4oh] .keyword-field .rz-textbox:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 下拉框样式 */
[b-bamvcbw4oh] .rz-dropdown {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-bamvcbw4oh] .rz-dropdown .rz-dropdown-trigger {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 下拉框输入框的 Placeholder */
    [b-bamvcbw4oh] .rz-dropdown .rz-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 下拉框选中值的颜色 */
    [b-bamvcbw4oh] .rz-dropdown .rz-dropdown-value {
        color: white !important;
    }

/* 数值输入框样式 */
[b-bamvcbw4oh] .rz-numeric {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-bamvcbw4oh] .rz-numeric .rz-textbox {
        color: white !important;
    }

    /* 数值输入框按钮样式 */
    [b-bamvcbw4oh] .rz-numeric .rz-numeric-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 日期选择器样式 */
[b-bamvcbw4oh] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-bamvcbw4oh] .rz-datepicker .rz-textbox {
        color: white !important;
    }

/* ========== 按钮样式 ========== */
.action-buttons[b-bamvcbw4oh] {
    display: flex;
    gap: 8px;
}

/* ========== 用户单元格 ========== */
.user-cell[b-bamvcbw4oh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========== 状态标签 ========== */
.status-badge[b-bamvcbw4oh] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-bamvcbw4oh] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-bamvcbw4oh] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ========== 动画 ========== */
@keyframes fadeInUp-b-bamvcbw4oh {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式布局 ========== */
@media (max-width: 1200px) {
    .company-field[b-bamvcbw4oh],
    .keyword-field[b-bamvcbw4oh] {
        flex: 1;
        min-width: 150px;
    }

    .dropdown-field[b-bamvcbw4oh] {
        min-width: 140px;
    }

    .amount-field[b-bamvcbw4oh] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-container[b-bamvcbw4oh] {
        padding: 16px;
    }

    .search-field[b-bamvcbw4oh],
    .company-field[b-bamvcbw4oh],
    .date-field[b-bamvcbw4oh],
    .keyword-field[b-bamvcbw4oh],
    .dropdown-field[b-bamvcbw4oh],
    .amount-field[b-bamvcbw4oh] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-bamvcbw4oh] {
            flex: 1 1 100%;
            justify-content: flex-end;
        }

    .company-btn[b-bamvcbw4oh] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-bamvcbw4oh] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ========== Tooltip 层级确保显示 ========== */
[b-bamvcbw4oh] .rz-tooltip {
    z-index: 9999 !important;
}

/* ========== 空数据样式 ========== */
[b-bamvcbw4oh] .rz-datatable .rz-datatable-empty-row td {
    text-align: center;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 自定义 Tooltip 触发元素的样式 */
[b-bamvcbw4oh] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-bamvcbw4oh] .rz-text:hover {
        color: #818cf8 !important;
    }
/* ========== RadzenDatePicker 完整样式修复 ========== */

/* 1. DatePicker 容器背景 - 与其他输入框一致 */
[b-bamvcbw4oh] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex;
    align-items: center;
}
    [b-bamvcbw4oh] .rz-datepicker .rz-inputtext {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
        color:white;
    }

    /* 4. 触发器按钮样式 */
    [b-bamvcbw4oh] .rz-datepicker .rz-datepicker-trigger {
        background: transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 0 !important;
        margin: 0 0 !important;
    }

        [b-bamvcbw4oh] .rz-datepicker .rz-datepicker-trigger:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: white !important;
        }

    /* 5. 聚焦状态 - 与其他输入框一致 */
    [b-bamvcbw4oh] .rz-datepicker.rz-state-focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 6. 日历弹窗样式 */
[b-bamvcbw4oh] .rz-datepicker-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}
/* 页面标题样式 */
.page-title-section[b-bamvcbw4oh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title-section h2[b-bamvcbw4oh] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        background: linear-gradient(135deg, #fff, #a5b4fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-subtitle[b-bamvcbw4oh] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 8px;
}

/* 日期范围选择器 */
.date-range-wrapper[b-bamvcbw4oh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-wrapper .rz-datepicker[b-bamvcbw4oh] {
        flex: 1;
    }

.date-separator[b-bamvcbw4oh] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* 统计卡片 */
.stats-cards[b-bamvcbw4oh] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stat-card[b-bamvcbw4oh] {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .stat-card:hover[b-bamvcbw4oh] {
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px);
    }

.stat-icon[b-bamvcbw4oh] {
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-info[b-bamvcbw4oh] {
    flex: 1;
}

.stat-value[b-bamvcbw4oh] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.stat-label[b-bamvcbw4oh] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* 状态标签样式 */
.status-badge[b-bamvcbw4oh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-dot[b-bamvcbw4oh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-success[b-bamvcbw4oh] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-warning[b-bamvcbw4oh] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-danger[b-bamvcbw4oh] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-info[b-bamvcbw4oh] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* 发票类型标签 */
.type-badge[b-bamvcbw4oh] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-blue[b-bamvcbw4oh] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.type-red[b-bamvcbw4oh] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 特殊标记样式 */
.special-mark[b-bamvcbw4oh] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 4px;
    font-size: 12px;
}

/* 购方单元格样式 */
.buyer-cell[b-bamvcbw4oh] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

/* 搜索栏优化 */
.date-range-field[b-bamvcbw4oh] {
    flex: 2;
    min-width: 280px;
}

.keyword-field[b-bamvcbw4oh] {
    flex: 1;
    min-width: 150px;
}

.dropdown-field[b-bamvcbw4oh] {
    flex: 1;
    min-width: 130px;
}

.action-buttons[b-bamvcbw4oh] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}
/* /Components/Pages/Payments/AccountPaymentList.razor.rz.scp.css */
/* ========== 页面容器 ========== */
.invoices-list-page[b-y2vccme3bn] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
}

/* ========== 页面头部 ========== */
.page-header[b-y2vccme3bn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

    .page-header h2[b-y2vccme3bn] {
        font-size: 20px;
        font-weight: 600;
        color: #1a1a2e;
        margin: 0;
    }

.header-actions[b-y2vccme3bn] {
    display: flex;
    gap: 10px;
}

/* ========== 搜索栏 ========== */
.search-bar[b-y2vccme3bn] {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-row[b-y2vccme3bn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

    .search-row:first-child[b-y2vccme3bn] {
        margin-bottom: 12px;
    }

.search-field[b-y2vccme3bn] {
    flex: 1;
    min-width: 140px;
}

/* 公司选择区域 */
.company-wrapper[b-y2vccme3bn] {
    flex: 2;
    min-width: 260px;
}

.company-input-group[b-y2vccme3bn] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .company-input-group .search-textbox[b-y2vccme3bn] {
        flex: 1;
    }

.company-select-btn[b-y2vccme3bn] {
    flex-shrink: 0;
    white-space: nowrap;
    background: #e8f5e9 !important;
    border-color: #c8e6c9 !important;
    color: #2e7d32 !important;
}

/* 日期范围 */
.date-range-group[b-y2vccme3bn] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .date-range-group .date-field[b-y2vccme3bn] {
        flex: 1;
    }

.date-separator[b-y2vccme3bn] {
    color: #999;
    font-size: 14px;
}

/* 下拉框区域 */
.dropdown-field[b-y2vccme3bn] {
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-y2vccme3bn] {
    min-width: 130px;
}

/* 按钮区域 */
.action-buttons[b-y2vccme3bn] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* 输入框样式 */
.search-textbox[b-y2vccme3bn] {
    width: 100%;
}

    .search-textbox .rz-textbox[b-y2vccme3bn] {
        background: white !important;
        border: 1px solid #ddd !important;
        color: #333 !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

        .search-textbox .rz-textbox:focus[b-y2vccme3bn] {
            border-color: #10b981 !important;
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1) !important;
        }

/* 日期选择器样式 */
.date-field .rz-datepicker[b-y2vccme3bn] {
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
}

    .date-field .rz-datepicker .rz-textbox[b-y2vccme3bn] {
        border: none !important;
        color: #333 !important;
    }

/* 下拉框样式 */
.dropdown-field .rz-dropdown[b-y2vccme3bn] {
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
}

    .dropdown-field .rz-dropdown .rz-dropdown-value[b-y2vccme3bn] {
        color: #333 !important;
        font-size: 13px !important;
    }

    .dropdown-field .rz-dropdown .rz-placeholder[b-y2vccme3bn] {
        color: #999 !important;
    }

/* 数值输入框样式 */
.amount-field .rz-numeric[b-y2vccme3bn] {
    background: white !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
}

    .amount-field .rz-numeric .rz-textbox[b-y2vccme3bn] {
        border: none !important;
        color: #333 !important;
    }

/* ========== 桌面端表格 ========== */
.table-desktop[b-y2vccme3bn] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: white;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.invoice-grid[b-y2vccme3bn] {
    height: 100%;
    width: 100%;
}

/* 表格样式覆盖 */
[b-y2vccme3bn] .invoice-grid .rz-datatable {
    border-radius: 12px;
    overflow: hidden;
}

    [b-y2vccme3bn] .invoice-grid .rz-datatable thead th {
        background: #f8f9fa !important;
        color: #1a1a2e !important;
        border-bottom: 1px solid #e9ecef !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        padding: 12px 8px !important;
    }

    [b-y2vccme3bn] .invoice-grid .rz-datatable tbody td {
        color: #555 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        padding: 12px 8px !important;
        font-size: 13px !important;
    }

    [b-y2vccme3bn] .invoice-grid .rz-datatable tbody tr:hover {
        background: #f8f9fa !important;
    }

    [b-y2vccme3bn] .invoice-grid .rz-datatable tbody tr:last-child td {
        border-bottom: none;
    }

/* 状态标签 */
.status-badge[b-y2vccme3bn] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-y2vccme3bn] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.status-warning[b-y2vccme3bn] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.status-danger[b-y2vccme3bn] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.status-info[b-y2vccme3bn] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

/* 红字发票样式 */
.invoice-type-red[b-y2vccme3bn] {
    color: #ef4444;
}

.invoice-type-blue[b-y2vccme3bn] {
    color: #3b82f6;
}

/* 金额列右对齐 */
[b-y2vccme3bn] .invoice-grid .rz-datatable td:nth-child(11),
[b-y2vccme3bn] .invoice-grid .rz-datatable td:nth-child(12),
[b-y2vccme3bn] .invoice-grid .rz-datatable td:nth-child(13),
[b-y2vccme3bn] .invoice-grid .rz-datatable th:nth-child(11),
[b-y2vccme3bn] .invoice-grid .rz-datatable th:nth-child(12),
[b-y2vccme3bn] .invoice-grid .rz-datatable th:nth-child(13) {
    text-align: right !important;
}

/* 操作按钮组 */
.action-buttons-inline[b-y2vccme3bn] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== 移动端卡片 ========== */
.card-mobile[b-y2vccme3bn] {
    display: none;
    flex: 1;
    overflow-y: auto;
    gap: 12px;
}

.card-list[b-y2vccme3bn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-card[b-y2vccme3bn] {
    background: white;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

    .invoice-card:hover[b-y2vccme3bn] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.card-header[b-y2vccme3bn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

.invoice-number[b-y2vccme3bn] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.card-body[b-y2vccme3bn] {
    margin-bottom: 10px;
}

.info-row[b-y2vccme3bn] {
    display: flex;
    margin-bottom: 6px;
    font-size: 12px;
}

.info-label[b-y2vccme3bn] {
    width: 70px;
    color: #999;
}

.info-value[b-y2vccme3bn] {
    flex: 1;
    color: #555;
    word-break: break-all;
}

.card-footer[b-y2vccme3bn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.invoice-amount[b-y2vccme3bn] {
    font-size: 16px;
    font-weight: 600;
    color: #10b981;
}

.card-actions[b-y2vccme3bn] {
    display: flex;
    gap: 6px;
}

.empty-data[b-y2vccme3bn] {
    text-align: center;
    padding: 60px;
    color: #999;
    background: #f8f9fa;
    border-radius: 12px;
}

/* ========== 分页样式 ========== */
[b-y2vccme3bn] .rz-paginator {
    background: white !important;
    border-top: 1px solid #e9ecef !important;
    padding: 12px 16px !important;
    border-radius: 0 0 12px 12px;
}

    [b-y2vccme3bn] .rz-paginator .rz-button {
        background: #f8f9fa !important;
        border: 1px solid #e9ecef !important;
        color: #555 !important;
        border-radius: 6px !important;
    }

        [b-y2vccme3bn] .rz-paginator .rz-button:hover {
            background: #e9ecef !important;
        }

    [b-y2vccme3bn] .rz-paginator .rz-state-active {
        background: #10b981 !important;
        border-color: #10b981 !important;
        color: white !important;
    }

    [b-y2vccme3bn] .rz-paginator .rz-paginator-pages {
        gap: 4px;
    }

/* ========== 响应式布局 ========== */
@media (max-width: 1024px) {
    .search-row[b-y2vccme3bn] {
        gap: 10px;
    }

    .dropdown-field[b-y2vccme3bn] {
        min-width: 110px;
    }
}

@media (max-width: 768px) {
    .page-header[b-y2vccme3bn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-row[b-y2vccme3bn] {
        flex-direction: column;
    }

    .search-field[b-y2vccme3bn] {
        width: 100%;
        min-width: auto;
    }

    .company-wrapper[b-y2vccme3bn] {
        width: 100%;
    }

    .company-input-group[b-y2vccme3bn] {
        width: 100%;
    }

    .date-range-group[b-y2vccme3bn] {
        width: 100%;
    }

    .action-buttons[b-y2vccme3bn] {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .table-desktop[b-y2vccme3bn] {
        display: none;
    }

    .card-mobile[b-y2vccme3bn] {
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 769px) {
    .card-mobile[b-y2vccme3bn] {
        display: none;
    }

    .table-desktop[b-y2vccme3bn] {
        display: block;
    }
}

@media (max-width: 480px) {
    .search-bar[b-y2vccme3bn] {
        padding: 12px;
    }

    .card-header[b-y2vccme3bn] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .info-row[b-y2vccme3bn] {
        flex-direction: column;
    }

    .info-label[b-y2vccme3bn] {
        width: auto;
        margin-bottom: 2px;
    }

    .card-footer[b-y2vccme3bn] {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .card-actions[b-y2vccme3bn] {
        width: 100%;
        justify-content: center;
    }

    .action-buttons[b-y2vccme3bn] {
        justify-content: center;
    }
}

/* ========== 滚动条样式 ========== */
[b-y2vccme3bn]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-y2vccme3bn]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

[b-y2vccme3bn]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

    [b-y2vccme3bn]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

/* ========== 加载遮罩 ========== */
.global-modal-mask[b-y2vccme3bn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.loading-content[b-y2vccme3bn] {
    text-align: center;
    background: white;
    padding: 24px 36px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    min-width: 160px;
}

.loading-spinner[b-y2vccme3bn] {
    width: 40px;
    height: 40px;
    border: 3px solid #e9ecef;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-y2vccme3bn 0.8s linear infinite;
    margin: 0 auto 12px;
}

.loading-text[b-y2vccme3bn] {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

@keyframes spin-b-y2vccme3bn {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Payments/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-ezisy9zphu], body[b-ezisy9zphu] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-ezisy9zphu] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-ezisy9zphu 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-ezisy9zphu] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-ezisy9zphu] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-ezisy9zphu] {
    display: flex;
    gap: 8px;
}

/* ========== 搜索栏 ========== */
.search-bar[b-ezisy9zphu] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ====== 搜索折叠切换头部 ====== */
.search-toggle[b-ezisy9zphu] {
    display: none;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

    .search-toggle:hover[b-ezisy9zphu] {
        background: rgba(255, 255, 255, 0.06);
    }

.toggle-left[b-ezisy9zphu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-icon[b-ezisy9zphu] {
    font-size: 16px;
}

.toggle-title[b-ezisy9zphu] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.filter-badge[b-ezisy9zphu] {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 30px;
    line-height: 20px;
}

.toggle-arrow[b-ezisy9zphu] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

    .toggle-arrow.open[b-ezisy9zphu] {
        transform: rotate(180deg);
    }

/* ====== 搜索内容体 ====== */
.search-body[b-ezisy9zphu] {
    padding: 0 1rem 1rem 1rem;
    transition: all 0.3s ease;
}

.search-row[b-ezisy9zphu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

    .search-row:first-child[b-ezisy9zphu] {
        margin-bottom: 1.25rem;
    }

/* 搜索字段通用样式 */
.search-field[b-ezisy9zphu] {
    flex: 1;
    min-width: 120px;
}

.company-field[b-ezisy9zphu] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-ezisy9zphu] {
    flex: 0 0 auto;
    min-width: auto;
}

.date-field[b-ezisy9zphu] {
    flex: 1;
    min-width: 140px;
}

.keyword-field[b-ezisy9zphu] {
    flex: 2;
    min-width: 200px;
}

.dropdown-field[b-ezisy9zphu] {
    flex: 1;
    min-width: 120px;
}

.amount-field[b-ezisy9zphu] {
    flex: 1;
    min-width: 130px;
    color: white;
}

.action-buttons[b-ezisy9zphu] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 输入框通用样式 ========== */
.search-textbox[b-ezisy9zphu] {
    width: 100%;
}

    .search-textbox .rz-textbox[b-ezisy9zphu] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
    }

        .search-textbox .rz-textbox:focus[b-ezisy9zphu] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

/* ========== 日期选择器样式 ========== */
.date-picker[b-ezisy9zphu] {
    width: 100%;
}

    .date-picker .rz-datepicker[b-ezisy9zphu] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
    }

        .date-picker .rz-datepicker .rz-inputtext[b-ezisy9zphu] {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 8px !important;
            width: 100%;
            display: flex;
            align-items: center;
            color: white;
        }

        .date-picker .rz-datepicker .rz-datepicker-trigger[b-ezisy9zphu] {
            background: transparent !important;
            border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
            color: rgba(255, 255, 255, 0.7) !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            .date-picker .rz-datepicker .rz-datepicker-trigger:hover[b-ezisy9zphu] {
                background: rgba(255, 255, 255, 0.05) !important;
                color: white !important;
            }

        .date-picker .rz-datepicker.rz-state-focus[b-ezisy9zphu] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

        .date-picker .rz-datepicker .rz-textbox[b-ezisy9zphu]::placeholder {
            color: white !important;
            opacity: 0.7 !important;
        }

    .date-picker .rz-datepicker-popup[b-ezisy9zphu] {
        background: rgba(30, 30, 47, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
    }

/* ========== 下拉框样式 ========== */
.search-dropdown[b-ezisy9zphu] {
    width: 100%;
}

    .search-dropdown .rz-dropdown[b-ezisy9zphu] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .search-dropdown .rz-dropdown .rz-dropdown-trigger[b-ezisy9zphu] {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .search-dropdown .rz-dropdown .rz-placeholder[b-ezisy9zphu] {
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .search-dropdown .rz-dropdown .rz-dropdown-value[b-ezisy9zphu] {
            color: white !important;
        }

/* ========== 数值输入框样式 ========== */
.amount-input[b-ezisy9zphu] {
    width: 100%;
}

    .amount-input .rz-numeric[b-ezisy9zphu] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .amount-input .rz-numeric .rz-textbox[b-ezisy9zphu] {
            color: white !important;
        }

        .amount-input .rz-numeric .rz-numeric-button[b-ezisy9zphu] {
            background: rgba(255, 255, 255, 0.05) !important;
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .amount-input .rz-numeric .rz-textbox[b-ezisy9zphu]::placeholder {
            color: white !important;
            opacity: 0.7 !important;
        }

/* ========== 统一 Placeholder ========== */
[b-ezisy9zphu] input::placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-ezisy9zphu] input::-webkit-input-placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-ezisy9zphu] input::-moz-placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-ezisy9zphu] input:-ms-input-placeholder {
    color: var(--rz-input-placeholder-color)
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-ezisy9zphu] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-ezisy9zphu] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}

    [b-ezisy9zphu] .rz-datatable thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-weight: 500 !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        [b-ezisy9zphu] .rz-datatable thead th:hover {
            background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
        }

    [b-ezisy9zphu] .rz-datatable thead .rz-sort-icon {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    [b-ezisy9zphu] .rz-datatable thead .rz-sort-active .rz-sort-icon {
        color: #6366f1 !important;
    }

    [b-ezisy9zphu] .rz-datatable tbody tr {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.3s ease !important;
    }

        [b-ezisy9zphu] .rz-datatable tbody tr:hover {
            background: rgba(99, 102, 241, 0.1) !important;
        }

    [b-ezisy9zphu] .rz-datatable tbody td {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 12px 8px !important;
    }

    [b-ezisy9zphu] .rz-datatable .rz-datatable-frozen-columns thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    }

    [b-ezisy9zphu] .rz-datatable .rz-datatable-empty-row td {
        text-align: center;
        padding: 40px !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

/* ========== 分页样式 ========== */
[b-ezisy9zphu] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-ezisy9zphu] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-ezisy9zphu] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-ezisy9zphu] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 状态标签 ========== */
.status-badge[b-ezisy9zphu] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-ezisy9zphu] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-warning[b-ezisy9zphu] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-danger[b-ezisy9zphu] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-info[b-ezisy9zphu] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.status-canceled[b-ezisy9zphu] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 操作按钮 ========== */
.action-buttons[b-ezisy9zphu] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== Tooltip ========== */
[b-ezisy9zphu] .rz-tooltip {
    z-index: 9999 !important;
}

[b-ezisy9zphu] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-ezisy9zphu] .rz-text:hover {
        color: #818cf8 !important;
    }

/* ========== 移动端卡片列表 ========== */
.card-mobile[b-ezisy9zphu] {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0 4px 4px 4px;
}

.mobile-list-header[b-ezisy9zphu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
    flex-shrink: 0;
}

    .mobile-list-header .count-label[b-ezisy9zphu] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
    }

        .mobile-list-header .count-label strong[b-ezisy9zphu] {
            color: rgba(255, 255, 255, 0.9);
        }

    .mobile-list-header .page-info[b-ezisy9zphu] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
    }

/* ====== 可滚动的卡片列表 ====== */
.invoice-list-scroll[b-ezisy9zphu] {
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

    .invoice-list-scroll[b-ezisy9zphu]::-webkit-scrollbar {
        width: 3px;
    }

    .invoice-list-scroll[b-ezisy9zphu]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
    }

    .invoice-list-scroll[b-ezisy9zphu]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

.invoice-card[b-ezisy9zphu] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
}

    .invoice-card:active[b-ezisy9zphu] {
        transform: scale(0.98);
    }

.card-header[b-ezisy9zphu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invoice-number[b-ezisy9zphu] {
    font-size: 14px;
    font-weight: 600;
    color: white;
    word-break: break-all;
}

.card-body .info-row[b-ezisy9zphu] {
    display: flex;
    margin-bottom: 4px;
    font-size: 13px;
}

.card-body .info-label[b-ezisy9zphu] {
    width: 70px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.card-body .info-value[b-ezisy9zphu] {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    word-break: break-all;
}

.card-body .error-row .info-value[b-ezisy9zphu] {
    color: #ef4444;
}

.card-body .error-row .info-label[b-ezisy9zphu] {
    color: #ef4444;
}

.card-actions[b-ezisy9zphu] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

.empty-data[b-ezisy9zphu] {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 移动端分页控件 ========== */
.mobile-pagination[b-ezisy9zphu] {
    display: none;
    flex-shrink: 0;
    padding: 12px 4px 4px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pagination-info[b-ezisy9zphu] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.pagination-controls[b-ezisy9zphu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .pagination-controls .rz-button[b-ezisy9zphu] {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

        .pagination-controls .rz-button:hover:not(:disabled)[b-ezisy9zphu] {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .pagination-controls .rz-button:disabled[b-ezisy9zphu] {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .pagination-controls .rz-button .rz-button-icon[b-ezisy9zphu] {
            font-size: 16px !important;
        }

.page-indicator[b-ezisy9zphu] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 50px;
    text-align: center;
}

.pagination-size[b-ezisy9zphu] {
    flex: 0 0 auto;
}

.page-size-dropdown[b-ezisy9zphu] {
    width: 100px;
}

    .page-size-dropdown .rz-dropdown[b-ezisy9zphu] {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        min-height: 32px !important;
    }

        .page-size-dropdown .rz-dropdown .rz-dropdown-value[b-ezisy9zphu] {
            color: rgba(255, 255, 255, 0.8) !important;
            font-size: 12px !important;
        }

        .page-size-dropdown .rz-dropdown .rz-dropdown-trigger[b-ezisy9zphu] {
            color: rgba(255, 255, 255, 0.4) !important;
        }

/* ========== 移动端下拉弹窗样式 ========== */
[b-ezisy9zphu] .rz-dropdown-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

    [b-ezisy9zphu] .rz-dropdown-popup .rz-dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 8px 16px !important;
    }

        [b-ezisy9zphu] .rz-dropdown-popup .rz-dropdown-item:hover {
            background: rgba(99, 102, 241, 0.2) !important;
        }

    [b-ezisy9zphu] .rz-dropdown-popup .rz-state-selected {
        background: rgba(99, 102, 241, 0.3) !important;
        color: white !important;
    }

/* ========== 动画 ========== */
@keyframes fadeInUp-b-ezisy9zphu {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* ========== 桌面端样式 (≥769px) ========== */
/* ============================================================ */
@media (min-width: 769px) {
    .search-toggle[b-ezisy9zphu] {
        display: none !important;
    }

    .search-body[b-ezisy9zphu] {
        display: block !important;
        padding: 0 1rem 1rem 1rem !important;
    }

    .search-bar[b-ezisy9zphu] {
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .card-mobile[b-ezisy9zphu] {
        display: none !important;
    }

    .table-scroll-container[b-ezisy9zphu] {
        display: block !important;
    }
}

/* ============================================================ */
/* ========== 移动端样式 (≤768px) ========== */
/* ============================================================ */
@media (max-width: 768px) {
    .page-container[b-ezisy9zphu] {
        padding: 12px;
        height: 100dvh;
        border-radius: 16px;
    }

    .page-header[b-ezisy9zphu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

        .page-header h2[b-ezisy9zphu] {
            font-size: 18px;
        }

    .header-actions[b-ezisy9zphu] {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }

        .header-actions .rz-button[b-ezisy9zphu] {
            font-size: 12px !important;
            padding: 4px 10px !important;
        }

    /* ====== 移动端搜索栏折叠样式 ====== */
    .search-bar[b-ezisy9zphu] {
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .search-toggle[b-ezisy9zphu] {
        display: flex !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .search-bar.collapsed .search-body[b-ezisy9zphu] {
        display: none !important;
        max-height: 0 !important;
        padding: 0 1rem !important;
        overflow: hidden;
    }

    .search-bar.expanded .search-body[b-ezisy9zphu] {
        display: block !important;
        max-height: 800px !important;
        padding: 0.75rem 1rem 1rem 1rem !important;
    }

    .search-bar.expanded .search-toggle[b-ezisy9zphu] {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .search-field[b-ezisy9zphu],
    .company-field[b-ezisy9zphu],
    .date-field[b-ezisy9zphu],
    .keyword-field[b-ezisy9zphu],
    .dropdown-field[b-ezisy9zphu],
    .amount-field[b-ezisy9zphu] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-ezisy9zphu] {
            flex: 1 1 100%;
            justify-content: flex-end;
            margin-left: 0;
        }

    .company-btn[b-ezisy9zphu] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-ezisy9zphu] {
        flex-direction: row;
        gap: 6px;
    }

        .action-buttons .rz-button[b-ezisy9zphu] {
            flex: 1;
        }

    .search-row:first-child[b-ezisy9zphu] {
        margin-bottom: 0.75rem;
    }

    /* ====== 移动端表格隐藏，卡片显示 ====== */
    .table-scroll-container[b-ezisy9zphu] {
        display: none !important;
    }

    .card-mobile[b-ezisy9zphu] {
        display: flex !important;
    }

    .mobile-pagination[b-ezisy9zphu] {
        display: flex !important;
    }
}

/* ============================================================ */
/* ========== 小屏手机 (≤480px) ========== */
/* ============================================================ */
@media (max-width: 480px) {
    .page-container[b-ezisy9zphu] {
        padding: 10px;
        border-radius: 12px;
    }

    .page-header h2[b-ezisy9zphu] {
        font-size: 16px;
    }

    .search-toggle[b-ezisy9zphu] {
        padding: 8px 12px;
    }

    .toggle-title[b-ezisy9zphu] {
        font-size: 13px;
    }

    .filter-badge[b-ezisy9zphu] {
        font-size: 10px;
        padding: 0 8px;
        line-height: 18px;
    }

    .search-body[b-ezisy9zphu] {
        padding: 0 0.75rem 0.75rem 0.75rem !important;
    }

    .search-row[b-ezisy9zphu] {
        gap: 0.5rem;
    }

    .invoice-card[b-ezisy9zphu] {
        padding: 10px 12px;
    }

    .invoice-number[b-ezisy9zphu] {
        font-size: 13px;
    }

    .card-body .info-row[b-ezisy9zphu] {
        font-size: 12px;
    }

    .card-body .info-label[b-ezisy9zphu] {
        width: 60px;
    }

    .card-header[b-ezisy9zphu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mobile-list-header .count-label[b-ezisy9zphu] {
        font-size: 12px;
    }

    .mobile-list-header .page-info[b-ezisy9zphu] {
        font-size: 12px;
    }

    .empty-data[b-ezisy9zphu] {
        padding: 30px 20px;
        font-size: 14px;
    }

    .mobile-pagination[b-ezisy9zphu] {
        padding: 10px 0 2px 0;
        gap: 6px;
    }

    .pagination-info[b-ezisy9zphu] {
        font-size: 11px;
        flex: 1 1 100%;
        text-align: center;
    }

    .pagination-controls[b-ezisy9zphu] {
        flex: 1;
        justify-content: center;
    }

    .pagination-size[b-ezisy9zphu] {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .page-size-dropdown[b-ezisy9zphu] {
        width: 80px;
    }

    .page-indicator[b-ezisy9zphu] {
        font-size: 12px;
        min-width: 40px;
    }

    .pagination-controls .rz-button[b-ezisy9zphu] {
        min-width: 28px !important;
        height: 28px !important;
    }
}
/* /Components/Pages/Payments/MyPayments.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-wd27ix0ihp], body[b-wd27ix0ihp] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-wd27ix0ihp] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-wd27ix0ihp 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-wd27ix0ihp] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-wd27ix0ihp] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

/* ========== 搜索栏 ========== */
/* ========== 搜索栏行间距优化 ========== */

/* 搜索行布局 - 增加底部间距 */
.search-row[b-wd27ix0ihp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem; /* 增加行间距 */
}

    /* 第一行和第二行之间间距 */
    .search-row:first-child[b-wd27ix0ihp] {
        margin-bottom: 1.25rem;
    }

    /* 第二行和第三行之间间距 */
    .search-row:nth-child(2)[b-wd27ix0ihp] {
        margin-bottom: 1.25rem;
    }

    /* 最后一行不需要底部间距 */
    .search-row:last-child[b-wd27ix0ihp] {
        margin-bottom: 10px;
    }

    /* 可选：如果需要更大的间距 */
    .search-row:first-child[b-wd27ix0ihp] {
        margin-bottom: 1.5rem; /* 第一行与第二行间距更大 */
    }

/* 搜索字段通用样式 */
.search-field[b-wd27ix0ihp] {
    flex: 1;
    min-width: 120px;
}

/* 开票公司字段（虚拟账户时显示） */
.company-field[b-wd27ix0ihp] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-wd27ix0ihp] {
    flex: 0 0 auto;
    min-width: auto;
}

/* 日期字段 */
.date-field[b-wd27ix0ihp] {
    flex: 1;
    min-width: 140px;
}

/* 关键字字段 */
.keyword-field[b-wd27ix0ihp] {
    flex: 2;
    min-width: 200px;
}

/* 下拉框字段 */
.dropdown-field[b-wd27ix0ihp] {
    flex: 1;
    min-width: 120px;
}

/* 金额字段 */
.amount-field[b-wd27ix0ihp] {
    flex: 1;
    min-width: 130px;
    color: white;
}

/* 操作按钮组 */
.search-field.action-buttons[b-wd27ix0ihp] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 搜索栏 Placeholder 白色 ========== */
/* RadzenTextBox 的 Placeholder */
[b-wd27ix0ihp] .search-field .rz-textbox::placeholder,
[b-wd27ix0ihp] .date-field .rz-textbox::placeholder,
[b-wd27ix0ihp] .amount-field .rz-textbox::placeholder,
[b-wd27ix0ihp] .keyword-field .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 兼容不同浏览器 */
[b-wd27ix0ihp] .search-field .rz-textbox::-webkit-input-placeholder,
[b-wd27ix0ihp] .date-field .rz-textbox::-webkit-input-placeholder,
[b-wd27ix0ihp] .amount-field .rz-textbox::placeholder,
[b-wd27ix0ihp] .keyword-field .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] .search-field .rz-textbox::-moz-placeholder,
[b-wd27ix0ihp] .date-field .rz-textbox::-moz-placeholder,
[b-wd27ix0ihp] .amount-field .rz-textbox::placeholder,
[b-wd27ix0ihp] .keyword-field .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] .search-field .rz-textbox:-ms-input-placeholder,
[b-wd27ix0ihp] .date-field .rz-textbox:-ms-input-placeholder,
[b-wd27ix0ihp] .amount-field .rz-textbox::placeholder,
[b-wd27ix0ihp] .keyword-field .rz-textbox:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDatePicker 的 Placeholder */
[b-wd27ix0ihp] .rz-datepicker .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] .rz-datepicker .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] .rz-datepicker .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenNumeric 的 Placeholder */
[b-wd27ix0ihp] .rz-numeric .rz-textbox::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] .rz-numeric .rz-textbox::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] .rz-numeric .rz-textbox::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* RadzenDropDown 的 Placeholder 样式 */
[b-wd27ix0ihp] .rz-dropdown .rz-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-wd27ix0ihp] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-wd27ix0ihp] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}
/* 统一所有输入框的 Placeholder 为白色 */
[b-wd27ix0ihp] input::placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] input::-webkit-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] input::-moz-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

[b-wd27ix0ihp] input:-ms-input-placeholder {
    color: white !important;
    opacity: 0.7 !important;
}

/* 表头样式 - 使用 background-image 避免滚动时背景丢失 */
[b-wd27ix0ihp] .rz-datatable thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    position: sticky;
    top: 0;
    z-index: 10;
}

    /* 表头 hover 效果 */
    [b-wd27ix0ihp] .rz-datatable thead th:hover {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
    }

/* 排序图标颜色 */
[b-wd27ix0ihp] .rz-datatable thead .rz-sort-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 排序激活状态 */
[b-wd27ix0ihp] .rz-datatable thead .rz-sort-active .rz-sort-icon {
    color: #6366f1 !important;
}

/* 表格行样式 */
[b-wd27ix0ihp] .rz-datatable tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

    [b-wd27ix0ihp] .rz-datatable tbody tr:hover {
        background: rgba(99, 102, 241, 0.1) !important;
    }

[b-wd27ix0ihp] .rz-datatable tbody td {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 12px 8px !important;
}

/* 固定列样式 */
[b-wd27ix0ihp] .rz-datatable .rz-datatable-frozen-columns thead th {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
}

/* ========== 分页样式 ========== */
[b-wd27ix0ihp] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-wd27ix0ihp] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-wd27ix0ihp] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-wd27ix0ihp] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 输入框样式 ========== */
[b-wd27ix0ihp] .search-field .rz-textbox,
[b-wd27ix0ihp] .date-field .rz-textbox,
[b-wd27ix0ihp] .keyword-field .rz-textbox {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

    [b-wd27ix0ihp] .search-field .rz-textbox:focus,
    [b-wd27ix0ihp] .date-field .rz-textbox:focus,
    [b-wd27ix0ihp] .keyword-field .rz-textbox:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 下拉框样式 */
[b-wd27ix0ihp] .rz-dropdown {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-wd27ix0ihp] .rz-dropdown .rz-dropdown-trigger {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* 下拉框输入框的 Placeholder */
    [b-wd27ix0ihp] .rz-dropdown .rz-placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 下拉框选中值的颜色 */
    [b-wd27ix0ihp] .rz-dropdown .rz-dropdown-value {
        color: white !important;
    }

/* 数值输入框样式 */
[b-wd27ix0ihp] .rz-numeric {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-wd27ix0ihp] .rz-numeric .rz-textbox {
        color: white !important;
    }

    /* 数值输入框按钮样式 */
    [b-wd27ix0ihp] .rz-numeric .rz-numeric-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

/* 日期选择器样式 */
[b-wd27ix0ihp] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

    [b-wd27ix0ihp] .rz-datepicker .rz-textbox {
        color: white !important;
    }

/* ========== 按钮样式 ========== */
.action-buttons[b-wd27ix0ihp] {
    display: flex;
    gap: 8px;
}

/* ========== 用户单元格 ========== */
.user-cell[b-wd27ix0ihp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========== 状态标签 ========== */
.status-badge[b-wd27ix0ihp] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-wd27ix0ihp] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-wd27ix0ihp] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* ========== 动画 ========== */
@keyframes fadeInUp-b-wd27ix0ihp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式布局 ========== */
@media (max-width: 1200px) {
    .company-field[b-wd27ix0ihp],
    .keyword-field[b-wd27ix0ihp] {
        flex: 1;
        min-width: 150px;
    }

    .dropdown-field[b-wd27ix0ihp] {
        min-width: 140px;
    }

    .amount-field[b-wd27ix0ihp] {
        min-width: 120px;
    }
}

@media (max-width: 768px) {
    .page-container[b-wd27ix0ihp] {
        padding: 16px;
    }

    .search-field[b-wd27ix0ihp],
    .company-field[b-wd27ix0ihp],
    .date-field[b-wd27ix0ihp],
    .keyword-field[b-wd27ix0ihp],
    .dropdown-field[b-wd27ix0ihp],
    .amount-field[b-wd27ix0ihp] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-wd27ix0ihp] {
            flex: 1 1 100%;
            justify-content: flex-end;
        }

    .company-btn[b-wd27ix0ihp] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-wd27ix0ihp] {
        flex-direction: column;
        gap: 4px;
    }
}

/* ========== Tooltip 层级确保显示 ========== */
[b-wd27ix0ihp] .rz-tooltip {
    z-index: 9999 !important;
}

/* ========== 空数据样式 ========== */
[b-wd27ix0ihp] .rz-datatable .rz-datatable-empty-row td {
    text-align: center;
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 自定义 Tooltip 触发元素的样式 */
[b-wd27ix0ihp] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-wd27ix0ihp] .rz-text:hover {
        color: #818cf8 !important;
    }
/* ========== RadzenDatePicker 完整样式修复 ========== */

/* 1. DatePicker 容器背景 - 与其他输入框一致 */
[b-wd27ix0ihp] .rz-datepicker {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    width: 100%;
    display: flex;
    align-items: center;
}

    [b-wd27ix0ihp] .rz-datepicker .rz-inputtext {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
        color: white;
    }

    /* 4. 触发器按钮样式 */
    [b-wd27ix0ihp] .rz-datepicker .rz-datepicker-trigger {
        background: transparent !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 0 0 !important;
        margin: 0 0 !important;
    }

        [b-wd27ix0ihp] .rz-datepicker .rz-datepicker-trigger:hover {
            background: rgba(255, 255, 255, 0.05) !important;
            color: white !important;
        }

    /* 5. 聚焦状态 - 与其他输入框一致 */
    [b-wd27ix0ihp] .rz-datepicker.rz-state-focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    }

/* 6. 日历弹窗样式 */
[b-wd27ix0ihp] .rz-datepicker-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}
/* 页面标题样式 */
.page-title-section[b-wd27ix0ihp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .page-title-section h2[b-wd27ix0ihp] {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        background: linear-gradient(135deg, #fff, #a5b4fc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.page-subtitle[b-wd27ix0ihp] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 8px;
}

/* 日期范围选择器 */
.date-range-wrapper[b-wd27ix0ihp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-wrapper .rz-datepicker[b-wd27ix0ihp] {
        flex: 1;
    }

.date-separator[b-wd27ix0ihp] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

/* 统计卡片 */
.stats-cards[b-wd27ix0ihp] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stat-card[b-wd27ix0ihp] {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .stat-card:hover[b-wd27ix0ihp] {
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-2px);
    }

.stat-icon[b-wd27ix0ihp] {
    width: 48px;
    height: 48px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-info[b-wd27ix0ihp] {
    flex: 1;
}

.stat-value[b-wd27ix0ihp] {
    font-size: 24px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.stat-label[b-wd27ix0ihp] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* 状态标签样式 */
.status-badge[b-wd27ix0ihp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-dot[b-wd27ix0ihp] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-success[b-wd27ix0ihp] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-warning[b-wd27ix0ihp] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-danger[b-wd27ix0ihp] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.status-info[b-wd27ix0ihp] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* 发票类型标签 */
.type-badge[b-wd27ix0ihp] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.type-blue[b-wd27ix0ihp] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.type-red[b-wd27ix0ihp] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* 特殊标记样式 */
.special-mark[b-wd27ix0ihp] {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border-radius: 4px;
    font-size: 12px;
}

/* 购方单元格样式 */
.buyer-cell[b-wd27ix0ihp] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: help;
}

/* 搜索栏优化 */
.date-range-field[b-wd27ix0ihp] {
    flex: 2;
    min-width: 280px;
}

.keyword-field[b-wd27ix0ihp] {
    flex: 1;
    min-width: 150px;
}

.dropdown-field[b-wd27ix0ihp] {
    flex: 1;
    min-width: 130px;
}

.action-buttons[b-wd27ix0ihp] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}
/* /Components/Pages/Payments/New.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-db1h7bl6y2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-db1h7bl6y2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-db1h7bl6y2] {
    grid-column: span 2;
}

.form-label[b-db1h7bl6y2] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-db1h7bl6y2]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-db1h7bl6y2] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-db1h7bl6y2] {
    padding: 24px;
    animation: fadeInUp-b-db1h7bl6y2 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-db1h7bl6y2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-db1h7bl6y2] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-db1h7bl6y2] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-db1h7bl6y2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-db1h7bl6y2] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-db1h7bl6y2] {
        grid-column: span 2;
    }

.form-label[b-db1h7bl6y2] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-db1h7bl6y2]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-db1h7bl6y2],
.form-field .rz-password[b-db1h7bl6y2],
.form-field .rz-dropdown[b-db1h7bl6y2],
.form-field .rz-numeric[b-db1h7bl6y2],
.form-field .rz-textarea[b-db1h7bl6y2] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-db1h7bl6y2],
    .form-field .rz-password:focus[b-db1h7bl6y2],
    .form-field .rz-dropdown:focus[b-db1h7bl6y2],
    .form-field .rz-numeric:focus[b-db1h7bl6y2],
    .form-field .rz-textarea:focus[b-db1h7bl6y2] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-db1h7bl6y2] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-db1h7bl6y2] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-db1h7bl6y2] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-db1h7bl6y2] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-db1h7bl6y2] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-db1h7bl6y2] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-db1h7bl6y2] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-db1h7bl6y2] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-db1h7bl6y2] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-db1h7bl6y2] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-db1h7bl6y2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-db1h7bl6y2] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-db1h7bl6y2] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-db1h7bl6y2] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-db1h7bl6y2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-db1h7bl6y2] {
        padding: 16px;
    }

    .form-grid[b-db1h7bl6y2] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-db1h7bl6y2] {
        grid-column: span 1;
    }

    .form-actions[b-db1h7bl6y2] {
        justify-content: center;
    }

    .page-header[b-db1h7bl6y2] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-db1h7bl6y2] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-db1h7bl6y2] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-db1h7bl6y2], select[b-db1h7bl6y2], textarea[b-db1h7bl6y2] {
    width: 100%;
}
/* /Components/Pages/Systems/ConfigSetting.razor.rz.scp.css */
/* New.razor.css */

.form-grid[b-04schmgp2q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-field[b-04schmgp2q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.full-width[b-04schmgp2q] {
    grid-column: span 2;
}

.form-label[b-04schmgp2q] {
    font-weight: 500;
    font-size: 0.875rem;
}

.required[b-04schmgp2q]::after {
    content: "*";
    color: #f44336;
    margin-left: 0.25rem;
}

.form-actions[b-04schmgp2q] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-container[b-04schmgp2q] {
    padding: 24px;
    animation: fadeInUp-b-04schmgp2q 0.4s ease-out;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header[b-04schmgp2q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-04schmgp2q] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-04schmgp2q] {
    display: flex;
    gap: 12px;
}

/* 表单网格 */
.form-grid[b-04schmgp2q] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.form-field[b-04schmgp2q] {
    display: flex;
    flex-direction: column;
}

    .form-field.full-width[b-04schmgp2q] {
        grid-column: span 2;
    }

.form-label[b-04schmgp2q] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

    .form-label.required[b-04schmgp2q]::after {
        content: "*";
        color: #f87171;
        margin-left: 4px;
    }

/* 表单控件样式 */
.form-field .rz-textbox[b-04schmgp2q],
.form-field .rz-password[b-04schmgp2q],
.form-field .rz-dropdown[b-04schmgp2q],
.form-field .rz-numeric[b-04schmgp2q],
.form-field .rz-textarea[b-04schmgp2q] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

    .form-field .rz-textbox:focus[b-04schmgp2q],
    .form-field .rz-password:focus[b-04schmgp2q],
    .form-field .rz-dropdown:focus[b-04schmgp2q],
    .form-field .rz-numeric:focus[b-04schmgp2q],
    .form-field .rz-textarea:focus[b-04schmgp2q] {
        border-color: #6366f1 !important;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    .form-field .rz-dropdown .rz-dropdown-trigger[b-04schmgp2q] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

.form-field .rz-dropdown-panel[b-04schmgp2q] {
    background: rgba(30, 41, 59, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.form-field .rz-dropdown-item[b-04schmgp2q] {
    color: rgba(255, 255, 255, 0.8) !important;
}

    .form-field .rz-dropdown-item:hover[b-04schmgp2q] {
        background: rgba(99, 102, 241, 0.2) !important;
    }

.form-field .rz-placeholder[b-04schmgp2q] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-field .rz-textarea[b-04schmgp2q] {
    resize: vertical;
}

/* 数字输入框样式 */
.form-field .rz-numeric .rz-numeric-input[b-04schmgp2q] {
    background: transparent !important;
    color: white !important;
}

.form-field .rz-numeric .rz-numeric-trigger[b-04schmgp2q] {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 按钮区域 */
.form-actions[b-04schmgp2q] {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 按钮样式 */
.rz-button-primary[b-04schmgp2q] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-primary:hover[b-04schmgp2q] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    }

.rz-button-secondary[b-04schmgp2q] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
}

    .rz-button-secondary:hover[b-04schmgp2q] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px);
    }

/* 验证错误样式 */
.rz-validation-message[b-04schmgp2q] {
    color: #f87171 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
}

/* 动画 */
@keyframes fadeInUp-b-04schmgp2q {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式 */
@media (max-width: 768px) {
    .page-container[b-04schmgp2q] {
        padding: 16px;
    }

    .form-grid[b-04schmgp2q] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field.full-width[b-04schmgp2q] {
        grid-column: span 1;
    }

    .form-actions[b-04schmgp2q] {
        justify-content: center;
    }

    .page-header[b-04schmgp2q] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

.validation-summary[b-04schmgp2q] {
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    color: #f87171;
}

.validation-message[b-04schmgp2q] {
    color: #f87171;
    font-size: 12px;
    margin-top: 4px;
}

input[b-04schmgp2q], select[b-04schmgp2q], textarea[b-04schmgp2q] {
    width: 100%;
}
/* /Components/Pages/Wechats/Clients/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-vimsqb666a], body[b-vimsqb666a] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-vimsqb666a] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-vimsqb666a 0.4s ease-out;
}

/* ========== 页面头部 ========== */
.page-header[b-vimsqb666a] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-vimsqb666a] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-vimsqb666a] {
    display: flex;
    gap: 8px;
}

/* ========== 搜索栏 ========== */
.search-bar[b-vimsqb666a] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ====== 搜索折叠切换头部 ====== */
.search-toggle[b-vimsqb666a] {
    display: none;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

    .search-toggle:hover[b-vimsqb666a] {
        background: rgba(255, 255, 255, 0.06);
    }

.toggle-left[b-vimsqb666a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-icon[b-vimsqb666a] {
    font-size: 16px;
}

.toggle-title[b-vimsqb666a] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.filter-badge[b-vimsqb666a] {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 30px;
    line-height: 20px;
}

.toggle-arrow[b-vimsqb666a] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

    .toggle-arrow.open[b-vimsqb666a] {
        transform: rotate(180deg);
    }

/* ====== 搜索内容体 ====== */
.search-body[b-vimsqb666a] {
    padding: 0 1rem 1rem 1rem;
    transition: all 0.3s ease;
}

.search-row[b-vimsqb666a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

    .search-row:first-child[b-vimsqb666a] {
        margin-bottom: 1.25rem;
    }

/* 搜索字段通用样式 */
.search-field[b-vimsqb666a] {
    flex: 1;
    min-width: 120px;
}

.company-field[b-vimsqb666a] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-vimsqb666a] {
    flex: 0 0 auto;
    min-width: auto;
}

.date-field[b-vimsqb666a] {
    flex: 1;
    min-width: 140px;
}

.keyword-field[b-vimsqb666a] {
    flex: 2;
    min-width: 200px;
}

.dropdown-field[b-vimsqb666a] {
    flex: 1;
    min-width: 120px;
}

.amount-field[b-vimsqb666a] {
    flex: 1;
    min-width: 130px;
    color: white;
}

.action-buttons[b-vimsqb666a] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 输入框通用样式 ========== */
.search-textbox[b-vimsqb666a] {
    width: 100%;
}

    .search-textbox .rz-textbox[b-vimsqb666a] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
    }

        .search-textbox .rz-textbox:focus[b-vimsqb666a] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

/* ========== 日期选择器样式 ========== */
.date-picker[b-vimsqb666a] {
    width: 100%;
}

    .date-picker .rz-datepicker[b-vimsqb666a] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
    }

        .date-picker .rz-datepicker .rz-inputtext[b-vimsqb666a] {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 8px !important;
            width: 100%;
            display: flex;
            align-items: center;
            color: white;
        }

        .date-picker .rz-datepicker .rz-datepicker-trigger[b-vimsqb666a] {
            background: transparent !important;
            border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
            color: rgba(255, 255, 255, 0.7) !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            .date-picker .rz-datepicker .rz-datepicker-trigger:hover[b-vimsqb666a] {
                background: rgba(255, 255, 255, 0.05) !important;
                color: white !important;
            }

        .date-picker .rz-datepicker.rz-state-focus[b-vimsqb666a] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

        .date-picker .rz-datepicker .rz-textbox[b-vimsqb666a]::placeholder {
            color: white !important;
            opacity: 0.7 !important;
        }

    .date-picker .rz-datepicker-popup[b-vimsqb666a] {
        background: rgba(30, 30, 47, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
    }

/* ========== 下拉框样式 ========== */
.search-dropdown[b-vimsqb666a] {
    width: 100%;
}

    .search-dropdown .rz-dropdown[b-vimsqb666a] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .search-dropdown .rz-dropdown .rz-dropdown-trigger[b-vimsqb666a] {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .search-dropdown .rz-dropdown .rz-placeholder[b-vimsqb666a] {
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .search-dropdown .rz-dropdown .rz-dropdown-value[b-vimsqb666a] {
            color: white !important;
        }

/* ========== 数值输入框样式 ========== */
.amount-input[b-vimsqb666a] {
    width: 100%;
}

    .amount-input .rz-numeric[b-vimsqb666a] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .amount-input .rz-numeric .rz-textbox[b-vimsqb666a] {
            color: white !important;
        }

        .amount-input .rz-numeric .rz-numeric-button[b-vimsqb666a] {
            background: rgba(255, 255, 255, 0.05) !important;
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .amount-input .rz-numeric .rz-textbox[b-vimsqb666a]::placeholder {
            color: white !important;
            opacity: 0.7 !important;
        }

/* ========== 统一 Placeholder ========== */
[b-vimsqb666a] input::placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-vimsqb666a] input::-webkit-input-placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-vimsqb666a] input::-moz-placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-vimsqb666a] input:-ms-input-placeholder {
    color: var(--rz-input-placeholder-color)
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-vimsqb666a] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-vimsqb666a] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}

    [b-vimsqb666a] .rz-datatable thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-weight: 500 !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        [b-vimsqb666a] .rz-datatable thead th:hover {
            background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
        }

    [b-vimsqb666a] .rz-datatable thead .rz-sort-icon {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    [b-vimsqb666a] .rz-datatable thead .rz-sort-active .rz-sort-icon {
        color: #6366f1 !important;
    }

    [b-vimsqb666a] .rz-datatable tbody tr {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.3s ease !important;
    }

        [b-vimsqb666a] .rz-datatable tbody tr:hover {
            background: rgba(99, 102, 241, 0.1) !important;
        }

    [b-vimsqb666a] .rz-datatable tbody td {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 12px 8px !important;
    }

    [b-vimsqb666a] .rz-datatable .rz-datatable-frozen-columns thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    }

    [b-vimsqb666a] .rz-datatable .rz-datatable-empty-row td {
        text-align: center;
        padding: 40px !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

/* ========== 分页样式 ========== */
[b-vimsqb666a] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-vimsqb666a] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-vimsqb666a] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-vimsqb666a] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 状态标签 ========== */
.status-badge[b-vimsqb666a] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-vimsqb666a] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-warning[b-vimsqb666a] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-danger[b-vimsqb666a] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-info[b-vimsqb666a] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.status-canceled[b-vimsqb666a] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 操作按钮 ========== */
.action-buttons[b-vimsqb666a] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== Tooltip ========== */
[b-vimsqb666a] .rz-tooltip {
    z-index: 9999 !important;
}

[b-vimsqb666a] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-vimsqb666a] .rz-text:hover {
        color: #818cf8 !important;
    }

/* ========== 移动端卡片列表 ========== */
.card-mobile[b-vimsqb666a] {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0 4px 4px 4px;
}

.mobile-list-header[b-vimsqb666a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
    flex-shrink: 0;
}

    .mobile-list-header .count-label[b-vimsqb666a] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
    }

        .mobile-list-header .count-label strong[b-vimsqb666a] {
            color: rgba(255, 255, 255, 0.9);
        }

    .mobile-list-header .page-info[b-vimsqb666a] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
    }

/* ====== 可滚动的卡片列表 ====== */
.invoice-list-scroll[b-vimsqb666a] {
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

    .invoice-list-scroll[b-vimsqb666a]::-webkit-scrollbar {
        width: 3px;
    }

    .invoice-list-scroll[b-vimsqb666a]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
    }

    .invoice-list-scroll[b-vimsqb666a]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

.invoice-card[b-vimsqb666a] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
}

    .invoice-card:active[b-vimsqb666a] {
        transform: scale(0.98);
    }

.card-header[b-vimsqb666a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invoice-number[b-vimsqb666a] {
    font-size: 14px;
    font-weight: 600;
    color: white;
    word-break: break-all;
}

.card-body .info-row[b-vimsqb666a] {
    display: flex;
    margin-bottom: 4px;
    font-size: 13px;
}

.card-body .info-label[b-vimsqb666a] {
    width: 70px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.card-body .info-value[b-vimsqb666a] {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    word-break: break-all;
}

.card-body .error-row .info-value[b-vimsqb666a] {
    color: #ef4444;
}

.card-body .error-row .info-label[b-vimsqb666a] {
    color: #ef4444;
}

.card-actions[b-vimsqb666a] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

.empty-data[b-vimsqb666a] {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 移动端分页控件 ========== */
.mobile-pagination[b-vimsqb666a] {
    display: none;
    flex-shrink: 0;
    padding: 12px 4px 4px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pagination-info[b-vimsqb666a] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.pagination-controls[b-vimsqb666a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .pagination-controls .rz-button[b-vimsqb666a] {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

        .pagination-controls .rz-button:hover:not(:disabled)[b-vimsqb666a] {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .pagination-controls .rz-button:disabled[b-vimsqb666a] {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .pagination-controls .rz-button .rz-button-icon[b-vimsqb666a] {
            font-size: 16px !important;
        }

.page-indicator[b-vimsqb666a] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 50px;
    text-align: center;
}

.pagination-size[b-vimsqb666a] {
    flex: 0 0 auto;
}

.page-size-dropdown[b-vimsqb666a] {
    width: 100px;
}

    .page-size-dropdown .rz-dropdown[b-vimsqb666a] {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        min-height: 32px !important;
    }

        .page-size-dropdown .rz-dropdown .rz-dropdown-value[b-vimsqb666a] {
            color: rgba(255, 255, 255, 0.8) !important;
            font-size: 12px !important;
        }

        .page-size-dropdown .rz-dropdown .rz-dropdown-trigger[b-vimsqb666a] {
            color: rgba(255, 255, 255, 0.4) !important;
        }

/* ========== 移动端下拉弹窗样式 ========== */
[b-vimsqb666a] .rz-dropdown-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

    [b-vimsqb666a] .rz-dropdown-popup .rz-dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 8px 16px !important;
    }

        [b-vimsqb666a] .rz-dropdown-popup .rz-dropdown-item:hover {
            background: rgba(99, 102, 241, 0.2) !important;
        }

    [b-vimsqb666a] .rz-dropdown-popup .rz-state-selected {
        background: rgba(99, 102, 241, 0.3) !important;
        color: white !important;
    }

/* ========== 动画 ========== */
@keyframes fadeInUp-b-vimsqb666a {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* ========== 桌面端样式 (≥769px) ========== */
/* ============================================================ */
@media (min-width: 769px) {
    .search-toggle[b-vimsqb666a] {
        display: none !important;
    }

    .search-body[b-vimsqb666a] {
        display: block !important;
        padding: 0 1rem 1rem 1rem !important;
    }

    .search-bar[b-vimsqb666a] {
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .card-mobile[b-vimsqb666a] {
        display: none !important;
    }

    .table-scroll-container[b-vimsqb666a] {
        display: block !important;
    }
}

/* ============================================================ */
/* ========== 移动端样式 (≤768px) ========== */
/* ============================================================ */
@media (max-width: 768px) {
    .page-container[b-vimsqb666a] {
        padding: 12px;
        height: 100dvh;
        border-radius: 16px;
    }

    .page-header[b-vimsqb666a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

        .page-header h2[b-vimsqb666a] {
            font-size: 18px;
        }

    .header-actions[b-vimsqb666a] {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }

        .header-actions .rz-button[b-vimsqb666a] {
            font-size: 12px !important;
            padding: 4px 10px !important;
        }

    /* ====== 移动端搜索栏折叠样式 ====== */
    .search-bar[b-vimsqb666a] {
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .search-toggle[b-vimsqb666a] {
        display: flex !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .search-bar.collapsed .search-body[b-vimsqb666a] {
        display: none !important;
        max-height: 0 !important;
        padding: 0 1rem !important;
        overflow: hidden;
    }

    .search-bar.expanded .search-body[b-vimsqb666a] {
        display: block !important;
        max-height: 800px !important;
        padding: 0.75rem 1rem 1rem 1rem !important;
    }

    .search-bar.expanded .search-toggle[b-vimsqb666a] {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .search-field[b-vimsqb666a],
    .company-field[b-vimsqb666a],
    .date-field[b-vimsqb666a],
    .keyword-field[b-vimsqb666a],
    .dropdown-field[b-vimsqb666a],
    .amount-field[b-vimsqb666a] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-vimsqb666a] {
            flex: 1 1 100%;
            justify-content: flex-end;
            margin-left: 0;
        }

    .company-btn[b-vimsqb666a] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-vimsqb666a] {
        flex-direction: row;
        gap: 6px;
    }

        .action-buttons .rz-button[b-vimsqb666a] {
            flex: 1;
        }

    .search-row:first-child[b-vimsqb666a] {
        margin-bottom: 0.75rem;
    }

    /* ====== 移动端表格隐藏，卡片显示 ====== */
    .table-scroll-container[b-vimsqb666a] {
        display: none !important;
    }

    .card-mobile[b-vimsqb666a] {
        display: flex !important;
    }

    .mobile-pagination[b-vimsqb666a] {
        display: flex !important;
    }
}

/* ============================================================ */
/* ========== 小屏手机 (≤480px) ========== */
/* ============================================================ */
@media (max-width: 480px) {
    .page-container[b-vimsqb666a] {
        padding: 10px;
        border-radius: 12px;
    }

    .page-header h2[b-vimsqb666a] {
        font-size: 16px;
    }

    .search-toggle[b-vimsqb666a] {
        padding: 8px 12px;
    }

    .toggle-title[b-vimsqb666a] {
        font-size: 13px;
    }

    .filter-badge[b-vimsqb666a] {
        font-size: 10px;
        padding: 0 8px;
        line-height: 18px;
    }

    .search-body[b-vimsqb666a] {
        padding: 0 0.75rem 0.75rem 0.75rem !important;
    }

    .search-row[b-vimsqb666a] {
        gap: 0.5rem;
    }

    .invoice-card[b-vimsqb666a] {
        padding: 10px 12px;
    }

    .invoice-number[b-vimsqb666a] {
        font-size: 13px;
    }

    .card-body .info-row[b-vimsqb666a] {
        font-size: 12px;
    }

    .card-body .info-label[b-vimsqb666a] {
        width: 60px;
    }

    .card-header[b-vimsqb666a] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mobile-list-header .count-label[b-vimsqb666a] {
        font-size: 12px;
    }

    .mobile-list-header .page-info[b-vimsqb666a] {
        font-size: 12px;
    }

    .empty-data[b-vimsqb666a] {
        padding: 30px 20px;
        font-size: 14px;
    }

    .mobile-pagination[b-vimsqb666a] {
        padding: 10px 0 2px 0;
        gap: 6px;
    }

    .pagination-info[b-vimsqb666a] {
        font-size: 11px;
        flex: 1 1 100%;
        text-align: center;
    }

    .pagination-controls[b-vimsqb666a] {
        flex: 1;
        justify-content: center;
    }

    .pagination-size[b-vimsqb666a] {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .page-size-dropdown[b-vimsqb666a] {
        width: 80px;
    }

    .page-indicator[b-vimsqb666a] {
        font-size: 12px;
        min-width: 40px;
    }

    .pagination-controls .rz-button[b-vimsqb666a] {
        min-width: 28px !important;
        height: 28px !important;
    }
}
/* /Components/Pages/Wechats/Menus/List.razor.rz.scp.css */
/* ========== 全局布局 - 防止整体滚动 ========== */
html[b-stswzfj90l], body[b-stswzfj90l] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========== 页面容器 ========== */
.page-container[b-stswzfj90l] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeInUp-b-stswzfj90l 0.4s ease-out;
}

.badge[b-stswzfj90l] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

.badge-new[b-stswzfj90l] {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.badge-disabled[b-stswzfj90l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-badge[b-stswzfj90l] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-stswzfj90l] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-danger[b-stswzfj90l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
/* ========== 页面头部 ========== */
.page-header[b-stswzfj90l] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .page-header h2[b-stswzfj90l] {
        color: white;
        font-size: 20px;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

.header-actions[b-stswzfj90l] {
    display: flex;
    gap: 8px;
}

/* ========== 搜索栏 ========== */
.search-bar[b-stswzfj90l] {
    flex-shrink: 0;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* ====== 搜索折叠切换头部 ====== */
.search-toggle[b-stswzfj90l] {
    display: none;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

    .search-toggle:hover[b-stswzfj90l] {
        background: rgba(255, 255, 255, 0.06);
    }

.toggle-left[b-stswzfj90l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-icon[b-stswzfj90l] {
    font-size: 16px;
}

.toggle-title[b-stswzfj90l] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.filter-badge[b-stswzfj90l] {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 500;
    padding: 0 10px;
    border-radius: 30px;
    line-height: 20px;
}

.toggle-arrow[b-stswzfj90l] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

    .toggle-arrow.open[b-stswzfj90l] {
        transform: rotate(180deg);
    }

/* ====== 搜索内容体 ====== */
.search-body[b-stswzfj90l] {
    padding: 0 1rem 1rem 1rem;
    transition: all 0.3s ease;
}

.search-row[b-stswzfj90l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

    .search-row:first-child[b-stswzfj90l] {
        margin-bottom: 1.25rem;
    }

/* 搜索字段通用样式 */
.search-field[b-stswzfj90l] {
    flex: 1;
    min-width: 120px;
}

.company-field[b-stswzfj90l] {
    flex: 2;
    min-width: 180px;
}

.company-btn[b-stswzfj90l] {
    flex: 0 0 auto;
    min-width: auto;
}

.date-field[b-stswzfj90l] {
    flex: 1;
    min-width: 140px;
}

.keyword-field[b-stswzfj90l] {
    flex: 2;
    min-width: 200px;
}

.dropdown-field[b-stswzfj90l] {
    flex: 1;
    min-width: 120px;
}

.amount-field[b-stswzfj90l] {
    flex: 1;
    min-width: 130px;
    color: white;
}

.action-buttons[b-stswzfj90l] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    min-width: auto;
    margin-left: auto;
}

/* ========== 输入框通用样式 ========== */
.search-textbox[b-stswzfj90l] {
    width: 100%;
}

    .search-textbox .rz-textbox[b-stswzfj90l] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
    }

        .search-textbox .rz-textbox:focus[b-stswzfj90l] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

/* ========== 日期选择器样式 ========== */
.date-picker[b-stswzfj90l] {
    width: 100%;
}

    .date-picker .rz-datepicker[b-stswzfj90l] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        width: 100%;
        display: flex;
        align-items: center;
    }

        .date-picker .rz-datepicker .rz-inputtext[b-stswzfj90l] {
            background: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 8px !important;
            width: 100%;
            display: flex;
            align-items: center;
            color: white;
        }

        .date-picker .rz-datepicker .rz-datepicker-trigger[b-stswzfj90l] {
            background: transparent !important;
            border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
            color: rgba(255, 255, 255, 0.7) !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            .date-picker .rz-datepicker .rz-datepicker-trigger:hover[b-stswzfj90l] {
                background: rgba(255, 255, 255, 0.05) !important;
                color: white !important;
            }

        .date-picker .rz-datepicker.rz-state-focus[b-stswzfj90l] {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
        }

        .date-picker .rz-datepicker .rz-textbox[b-stswzfj90l]::placeholder {
            color: white !important;
            opacity: 0.7 !important;
        }

    .date-picker .rz-datepicker-popup[b-stswzfj90l] {
        background: rgba(30, 30, 47, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
    }

/* ========== 下拉框样式 ========== */
.search-dropdown[b-stswzfj90l] {
    width: 100%;
}

    .search-dropdown .rz-dropdown[b-stswzfj90l] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .search-dropdown .rz-dropdown .rz-dropdown-trigger[b-stswzfj90l] {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .search-dropdown .rz-dropdown .rz-placeholder[b-stswzfj90l] {
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .search-dropdown .rz-dropdown .rz-dropdown-value[b-stswzfj90l] {
            color: white !important;
        }

/* ========== 数值输入框样式 ========== */
.amount-input[b-stswzfj90l] {
    width: 100%;
}

    .amount-input .rz-numeric[b-stswzfj90l] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
    }

        .amount-input .rz-numeric .rz-textbox[b-stswzfj90l] {
            color: white !important;
        }

        .amount-input .rz-numeric .rz-numeric-button[b-stswzfj90l] {
            background: rgba(255, 255, 255, 0.05) !important;
            color: rgba(255, 255, 255, 0.7) !important;
        }

        .amount-input .rz-numeric .rz-textbox[b-stswzfj90l]::placeholder {
            color: white !important;
            opacity: 0.7 !important;
        }

/* ========== 统一 Placeholder ========== */
[b-stswzfj90l] input::placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-stswzfj90l] input::-webkit-input-placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-stswzfj90l] input::-moz-placeholder {
    color: var(--rz-input-placeholder-color)
}

[b-stswzfj90l] input:-ms-input-placeholder {
    color: var(--rz-input-placeholder-color)
}

/* ========== 表格容器 ========== */
.table-scroll-container[b-stswzfj90l] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ========== 表格样式 ========== */
[b-stswzfj90l] .rz-datatable {
    height: 100% !important;
    background: transparent !important;
}

    [b-stswzfj90l] .rz-datatable thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        font-weight: 500 !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        [b-stswzfj90l] .rz-datatable thead th:hover {
            background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) !important;
        }

    [b-stswzfj90l] .rz-datatable thead .rz-sort-icon {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    [b-stswzfj90l] .rz-datatable thead .rz-sort-active .rz-sort-icon {
        color: #6366f1 !important;
    }

    [b-stswzfj90l] .rz-datatable tbody tr {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.3s ease !important;
    }

        [b-stswzfj90l] .rz-datatable tbody tr:hover {
            background: rgba(99, 102, 241, 0.1) !important;
        }

    [b-stswzfj90l] .rz-datatable tbody td {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 12px 8px !important;
    }

    [b-stswzfj90l] .rz-datatable .rz-datatable-frozen-columns thead th {
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) !important;
    }

    [b-stswzfj90l] .rz-datatable .rz-datatable-empty-row td {
        text-align: center;
        padding: 40px !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

/* ========== 分页样式 ========== */
[b-stswzfj90l] .rz-paginator {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 16px;
    padding-top: 16px;
    flex-shrink: 0;
}

    [b-stswzfj90l] .rz-paginator .rz-button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 8px !important;
    }

        [b-stswzfj90l] .rz-paginator .rz-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

    [b-stswzfj90l] .rz-paginator .rz-state-active {
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        color: white !important;
    }

/* ========== 状态标签 ========== */
.status-badge[b-stswzfj90l] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.status-success[b-stswzfj90l] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-warning[b-stswzfj90l] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.status-danger[b-stswzfj90l] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.status-info[b-stswzfj90l] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.status-canceled[b-stswzfj90l] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 操作按钮 ========== */
.action-buttons[b-stswzfj90l] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ========== Tooltip ========== */
[b-stswzfj90l] .rz-tooltip {
    z-index: 9999 !important;
}

[b-stswzfj90l] .rz-text {
    cursor: help;
    transition: all 0.2s ease;
}

    [b-stswzfj90l] .rz-text:hover {
        color: #818cf8 !important;
    }

/* ========== 移动端卡片列表 ========== */
.card-mobile[b-stswzfj90l] {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
    padding: 0 4px 4px 4px;
}

.mobile-list-header[b-stswzfj90l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 8px;
    flex-shrink: 0;
}

    .mobile-list-header .count-label[b-stswzfj90l] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
    }

        .mobile-list-header .count-label strong[b-stswzfj90l] {
            color: rgba(255, 255, 255, 0.9);
        }

    .mobile-list-header .page-info[b-stswzfj90l] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.5);
    }

/* ====== 可滚动的卡片列表 ====== */
.invoice-list-scroll[b-stswzfj90l] {
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
}

    .invoice-list-scroll[b-stswzfj90l]::-webkit-scrollbar {
        width: 3px;
    }

    .invoice-list-scroll[b-stswzfj90l]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
    }

    .invoice-list-scroll[b-stswzfj90l]::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

.invoice-card[b-stswzfj90l] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    cursor: pointer;
}

    .invoice-card:active[b-stswzfj90l] {
        transform: scale(0.98);
    }

.card-header[b-stswzfj90l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.invoice-number[b-stswzfj90l] {
    font-size: 14px;
    font-weight: 600;
    color: white;
    word-break: break-all;
}

.card-body .info-row[b-stswzfj90l] {
    display: flex;
    margin-bottom: 4px;
    font-size: 13px;
}

.card-body .info-label[b-stswzfj90l] {
    width: 70px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.card-body .info-value[b-stswzfj90l] {
    flex: 1;
    color: rgba(255, 255, 255, 0.8);
    word-break: break-all;
}

.card-body .error-row .info-value[b-stswzfj90l] {
    color: #ef4444;
}

.card-body .error-row .info-label[b-stswzfj90l] {
    color: #ef4444;
}

.card-actions[b-stswzfj90l] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
}

.empty-data[b-stswzfj90l] {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.5);
}

/* ========== 移动端分页控件 ========== */
.mobile-pagination[b-stswzfj90l] {
    display: none;
    flex-shrink: 0;
    padding: 12px 4px 4px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 8px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pagination-info[b-stswzfj90l] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.pagination-controls[b-stswzfj90l] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .pagination-controls .rz-button[b-stswzfj90l] {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

        .pagination-controls .rz-button:hover:not(:disabled)[b-stswzfj90l] {
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .pagination-controls .rz-button:disabled[b-stswzfj90l] {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .pagination-controls .rz-button .rz-button-icon[b-stswzfj90l] {
            font-size: 16px !important;
        }

.page-indicator[b-stswzfj90l] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    min-width: 50px;
    text-align: center;
}

.pagination-size[b-stswzfj90l] {
    flex: 0 0 auto;
}

.page-size-dropdown[b-stswzfj90l] {
    width: 100px;
}

    .page-size-dropdown .rz-dropdown[b-stswzfj90l] {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        min-height: 32px !important;
    }

        .page-size-dropdown .rz-dropdown .rz-dropdown-value[b-stswzfj90l] {
            color: rgba(255, 255, 255, 0.8) !important;
            font-size: 12px !important;
        }

        .page-size-dropdown .rz-dropdown .rz-dropdown-trigger[b-stswzfj90l] {
            color: rgba(255, 255, 255, 0.4) !important;
        }

/* ========== 移动端下拉弹窗样式 ========== */
[b-stswzfj90l] .rz-dropdown-popup {
    background: rgba(30, 30, 47, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

    [b-stswzfj90l] .rz-dropdown-popup .rz-dropdown-item {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 8px 16px !important;
    }

        [b-stswzfj90l] .rz-dropdown-popup .rz-dropdown-item:hover {
            background: rgba(99, 102, 241, 0.2) !important;
        }

    [b-stswzfj90l] .rz-dropdown-popup .rz-state-selected {
        background: rgba(99, 102, 241, 0.3) !important;
        color: white !important;
    }

/* ========== 动画 ========== */
@keyframes fadeInUp-b-stswzfj90l {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================ */
/* ========== 桌面端样式 (≥769px) ========== */
/* ============================================================ */
@media (min-width: 769px) {
    .search-toggle[b-stswzfj90l] {
        display: none !important;
    }

    .search-body[b-stswzfj90l] {
        display: block !important;
        padding: 0 1rem 1rem 1rem !important;
    }

    .search-bar[b-stswzfj90l] {
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .card-mobile[b-stswzfj90l] {
        display: none !important;
    }

    .table-scroll-container[b-stswzfj90l] {
        display: block !important;
    }
}

/* ============================================================ */
/* ========== 移动端样式 (≤768px) ========== */
/* ============================================================ */
@media (max-width: 768px) {
    .page-container[b-stswzfj90l] {
        padding: 12px;
        height: 100dvh;
        border-radius: 16px;
    }

    .page-header[b-stswzfj90l] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

        .page-header h2[b-stswzfj90l] {
            font-size: 18px;
        }

    .header-actions[b-stswzfj90l] {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }

        .header-actions .rz-button[b-stswzfj90l] {
            font-size: 12px !important;
            padding: 4px 10px !important;
        }

    /* ====== 移动端搜索栏折叠样式 ====== */
    .search-bar[b-stswzfj90l] {
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .search-toggle[b-stswzfj90l] {
        display: flex !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .search-bar.collapsed .search-body[b-stswzfj90l] {
        display: none !important;
        max-height: 0 !important;
        padding: 0 1rem !important;
        overflow: hidden;
    }

    .search-bar.expanded .search-body[b-stswzfj90l] {
        display: block !important;
        max-height: 800px !important;
        padding: 0.75rem 1rem 1rem 1rem !important;
    }

    .search-bar.expanded .search-toggle[b-stswzfj90l] {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .search-field[b-stswzfj90l],
    .company-field[b-stswzfj90l],
    .date-field[b-stswzfj90l],
    .keyword-field[b-stswzfj90l],
    .dropdown-field[b-stswzfj90l],
    .amount-field[b-stswzfj90l] {
        flex: 1 1 100%;
        min-width: 100%;
    }

        .search-field.action-buttons[b-stswzfj90l] {
            flex: 1 1 100%;
            justify-content: flex-end;
            margin-left: 0;
        }

    .company-btn[b-stswzfj90l] {
        flex: 0 0 auto;
        min-width: auto;
    }

    .action-buttons[b-stswzfj90l] {
        flex-direction: row;
        gap: 6px;
    }

        .action-buttons .rz-button[b-stswzfj90l] {
            flex: 1;
        }

    .search-row:first-child[b-stswzfj90l] {
        margin-bottom: 0.75rem;
    }

    /* ====== 移动端表格隐藏，卡片显示 ====== */
    .table-scroll-container[b-stswzfj90l] {
        display: none !important;
    }

    .card-mobile[b-stswzfj90l] {
        display: flex !important;
    }

    .mobile-pagination[b-stswzfj90l] {
        display: flex !important;
    }
}

/* ============================================================ */
/* ========== 小屏手机 (≤480px) ========== */
/* ============================================================ */
@media (max-width: 480px) {
    .page-container[b-stswzfj90l] {
        padding: 10px;
        border-radius: 12px;
    }

    .page-header h2[b-stswzfj90l] {
        font-size: 16px;
    }

    .search-toggle[b-stswzfj90l] {
        padding: 8px 12px;
    }

    .toggle-title[b-stswzfj90l] {
        font-size: 13px;
    }

    .filter-badge[b-stswzfj90l] {
        font-size: 10px;
        padding: 0 8px;
        line-height: 18px;
    }

    .search-body[b-stswzfj90l] {
        padding: 0 0.75rem 0.75rem 0.75rem !important;
    }

    .search-row[b-stswzfj90l] {
        gap: 0.5rem;
    }

    .invoice-card[b-stswzfj90l] {
        padding: 10px 12px;
    }

    .invoice-number[b-stswzfj90l] {
        font-size: 13px;
    }

    .card-body .info-row[b-stswzfj90l] {
        font-size: 12px;
    }

    .card-body .info-label[b-stswzfj90l] {
        width: 60px;
    }

    .card-header[b-stswzfj90l] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mobile-list-header .count-label[b-stswzfj90l] {
        font-size: 12px;
    }

    .mobile-list-header .page-info[b-stswzfj90l] {
        font-size: 12px;
    }

    .empty-data[b-stswzfj90l] {
        padding: 30px 20px;
        font-size: 14px;
    }

    .mobile-pagination[b-stswzfj90l] {
        padding: 10px 0 2px 0;
        gap: 6px;
    }

    .pagination-info[b-stswzfj90l] {
        font-size: 11px;
        flex: 1 1 100%;
        text-align: center;
    }

    .pagination-controls[b-stswzfj90l] {
        flex: 1;
        justify-content: center;
    }

    .pagination-size[b-stswzfj90l] {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .page-size-dropdown[b-stswzfj90l] {
        width: 80px;
    }

    .page-indicator[b-stswzfj90l] {
        font-size: 12px;
        min-width: 40px;
    }

    .pagination-controls .rz-button[b-stswzfj90l] {
        min-width: 28px !important;
        height: 28px !important;
    }
}