/* ============================================================================
   edit.css — 编辑模式 / 对话框 / 提示
   与主视觉同一套语言：玻璃面板 + 电光青强调 + 等宽标签
   ========================================================================= */

/* ============================================================================
   1. 按钮
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background     var(--dur-fast) var(--ease-out),
    border-color   var(--dur-fast) var(--ease-out),
    color          var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--c-surface-hi); border-color: var(--c-border-hi); color: var(--c-text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* .btn 自带 display，会盖过 UA 的 [hidden]{display:none}，必须显式声明 */
.btn[hidden] { display: none; }

.btn-primary {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 500;
}
.btn-primary:hover { background: rgba(79, 216, 232, 0.22); border-color: var(--c-accent); color: var(--c-accent); }

.btn-danger { border-color: rgba(255, 118, 118, 0.4); background: rgba(255, 118, 118, 0.1); color: #ff8f8f; }
.btn-danger:hover { background: rgba(255, 118, 118, 0.2); border-color: rgba(255, 118, 118, 0.7); color: #ffb0b0; }

/* 编辑态下的激活按钮 */
.btn[aria-pressed="true"] {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

/* 方块图标按钮（卡片、分组上的操作） */
.icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-xs);
  background: rgba(10, 14, 19, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-text-dim);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: rgba(20, 26, 33, 0.96); border-color: var(--c-accent-line); color: var(--c-accent); }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn[data-danger="true"]:hover {
  border-color: rgba(255, 118, 118, 0.7);
  color: #ff8f8f;
}

/* ============================================================================
   2. 顶栏：编辑开关 + 编辑工具条
   ========================================================================= */
.topbar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 42px;
}
.topbar-row .search { flex: 1 1 auto; }

.edit-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
}
.edit-bar[hidden] { display: none; }
.edit-bar-label {
  margin-right: var(--sp-1);
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.edit-bar-spacer { flex: 1 1 auto; }

/* ============================================================================
   3. 提示条
   ========================================================================= */
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}
.banner strong { color: var(--c-text); font-weight: 600; }
.banner[data-kind="warn"] {
  border-color: rgba(255, 190, 90, 0.42);
  background: rgba(255, 190, 90, 0.1);
}
.banner[data-kind="warn"] strong { color: #ffcf82; }
.banner-spacer { flex: 1 1 auto; }

/* ============================================================================
   4. 编辑模式：卡片与分组上的操作
   ========================================================================= */

/* 卡片外层：承载绝对定位的操作按钮，避免把 button 嵌进 <a> */
.card-wrap { position: relative; min-width: 0; }
.card-wrap > .card { height: 100%; }

.card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
/* 编辑模式下常显，保证可发现性；非编辑模式完全不渲染 */
.card-wrap:hover .card-actions,
.card-actions:focus-within {
  opacity: 1;
  transform: none;
}
.app.is-editing .card-actions { opacity: 0.68; transform: none; }
.app.is-editing .card-wrap:hover .card-actions { opacity: 1; }

/* 编辑模式下隐藏分组角标，避免与操作按钮抢位置 */
.app.is-editing .card-group { display: none; }
/* 编辑模式下卡片内的备注徽标仍可见，但图标区域留出操作空间 */
.app.is-editing .card-main { padding-right: 4px; }

/* 分组区标题上的操作 */
.section-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--sp-3);
}
.section-head .section-rule { flex: 1 1 auto; }

/* 视图头部（单分组视图）里的分组操作 */
.view-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* 侧栏「新建分组」入口 */
.group-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  margin-top: var(--sp-2);
  border: 1px dashed var(--c-border-hi);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.group-add svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.group-add:hover {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

/* ============================================================================
   5. 对话框（原生 <dialog>，自带焦点陷阱与 Esc 关闭）
   ========================================================================= */
dialog.sheet {
  width: min(560px, calc(100vw - 32px));
  max-height: min(86dvh, 760px);
  padding: 0;
  border: 1px solid var(--c-border-hi);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0e141a 0%, #080b10 100%);
  color: var(--c-text);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
dialog.sheet::backdrop {
  background: rgba(3, 5, 8, 0.66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
dialog.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-in 240ms var(--ease-out);
}
dialog.sheet[open]::backdrop { animation: fade-in 240ms var(--ease-out); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet-head {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.sheet-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent) 40%, transparent);
  opacity: 0.7;
}
.sheet-kicker {
  display: block;
  margin-bottom: 4px;
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.sheet-title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
}
.sheet-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.sheet-close:hover { background: rgba(255, 255, 255, 0.07); color: var(--c-text); }

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.018);
}
.sheet-foot-spacer { flex: 1 1 auto; }

.sheet-msg { font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-base); }
.sheet-msg strong { color: var(--c-text); }

/* ---------- 表单 ---------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-row { display: flex; gap: var(--sp-3); }
.form-row > * { flex: 1 1 0; min-width: 0; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
.field-label .req { color: var(--c-accent); }
.field-hint { font-size: var(--fs-2xs); color: var(--c-faint); line-height: 1.5; }

.input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-text);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--c-faint); }
.input:hover { border-color: var(--c-border-hi); }
.input:focus {
  outline: none;
  border-color: var(--c-accent-line);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(79, 216, 232, 0.1);
}
textarea.input {
  height: auto;
  min-height: 66px;
  padding: 10px var(--sp-3);
  line-height: var(--lh-base);
  resize: vertical;
}
select.input { cursor: pointer; }

/* 输入框 + 尾部按钮 */
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix .input { padding-right: 92px; }
.input-affix-btn {
  position: absolute;
  right: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-xs);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.input-affix-btn:hover { background: rgba(79, 216, 232, 0.22); }

/* 表单内联错误 */
.form-error {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(255, 118, 118, 0.4);
  border-radius: var(--r-sm);
  background: rgba(255, 118, 118, 0.1);
  color: #ff9c9c;
  font-size: var(--fs-sm);
}
.form-error[hidden] { display: none; }

/* ============================================================================
   6. 轻提示
   ========================================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 10px var(--sp-5);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-pill);
  background: rgba(8, 13, 18, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="error"] { border-color: rgba(255, 118, 118, 0.5); color: #ff9c9c; }

/* ============================================================================
   8. 后端连接：状态徽章 / 选项行 / 设置面板
   ========================================================================= */

/* 编辑工具条里的数据源状态徽章 */
.conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: var(--c-muted);
  white-space: nowrap;
  cursor: default;
}
.conn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.conn[data-status="connecting"] { color: var(--c-accent); }
.conn[data-status="connecting"]::before { animation: conn-pulse 1.1s ease-in-out infinite; }
.conn[data-status="online"] {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.conn[data-status="need-login"] {
  border-color: rgba(255, 190, 96, 0.34);
  background: rgba(255, 190, 96, 0.1);
  color: #ffc46b;
}
.conn[data-status="offline"] {
  border-color: rgba(255, 118, 118, 0.34);
  background: rgba(255, 118, 118, 0.1);
  color: #ff9c9c;
}

@keyframes conn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* 复选框行 */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-dim);
  cursor: pointer;
}
.check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--c-accent);
}
.check code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--c-text);
}
.field-hint code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  color: var(--c-text-dim);
}

/* 后端设置里的连通状态摘要 */
.conn-summary {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-dim);
  word-break: break-all;
}
.conn-summary strong { color: var(--c-text); font-weight: 500; }
.conn-summary[data-status="online"] { border-color: var(--c-accent-line); background: var(--c-accent-soft); }
.conn-summary[data-status="offline"],
.conn-summary[data-status="need-login"] { border-color: rgba(255, 190, 96, 0.3); }

/* 请求进行中：按钮给出等待反馈 */
.btn[data-busy="true"] { opacity: 0.6; cursor: progress; }

/* ============================================================================
   7. 编辑模式下的响应式微调
   ========================================================================= */
@media (max-width: 1000px) {
  .topbar-row { flex-wrap: nowrap; }
  .btn-label { display: none; }              /* 顶栏按钮在窄屏只留图标 */
  .topbar-row .btn { width: 36px; padding: 0; justify-content: center; }
  .edit-bar { gap: 6px; }
  .edit-bar-label { width: 100%; margin-bottom: 2px; }
  .edit-bar .btn { padding: 0 10px; }
  /* 侧栏里的「新建分组」在移动端是一条 chip，收窄 */
  .group-add {
    width: auto;
    min-height: 34px;
    margin-top: 0;
    padding: 0 var(--sp-3);
  }
}

@media (max-width: 560px) {
  .form-row { flex-direction: column; gap: var(--sp-4); }
  dialog.sheet { width: calc(100vw - 20px); }
  .sheet-head, .sheet-body, .sheet-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .section-actions { margin-left: auto; }
  .app.is-editing .card-actions { opacity: 1; }
}