/* CCMS Admin — dark theme */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: -apple-system, "Segoe UI", "Noto Sans CJK TC", sans-serif;
  background: #1e1e26; color: #e4e4e7;
}
.hidden { display: none !important; }

/* Header */
.admin-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: #111118;
  border-bottom: 1px solid #2a2a35;
}
.admin-header h1 { margin: 0; font-size: 20px; color: #f4f4f5; }
.top-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.top-nav .btn, .top-nav .btn-link, .btn {
  background: #2a2a35; color: #e4e4e7; border: 0;
  padding: 6px 12px; border-radius: 4px; cursor: pointer; text-decoration: none;
  font-size: 14px;
}
.btn:hover, .btn-link:hover { background: #3a3a45; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #6366f1; }
.btn-danger { background: #991b1b; color: #fecaca; }
.btn-danger:hover { background: #b91c1c; }

/* Main grid */
.main-grid {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: calc(100vh - 55px);
}
.sidebar {
  background: #111118; border-right: 1px solid #2a2a35;
  padding: 16px 0;
  display: flex; flex-direction: column; gap: 4px;
}
.nav-link {
  padding: 10px 20px; color: #a1a1aa; text-decoration: none;
  border-left: 3px solid transparent;
  font-size: 14px;
}
.nav-link:hover { background: #1e1e26; color: #e4e4e7; }
.nav-link.active { background: #1e1e26; color: #f4f4f5; border-left-color: #4f46e5; }

#content { padding: 20px; }
#content h2 { margin-top: 0; color: #f4f4f5; font-size: 20px; }
.loading { color: #a1a1aa; padding: 40px; text-align: center; }
.err { color: #fca5a5; margin: 8px 0; }

/* Tables */
table {
  width: 100%; border-collapse: collapse; margin-top: 12px;
  background: #111118; border-radius: 6px; overflow: hidden;
}
th, td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid #2a2a35;
  font-size: 14px;
}
th { background: #1a1a24; color: #a1a1aa; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #1a1a24; }
td .btn { padding: 4px 8px; font-size: 12px; margin-right: 4px; }

/* Forms */
.form-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;
}
.form-row label { min-width: 120px; color: #a1a1aa; font-size: 14px; }
input[type="text"], input[type="password"], input[type="email"], select {
  background: #1e1e26; color: #e4e4e7; border: 1px solid #2a2a35;
  border-radius: 4px; padding: 8px 10px; font-size: 14px;
  min-width: 200px;
}
input:focus, select:focus { outline: none; border-color: #4f46e5; }

/* Cards (Dashboard) */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin-top: 16px;
}
.card {
  background: #111118; border: 1px solid #2a2a35; border-radius: 8px;
  padding: 20px;
}
.card-label { color: #a1a1aa; font-size: 13px; margin-bottom: 8px; }
.card-value { color: #f4f4f5; font-size: 28px; font-weight: 600; }

/* Badge */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 12px; font-weight: 500;
}
.badge-admin { background: #4c1d95; color: #ddd6fe; }
.badge-user  { background: #1e293b; color: #cbd5e1; }
.badge-active { background: #064e3b; color: #6ee7b7; }
.badge-stale  { background: #713f12; color: #fcd34d; }
.badge-retired { background: #4b1d1d; color: #fca5a5; }

/* Forbidden / Error panels */
.forbidden-panel {
  max-width: 400px; margin: 80px auto; padding: 24px;
  background: #111118; border: 1px solid #2a2a35; border-radius: 8px;
  text-align: center;
}
.forbidden-panel h2 { margin-top: 0; }
.forbidden-panel a { margin-top: 12px; display: inline-block; }

/* Color picker (factions) */
input.color-input[type="color"] {
  width: 48px; min-width: 48px; height: 32px;
  padding: 2px; background: #1e1e26;
  border: 1px solid #2a2a35; border-radius: 4px;
  cursor: pointer;
}
td .f-name, td .f-desc { min-width: 140px; }

/* Scrollable container for large tables (41-row cities) */
.scroll-table {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  border: 1px solid #2a2a35; border-radius: 6px;
}
.scroll-table table { margin-top: 0; border-radius: 0; }
.scroll-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #1a1a24;
}
td input[type="text"], td select { min-width: 120px; }

/* ==== 🧬 使用者行為面板 ==== */
.behavior-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}
.behavior-table th,
.behavior-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #2a2a35;
  vertical-align: middle;
}
.behavior-table thead th {
  background: #1a1a24;
  font-weight: 600;
  color: #cbd5e1;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 1;
}
.behavior-table tbody tr:hover { background: rgba(99, 102, 241, 0.05); }

.behavior-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.behavior-table .col-user .u-name { font-weight: 600; color: #e2e8f0; }
.behavior-table .col-user .u-sub  { font-size: 11px; color: #64748b; margin-top: 2px; }

.persona-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.score-bar {
  width: 80px;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 2px;
}
.score-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s;
}
.score-num {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.col-detail .tk-bar {
  display: flex;
  width: 160px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.tk-seg { display: block; height: 100%; }
.tk-in { background: #60a5fa; }
.tk-out { background: #a78bfa; }
.tk-cr { background: #4ade80; }
.tk-cw { background: #fbbf24; }

.legend {
  margin: 10px 0 4px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.legend-box {
  display: inline-block;
  width: 14px; height: 10px;
  border-radius: 2px;
  margin-left: 4px;
}

.hint {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.7;
  margin: 6px 0 4px;
}
.hint strong { color: #cbd5e1; }

.empty {
  text-align: center;
  color: #64748b;
  padding: 30px 0 !important;
}

/* ==== ? hover tooltip on behavior table headers ==== */

.tip-th {
  position: relative;
  white-space: nowrap;
  cursor: help;
}
.tip-ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: rgba(255,255,255,0.1);
  color: #94a3b8;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
  transition: all 0.15s;
  vertical-align: middle;
}
.tip-th:hover .tip-ico {
  background: #4f46e5;
  color: #fff;
}

/* Hidden by default; shown on parent hover */
.tip-pop {
  display: none;
  position: absolute;
  z-index: 100;
  width: 340px;
  padding: 12px 14px;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  font-size: 12px;
  line-height: 1.7;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
.tip-th:hover + .tip-th + .tip-pop,  /* ignore — simpler rule below */
.tip-th:hover ~ .tip-pop { /* using sibling general not needed */ }

/* Actual logic: JS-free, use CSS :has / adjacent? Simpler: position relative to th + :hover.
   Use :hover on th then show inner popover. */
.tip-th:hover::after,
.tip-th:hover::before { z-index: 10; }

.tip-pop .tip-title {
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 6px;
  font-size: 13px;
}
.tip-pop .tip-body div { margin-bottom: 2px; }
.tip-pop .tip-body b { color: #a5b4fc; font-weight: 600; }
.tip-pop .tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tip-pop .tip-bg {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* JS-driven positioning via data-tip-id: on hover show the matching #tip-xxx popover
   next to the th. We use a simple CSS rule: show popovers in a grid row below thead. */

/* Default: hide all */
.tip-pop[id] { display: none; }
/* Show the one adjacent to hovered th via :has() if supported;
   fallback: position popovers absolutely under the hovered th via JS. */

/* JS approach (simplest): add data-tip-show attribute to <body> on hover,
   match specific popover. We'll use CSS + JS combo below. */
[data-active-tip] .tip-pop[id] { display: none; }
[data-active-tip="tip-persona"]    #tip-persona    { display: block; }
[data-active-tip="tip-score"]      #tip-score      { display: block; }
[data-active-tip="tip-total"]      #tip-total      { display: block; }
[data-active-tip="tip-cache"]      #tip-cache      { display: block; }
[data-active-tip="tip-churn"]      #tip-churn      { display: block; }
[data-active-tip="tip-outin"]      #tip-outin      { display: block; }
[data-active-tip="tip-cost"]       #tip-cost       { display: block; }
[data-active-tip="tip-perkout"]    #tip-perkout    { display: block; }
[data-active-tip="tip-dist"]       #tip-dist       { display: block; }

/* Position popover: fixed to viewport, below header, centered */
.tip-pop {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 92vw);
  pointer-events: none; /* 避免 popover 擋到下面 th 觸發 mouseleave 抖動 */
}

/* ==== 使用者 filter bar + 可排序欄位（2026-06-12）==== */
.filter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 4px;
}
.filter-bar select { min-width: 120px; }

/* 可點排序的欄位標題 */
th.u-sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
th.u-sort-th:hover { color: #e4e4e7; }
th.u-sort-active { color: #c7d2fe; }
.u-sort-arrow { color: #818cf8; font-size: 11px; }

/* 合併 tab 內未綁城時的佔位字樣 */
.muted { color: #52525b; }

/* ==== Dashboard 機器資源 section（需求3，2026-06-12）==== */
.res-title { margin: 28px 0 4px; color: #f4f4f5; font-size: 17px; }
.res-table .res-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.res-node .res-name { font-weight: 600; color: #e2e8f0; }
.res-node .res-url  { font-size: 11px; color: #64748b; margin-top: 2px; }

/* 資源儲存格：進度條 + 文字（使用 vs 剩餘分明，2026-07-09）。
   res-bar = 剩餘 track（底色）；res-bar-fill = 已用（依 used% 分級著色）。 */
.res-table .res-cell { vertical-align: middle; min-width: 150px; }
.res-meter { display: flex; flex-direction: column; gap: 3px; }
.res-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: #27272a; overflow: hidden;
}
.res-bar-fill {
  height: 100%; border-radius: 999px; background: #52525b;
  transition: width .2s ease;
}
.res-bar-ok   { background: #22c55e; }  /* 綠 <70% */
.res-bar-warn { background: #eab308; }  /* 黃 70–89% */
.res-bar-crit { background: #ef4444; }  /* 紅 ≥90% */
.res-meter-text {
  font-size: 12px; color: #cbd5e1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* hint 內小色塊圖例 */
.res-legend {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  vertical-align: middle; margin: 0 2px 0 6px;
}

/* 過期 / 採樣中的列整體降低存在感，避免誤把過期值當即時 */
.res-row.res-stale td    { color: #9ca3af; }
.res-row.res-sampling td { color: #a1a1aa; }
.res-row.res-stale .res-meter-text,
.res-row.res-sampling .res-meter-text { color: #9ca3af; }

/* 新鮮度徽章 */
.res-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.res-badge-fresh    { background: #064e3b; color: #6ee7b7; }
.res-badge-stale    { background: #4b1d1d; color: #fca5a5; }
.res-badge-sampling { background: #374151; color: #cbd5e1; }

/* ===== Session State Badges ===== */
.ss-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ss-AVAILABLE { background: #064e3b; color: #6ee7b7; }
.ss-LOCKED    { background: #1e3a5f; color: #93c5fd; }
.ss-CLOSED    { background: #2d2d35; color: #71717a; }
.ss-CRASHED   { background: #4b1d1d; color: #fca5a5; }

/* ===== Session Table: resizable columns ===== */
.sessions-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.sessions-table th { position: relative; overflow: hidden; white-space: nowrap; user-select: none; }
.sessions-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.sessions-table tbody tr { cursor: pointer; }
.sessions-table tbody tr:hover td { background: #1e1e2e; }
.col-resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 6px; cursor: col-resize;
  background: transparent;
}
.col-resize-handle:hover, .col-resize-active { background: #4f46e5; }

/* ===== Session Detail Modal ===== */
.sdm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.sdm-box {
  background: #111118; border: 1px solid #2a2a35; border-radius: 8px;
  width: min(700px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; overflow: hidden;
}
.sdm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #2a2a35; flex-shrink: 0;
}
.sdm-header h3 { margin: 0; font-size: 16px; color: #f4f4f5; }
.sdm-close { background: none; border: none; color: #71717a; font-size: 20px; cursor: pointer; padding: 2px 6px; line-height: 1; }
.sdm-close:hover { color: #f4f4f5; }
.sdm-body { overflow-y: auto; padding: 16px 20px 20px; }
/* Section blocks — same pattern as monitor/sim */
.sdm-section { margin-bottom: 16px; }
.sdm-section:last-child { margin-bottom: 0; }
.sdm-section h3 {
  font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: #52525b; margin: 0 0 6px;
}
/* Key-value table — same pattern as monitor/sim table.kv */
table.sdm-kv {
  width: auto; border: none; background: none; border-collapse: collapse; margin: 0;
}
table.sdm-kv td {
  border: none; border-bottom: 1px solid #1e1e26;
  padding: 4px 14px 4px 0; font-size: 13px; vertical-align: top;
}
table.sdm-kv tr:last-child td { border-bottom: none; }
table.sdm-kv td:first-child { color: #71717a; white-space: nowrap; padding-right: 20px; min-width: 100px; }
.sdm-uuid  { font-family: monospace; font-size: 12px; letter-spacing: .03em; }
.sdm-copy-row { display: flex; gap: 8px; align-items: center; }
.sdm-copy-btn {
  font-size: 11px; padding: 2px 8px; background: #1e1e2e; border: 1px solid #2a2a35;
  border-radius: 4px; color: #a1a1aa; cursor: pointer; white-space: nowrap;
}
.sdm-copy-btn:hover { background: #2a2a3e; color: #f4f4f5; }
.sdm-copy-btn.copied { color: #6ee7b7; border-color: #064e3b; }
.sdm-resume-block {
  background: #0a0a12; border: 1px solid #2a2a35; border-radius: 4px;
  padding: 10px 14px; font-family: monospace; font-size: 13px; color: #a78bfa;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sdm-footer {
  display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid #2a2a35;
  flex-shrink: 0; flex-wrap: wrap;
}