/* ====== CSS 变量 & 统一配色 ====== */
:root {
  --c-primary: #3370ff;
  --c-primary-hover: #2860e1;
  --c-primary-light: #f0f5ff;
  --c-success: #1b8551;
  --c-success-light: #e8f7ef;
  --c-warning: #d48806;
  --c-warning-light: #fffbe6;
  --c-danger: #f54a45;
  --c-danger-light: #fef0f0;
  --c-text: #1f2329;
  --c-text-secondary: #646a73;
  --c-text-hint: #8f959e;
  --c-border: #e5e6eb;
  --c-bg: #f5f6f7;
  --c-bg-card: #ffffff;
  --c-sidebar-bg: linear-gradient(160deg, #4096ff 0%, #1677ff 40%, #0958d9 100%);
  --c-sidebar-hover: rgba(255,255,255,0.10);
  --c-sidebar-active: rgba(255,255,255,0.18);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 12px rgba(0,0,0,0.08);
  --radius: 8px;
  --radius-lg:12px;
  --transition: 0.2s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 14px;
  min-height: 100vh;
}

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

/* 侧边栏 — 蓝色渐变背景（与登录页左侧一致） */
.sidebar {
  width: 220px;
  background: var(--c-sidebar-bg);
  color: rgba(255,255,255,0.70);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: width var(--transition);
  position: relative;
  z-index: 10;
}
.sidebar .sb-logo {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar .sb-logo span { color: #fff; opacity: 0.85; }
.sidebar .sb-nav { flex:1; padding: 12px 0; overflow-y:auto; }
.sidebar .sb-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  font-size: 13px;
  transition: all var(--transition);
  border-left: 3px solid transparent;
}
.sidebar .sb-nav a:hover { color:#fff; background:var(--c-sidebar-hover); }
.sidebar .sb-nav a.active {
  color: #fff;
  background: var(--c-sidebar-active);
  border-left-color: #fff;
}
.sidebar .sb-nav a .icon { font-size:16px; width:20px; text-align:center; }
.sidebar .sb-footer {
  padding: 12px 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* 主区域 */
.main-area { flex:1; display:flex; flex-direction:column; min-width:0; }

/* 顶栏 */
.topbar {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0;
}
.topbar .tb-title { font-size: 15px; font-weight: 500; color: var(--c-text); }

/* 电子时钟 */
.digital-clock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  margin-right: auto;
  padding: 4px 14px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.08);
}
.digital-clock .dc-date {
  font-size: 12px;
  color: #8ab4f8;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.digital-clock .dc-time {
  font-size: 18px;
  font-weight: 700;
  color: #4fc3f7;
  font-family: "SF Mono", "Consolas", "Monaco", "Courier New", monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(79,195,247,0.4);
}

.topbar .tb-right { display:flex; align-items:center; gap:14px; }
.topbar .tb-user { font-size:13px; color:var(--c-text-secondary); }
.topbar .tb-role {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.tb-role.super { background:var(--c-danger-light); color:var(--c-danger); }
.tb-role.operator { background:var(--c-primary-light); color:var(--c-primary); }
.tb-role.finance { background:var(--c-success-light); color:var(--c-success); }
.tb-role.agent { background:var(--c-warning-light); color:var(--c-warning); }
.tb-role.readonly { background:var(--c-bg); color:var(--c-text-hint); }

/* 内容区 */
.content { flex:1; padding: 24px; overflow-y:auto; }

/* ====== 卡片 ====== */
.ccard {
  background: var(--c-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.ccard .ccard-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ccard .ccard-title .badge {
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text-hint);
  background: var(--c-bg);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ====== 统计卡片网格 ====== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card .sc-label { font-size: 12px; color: var(--c-text-hint); margin-bottom: 6px; }
.stat-card .sc-value { font-size: 26px; font-weight: 700; color: var(--c-text); }
.stat-card .sc-hint { font-size: 11px; color: var(--c-text-hint); margin-top: 4px; }
.sc-blue .sc-value { color: var(--c-primary); }
.sc-green .sc-value { color: var(--c-success); }
.sc-orange .sc-value { color: var(--c-warning); }
.sc-red .sc-value { color: var(--c-danger); }

/* ====== 表格 ====== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-hint);
  background: #fafbfc;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f5f6f7;
}
.data-table tr:hover td { background: #fafbfc; }
.data-table .empty td { text-align: center; padding: 40px; color: var(--c-text-hint); font-size: 13px; }
.data-table tr.row-canceled td { color: #b0b0b0; text-decoration: line-through; }
.data-table tr.row-canceled:hover td { background: #fef0f0; }

/* ====== 状态标签 ====== */
.stag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.stag-pending  { background: #f0f0f0; color: var(--c-text-hint); }
.stag-claimed  { background: var(--c-success-light); color: var(--c-success); }
.stag-conflict { background: var(--c-danger-light); color: var(--c-danger); }
.stag-draft    { background: #f0f0f0; color: var(--c-text-hint); }
.stag-first_verify { background: var(--c-primary-light); color: var(--c-primary); }
.stag-second_verify{ background: var(--c-warning-light); color: var(--c-warning); }
.stag-settled  { background: var(--c-success-light); color: var(--c-success); }
.stag-closed   { background: #f0f0f0; color: var(--c-text-hint); }
.stag-warn     { background: var(--c-warning-light); color: var(--c-warning); }

/* ====== 按钮 ====== */
.btn {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.5;
}
.btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-hover); color: #fff; }
.btn-success { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.btn-success:hover { background: #156e42; color: #fff; }
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { background: #d9403b; color: #fff; }
.btn-warning { background: var(--c-warning); color: #fff; border-color: var(--c-warning); }
.btn-warning:hover { background: #b87305; color: #fff; }
.btn-secondary { background: #e8e9ec; color: var(--c-text); border-color: #d0d5dd; }
.btn-secondary:hover { background: #d0d1d6; color: var(--c-text); }
.btn-outline { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary-light); }
.btn-group { display:flex; gap:8px; flex-wrap:wrap; }

/* ====== 表单 ====== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--c-text); margin-bottom: 6px; }
.form-input, .form-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--transition);
  background: #fff;
}
.form-input:focus, .form-select:focus { border-color: var(--c-primary); }
.form-select { cursor:pointer; appearance:auto; }
textarea.form-input { height: auto; padding: 10px 12px; resize: vertical; min-height: 60px; }

/* ====== 快捷入口 ====== */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
}
.quick-card:hover { box-shadow: var(--shadow-md); border-color: var(--c-primary); }
.quick-card .qc-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.quick-card .qc-info { flex:1; }
.quick-card .qc-info .title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.quick-card .qc-info .sub { font-size: 12px; color: var(--c-text-hint); }
.quick-card .qc-arrow { color: var(--c-text-hint); font-size: 14px; }

/* ====== Toast ====== */
.toast {
  position: fixed;
  top: 20px; right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 3000;
  animation: toastIn 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.toast-success { background: var(--c-success-light); color: var(--c-success); border: 1px solid #a3d9b8; }
.toast-error { background: var(--c-danger-light); color: var(--c-danger); border: 1px solid #f5b7b5; }
.toast-info { background: var(--c-primary-light); color: var(--c-primary); border: 1px solid #a3c8ff; }
@keyframes toastIn { from { transform: translateX(100px); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ====== 弹窗 ====== */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 540px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.modal-box h3 { font-size: 15px; margin-bottom: 14px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }

/* ====== 确认弹窗（替代原生 confirm） ====== */
.confirm-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2100;
  justify-content: center;
  align-items: center;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  width: 400px;
  max-width: 85vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  animation: confirmIn 0.2s ease;
}
@keyframes confirmIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.confirm-box .confirm-msg {
  font-size: 14px; color: var(--c-text);
  line-height: 1.6; margin-bottom: 22px;
  word-break: break-word;
}
.confirm-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ====== 统计弹窗（校区维度） ====== */
.stats-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2050;
  justify-content: center;
  align-items: center;
}
.stats-overlay.show { display: flex; }
.stats-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 520px;
  max-width: 88vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  animation: statsIn 0.25s ease;
}
@keyframes statsIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.stats-box .stats-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}
.stats-box .stats-header h3 { font-size:16px; font-weight:600; margin:0; }
.stats-box .stats-header .btn-close-stats {
  width:28px; height:28px; border-radius:50%; border:none;
  background:#f0f0f0; color:var(--c-text-hint); font-size:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
  flex-shrink: 0;
}
.stats-box .stats-header .btn-close-stats:hover { background:var(--c-danger-light); color:var(--c-danger); }

/* 统计总览行 */
.stats-summary {
  display: flex; gap:10px; margin-bottom:16px;
}
.stats-summary-item {
  flex:1; background:var(--c-bg); border-radius:var(--radius);
  padding:12px 8px; text-align:center; min-width:0;
}
.stats-summary-item .ssi-label { font-size:11px; color:var(--c-text-hint); margin-bottom:2px; white-space:nowrap; }
.stats-summary-item .ssi-value { font-size:22px; font-weight:700; }
.stats-summary-item.ssi-blue .ssi-value { color:var(--c-primary); }
.stats-summary-item.ssi-green .ssi-value { color:var(--c-success); }
.stats-summary-item.ssi-orange .ssi-value { color:var(--c-warning); }

/* 统计表格 */
.stats-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.stats-table th {
  text-align:left; padding:8px 10px; font-size:12px; font-weight:500;
  color:var(--c-text-hint); background:#fafbfc; border-bottom:2px solid var(--c-border);
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stats-table td {
  padding:7px 10px; font-size:13px; border-bottom:1px solid #f5f6f7;
  white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stats-table th:first-child,
.stats-table td:first-child { width:36%; }
.stats-table th:nth-child(2),
.stats-table td:nth-child(2) { width:21%; text-align:center; }
.stats-table th:nth-child(3),
.stats-table td:nth-child(3) { width:21%; text-align:center; }
.stats-table th:nth-child(4),
.stats-table td:nth-child-child(4) { width:22%; text-align:center; }
.stats-table tr:hover td { background:#fafbfc; }
.stats-table .num { font-weight:600; color:var(--c-primary); }
.stats-table .num-green { color:var(--c-success); font-weight:600; }
.stats-table .num-orange { color:var(--c-warning); font-weight:600; }

/* ====== 空状态 / 加载 ====== */
.empty-state { text-align:center; padding:40px; color:var(--c-text-hint); font-size:13px; }

/* 加载动画 — CodeBuddy 同款渐变旋转圈 */
.loading-overlay {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 0; min-height: 200px;
}
.loading-spinner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* 渐变旋转圆圈 */
.spinner-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(22,119,255,0.12);
  border-top: 3px solid #1677ff;
  border-right: 3px solid #4096ff;
  animation: spin 0.8s cubic-bezier(0.4,0,0.2,1) infinite;
  will-change: transform;
}
/* 三个脉冲圆点（CodeBuddy 风格） */
.spinner-dots {
  display: flex; align-items: center; gap: 6px; height: 36px;
}
.spinner-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #1677ff, #4096ff);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.spinner-dots .dot:nth-child(2) { animation-delay: 0.15s; }
.spinner-dots .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.loading-text {
  font-size: 13px; color: var(--c-text-hint); letter-spacing: 0.5px;
}

/* ====== Layui 表格覆盖 ====== */
.layui-table-cell { padding: 10px 14px !important; font-size:13px !important; }
.layui-table thead tr { background: #fafbfc !important; }
.layui-table thead th { font-weight:500 !important; color:var(--c-text-hint) !important; font-size:12px !important; }
.layui-table tbody tr:hover { background: #fafbfc !important; }

/* ====== 登录页专用 ====== */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 36px;
  width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.login-card h1 { text-align:center; font-size:20px; margin-bottom:6px; }
.login-card .subtitle { text-align:center; font-size:13px; color:var(--c-text-hint); margin-bottom:24px; }

/* ====== 结算流水线进度条 ====== */
.pipeline-bar {
  display: flex; align-items: center; gap: 20px;
  background: var(--c-bg-card);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.pipeline-bar .pl-welcome {
  font-size: 17px; font-weight: 700;
  white-space: nowrap;
  color: var(--c-text);
}
.pipeline-bar .pl-steps {
  display: flex; align-items: center;
  flex: 1; min-width: 400px;
}
.pipeline-bar .pl-step {
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.pl-node {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
/* 完成态 — 锁死 */
.pl-step.done .pl-node {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 1px 6px rgba(51,112,255,0.35);
}
.pl-step.done .pl-label { color: var(--c-primary); font-weight: 600; }
/* 进行中 */
.pl-step.active .pl-node {
  border: 2.5px solid var(--c-primary);
  color: var(--c-primary);
  background: #fff;
  animation: plPulse 1.6s ease-in-out infinite;
}
.pl-step.active .pl-label { color: var(--c-text); font-weight: 600; }
/* 等待中 */
.pl-step.pending .pl-node {
  border: 2px solid var(--c-border);
  color: var(--c-text-hint);
  background: #fff;
}
.pl-step.pending .pl-label { color: var(--c-text-hint); font-size: 11px; }
.pl-label { font-size: 12px; white-space: nowrap; }
/* 连线 */
.pl-line {
  flex: 1; height: 2px; min-width: 20px;
  max-width: 50px;
  margin: 0 3px;
  border-radius: 1px;
  background: var(--c-border);
  transition: background 0.3s;
}
.pl-line.done { background: var(--c-primary); }

@keyframes plPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(51,112,255,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(51,112,255,0); }
}

/* ====== 响应式 ====== */
@media (max-width: 768px) {
  .sidebar { width: 60px; }
  .sidebar .sb-logo { padding: 0 10px; font-size: 0; }
  .sidebar .sb-nav a { padding: 10px 14px; font-size: 0; gap: 0; }
  .sidebar .sb-nav a .icon { font-size: 18px; width: auto; }
  .sidebar .sb-footer { display: none; }
  .content { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}