/* css/layout.css — 布局层（自 style.css 逐值迁移，R1 模块化重构）
 * 承接：应用骨架（.app/.sidebar/.main/.content）/ 侧边栏 / topbar 页面工具条 */

/* ---------------- 应用骨架（契约 §2.1） ---------------- */

/* mobile-fix 3①：移动端侧边栏抽屉入口/遮罩——desktop 恒隐藏（<768px 分支展开行为） */
.sidebar-toggle, .sidebar-overlay { display: none; }

.app { display: flex; height: 100%; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border);
  min-height: 0;
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* #130：应用级固定右栏（第三列）——原主视图右侧工具栏三块迁入；固定宽不随内容
 * 挤压、自身纵向滚动（内容不进 #content 滚动流）；<1024px 隐藏（窄屏黑板全宽） */
.right-panel {
  width: 300px;
  flex: none;
  border-left: 1px solid var(--color-border);
  background: var(--color-sidebar);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  min-height: 0;
}

@media (max-width: 1023px) {
  .right-panel { display: none; }
}

/* content 为唯一滚动容器（契约 §2.1） */
.content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

/* ---------------- 侧边栏（契约 §2.1 / §5.3；v3 D4：项目列表 → 项目信息区） ---------------- */

.brand {
  display: flex; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  flex-shrink: 0;
}

/* 品牌图：柴犬 logo 32px（img 覆盖原 SVG 图标；圆角复用令牌 --radius-md） */
.brand-logo {
  display: block; flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
}

.brand-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

.view-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--spacing-xs); flex-shrink: 0; }

/* 视图导航项：图标 16px + 文字 13px，高 44px（契约 §5.3） */
.nav-item {
  display: flex; align-items: center; gap: var(--spacing-sm);
  height: 44px; padding-left: var(--spacing-sm);
  background: none; border: none; border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base); color: var(--color-text);
  cursor: pointer; text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}

.nav-item:hover { background: var(--color-sidebar-hover); }

/* active 态：左 3px accent 竖条 + 灰蓝浅底 + 深文字（契约 §5.3） */
.nav-item.active {
  background: var(--color-sidebar-active);
  border-left-color: var(--color-accent);
  color: #2E3B47;
}

.nav-icon { display: inline-flex; flex-shrink: 0; }

/* 项目信息区分组（v3 §6.3，复用原项目分组容器） */
.project-section {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; margin-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
}

.project-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--spacing-md) var(--spacing-xs);
  flex-shrink: 0;
}

.project-head-label {
  font-size: var(--font-size-sm); color: var(--color-text-weak);
}

/* 信息区自身滚动（契约 §2.1：侧边栏自身不滚动） */
.project-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 0 var(--spacing-xs); }

/* D4 项目信息行（v3 §6.3：名称/版本/文档行，纯只读） */
.info-name {
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.info-version {
  padding: var(--spacing-xxs) var(--spacing-xs) 0;
  font-size: var(--font-size-sm); color: var(--color-text-weak);
}

.info-version .mono { font-family: var(--font-mono); }

.info-doc-head {
  margin: var(--spacing-sm) var(--spacing-xs) var(--spacing-xxs);
  font-size: var(--font-size-xs); color: var(--color-text-weak);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-xs);
}

.info-doc-row {
  display: flex; align-items: center; gap: var(--spacing-xs);
  width: 100%; height: 28px; padding: 0 var(--spacing-xs);
  background: none; border: none; border-radius: var(--radius-sm);
  font-size: var(--font-size-sm); color: var(--color-text);
  cursor: pointer; text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}

.info-doc-row:hover { background: var(--color-sidebar-hover); }

.info-doc-kind {
  flex-shrink: 0;
  font-size: var(--font-size-xs); line-height: 18px;
  padding: 1px var(--spacing-xs); border-radius: var(--radius-sm);
  background: var(--color-lane); color: var(--color-text);
}

.info-doc-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--font-size-xs);
}

.info-doc-time { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-weak); flex-shrink: 0; }

/* ---------------- R2 项目配置区（侧边栏项目信息下方折叠区块；project-config.js） ---------------- */

/* 独立于 .project-section（relay 下后者整体隐藏，本区显示降级占位）；
 * flex-shrink:0 + max-height 限高自身滚动，不挤占 project-scroll 弹性空间 */
.config-section {
  flex-shrink: 0; display: flex; flex-direction: column;
  max-height: 45%; min-height: 0;
  margin-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
}

/* 折叠头（沿 detail-section-toggle 折叠交互模式：collapsed 态 + aria-expanded） */
.config-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--spacing-xxs) var(--spacing-xs);
  background: none; border: none; border-radius: var(--radius-sm);
  font-size: var(--font-size-sm); color: var(--color-text-weak);
  cursor: pointer; text-align: left;
  transition: background var(--duration-fast) var(--ease-out);
}

.config-toggle:hover { background: var(--color-sidebar-hover); color: var(--color-text); }

/* chevron 收起态旋转向右（展开 ▾ / 收起 ›） */
.config-chevron { flex-shrink: 0; font-size: var(--font-size-xs); transition: transform var(--duration-fast) var(--ease-out); }

.config-block.collapsed .config-chevron { transform: rotate(-90deg); }

/* 展开体（自身滚动） */
.config-body { overflow-y: auto; min-height: 0; padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xs); }

.config-block.collapsed .config-body { display: none; }

/* relay 降级占位说明（R2 阶段无云端数据通道，R5 前只读占位） */
.config-relay-note {
  margin: var(--spacing-xs) 0; padding: var(--spacing-sm);
  background: var(--color-lane); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-text-weak); line-height: 1.5;
}

/* 标签页（环境变量 / 部署目标） */
.config-tabs {
  display: flex; gap: var(--spacing-xxs);
  margin-bottom: var(--spacing-xs);
}

.config-tab {
  flex: 1; height: 26px;
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-text-weak);
  cursor: pointer; white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}

.config-tab.active { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-text); }

/* 工具栏（新增/保存按钮行） */
.config-toolbar {
  display: flex; gap: var(--spacing-xxs); justify-content: flex-end;
  margin-bottom: var(--spacing-xs);
}

.config-note { margin: var(--spacing-xs) 0; font-size: var(--font-size-xs); color: var(--color-text-weak); }

.config-error {
  margin: var(--spacing-xs) 0; padding: var(--spacing-xxs) var(--spacing-xs);
  background: var(--color-danger-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-danger);
}

/* 配置行（卡片式：三行/两行内布局；目标行两行） */
.config-rows { display: flex; flex-direction: column; gap: var(--spacing-xxs); }

.config-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--spacing-xxs);
  background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}

/* 删除标记行：置灰 + 删除线 */
.config-row.cfg-deleted { opacity: 0.55; }

.config-row.cfg-deleted .cfg-key, .config-row.cfg-deleted .cfg-value { text-decoration: line-through; }

.cfg-line1, .cfg-line2, .cfg-line3 { display: flex; align-items: center; gap: var(--spacing-xxs); min-width: 0; }

.cfg-key {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--font-size-xs); color: var(--color-text);
}

.cfg-value-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.cfg-value {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--font-size-xs); color: var(--color-text-weak);
}

.cfg-value-actions { display: flex; gap: var(--spacing-xxs); flex-wrap: wrap; }

/* 行内小按钮（明文/复制/改值/删/是/否/撤销） */
.cfg-icon-btn {
  height: 20px; padding: 0 var(--spacing-xxs);
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: 18px; color: var(--color-text-weak);
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}

.cfg-icon-btn:hover { border-color: var(--color-accent); color: var(--color-text); }

.cfg-icon-btn.cfg-danger:hover { border-color: var(--color-danger); color: var(--color-danger); }

.cfg-icon-btn.cfg-confirm-yes { border-color: var(--color-danger); color: var(--color-danger); }

.cfg-confirm { display: inline-flex; align-items: center; gap: var(--spacing-xxs); font-size: var(--font-size-xs); color: var(--color-danger); flex-shrink: 0; }

/* 输入控件（键/值/描述/名称/主机/路径；紧凑变体贴侧栏密度） */
.cfg-input {
  flex: 1; min-width: 0; height: 22px; padding: 0 var(--spacing-xxs);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-text);
}

.cfg-input:focus { outline: none; border-color: var(--color-accent); }

.cfg-value-input { font-family: var(--font-mono); }

.cfg-select {
  height: 22px; padding: 0 var(--spacing-xxs);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-text); cursor: pointer; flex-shrink: 0;
}

/* 敏感/启用复选标签 */
.cfg-sensitive {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: var(--font-size-xs); color: var(--color-text-weak); cursor: pointer;
  white-space: nowrap;
}

.cfg-sensitive input { margin: 0; cursor: pointer; }

.cfg-desc-input { flex: 1; }

.cfg-host-input, .cfg-path-input { font-family: var(--font-mono); }

.cfg-time { flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-weak); }

/* ---------------- #198 配置分层演进（入口卡 + 配置管理弹窗 + 部署方案编辑器） ---------------- */

/* 入口卡摘要行（一行紧凑：公共 N · 测试 N · 生产 N 键 · 目标 N · 更新 …） */
.config-summary {
  margin: var(--spacing-xxs) 0;
  font-size: var(--font-size-xs); color: var(--color-text-weak);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* v14：旧入口卡「配置管理」按钮样式随弹层退役删除（功能迁入配置中心顶级页） */

/* 弹窗 body（modal-lg 680px 基础上收窄内距密度，行卡片纵向排布） */
.config-modal-body { padding: var(--spacing-sm) var(--spacing-md); }

.config-modal-tabs { margin-bottom: var(--spacing-xs); }

/* 弹窗关闭软确认横幅（编辑中关闭需确认——沿 config-error 反馈形态） */
.config-close-confirm {
  display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap;
  margin-bottom: var(--spacing-xs); padding: var(--spacing-xxs) var(--spacing-xs);
  background: var(--color-danger-bg); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); color: var(--color-danger);
}

/* 「显示公共继承」开关行（test/prod 页） */
.cfg-inherit-row {
  display: flex; align-items: center; gap: var(--spacing-xs); flex-wrap: wrap;
  margin-bottom: var(--spacing-xs); padding: var(--spacing-xxs) var(--spacing-xs);
  background: var(--color-lane); border-radius: var(--radius-sm);
}

.cfg-inherit-note { font-size: var(--font-size-xs); color: var(--color-text-weak); }

/* effective 合并视图来源标记（本环境=accent / 继承公共=weak） */
.cfg-origin {
  flex-shrink: 0; padding: 0 var(--spacing-xxs);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); line-height: 16px; white-space: nowrap;
}

.cfg-origin-env { background: var(--color-accent-soft); color: var(--color-accent); }

.cfg-origin-common {
  background: var(--color-lane); color: var(--color-text-weak);
  border: 1px solid var(--color-border);
}

.cfg-effective-row .cfg-key { flex: 1; }

.cfg-effective-row .cfg-value { flex: 1; }

/* 部署方案折叠区（目标行内第三区） */
.cfg-plan {
  border-top: 1px dashed var(--color-lane);
  margin-top: var(--spacing-xxs); padding-top: var(--spacing-xxs);
}

.cfg-plan-toggle {
  display: inline-flex; align-items: center; gap: var(--spacing-xxs);
  background: none; border: none; padding: 0;
  font-size: var(--font-size-xs); color: var(--color-text-weak);
  cursor: pointer; text-align: left;
}

.cfg-plan-toggle:hover { color: var(--color-text); }

.cfg-plan-toggle .config-chevron { font-size: var(--font-size-xs); transition: transform var(--duration-fast) var(--ease-out); }

/* 步骤编辑器（工具栏 + 步骤行纵向列表） */
.cfg-plan-editor { margin-top: var(--spacing-xxs); display: flex; flex-direction: column; gap: var(--spacing-xxs); }

.cfg-plan-toolbar { display: flex; gap: var(--spacing-xxs); }

/* 步骤行：序号 + 名称 + 命令 + 失败策略 + 操作（窄窗换行由 flex-wrap 兜底） */
.cfg-plan-step {
  display: flex; align-items: center; gap: var(--spacing-xxs); flex-wrap: wrap;
  padding: var(--spacing-xxs);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}

.cfg-plan-no { flex-shrink: 0; min-width: 16px; font-size: var(--font-size-xs); color: var(--color-text-weak); text-align: center; }

.cfg-plan-name { flex: 1; min-width: 96px; }

.cfg-plan-cmd { flex: 2; min-width: 140px; font-family: var(--font-mono); }

.cfg-plan-fail { flex-shrink: 0; }

.cfg-plan-ops { display: flex; gap: var(--spacing-xxs); flex-shrink: 0; }

.cfg-plan-ops .cfg-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }


/* 侧边栏底部轮询状态（契约 §5.3） */
.sidebar-foot {
  flex-shrink: 0; display: flex; align-items: center; gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.poll-text { font-size: var(--font-size-sm); color: var(--color-text-weak); }

.poll-text.paused { color: var(--color-danger); }

.poll-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success); display: none; flex-shrink: 0;
}

.poll-dot.paused { background: var(--color-danger); }

/* ---------------- topbar 页面工具条（契约 §4.1） ---------------- */

.topbar {
  flex-shrink: 0; min-height: var(--topbar-height);
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.topbar-row {
  display: flex; align-items: center; gap: var(--spacing-xs);
  min-height: var(--topbar-height);
  padding: var(--spacing-xxs) var(--spacing-md);
}

.topbar-row + .topbar-row { padding-top: 0; padding-bottom: var(--spacing-xs); min-height: 0; }

.topbar-spacer { flex: 1; }

/* #130 看板首行三段布局（统计卡内嵌中段）：左「新建任务」(本地)/ 中「统计迷你卡行
 *  #home-stat-row」/ 右「展开折叠(退出)」——grid auto-1fr-auto：左右按钮按内容宽，
 * 统计卡 flex 弹性占满中段（原中段为工作区大标题，已随 #130 整体退役） */
.topbar-row.topbar-row-center {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.topbar-side { display: flex; align-items: center; gap: var(--spacing-xs); min-width: 0; }

.topbar-side-right { justify-content: flex-end; }

/* #130：顶栏内嵌统计迷你卡行——横排 flex 单行紧凑（5 卡等分占满中段；
 * 卡内标签/数值同行，数据层 html 结构沿用 stat-card/stat-label/stat-value，
 * 密度样式在 home.css .topbar .home-stat-row 段） */

.topbar input[type="search"] { flex: 1; min-width: 160px; }

.topbar select { width: auto; flex-shrink: 0; cursor: pointer; }

.topbar-label { font-size: var(--font-size-sm); color: var(--color-text-weak); white-space: nowrap; }

.topbar-updated { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-weak); white-space: nowrap; }

/* 类型 chips：单选胶囊组（契约 §4.1） */
.chip-group {
  display: flex; gap: var(--spacing-xxs); align-items: center;
  overflow-x: auto; flex-shrink: 0; padding: 2px 0;
}

.chip {
  height: 24px; padding: 0 var(--spacing-sm);
  background: transparent;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-text-weak); font-size: var(--font-size-xs);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
}

/* 选中 = accent 底白字圆角胶囊（契约 §4.1） */
.chip.active {
  background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF;
}

.chip:hover:not(.active) { background: var(--color-accent-soft); color: var(--color-text); }

/* ============================================================
 * v14 配置中心顶级页（伞卡 #241 / 子卡 #243，design-contract §3.2）
 * 新增类仅引用既有 CSS 变量（零新增色值）；基础形态复用 .badge /
 * .cfg-origin 胶囊；间距/圆角一律 tokens.css 既有变量。
 * ============================================================ */

/* 页面缀类（§3.1 页面外壳行）：page-view 内标签与分区留白 */
.config-page .config-page-tabs { margin-bottom: var(--spacing-sm); flex-wrap: wrap; }

.config-page .config-content { display: flex; flex-direction: column; gap: var(--spacing-sm); }

/* 应用类型徽章（三色映射：frontend=雾蓝 refactor / backend=豆沙绿 feature / app=燕麦 chore） */
.cfg-app-type {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 0 var(--spacing-xs); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: 18px; color: var(--badge-text);
}
.cfg-app-type.frontend { background: var(--type-refactor); }
.cfg-app-type.backend  { background: var(--type-feature); }
.cfg-app-type.app      { background: var(--type-chore); }

/* 环境徽章（test=lane 底弱字 + border 边；prod=danger-bg 底 danger 字） */
.cfg-role-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 0 var(--spacing-xs); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: 18px;
}
.cfg-role-badge.test { background: var(--color-lane); color: var(--color-text-weak); border: 1px solid var(--color-border); }
.cfg-role-badge.prod { background: var(--color-danger-bg); color: var(--color-danger); }

/* 批次票据徽章（已授权=lane 底 success 字；需票据=透明底 danger 描边式） */
.cfg-auth-ok {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 0 var(--spacing-xs); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: 18px;
  background: var(--color-lane); color: var(--color-success);
}
.cfg-auth-needed {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 0 var(--spacing-xs); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); line-height: 18px;
  background: transparent; border: 1px solid var(--color-danger); color: var(--color-danger);
}

/* 展开编辑面板（cfg-plan 同款上边框分隔；form-grid 两列网格已在 components.css） */
.config-row.cfg-target-editing { padding-top: var(--spacing-xs); }
.config-row.cfg-target-editing .form-grid { margin: var(--spacing-xs) 0; }