/*
 * 待开发业务（roadmap）专用样式。
 *
 * 覆盖两类东西：
 *   1. 左侧导航二级菜单上的「待开发」小标签（.subnav-tag）；
 *   2. 海关数据 / 客户图谱 两个占位说明页（.roadmap-*）。
 *
 * 按项目约定：新增页面样式一律独立成文件 + 统一前缀，不往 styles.css 里加。
 * 主界面是浅色主题（styles.css 的 :root 里 color-scheme: light、
 * --bg #f4f7fb / --surface #ffffff），所以这里一律浅底深字；
 * 只有左侧导航是深色底（--sidebar #102a43），标签要浅字。
 */

/* ============ 1. 左侧导航：二级菜单的「待开发」标签 ============ */

/* 只有带 comingSoon 的条目才变 flex 布局，其余条目的排版完全不受影响 */
.subnav-item.is-coming-soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.subnav-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subnav-tag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid rgba(147, 171, 196, 0.5);
  border-radius: 999px;
  color: #b6c6d9;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* 悬停 / 选中时二级菜单文字会变白，标签保持自身配色即可，不必跟随 */

/* ============ 2. 占位说明页 ============ */

/* 工具栏右侧的「待开发业务」状态标签：用琥珀色与可用的蓝色 status-pill 区分开 */
.roadmap-pill {
  border-color: rgba(197, 106, 32, 0.26);
  background: #fdf1e4;
  color: #a95a19;
}

.roadmap-panel {
  display: grid;
  gap: 18px;
  margin-bottom: 16px;
}

/* 顶部提示条：左侧一条琥珀色竖线，明确「这里没东西可用」 */
.roadmap-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #f0dcbe;
  border-left: 4px solid #d9932f;
  border-radius: var(--radius);
  background: #fffaf2;
}

.roadmap-banner h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--text);
}

.roadmap-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.roadmap-banner-tag {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: #d9932f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  white-space: nowrap;
}

/* 三栏卡片：规划能力 / 待接入数据源 / 当前可用 */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.roadmap-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.roadmap-card h4 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 13px;
}

.roadmap-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.roadmap-list li + li {
  margin-top: 4px;
}

.roadmap-list strong {
  color: var(--text);
}

.roadmap-footnote {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: #8494a8;
  font-size: 12px;
}

.roadmap-footnote code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}

/* 窄屏（原型界面本身按 min-width 1180px 设计，这里只在更窄时兜底） */
@media (max-width: 1180px) {
  .roadmap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}