/* 门店全景与工地档案夹视觉层：数据大字卡、工程卡、大阶段进度条、主按钮层级。 */

.panorama {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.panorama__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.metric-card__label {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.metric-card__value {
  font-size: var(--text-number);
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.2;
}

.metric-card__hint {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.metric-card--warning .metric-card__value {
  color: var(--color-warning);
}

.metric-card--danger .metric-card__value {
  color: var(--color-danger);
}

.panorama__section-title {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--color-text);
  margin: 0;
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
}

.project-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-panel);
}

.project-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.project-card__title {
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--color-text);
  margin: 0;
}

.project-card__meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.project-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.project-card__stage {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0;
}

.project-card__today {
  font-size: var(--text-xs);
  color: var(--color-operational);
  margin: 0;
  font-weight: 650;
}

.project-card__badge {
  font-size: var(--text-xs);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

.project-card__badge--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.project-card__badge--warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

/* 大阶段进度条：完成=绿、当前=品牌色、未到=灰 */
.stage-progress {
  display: flex;
  gap: 3px;
  align-items: center;
}

.stage-progress__segment {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--progress-todo);
}

.stage-progress__segment--done {
  background: var(--progress-done);
}

.stage-progress__segment--current {
  background: var(--progress-current);
}

.stage-progress__segment--current-soft {
  background: var(--progress-current);
  opacity: 0.35;
}

.stage-progress__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.stage-progress__labels .is-current {
  color: var(--color-accent-strong);
  font-weight: 650;
}

/* 主按钮层级：每屏一个实心主按钮，其余用文字按钮 */
.button--primary-action {
  background: var(--color-operational);
  border-color: var(--color-operational);
  color: #ffffff;
  font-weight: 650;
}

.button--primary-action:hover {
  background: var(--color-operational-strong);
  border-color: var(--color-operational-strong);
}

/* 表单分组卡片 */
.form-group-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-group-card__title {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--color-muted);
  margin: 0;
}

/* 移动端中间主按钮（随手记） */
.mobile-navigation__fab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--color-operational);
  color: #ffffff;
  font-size: var(--text-md);
  font-weight: 650;
  text-decoration: none;
  box-shadow: var(--shadow-floating);
  border: none;
}

.mobile-navigation__fab:hover {
  background: var(--color-operational-strong);
}

/* 横屏或桌面全屏同样保留随手记入口，避免只依赖移动端底栏。 */
.quick-capture-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--layer-sticky);
  display: flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-operational);
  color: #ffffff;
  font-size: var(--text-md);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-floating);
}

.quick-capture-fab:hover,
.quick-capture-fab:focus-visible {
  background: var(--color-operational-strong);
}

@media (max-width: 720px) {
  .metric-card__value {
    font-size: var(--text-number);
  }

  .project-card {
    padding: var(--space-3) var(--space-4);
  }
}