/* ═══════════════════════════════════════════════════════════════════════════
   平台管理：项目管理页（js/platform.js），pf- 前缀自成一体
   ═══════════════════════════════════════════════════════════════════════════ */

/* 平台入口（不在任何项目里）：侧栏只留"平台"一栏，天气/AI 状态条也不显示（它们属于项目） */
body.platform-mode .sidebar-section:not(#nav-section-platform) { display: none !important; }
body.platform-mode .sidebar-footer .status-bar { display: none !important; }

.pf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.pf-kpi {
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.16);
}
.pf-kpi-label { font-size: 12px; color: var(--gray-500); }
.pf-kpi-num { font-size: 26px; font-weight: 700; color: var(--gray-800); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.pf-kpi-sub { font-size: 12px; color: var(--gray-400); }

/* 账号管理弹窗要放 7 列：比通用弹窗宽（通用规则在 responsive.css 里用了 !important，这里用 id 压住） */
#pf-users-modal .modal-box { width: min(1000px, calc(100vw - 28px)) !important; max-width: none; }
#pf-users-body td, #pf-tbody td:not(:first-child) { white-space: nowrap; }

.pf-name { font-weight: 600; color: var(--gray-800); }
.pf-sub { font-size: 12px; color: var(--gray-400); margin-top: 2px; }
.pf-row-off td { opacity: .55; }
.pf-ops { white-space: nowrap; }
.pf-ops .btn + .btn { margin-left: 4px; }
.pf-danger { color: var(--danger) !important; }
.pf-link { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.pf-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pf-badge.on { background: rgba(16,185,129,.14); color: #34d399; }
.pf-badge.off { background: rgba(100,116,139,.18); color: var(--gray-400); }

.pf-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius);
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); font-size: 13px;
}
.pf-result > div { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-pwd { font-family: Consolas, monospace; font-size: 12.5px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.06); user-select: all; }
.pf-result code { font-family: Consolas, monospace; font-size: 13px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.08); }

.pf-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.pf-json { width: 100%; min-height: 220px; font-family: Consolas, monospace; font-size: 12.5px; line-height: 1.55; resize: vertical; }

/* 行内小表单（新建账号 / 加入已有人员）：一行排开，窄屏自动换行 */
.pf-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pf-inline-form .form-input { width: auto; flex: 1 1 140px; min-width: 120px; }
.pf-mini { padding: 3px 8px !important; font-size: 12px !important; }

@media (max-width: 900px) {
  .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── 侧栏左下角：切换项目 / 修改密码（js/account.js）─────────────────────── */
.sidebar-acct-btns { display: flex; gap: 6px; }
.btn-acct {
  flex: 1; margin-bottom: 8px;  /* 间距放在按钮上：两个都隐藏时不留空白 */
  padding: 7px 6px; border-radius: 7px; cursor: pointer; font-size: 12px;
  background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.2); color: #cbd5e1;
  transition: background .15s, border-color .15s;
}
.btn-acct:hover { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.35); }
@media (max-width: 1180px) { .sidebar-acct-btns { display: none !important; } }

/* ─── 选择 / 切换项目（js/account.js）：一张清单，项目简称做主角 ─────────────
   一行一个项目：大号简称 + 开发商/角色；右侧"上次进入""今日识别"帮你认出要去的那个。
   悬停或键盘选中时左侧细条点亮；数字用大屏同款 Chakra Petch。 */
@font-face {
  font-family: 'Chakra Petch'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/bigscreen/assets/fonts/ChakraPetch-600.ttf') format('truetype');
}
.pp-overlay {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: rgba(5,9,18,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pp-panel {
  width: min(560px, 100%); max-height: 100%; overflow-y: auto;
  padding: 26px 26px 14px; border-radius: 16px;
  background: #0d1626; border: 1px solid rgba(120,160,220,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  animation: pp-in .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes pp-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pp-title { font-size: 20px; font-weight: 700; color: #e6eefc; letter-spacing: .02em; }
.pp-sub { margin-top: 6px; font-size: 13px; color: #8ba0c4; }
.pp-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 13px;
  background: transparent; border: 1px solid rgba(120,160,220,.2); color: #8ba0c4;
}
.pp-close:hover, .pp-close:focus-visible { color: #e6eefc; border-color: rgba(34,211,238,.55); outline: none; }

.pp-list { display: flex; flex-direction: column; border-top: 1px solid rgba(120,160,220,.12); }
.pp-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 16px 12px 16px 22px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid rgba(120,160,220,.12);
  color: inherit; font: inherit; transition: background .18s;
}
.pp-row::before {
  content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px;
  background: rgba(120,160,220,.22); transition: background .18s, box-shadow .18s;
}
.pp-row:hover, .pp-row:focus-visible { background: rgba(34,211,238,.06); outline: none; }
.pp-row:hover::before, .pp-row:focus-visible::before { background: #22d3ee; box-shadow: 0 0 12px rgba(34,211,238,.55); }
.pp-name { display: block; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: .03em; color: #e6eefc; }
.pp-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; color: #8ba0c4; }
.pp-role { padding: 1px 9px; border-radius: 999px; border: 1px solid rgba(139,160,196,.3); color: #b9c8e2; }
.pp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12.5px; color: #8ba0c4; white-space: nowrap; }
.pp-num { font-family: 'Chakra Petch', 'Microsoft YaHei', sans-serif; font-weight: 600; font-size: 14px; color: #d6e4fb; letter-spacing: .02em; }
.pp-row.is-current { cursor: default; }
.pp-row.is-current:hover { background: transparent; }
.pp-row.is-current::before { background: rgba(34,211,238,.45); box-shadow: none; }
.pp-here { color: #22d3ee; }
.pp-list.is-busy { opacity: .55; pointer-events: none; }
@media (max-width: 520px) {
  .pp-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pp-side { flex-direction: row; align-items: center; gap: 14px; }
  .pp-name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-panel { animation: none; }
  .pp-row, .pp-row::before { transition: none; }
}