/* pandar Console — HTMX/服务端模板版样式
 * token 与原 React 版一致（tailwind.config RGB 三元组搬过来），
 * 组件类手写，无构建链。2026-09-16 UI 维护：弹窗卡片化+可滚动、核心徽章中性色、
 * 密码规则实时勾选、响应式断点。
 */
:root {
  --bg-base: 9 9 11;
  --bg-card: 24 24 27;
  --bg-hover: 39 39 42;
  --border: 63 63 70;
  --fg-base: 244 244 245;
  --fg-muted: 161 161 170;
  --accent: 59 130 246;
  --accent-hover: 37 99 235;
  --ok: 52 211 153;
  --warn: 251 191 36;
  --danger: 248 113 113;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: rgb(var(--bg-base));
  color: rgb(var(--fg-base));
  font-size: 14px;
  line-height: 1.5;
}
a { color: rgb(var(--accent)); text-decoration: none; }
a:hover { color: rgb(var(--accent-hover)); }
.mono { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
.muted { color: rgb(var(--fg-muted)); }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }

/* ── 登录/强制改密/tgate 独立页 ───────────────── */
.center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.center-box { width: 100%; max-width: 380px; }
.center-head { text-align: center; margin-bottom: 32px; }
.center-head .logo { font-size: 40px; margin-bottom: 12px; color: rgb(var(--accent)); }
.center-head h1 { font-size: 22px; font-weight: 600; }
.center-head p { font-size: 13px; color: rgb(var(--fg-muted)); margin-top: 4px; }

/* ── 卡片/表单 ────────────────────────────────── */
.card { background: rgb(var(--bg-card)); border: 1px solid rgb(var(--border)); border-radius: 8px; padding: 20px; }
.form-card { display: flex; flex-direction: column; gap: 16px; }
label { display: block; font-size: 13px; font-weight: 500; color: rgb(var(--fg-muted)); margin-bottom: 6px; }
.input, select.input {
  width: 100%; background: rgb(var(--bg-base)); color: rgb(var(--fg-base));
  border: 1px solid rgb(var(--border)); border-radius: 6px; padding: 8px 10px; font-size: 14px;
}
.input:focus { outline: none; border-color: rgb(var(--accent)); }
.input:disabled { opacity: .55; }
select.input { appearance: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid rgb(var(--border)); border-radius: 6px; background: rgb(var(--bg-card));
  color: rgb(var(--fg-base)); padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.btn:hover { background: rgb(var(--bg-hover)); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: #fff; }
.btn-primary:hover { background: rgb(var(--accent-hover)); }
.btn-danger { background: rgb(var(--danger) / .12); border-color: rgb(var(--danger) / .4); color: rgb(var(--danger)); }
.btn-danger:hover { background: rgb(var(--danger) / .22); }
.btn-sm { padding: 4px 8px; font-size: 12px; }

/* ── 提示条 ──────────────────────────────────── */
.alert { border-radius: 6px; padding: 8px 12px; font-size: 13px; border: 1px solid; }
.alert-error { background: rgb(var(--danger) / .1); border-color: rgb(var(--danger) / .35); color: rgb(var(--danger)); }
.alert-warn { background: rgb(var(--warn) / .1); border-color: rgb(var(--warn) / .35); color: rgb(var(--warn)); }
.alert-ok { background: rgb(var(--ok) / .1); border-color: rgb(var(--ok) / .35); color: rgb(var(--ok)); }

/* 密码规则实时勾选（console.js 给满足项加 .ok） */
ul.rules { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: rgb(var(--fg-muted)); list-style: none; }
ul.rules li::before { content: '· '; color: rgb(var(--fg-muted)); }
ul.rules li.ok { color: rgb(var(--ok)); }
ul.rules li.ok::before { content: '✓ '; color: rgb(var(--ok)); }

/* ── 布局：侧栏 + 主区 ────────────────────────── */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 210px; flex-shrink: 0; border-right: 1px solid rgb(var(--border));
  background: rgb(var(--bg-card) / .5); display: flex; flex-direction: column;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid rgb(var(--border)); font-weight: 600; }
.sidebar .brand .logo { color: rgb(var(--accent)); font-size: 20px; }
.sidebar nav { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  color: rgb(var(--fg-muted)); font-size: 14px;
}
.sidebar nav a:hover { background: rgb(var(--bg-hover)); color: rgb(var(--fg-base)); }
.sidebar nav a.active { background: rgb(var(--accent) / .12); color: rgb(var(--accent)); }
.sidebar .me { padding: 12px; border-top: 1px solid rgb(var(--border)); font-size: 13px; }
.sidebar .me .row { display: flex; align-items: center; gap: 8px; }
.main { flex: 1; overflow: auto; min-width: 0; }
.main-inner { padding: 24px; max-width: 1120px; margin: 0 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 20px; font-weight: 600; }

/* ── 通用区块/表格 ────────────────────────────── */
.section { background: rgb(var(--bg-card)); border: 1px solid rgb(var(--border)); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.section > .sec-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgb(var(--border)); font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.section > .sec-body { padding: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.sec-wide { grid-column: span 2; }
.stat { background: rgb(var(--bg-card)); border: 1px solid rgb(var(--border)); border-radius: 8px; padding: 16px; }
.stat .label { font-size: 12px; color: rgb(var(--fg-muted)); }
.stat .value { font-size: 22px; font-weight: 600; margin-top: 4px; }
.stat .sub { font-size: 12px; color: rgb(var(--fg-muted)); margin-top: 2px; }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--fg-muted)); padding: 8px 12px; border-bottom: 1px solid rgb(var(--border)); white-space: nowrap; }
.table td { padding: 8px 12px; border-bottom: 1px solid rgb(var(--border) / .6); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: rgb(var(--bg-hover) / .4); }

.badge { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11px; border: 1px solid; white-space: nowrap; }
.badge-admin { color: rgb(var(--danger)); border-color: rgb(var(--danger) / .4); background: rgb(var(--danger) / .08); }
.badge-operator { color: rgb(var(--warn)); border-color: rgb(var(--warn) / .4); background: rgb(var(--warn) / .08); }
.badge-user { color: rgb(var(--ok)); border-color: rgb(var(--ok) / .4); background: rgb(var(--ok) / .08); }
.badge-active { color: rgb(var(--ok)); border-color: rgb(var(--ok) / .4); background: rgb(var(--ok) / .08); }
.badge-failed, .badge-inactive { color: rgb(var(--danger)); border-color: rgb(var(--danger) / .4); background: rgb(var(--danger) / .08); }
.badge-locked { color: rgb(var(--warn)); border-color: rgb(var(--warn) / .4); background: rgb(var(--warn) / .08); }
.badge-core { color: rgb(var(--fg-muted)); border-color: rgb(var(--border)); background: rgb(var(--bg-hover) / .6); }  /* “核心服务”是中性标记，不用告警红 */

/* ── HTMX 弹窗（服务端片段填充） ──────────────── */
.overlay {
  position: fixed; inset: 0; background: rgb(0 0 0 / .6);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto; z-index: 50;
}
.modal { width: 100%; max-width: 420px; margin: auto; background: rgb(var(--bg-card)); border: 1px solid rgb(var(--border)); border-radius: 10px; padding: 20px; }
.modal .card { border: none; background: transparent; padding: 0; border-radius: 0; }   /* 弹窗内不再双层边框 */
.modal .section { background: transparent; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.modal-head h2 { font-size: 16px; font-weight: 600; }

/* ── 状态点 / 条形图 / 进度 ───────────────────── */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.dot-ok { background: rgb(var(--ok)); }
.dot-err { background: rgb(var(--danger)); }
.dot-warn { background: rgb(var(--warn)); }
.bar { background: rgb(var(--bg-base)); border: 1px solid rgb(var(--border)); border-radius: 4px; height: 14px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: rgb(var(--accent)); }
.bar > i.warn { background: rgb(var(--warn)); }
.bar > i.err { background: rgb(var(--danger)); }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: rgb(var(--fg-muted)); }
.kv dd { word-break: break-all; }

details.drop > summary { cursor: pointer; list-style: none; }
details.drop > summary::-webkit-details-marker { display: none; }
.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ── 响应式 ──────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; border-right: none; border-bottom: 1px solid rgb(var(--border)); flex-wrap: wrap; }
  .sidebar .brand { border-bottom: none; padding: 10px 14px; }
  .sidebar nav { flex-direction: row; padding: 6px 8px; overflow-x: auto; flex: 1; }
  .sidebar nav a { padding: 6px 10px; white-space: nowrap; }
  .sidebar .me { display: flex; gap: 6px; align-items: center; border-top: none; padding: 6px 10px; margin-left: auto; }
  .sidebar .me .row { display: none; }
  .sidebar .me button, .sidebar .me form { width: auto !important; margin: 0 !important; }
  .main-inner { padding: 14px; }
  .grid-3 { grid-template-columns: 1fr; }
  .sec-wide { grid-column: span 1; }
  .kv { grid-template-columns: 110px 1fr; }
  .table th, .table td { padding: 6px 8px; }
  .overlay { padding: 2vh 10px; }
  .modal { padding: 14px; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 18px; }
}