/* ─────────────────────────────────────────────────────────────
   后台视觉层
   目标:对齐原版后台的观感 —— 深色可折叠侧栏、彩色工具栏、
   深色模态框标题栏、标签/开关列、列筛选图标。
   调色取 layui 系(原版大概率就是 layui/FastAdmin 风格)。
   ───────────────────────────────────────────────────────────── */

:root {
  --sidebar-bg: #39424e;
  --sidebar-bg-deep: #313945;
  --sidebar-fg: #a9b4c2;
  --sidebar-fg-active: #fff;
  --sidebar-hover: rgba(255, 255, 255, .06);

  --c-primary: #1e9fff;
  --c-success: #5fb878;
  --c-danger: #ff5722;
  --c-warning: #ffb800;
  --c-muted: #6c757d;
  --c-navy: #2c3e50;

  --content-bg: #f2f3f5;
  --border: #e3e6ea;

  --sidebar-w: 224px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 13px;
  background: var(--content-bg);
  color: #333;
}

.layout { display: flex; min-height: 100vh; }

/* ── 侧栏 ─────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  transition: margin-left .18s ease;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 16px;
  background: var(--sidebar-bg-deep);
  color: #fff; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden;
}
.brand-mark {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; background: var(--c-primary);
  font-size: 13px;
}

.sidebar-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px; padding: 6px 10px;
  background: rgba(0, 0, 0, .22);
  border-radius: 3px;
}
.sidebar-search i { opacity: .6; }
.sidebar-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: #dfe4ea; font-size: 12px;
}
.sidebar-search input::placeholder { color: #7d8899; }

.sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: 24px; }

.nav-group > .nav-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; cursor: pointer;
  color: #cfd7e2; font-size: 13px;
  user-select: none;
}
.nav-group > .nav-group-head:hover { background: var(--sidebar-hover); }
.nav-group-head .chevron { margin-left: auto; font-size: 10px; opacity: .7; transition: transform .15s; }
.nav-group.open .nav-group-head .chevron { transform: rotate(90deg); }

.nav-group-items { display: none; }
.nav-group.open .nav-group-items { display: block; }

.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 40px;
  color: var(--sidebar-fg); text-decoration: none; font-size: 13px;
  border-left: 3px solid transparent;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active {
  background: var(--c-primary); color: #fff;
  border-left-color: #fff;
}

/* ── 主区 ─────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.topbar-toggle {
  background: none; border: 0; font-size: 20px; line-height: 1;
  color: #555; cursor: pointer; padding: 4px 6px;
}
.crumb { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: #888; }
.crumb li::after { content: "/"; margin-left: 6px; opacity: .45; }
.crumb li:last-child { color: #333; }
.crumb li:last-child::after { content: ""; }
.topbar-right { margin-left: auto; }
.user-chip { color: #555; display: inline-flex; align-items: center; gap: 6px; }

.content { flex: 1; padding: 14px; }
.empty-hint { color: #999; text-align: center; padding: 80px 0; }

/* ── 面板 ─────────────────────────────────────────────────── */
.panel {
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
}
.panel + .panel { margin-top: 12px; }

/* 顶部搜索栏 */
.search-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.search-bar .sb-field { display: flex; align-items: center; gap: 8px; }
.search-bar .sb-field > label { color: #555; white-space: nowrap; margin: 0; }
.search-bar .form-control, .search-bar .form-select { width: 150px; font-size: 13px; height: 32px; }

/* 状态标签页(全部 / 开启 / 停止)—— 只在资源有 status 开关时出现 */
.resource-tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 0 16px; background: #fafbfc;
  border-bottom: 1px solid var(--border);
}
.resource-tabs .tab-item {
  padding: 9px 16px; font-size: 13px; color: #666;
  cursor: pointer; border-bottom: 2px solid transparent;
}
.resource-tabs .tab-item:hover { color: var(--c-primary); }
.resource-tabs .tab-item.active {
  color: var(--c-primary); border-bottom-color: var(--c-primary);
  background: #fff;
}

/* 工具栏 */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.toolbar .spacer { flex: 1; }

/* 工具栏按钮 —— 描边式:白底 + 浅色描边 + 彩色文字图标。
   对齐截图,而不是实心色块。 */
.btn-tb {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 3px;
  background: #fff; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.btn-tb:disabled { opacity: .5; cursor: not-allowed; }
.btn-tb i { font-size: 13px; }
.btn-tb.c-primary { color: var(--c-primary); border-color: #a9d6ff; }
.btn-tb.c-success { color: var(--c-success); border-color: #b5e0c1; }
.btn-tb.c-danger  { color: var(--c-danger);  border-color: #ffc0ab; }
.btn-tb.c-muted   { color: #6b7480;          border-color: #d5d9de; }
.btn-tb.c-navy    { color: var(--c-navy);    border-color: #c3cbd4; }
.btn-tb.c-plain   { color: #555;             border-color: #d5d9de; }
.btn-tb:hover { background: #f7f9fb; border-color: currentColor; }

/* 下拉(「更多」) */
.btn-tb .caret { font-size: 9px; opacity: .75; }
.dropdown-menu.tb-menu { font-size: 13px; min-width: 130px; padding: 4px 0; }
.dropdown-menu.tb-menu .dropdown-item { padding: 6px 14px; }

/* 表格 */
.table-wrap { padding: 0 16px 14px; }
.table-wrap .bootstrap-table { margin-top: 0; }
.fixed-table-container { border: 0; }
.fixed-table-toolbar .columns { margin-right: 8px; }

.table > :not(caption) > * > * { padding: .55rem .6rem; font-size: 13px; }
.table thead th { color: #555; font-weight: 600; background: #fafbfc; white-space: nowrap; }
/* 列被挤窄时标签会折成竖排("已/发/放"),必须禁止换行 */
.table tbody td { white-space: nowrap; vertical-align: middle; }
/* 地址必须完整显示(原版如此),列宽由表格自己横向撑开,不截断 */

/* 单元格渲染件 */
.addr {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}
.addr .copy { cursor: pointer; opacity: .45; margin-left: 4px; }
.addr .copy:hover { opacity: 1; color: var(--c-primary); }

.num { font-variant-numeric: tabular-nums; }
/* 单价这类带单位的数值:单位弱化,别和数字抢视线 */
.unit { color: #9aa3ad; font-size: 12px; }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 2px;
  font-size: 12px; line-height: 18px; color: #fff;
  white-space: nowrap;
}
.tag.default { background: #b5bcc4; }
.tag.primary { background: var(--c-primary); }
.tag.success { background: var(--c-success); }
.tag.danger  { background: var(--c-danger); }
.tag.warning { background: var(--c-warning); }
.tag.info    { background: #17a2b8; }

/* 只读开关(列表里展示状态用) */
.switch-ro {
  display: inline-block; width: 34px; height: 18px; border-radius: 9px;
  background: #cfd4da; position: relative; vertical-align: middle;
}
.switch-ro::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s;
}
.switch-ro.on { background: var(--c-success); }
.switch-ro.on::after { left: 18px; }

/* 操作列图标 */
.row-ops { display: inline-flex; gap: 4px; }
.row-op {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border: 0; border-radius: 2px;
  color: #fff; font-size: 12px; cursor: pointer;
}
.row-op.edit { background: var(--c-success); }
.row-op.del  { background: var(--c-danger); }
.row-op.restore { background: var(--c-primary); }
.row-op.purge   { background: #8a2be2; }

/* ── 模态框 ───────────────────────────────────────────────── */
#formModal .modal-header { background: var(--c-navy); color: #fff; padding: .6rem 1rem; }
#formModal .modal-title { font-size: 14px; font-weight: 600; }
#formModal .modal-content { border: 0; border-radius: 3px; }

.form-grid { display: grid; grid-template-columns: 120px 1fr; gap: 12px 14px; align-items: center; }
.form-grid > label { text-align: right; color: #555; margin: 0; }
.form-grid .fg-full { grid-column: 1 / -1; }
.form-grid .fg-span2 { grid-column: 2 / 3; }
.form-grid .field-hint { grid-column: 2 / 3; color: #9aa3ad; font-size: 12px; margin-top: -8px; }
.form-grid .form-control, .form-grid .form-select { font-size: 13px; }
/* 复选组:选项多时要能自然换行,不能挤成一行 */
.form-grid .check-group { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.form-grid .check-group .form-check { margin: 0 10px 0 0; }
.form-grid .check-group .form-check-label { font-size: 13px; color: #555; }

/* ── 设置页(单例表单)──────────────────────────────────────── */
.settings-head {
  font-size: 14px; font-weight: 600; color: #39424e;
  padding: 0 0 12px; margin-bottom: 16px;
  border-bottom: 1px solid #ebeef1;
}
/* 表单本体限宽:设置项拉满整个 1920 屏会让 label 和输入框隔得太远,没法读 */
#settingsForm { max-width: 720px; padding: 4px 0 8px; }
.settings-foot {
  max-width: 720px; padding-top: 16px; margin-top: 4px;
  border-top: 1px solid #ebeef1; display: flex; gap: 8px;
}
/* 设置页的分段标题 —— 字段多时按「拦截条件 / 数量限制」分段,对齐原版 */
.form-section {
  font-size: 13px; font-weight: 600; color: var(--c-navy);
  padding: 6px 0 2px; margin-top: 6px;
  border-bottom: 1px dashed #e3e7ea;
}
.form-section:first-child { margin-top: 0; }

/* ── 分页信息条(对齐原版的"显示第 X 到第 Y 条记录")─────── */
.fixed-table-pagination .pagination-detail { color: #666; font-size: 13px; }

/* 模态框底部按钮 */
.btn-navy { background: var(--c-navy); border-color: var(--c-navy); color: #fff; font-size: 13px; }
.btn-navy:hover { background: #23303d; border-color: #23303d; color: #fff; }

/* 侧栏收起时只留图标 */
.sidebar.collapsed .brand-text { display: none; }

/* ── 登录页 ───────────────────────────────────────────────── */
.login-body {
  min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #39424e 0%, #232b35 100%);
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.login-card {
  width: 340px; padding: 32px 28px 26px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 17px; font-weight: 600; color: #39424e;
  margin-bottom: 26px;
}
.login-brand .brand-mark {
  width: 30px; height: 30px; border-radius: 5px; background: var(--c-primary);
  color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.login-field {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #dfe3e8; border-radius: 4px;
  padding: 0 10px; margin-bottom: 12px; background: #fbfcfd;
}
.login-field:focus-within { border-color: var(--c-primary); background: #fff; }
.login-field i { color: #9aa3ad; font-size: 15px; }
.login-field input {
  flex: 1; border: 0; outline: 0; background: transparent;
  height: 40px; font-size: 14px;
}
/* 高度固定,免得出现错误提示时整个卡片往下跳 */
.login-msg { min-height: 20px; color: var(--c-danger); font-size: 13px; padding: 0 2px 6px; }
.login-btn {
  width: 100%; height: 40px; border: 0; border-radius: 4px;
  background: var(--c-primary); color: #fff; font-size: 15px; letter-spacing: 2px;
  cursor: pointer;
}
.login-btn:hover { filter: brightness(.94); }
.login-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 1040; height: 100vh; }
  .layout { display: block; }
}