/* ==========================================================================
   GEO 工作台 · 兼容桥接层 (Legacy Bridge)
   --------------------------------------------------------------------------
   作用：让改造前的旧类名（.surface / .panel / .item / .list / .btn.secondary
   …）在新设计令牌下正常显示，从而无需一次性重写 app.js 的 14 个渲染函数。
   依赖顺序：tokens.css → components.css → 本文件（必须最后加载）。
   改造原则：分区优先于分块，用 1px hairline 建立秩序，卡片只留给需要抬升的元素。
   ========================================================================== */

.hidden { display: none !important; }
.navbar, .navbar-vertical { --tblr-navbar-bg: var(--bg-surface); }
/* Tabler provides the baseline control geometry. GEO semantic tokens remain the source of truth. */
.form-control, .form-select { border-radius: var(--r-sm); }
.btn { border-radius: var(--r-sm); font-weight: var(--fw-medium); }
.card { border-radius: var(--r-md); border-color: var(--border-subtle); }
.table { --tblr-table-border-color: var(--border-subtle); }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-secondary); }
.micro { font-size: var(--fs-xs); color: var(--text-tertiary); }
.mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* ---- 按钮：旧代码大量使用裸 .btn / .btn.secondary / .btn.small ---------- */
.btn { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn.secondary,
.btn--secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-default); }
.btn.secondary:hover { background: var(--bg-surface-2); border-color: var(--border-strong); }
.btn.small,
.btn--sm { min-height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.btn--icon { min-width: 34px; padding: 0 var(--sp-2); }
.btn__icon { width: 17px; height: 17px; flex: none; }
.btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }

/* 裸表单控件：组件层只认 .input/.select/.textarea，这里补上无类名的原生标签 */
input, select, textarea {
  width: 100%; min-height: 34px; padding: 6px var(--sp-3);
  border: var(--bw-hair) solid var(--border-default); border-radius: var(--r-sm);
  background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height: 76px; resize: vertical; line-height: var(--lh-normal); }
select { cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--text-disabled); }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; margin: 0; }
label { display: grid; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
label input, label select, label textarea { margin-top: 1px; }
.form-grid .actions { padding-top: var(--sp-2); }
label > input, label > select, label > textarea { color: var(--text-primary); font-size: var(--fs-base); }
a { color: var(--accent-text); }
code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: var(--fs-sm); }

/* ---- 状态文字 / 徽标 ---------------------------------------------------- */
.status-connected, .health-ok { color: var(--success-text); }
.status-connecting { color: var(--info-text); }
.status-needs_login, .health-bad { color: var(--danger-text); }
.status-disabled { color: var(--text-tertiary); }
.status-queued { color: var(--text-secondary); }
.status-completed { color: var(--success-text); }
.status-running { color: var(--info-text); }
.status-needs_attention, .health-warn { color: var(--warning-text); }
.status-failed { color: var(--danger-text); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-xs); }
.chip.on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }
.chip.off { background: var(--bg-inset); color: var(--text-tertiary); }
.chip.bad { border-color: var(--danger); background: var(--danger-bg); color: var(--danger-text); }

/* ---- 面板：hairline 分区，不用万物皆卡片 -------------------------------- */
.surface, .panel {
  background: var(--bg-surface);
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.panel { box-shadow: var(--shadow-xs); }
.panel:hover { border-color: var(--border-default); }
.panel > .muted { max-width: 78ch; line-height: var(--lh-snug); }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.section-head h2 { font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: -0.01em; }
.section { margin-bottom: var(--sp-5); }
.panel + .panel, .section + .section { margin-top: var(--sp-4); }
.block {
  border: var(--bw-hair) solid var(--border-subtle); border-radius: var(--r-sm);
  background: var(--bg-inset); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.block b { color: var(--text-primary); }
.steps { margin: var(--sp-2) 0 0; padding-left: 18px; color: var(--text-secondary); font-size: var(--fs-sm); }
.steps li { margin: 2px 0; }

/* ---- 列表：行式栅格，列对齐可扫读（改造前是卡片流） -------------------- */
.list {
  border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--sp-4);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--bw-hair) solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out);
}
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--bg-surface-2); }
.item-title { line-height: var(--lh-snug); }
.item-meta { line-height: var(--lh-snug); }
.item > .actions { grid-column: 1 / -1; }
.item-title { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-primary); overflow-wrap: anywhere; }
.item-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; overflow-wrap: anywhere; }
.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--fs-sm); color: var(--text-secondary); text-align: right; white-space: nowrap; }
.item .actions, .actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); justify-content: flex-start; }
.item .actions .btn { flex: 0 0 auto; min-height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.item .actions select { width: auto; min-height: 28px; padding: 2px var(--sp-2); font-size: var(--fs-sm); }
.item .actions input { width: auto; min-height: 28px; padding: 2px var(--sp-2); font-size: var(--fs-sm); }
.empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); }
.empty__desc { margin-top: var(--sp-2); color: var(--text-secondary); }

/* ---- 表单栅格 / 工作区头部 ---------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-grid .wide { grid-column: 1 / -1; }
.workspace-title { margin-bottom: var(--sp-4); }
.workspace-title h2 { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: -0.02em; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.metric {
  display: grid; gap: 2px; padding: var(--sp-4);
  background: var(--bg-surface); border: var(--bw-hair) solid var(--border-subtle); border-radius: var(--r-lg);
}
.metric span, .metric__label { font-size: var(--fs-xs); color: var(--text-tertiary); }
.metric b, .metric__value { font-size: var(--fs-2xl); font-weight: var(--fw-semi); color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.notice { min-height: 22px; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.notice.error { color: var(--danger-text); }
.notice.success { color: var(--success-text); }
.integration-status { min-height: 0; margin: var(--sp-3) 0 var(--sp-4); padding: var(--sp-3); border: 1px solid var(--border-subtle); background: var(--bg-surface-2); }
.integration-status:empty { display: none; }

/* ---- 客户列表（管理员侧栏） -------------------------------------------- */
.customer-list { display: grid; gap: 2px; }
.customer-search { margin-bottom: var(--sp-2); }
.nav-create { width: 100%; }
.customer {
  display: grid; gap: 1px; width: 100%; text-align: left; cursor: pointer;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: transparent; border: 0; color: var(--text-secondary); font: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.customer:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.customer.active { background: var(--accent-subtle); color: var(--accent-text); }
.customer b { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.customer span { font-size: var(--fs-2xs); color: var(--text-tertiary); }
.customer.active span { color: var(--accent-text); }
.nav__icon { width: 16px; height: 16px; flex: none; }
.nav__foot { padding: var(--sp-3); border-top: var(--bw-hair) solid var(--border-subtle); }

/* ---- 主区 / 内容 ------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.content { padding: var(--sp-8) clamp(20px, 3vw, 48px) var(--sp-10); display: block; max-width: 1520px; width: 100%; align-content: start; min-width: 0; }
.content > .notice:empty { display: none; }
[data-pane] { min-width: 0; }
[data-pane]:not([data-pane="overview"]) > .panel:first-child { border-top: 2px solid var(--accent); }
[data-pane]:not([data-pane="overview"]) > .panel + .panel { margin-top: var(--sp-5); }
[data-pane] .section-head h2 { font-size: var(--fs-lg); }
[data-pane] .section-head .muted { max-width: 72ch; }
.workflow-pane > .panel:first-child { border-top-width: 3px; }
.workflow-pane > .panel:first-child .section-head { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.workflow-pane > .panel:first-child .form-grid { margin-top: var(--sp-5); }
.workflow-pane > .panel:nth-child(2) { background: var(--bg-canvas); border-color: var(--border-subtle); box-shadow: none; }
.workflow-pane > .panel:nth-child(2) .list { background: var(--bg-surface); }
.workflow-pane > .panel:nth-child(2) > .muted { margin-bottom: var(--sp-4); }
.workflow-pane label.wide textarea { min-height: 92px; }
.workflow-pane [data-list="platformChoices"] { margin-top: var(--sp-2); }
.topbar { position: sticky; top: 0; z-index: 20; }
@media (min-width: 901px) { .nav-toggle { display: none; } }
.legal-footer {
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: var(--bw-hair) solid var(--border-subtle); font-size: var(--fs-xs);
}
.legal-footer nav { display: flex; gap: var(--sp-4); }
.pairing-code {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border: 1px dashed var(--border-default); border-radius: var(--r-md);
  padding: var(--sp-3); margin: var(--sp-3) 0; background: var(--bg-inset);
}
.pairing-code code { font-size: var(--fs-lg); letter-spacing: 2px; background: var(--bg-surface); border-radius: var(--r-sm); padding: 4px var(--sp-3); }
.choice { display: flex; gap: var(--sp-2); align-items: center; color: var(--text-primary); font-size: var(--fs-sm); padding: 3px 0; }
.choice input { width: auto; min-height: 0; margin: 0; }
.detail h2 { font-size: var(--fs-md); }

/* ---- 登录页 / 弹窗 ----------------------------------------------------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); }
.login__box { width: min(420px, 100%); }
.login__box .stack { gap: var(--sp-4); }
.login__brand { gap: var(--sp-3); margin-bottom: var(--sp-5); }
.login__hint { margin: var(--sp-1) 0 var(--sp-5); }
.invite__hint { margin: 0; }
.dialog-body { padding: var(--sp-5); display: grid; gap: var(--sp-4); min-width: min(420px, 90vw); }
.dialog-body h2 { font-size: var(--fs-lg); font-weight: var(--fw-semi); }
dialog { border: var(--bw-hair) solid var(--border-subtle); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-xl); padding: 0; }
dialog::backdrop { background: var(--bg-scrim); }
.secret-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.secret { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: var(--fs-xs); background: var(--bg-inset); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); overflow-wrap: anywhere; }

/* 抽屉内的旧面板不再需要自己的卡片边框（抽屉本身就是容器） */
.drawer .surface, .drawer .panel { border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.drawer .surface + .surface, .drawer .panel + .panel { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--bw-hair) solid var(--border-subtle); }
.drawer .list { border-radius: var(--r-md); }

/* ---- 响应式：900px 以下侧栏转抽屉 -------------------------------------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav {
    position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-drawer) + 2);
    width: min(280px, 84vw); translate: -100% 0;
    transition: translate var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }
  .shell[data-nav-open="true"] .nav { translate: 0 0; }
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .item { grid-template-columns: minmax(0, 1fr); }
  .item-side { align-items: flex-start; text-align: left; }
  .topbar { padding-inline: var(--sp-3); gap: var(--sp-2); }
  .topbar__context { min-width: 0; flex: 1; }
  .topbar__context-label { display: none; }
  .topbar #roleBadge { display: none; }
  .topbar #logout { padding-inline: var(--sp-2); }
}