* {margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", "PingFang SC", sans-serif;}
html { overflow-x: hidden; width: 100%; }
body {background: #f0f2f5; color: #333; padding: 0; margin: 0; overflow-x: hidden; width: 100%;}

/* 全局隐藏滚动条 */
html, body, .content, .main, .sidebar, .modal-overlay, .modal-content, .modal-body, .layout {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, .content::-webkit-scrollbar,
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .modal-overlay::-webkit-scrollbar,
.modal-content::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .layout::-webkit-scrollbar {
    display: none;
    width: 0;
}

/* 布局 */
.layout {display: flex; min-height: 100vh; overflow-x: hidden;}
.sidebar {width: 220px; background: #001529; color: #fff; padding-top: 20px; position: fixed; height: 100vh; overflow-y: auto; z-index: 100;}
.main {flex: 1; margin-left: 220px; min-height: 100vh; overflow-x: hidden;}

/* 菜单 */
.menu-item {padding: 12px 24px; cursor: pointer; font-size: 14px; transition: all 0.3s; border-left: 3px solid transparent;}
.menu-item:hover {background: rgba(24,144,255,0.1); color: #1890ff;}
.menu-item.active {background: #1890ff; border-left-color: #fff;}

/* 头部 */
.header {height: 60px; background: #fff; border-bottom: 1px solid #e8e8e8; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50;}
.header span {font-size: 18px; font-weight: 600; color: #333;}

/* 内容区 */
.content {padding: 20px; max-width: 1400px; overflow-x: hidden;}

/* 移动端菜单 */
.menu-btn {display: none; background: #1890ff; color: #fff; padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer;}

/* 卡片 */
.card {background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);}
.card-title {font-size: 16px; font-weight: 600; margin-bottom: 15px; color: #333; border-left: 4px solid #1890ff; padding-left: 10px;}

/* 表格 */
table {width: 100%; border-collapse: collapse; font-size: 14px;}
th, td {border: 1px solid #f0f0f0; padding: 12px; text-align: left;}
th {background: #fafafa; font-weight: 600; color: #666;}
tr:hover {background: #f5f5f5;}

/* 按钮 */
.btn {padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; margin-right: 8px; margin-bottom: 8px; font-size: 14px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 4px;}
.btn:hover {opacity: 0.85; transform: translateY(-1px);}
.btn-primary {background: #1890ff; color: #fff;}
.btn-default {background: #fff; border: 1px solid #d9d9d9; color: #333;}
.btn-success {background: #52c41a; color: #fff;}
.btn-danger {background: #ff4d4f; color: #fff;}
.btn-warning {background: #faad14; color: #fff;}
.btn:disabled {opacity: 0.5; cursor: not-allowed; transform: none;}

/* 输入框 */
input, select, textarea {padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; transition: all 0.3s; width: 100%;}
input:focus, select:focus, textarea:focus {border-color: #1890ff; outline: none; box-shadow: 0 0 0 2px rgba(24,144,255,0.2);}
input[type="date"], input[type="datetime-local"] {width: auto;}
textarea {resize: vertical; min-height: 80px;}

/* 筛选栏 */
.filter-box {background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);}
.filter-row {display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; align-items: flex-end;}
.filter-item {flex: 1; min-width: 180px;}
.filter-item label {display: block; margin-bottom: 6px; font-size: 13px; color: #666; font-weight: 500;}

/* 状态标签 */
.tag {padding: 2px 10px; border-radius: 4px; font-size: 12px; display: inline-block; font-weight: 500;}
.tag-wait {background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591;}
.tag-run {background: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff;}
.tag-done {background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f;}
.tag-success {background: #f0f5ff; color: #2f54eb; border: 1px solid #adc6ff;}

/* 分页 */
.pagination {display: flex; justify-content: center; align-items: center; gap: 5px; margin: 20px 0; flex-wrap: wrap;}
.pagination-btn {padding: 6px 14px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; cursor: pointer; font-size: 14px; transition: all 0.3s;}
.pagination-btn:hover {border-color: #1890ff; color: #1890ff;}
.pagination-btn.active {background: #1890ff; color: #fff; border-color: #1890ff;}
.pagination-btn:disabled {cursor: not-allowed; opacity: 0.5;}

/* 看板卡片 */
.card-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 20px;}
.card-item {background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.3s; border: 1px solid transparent;}
.card-item:hover {box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: #1890ff; transform: translateY(-2px);}
.card-item .title {font-weight: 600; font-size: 16px; margin-bottom: 12px; color: #1890ff;}
.card-item p {line-height: 1.8; font-size: 13px; color: #666;}
.card-item p strong {color: #333; font-weight: 500;}
.card-item .meta {display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f0f0;}
.card-item .meta .amount {font-size: 18px; font-weight: 700; color: #ff4d4f;}
.card-item .meta .profit {font-size: 14px; color: #52c41a; font-weight: 600;}

/* 月份分组 */
.month-group {margin-bottom: 30px;}
.month-group h3 {font-size: 18px; color: #333; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #1890ff; display: inline-block;}

/* 模态框 */
.modal-overlay {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); overflow-y: auto;}
.modal-content {background-color: white; margin: 50px auto; padding: 0; width: 90%; max-width: 700px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); max-height: 90vh; overflow-y: auto;}
.modal-header {padding: 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;}
.modal-header h3 {font-size: 18px; font-weight: 600; margin: 0;}
.modal-close {font-size: 24px; color: #999; cursor: pointer; line-height: 1;}
.modal-close:hover {color: #333;}
.modal-body {padding: 20px;}
.modal-footer {padding: 15px 20px; border-top: 1px solid #f0f0f0; text-align: right; background: #fafafa; border-radius: 0 0 8px 8px;}

/* 表单 */
.form-group {margin-bottom: 16px;}
.form-group label {display: block; margin-bottom: 6px; font-size: 14px; color: #333; font-weight: 500;}
.form-group .required::after {content: ' *'; color: #ff4d4f;}
.form-row {display: flex; gap: 15px;}
.form-row .form-group {flex: 1;}

/* 联系人字段 */
.contact-field {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 12px; background: #fafafa; border-radius: 6px; align-items: center;}
.contact-field input {margin-bottom: 0; flex: 1; min-width: 120px;}
.contact-field label {display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666; white-space: nowrap;}

/* 流程步骤 */
.flow-steps {display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap;}
.flow-step {flex: 1; min-width: 100px; text-align: center; padding: 15px 10px; border-radius: 8px; background: #fafafa; border: 2px solid #f0f0f0; position: relative;}
.flow-step.active {background: #e6f7ff; border-color: #1890ff;}
.flow-step.completed {background: #f6ffed; border-color: #52c41a;}
.flow-step .step-num {width: 28px; height: 28px; border-radius: 50%; background: #d9d9d9; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; margin-bottom: 8px;}
.flow-step.active .step-num {background: #1890ff;}
.flow-step.completed .step-num {background: #52c41a;}
.flow-step .step-title {font-size: 13px; font-weight: 500; color: #333;}
.flow-step .step-time {font-size: 11px; color: #999; margin-top: 4px;}

/* 文件列表 */
.file-list {display: flex; flex-direction: column; gap: 8px;}
.file-item {display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: #fafafa; border-radius: 6px; border: 1px solid #f0f0f0;}
.file-item .file-info {display: flex; align-items: center; gap: 10px; flex: 1;}
.file-item .file-name {font-size: 14px; color: #333;}
.file-item .file-meta {font-size: 12px; color: #999;}
.file-item .file-actions {display: flex; gap: 5px;}

/* 财务卡片 */
.finance-card {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px;}
.finance-card .finance-row {display: flex; justify-content: space-around; text-align: center;}
.finance-card .finance-item .label {font-size: 13px; opacity: 0.9; margin-bottom: 8px;}
.finance-card .finance-item .value {font-size: 24px; font-weight: 700;}

/* 统计面板 */
.stat-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;}
.stat-card {background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center;}
.stat-card .stat-value {font-size: 28px; font-weight: 700; color: #1890ff; margin-bottom: 8px;}
.stat-card .stat-label {font-size: 14px; color: #666;}

/* 报销列表 */
.reimbursement-item {display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: #fafafa; border-radius: 6px; margin-bottom: 8px; border: 1px solid #f0f0f0;}
.reimbursement-item .info {flex: 1;}
.reimbursement-item .amount {font-size: 16px; font-weight: 600; color: #ff4d4f; margin-right: 15px;}

/* 登录页 */
.login-box {max-width: 400px; margin: 100px auto; padding: 40px; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08);}
.login-box h2 {text-align: center; margin-bottom: 30px; color: #1890ff; font-size: 24px;}
.login-input {width: 100%; margin-bottom: 20px; padding: 12px; font-size: 15px;}
.login-btn {width: 100%; margin-top: 10px; padding: 12px; font-size: 16px;}

/* 空状态 */
.empty-state {text-align: center; padding: 60px 20px; color: #999;}
.empty-state .icon {font-size: 48px; margin-bottom: 15px;}

/* 隐藏 */
.hide {display: none !important;}

/* 移动端适配 */
@media (max-width: 768px) {
    html, body { width: 100%; max-width: 100vw; overflow-x: hidden; overscroll-behavior-x: none; }
    .layout { overflow-x: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
    .main { margin-left: 0; overflow-x: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
    .content { padding: 8px 6px; overflow-x: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
    .sidebar {display: none; width: 220px;}
    .menu-btn {display: block;}
    .card-list {grid-template-columns: 1fr;}
    .filter-row {flex-direction: column; gap: 10px;}
    .filter-item {min-width: 100%;}
    .form-row {flex-direction: column;}
    .flow-steps {flex-direction: column;}
    .finance-card .finance-row {flex-direction: column; gap: 15px;}
    .stat-grid {grid-template-columns: repeat(2, 1fr);}
    .modal-content {width: 95%; margin: 20px auto;}
    .header {padding: 0 15px;}
    .header span {font-size: 16px;}
    th, td {padding: 8px; font-size: 13px;}
    .btn {padding: 6px 12px; font-size: 13px;}
}

/* 打印样式 */
@media print {
    .sidebar, .header, .menu-btn, .pagination, .btn {display: none !important;}
    .main {margin-left: 0;}
    .card {box-shadow: none; border: 1px solid #ddd;}
}

.scope-select {padding: 4px 8px; font-size: 13px; border: 1px solid #d9d9d9; border-radius: 4px;}
/* 权限矩阵复选框绿色样式 */
.perm-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #52c41a;
}
.perm-check:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.perm-check:checked {
    accent-color: #52c41a;
}
.perm-tip {font-size: 13px; color: #999; margin-left: 10px;}
.perm-table th, .perm-table td {text-align: center;}
.perm-table td:first-child, .perm-table th:first-child {text-align: left;}