:root {
  --app-bg: #f5f7fa;
  --app-border: #d9e1ea;
  --app-text: #1f2937;
  --app-muted: #667085;
  --app-primary: #2152a3;
  --app-primary-dark: #193f7c;
  --app-accent: #0f766e;
  --app-surface: #ffffff;
  --app-warning-bg: #fff7df;
  --app-danger-bg: #fff1f2;
}

body {
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 15px;
}

.navbar {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
}

.navbar.bg-primary {
  background: var(--app-primary-dark) !important;
}

.navbar-brand {
  font-weight: 700;
}

.nav-link {
  border-radius: 6px;
  margin-right: 2px;
}

.nav-link:hover,
.nav-link:focus {
  background: rgba(255, 255, 255, 0.12);
}

.app-shell {
  max-width: 1280px;
}

.page-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.page-heading h1,
.page-heading h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
}

.page-kicker {
  color: var(--app-muted);
  font-size: 0.88rem;
  margin-top: 3px;
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.surface {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

.surface-pad {
  padding: 16px;
}

.metric-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.metric-title {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  align-items: center;
  background: #eef3f8;
  border: 1px solid #d8e3ee;
  border-radius: 999px;
  color: #24364b;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 28px;
  padding: 4px 10px;
}

.chip-accent {
  background: #e8f5f3;
  border-color: #b9ded8;
  color: #0f5d56;
}

.request-group + .request-group {
  border-top: 1px solid #eef2f6;
  margin-top: 12px;
  padding-top: 12px;
}

.request-group-title {
  color: #344054;
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.management-row + .management-row {
  border-top: 1px solid #eef2f6;
  margin-top: 10px;
  padding-top: 10px;
}

.management-name {
  font-weight: 700;
}

.management-email {
  color: var(--app-muted);
  font-size: 0.82rem;
}

.table-panel {
  overflow-x: auto;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  background: #eef3f8;
  border-bottom: 1px solid var(--app-border);
  color: #3d4f64;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.table tbody td {
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background: #f8fbff;
}

.filter-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.form-panel {
  max-width: 920px;
}

.form-section-title {
  border-bottom: 1px solid var(--app-border);
  color: #344054;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 4px 0 16px;
  padding-bottom: 8px;
}

.form-control,
.form-select {
  border-color: #cfd8e3;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.2rem rgba(33, 82, 163, 0.14);
}

.btn {
  border-radius: 6px;
  font-weight: 600;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out, transform 120ms ease-out;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--app-primary);
  border-color: var(--app-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--app-primary-dark);
  border-color: var(--app-primary-dark);
}

.badge {
  border-radius: 999px;
  font-weight: 600;
}

.empty-row {
  color: var(--app-muted);
  padding: 32px !important;
  text-align: center;
}

.ai-progress {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
}

.ai-progress-pie {
  --progress: 5;
  align-items: center;
  background: conic-gradient(var(--app-primary) calc(var(--progress) * 1%), #dfe6ef 0);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 58px;
  height: 58px;
  justify-content: center;
  position: relative;
  width: 58px;
}

.ai-progress-pie::after {
  background: var(--app-surface);
  border-radius: 50%;
  content: "";
  inset: 7px;
  position: absolute;
}

.ai-progress-pie.is-indeterminate {
  background: #dfe6ef;
}

.ai-progress-pie.is-indeterminate::before {
  animation: ai-progress-spin 900ms linear infinite;
  background: conic-gradient(var(--app-primary) 0 28%, transparent 28% 100%);
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

.ai-progress-value {
  color: var(--app-primary-dark);
  font-size: 0.76rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.ai-progress-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.ai-progress-label {
  color: var(--app-muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

@keyframes ai-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: background-color 160ms ease-out, border-color 160ms ease-out;
  }

  .btn:active {
    transform: none;
  }

  .ai-progress-pie.is-indeterminate::before {
    animation: none;
  }
}

@media (max-width: 991.98px) {
  .page-heading {
    display: block;
  }

  .action-bar {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }
}


/* ── shipment tracking v2(订单发货到货进度 · 直线流程图) ── */
.shipment-panel .card-header {
  background: #eef3f8;
}

.shipment-form {
  margin: 0;
}

/* 横向滚动容器:窄屏不折行,整体横滚 */
.st-scroll {
  overflow-x: auto;
  padding: 20px 4px 10px;
}

/* 轨道:严格单行,5 个主节点串在一条水平直线上 */
.st-track {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.st-slot {
  flex: 0 0 auto;
  position: relative;
  width: 170px;
}

.st-slot-wide {
  width: 480px;
}

/* 主节点盒:圆点在最上方,所有主节点圆点中心处于同一 y 坐标 */
.st-main {
  padding: 0 12px;
  position: relative;
  text-align: center;
  width: 170px;
}

.st-slot-wide .st-main {
  margin: 0 auto;
}

/* 直线:每个主节点自绘左右两段,边界相接形成一条不间断直线(圆点中心 y=8) */
.st-main::before,
.st-main::after {
  border-top: 2px solid #c6d2df;
  content: "";
  position: absolute;
  top: 7px;
}

.st-main::before {
  left: 0;
  right: 50%;
}

.st-main::after {
  left: 50%;
  right: 0;
}

/* 宽槽(节点 1):节点盒居中,出线从节点盒右缘延伸到槽右缘 */
.st-slot-wide::after {
  border-top: 2px solid #c6d2df;
  content: "";
  left: calc(50% + 85px);
  position: absolute;
  right: 0;
  top: 7px;
}

/* 首节点无入线,末节点无出线 */
.st-slot-wide > .st-main::before,
.st-slot:last-child > .st-main::after {
  display: none;
}

/* 进度着色:节点完成时,其入线变绿(主线呈渐进填色效果) */
.st-main.st-done::before,
.st-main.st-done::after {
  border-top-color: var(--app-accent);
}

.st-slot-wide:has(> .st-main.st-done)::after {
  border-top-color: var(--app-accent);
}

/* 圆点标记:已完成绿底白勾 / 进行中蓝 / 未开始灰空心 */
.st-dot {
  background: #ffffff;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  line-height: 12px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 16px;
  z-index: 1;
}

.st-dot-sm {
  font-size: 8px;
  height: 13px;
  line-height: 9px;
  width: 13px;
}

.st-dot-done {
  background: var(--app-accent);
  border-color: var(--app-accent);
}

.st-dot-planned {
  background: #dbe7f7;
  border-color: var(--app-primary);
}

.st-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 6px 0 8px;
  min-height: 2.2em;
}

/* 并联分支:节点 1 下方 stub → 横向母线 → 三条等长平行竖直分支 */
.st-tree {
  margin-top: 10px;
}

.st-stub {
  background: #c6d2df;
  height: 12px;
  margin: 0 auto;
  width: 2px;
}

.st-kids {
  display: flex;
  flex-wrap: nowrap;
}

.st-kid {
  flex: 1 1 0;
  padding-top: 14px;
  position: relative;
}

/* 母线:每个分支画一段,首分支只画右半、末分支只画左半,拼成一条水平母线 */
.st-kid::before {
  border-top: 2px solid #c6d2df;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.st-kid:first-child::before {
  left: 50%;
}

.st-kid:last-child::before {
  right: 50%;
}

/* 竖直分支线:三条等长、平行 */
.st-drop {
  background: #c6d2df;
  height: 14px;
  left: 50%;
  margin-left: -1px;
  position: absolute;
  top: 0;
  width: 2px;
}

.st-kid:has(.st-sub.st-done) .st-drop,
.st-kid:has(.st-sub.st-done)::before {
  border-top-color: var(--app-accent);
}

.st-kid:has(.st-sub.st-done) .st-drop {
  background: var(--app-accent);
}

.st-sub {
  padding: 0 8px;
  position: relative;
  text-align: center;
  width: 148px;
  margin: 0 auto;
}

.st-sub .st-name {
  font-size: 0.78rem;
}

.st-sub-progress {
  color: var(--app-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 8px;
}

/* 日期:只读文本 / 编辑输入框 */
.st-dates {
  color: var(--app-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.st-date-caption {
  font-weight: 600;
}

.st-date-val {
  white-space: nowrap;
}

.st-sub .st-dates {
  font-size: 0.72rem;
}

.st-date-label {
  color: var(--app-muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: left;
}

.st-date-label .form-control {
  font-size: 0.8rem;
  margin-top: 2px;
}

/* 图例 */
.st-legend {
  color: var(--app-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 14px;
  margin-top: 12px;
}

.st-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.st-legend-dot {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.st-legend-dot.st-legend-done {
  background: var(--app-accent);
}

.st-legend-dot.st-legend-planned {
  background: #dbe7f7;
  border: 2px solid var(--app-primary);
}

.st-legend-dot.st-legend-todo {
  background: #ffffff;
  border: 2px solid #94a3b8;
}

/* invoice-check:Invoice 采购信息 AI 核对 */
.invoice-check-card .invoice-check-side-title { font-weight: 600; margin-bottom: .25rem; }
tr.invoice-check-row-quantity_mismatch > td,
tr.invoice-check-row-code_mismatch > td { background-color: #fff8e1; }
tr.invoice-check-row-missing_in_invoice > td,
tr.invoice-check-row-not_in_request > td { background-color: #fdecea; }
.invoice-check-badge { display: inline-block; padding: .15em .55em; border-radius: .5rem; font-size: .75rem; font-weight: 600; }
.invoice-check-badge-ok { background: #e6f4ea; color: #1e7e34; }
.invoice-check-badge-quantity_mismatch,
.invoice-check-badge-code_mismatch { background: #fff3cd; color: #8a6d00; }
.invoice-check-badge-missing_in_invoice,
.invoice-check-badge-not_in_request { background: #f8d7da; color: #a12622; }
.invoice-check-conclusion { margin-top: .75rem; padding: .6rem .8rem; background: #f6f8fa; border-radius: .4rem; }

/* Multi-file request attachments */
.attachment-picker {
  align-items: stretch;
}

.multi-file-picker {
  min-height: 54px;
  padding-bottom: 12px;
  padding-top: 12px;
}

.attachment-file-summary {
  border: 1px solid #d5dce5;
  border-radius: 6px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
}

.attachment-file-count {
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.attachment-file-row {
  align-items: center;
  border-top: 1px solid #edf0f4;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 38px;
  padding: 6px 2px;
}

.attachment-file-details {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.attachment-file-name {
  overflow-wrap: anywhere;
}

.attachment-file-size {
  color: #64748b;
  flex: 0 0 auto;
  font-size: 0.8rem;
}