/* ========== 超级管理控制台（super.html）专属样式 ========== */
/* 复用 admin.css 的基础/按钮/面板/表格样式，这里只补数据库控制台与布局。 */

/* 账号管理页在新建表单里多了一个角色下拉，对齐输入框风格 */
.pin-form select {
  border: 1px solid #d9dee7; border-radius: 6px; padding: 6px 8px; background: #fff;
}

/* ---------- 数据库页整体布局 ---------- */
.db-page { padding: 16px 20px; max-width: 1400px; margin: 0 auto; }
.db-page[hidden] { display: none; }
/* 侧栏给足宽度，避免表/字段说明换行过碎；极小屏由下方媒体查询压回单列 */
.db-layout { display: grid; grid-template-columns: minmax(320px, 340px) 1fr; gap: 14px; align-items: start; }

/* 左侧：库结构 + 概览 */
.db-sidebar { position: sticky; top: 68px; max-height: calc(100vh - 84px); overflow-y: auto; }
.db-side-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: bold; margin-bottom: 8px;
}
.db-stats { font-size: 12px; line-height: 1.6; padding: 6px 8px; background: #f7f9fc; border-radius: 8px; margin-bottom: 10px; }
.db-tables { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.db-table-hint { font-size: 11px; color: #8a94a6; padding: 2px 10px 8px; line-height: 1.5; }
.db-table-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; border-left: 3px solid #4a90e2;
}
.db-table-item:hover { background: #eef3fb; }
.db-table-item.expanded { background: #eef3fb; border-left-color: #f39c12; }
.db-table-name { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; }
.db-table-count { font-size: 11px; color: #888; background: #f0f0f0; padding: 1px 8px; border-radius: 999px; }
.db-table-group { font-size: 11px; color: #aaa; padding: 10px 10px 4px; text-transform: uppercase; letter-spacing: .04em; }
.db-table-other {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; color: #999;
  padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 表/字段说明展开面板（紧跟在被点击的表名下方）。
   说明文字普遍较长，改为单列块式排版：字段名徽标在上、释义在下，
   不再用「名列+说明列」的两列网格，避免 280~340px 宽度下两列互相挤压。 */
.db-table-detail {
  margin: 2px 0 8px; padding: 10px 12px; border-radius: 8px;
  background: #f7f9fc; border: 1px solid #e3e9f2; cursor: default;
}
.db-detail-desc { font-size: 12px; line-height: 1.6; color: #444; margin: 0 0 10px; }
.db-detail-cols { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.db-detail-cols dt {
  justify-self: start; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; color: #2c5f8a;
  background: #eaf1f9; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.db-detail-cols dd {
  margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: #555;
  padding-left: 8px; border-left: 2px solid #e3e9f2;
}
/* 字段之间留呼吸感：每个新字段（dt）除第一个外都带上间距 */
.db-detail-cols dd + dt { margin-top: 9px; }
.db-detail-note { margin: 10px 0 0; font-size: 11px; line-height: 1.55; color: #8a6d3b; background: #fbf7ec; border-radius: 6px; padding: 6px 9px; }
.db-table-detail .btn { margin-top: 10px; }

/* 右侧：SQL 控制台 */
.db-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.db-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.db-ro { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #555; cursor: pointer; user-select: none; }
.db-ro input { width: auto; }
.db-presets { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.db-run-wrap { display: flex; gap: 6px; margin-left: auto; }

.db-sql {
  width: 100%; min-height: 120px; resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13px; line-height: 1.6;
  border: 1px solid #d9dee7; border-radius: 8px; padding: 10px 12px; background: #fcfcfd; color: #24292f;
  tab-size: 2;
}
.db-sql:focus { outline: none; border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74,144,226,0.2); background: #fff; }

.db-msg { margin-top: 8px; font-size: 13px; color: #2ecc71; min-height: 1.2em; word-break: break-all; }
.db-msg.error { color: #e74c3c; }

/* 结果表 */
.db-result-wrap { max-height: 60vh; overflow: auto; }
.db-result th, .db-result td {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; white-space: nowrap;
  max-width: 360px; overflow: hidden; text-overflow: ellipsis;
}
/* 有字段说明的表头：虚线下划线提示可悬停查看含义 */
.db-result th[title] { text-decoration: underline dotted rgba(0,0,0,.25) 1px; text-underline-offset: 3px; cursor: help; }
.db-result td { white-space: pre-wrap; word-break: break-all; }
.db-result .db-null { color: #bbb; font-style: italic; }
.db-result .db-blob { color: #8a6d3b; background: #fbf7ec; }
.db-type-tag {
  margin-left: 6px; font-size: 10px; font-weight: normal; color: #8a6d3b;
  background: #f3e9d2; border-radius: 999px; padding: 1px 6px; vertical-align: middle; white-space: nowrap;
}

/* ---------- 账号申请页签 ---------- */
/* 待审核数量徽标；因设了 display，[hidden] 需显式压回 none */
.req-badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: #e74c3c; color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.req-badge[hidden] { display: none; }
/* 筛选下拉跟同一行的按钮尺寸对齐 */
.panel-actions select {
  border: 1px solid #d9dee7; border-radius: 6px; padding: 5px 8px; background: #fff; font-size: 13px;
}

/* ---------- 小屏 ---------- */
@media (max-width: 900px) {
  .db-layout { grid-template-columns: 1fr; }
  .db-sidebar { position: static; max-height: none; }
  .db-run-wrap { margin-left: 0; width: 100%; }
}