/* ═══════════════════════════════════════════════════════════
   协同办公系统 — 公共样式表 (shared by index.html & contracts/)
   Version: v1.0 | 2026-06-26
   ═══════════════════════════════════════════════════════════ */

/* ===== 1. CSS Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ===== 2. 设计令牌 (Design Tokens) ===== */
:root{
  /* 主色系 */
  --primary-50:#EFF6FF;--primary-100:#DBEAFE;--primary-200:#BFDBFE;--primary-300:#93C5FD;
  --primary-400:#60A5FA;--primary-500:#3B82F6;--primary-600:#2563EB;--primary-700:#1D4ED8;
  --c1:var(--primary-600);--c2:var(--primary-700);--cl:var(--primary-100);

  /* 语义色 */
  --success:#059669;--warning:#D97706;--error:#DC2626;--info:var(--primary-600);
  --success-light:#D1FAE5;--warning-light:#FEF3C7;--error-light:#FEE2E2;--info-light:var(--primary-100);

  /* 中性色 */
  --gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;
  --gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;
  --gray-800:#1F2937;--gray-900:#111827;
  --bg:var(--gray-50);--w:#fff;--b:var(--gray-200);--t:var(--gray-900);--ts:var(--gray-600);

  /* 间距系统 (4px基准) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;

  /* 圆角系统 */
  --radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;

  /* 阴影系统 */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);

  /* 过渡动画 */
  --transition-fast:150ms cubic-bezier(.4,0,.2,1);
  --transition-normal:300ms cubic-bezier(.4,0,.2,1);
}

/* ===== 3. 基础排版 ===== */
body{
  font-family:"Microsoft YaHei UI","微软雅黑","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--t);min-height:100vh;font-size:15px;line-height:1.6;
}

/* ===== 4. 按钮系统 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);border:none;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all var(--transition-fast);white-space:nowrap;line-height:1.5;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary-600);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--primary-700);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#047857}
.btn-danger{background:var(--error);color:#fff}
.btn-danger:hover{background:#B91C1C}
.btn-outline{background:transparent;color:var(--primary-600);border:1.5px solid var(--primary-200)}
.btn-outline:hover{background:var(--primary-50);border-color:var(--primary-600)}
.btn-sm{padding:var(--sp-1) var(--sp-3);font-size:13px;border-radius:var(--radius-sm)}
.btn-lg{padding:var(--sp-3) var(--sp-6);font-size:15px}

/* ===== 5. 标签系统 (Status Tags) ===== */
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:700}
.tag-success{background:var(--success-light);color:var(--success)}
.tag-warning{background:var(--warning-light);color:var(--warning)}
.tag-danger{background:var(--error-light);color:var(--error)}
.tag-info{background:var(--info-light);color:var(--info)}
.tag-default,.tag-pending{background:var(--gray-100);color:var(--gray-600)}
.tag-partial{background:var(--warning-light);color:var(--warning)}
.amount{
  font-weight:700;color:var(--primary-700);
  font-variant-numeric:tabular-nums;
}

/* ===== 6. 弹窗系统 ===== */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);z-index:999;align-items:center;justify-content:center;padding:var(--sp-4);
}
.modal-overlay.show{display:flex}
.modal-box{
  background:var(--w);border-radius:var(--radius-xl);width:760px;max-width:95vw;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 25px 50px rgba(0,0,0,.25);animation:modalIn .25s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--sp-5) var(--sp-6);border-bottom:2px solid var(--primary-200);
}
.modal-header h3{font-size:18px;font-weight:900;color:var(--primary-700)}
.modal-close{
  width:32px;height:32px;border:none;background:var(--gray-100);border-radius:50%;
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--gray-500);transition:all var(--transition-fast);
}
.modal-close:hover{background:var(--error);color:#fff}
.modal-body{padding:var(--sp-5) var(--sp-6)}
.modal-footer{
  display:flex;justify-content:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--gray-200);
}

/* ===== 7. 表单系统 ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-5)}
.form-group{display:flex;flex-direction:column;gap:var(--sp-1)}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:700;color:var(--gray-700)}
.form-group input,.form-group select,.form-group textarea{
  padding:var(--sp-2) var(--sp-3);border:1.5px solid var(--gray-300);
  border-radius:var(--radius-md);font-size:14px;font-family:inherit;outline:none;
  transition:all var(--transition-fast);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.form-group textarea{resize:vertical;min-height:60px}

/* ===== 8. 表格基础 ===== */
.table-wrap{
  background:var(--w);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);border:1px solid var(--gray-200);
}
.module-table{width:100%;border-collapse:separate;border-spacing:0}
.module-table th{
  text-align:left;font-size:13px;font-weight:700;color:var(--gray-600);
  padding:var(--sp-3) var(--sp-4);background:var(--gray-50);
  border-bottom:2px solid var(--primary-200);white-space:nowrap;position:sticky;top:0;z-index:5;
}
.module-table td{
  padding:var(--sp-2) var(--sp-4);font-size:14px;color:var(--gray-800);
  border-bottom:1px solid var(--gray-100);vertical-align:middle;
}
.module-table tbody tr{transition:background var(--transition-fast)}
.module-table tbody tr:hover{background:var(--primary-50)}
.empty-row td{text-align:center;padding:40px 20px;color:var(--gray-400);font-size:16px}

/* ===== 9. Toast 通知 ===== */
.toast-container{
  position:fixed;top:70px;right:20px;z-index:2000;
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.toast{
  padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-md);
  font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);
  animation:toastIn .3s ease;min-width:250px;
}
.toast-success{background:var(--success);color:#fff}
.toast-error{background:var(--error);color:#fff}
.toast-info{background:var(--primary-600);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}

/* ===== 10. 文件上传 ===== */
.file-upload-area{
  border:2px dashed var(--gray-300);border-radius:var(--radius-lg);
  padding:var(--sp-6);text-align:center;cursor:pointer;
  transition:all var(--transition-fast);background:var(--gray-50);
}
.file-upload-area:hover{border-color:var(--primary-400);background:var(--primary-50)}
.file-upload-area.has-file{border-style:solid;border-color:var(--success);background:var(--success-light)}

/* ===== 11. 内容区切换 ===== */
.module-content{display:none}
.module-content.active{display:block}