/* ============================================================
   institution-v2.css — 机构端 PC（V2 明亮工具风 · 桌面密集档）
   设计系统：NDBI V2（DESIGN-V2.md · shared/tokens-v2.css）
   端纪律（§5.3）：中性冷白底 + 明亮蓝主色 + 冷灰阶；
   卡片圆角 8px / Flat 无影 / 1px --border；
   珊瑚 --cta-500 仅用于「需要对方行动」的操作钮（催办/交付/发送）；
   侧边导航激活态：--primary-50 底 + 左 3px --primary-500 指示条 + --primary-700 文字；
   表格：表头 --bg-subtle / 行分隔 1px --border / hover --bg-hover；
   数字 tabular-nums；经营数据可红绿同比，健康发育数据禁红绿涨跌隐喻。
   ============================================================ */

/* ============ 骨架：侧边导航 240px + 主区域 ============ */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:240px; flex:none;
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border); }
.brand-mark {
  width:24px; height:24px; border-radius:6px; flex:none;
  background:var(--primary-500);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark svg { width:15px; height:15px; }
.brand-name { font-size:14px; font-weight:600; color:var(--text-heading); line-height:1.3; }
.brand-sub { font-size:12px; color:var(--text-tertiary); line-height:1.3; margin-top:1px; }

.nav { padding:12px 8px; flex:1; }
.nav-group { font-size:12px; color:var(--text-tertiary); padding:6px 12px 6px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  height:36px; padding:0 12px; border-radius:6px;
  font-size:13px; color:var(--text-secondary); line-height:1;
  transition:background .15s, color .15s;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active {
  background:var(--primary-50); color:var(--primary-700); font-weight:600;
  box-shadow:inset 3px 0 0 var(--primary-500);
}
.nav-num { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--text-tertiary); }
.nav-item.active .nav-num { color:var(--primary-700); }

.sidebar-foot {
  display:flex; justify-content:space-between; gap:8px;
  padding:12px 16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-tertiary);
}

.main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ============ 顶栏 56px：面包屑 12px + 用户区 ============ */
.topbar {
  height:56px; flex:none;
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 24px;
  position:sticky; top:0; z-index:var(--z-sticky);
}
.crumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); }
.crumb .sep { color:var(--text-placeholder); }
.crumb .current { color:var(--text-primary); font-weight:500; }
.user-area { display:flex; align-items:center; gap:10px; }
.avatar {
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--primary-100); color:var(--primary-700);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
}
.user-name { font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.3; }
.user-role { font-size:12px; color:var(--text-tertiary); line-height:1.3; }

/* ============ 内容区 ============ */
.content { padding:24px; display:flex; flex-direction:column; gap:16px; }

.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.page-title { font-size:18px; font-weight:600; color:var(--text-heading); line-height:1.35; }
.page-desc { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.page-actions { display:flex; align-items:center; gap:8px; }

/* ============ 卡片（机构端 8px 圆角 · Flat） ============ */
.card {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:8px; /* V2 §5.3 机构端卡 8px（覆盖工作台 10px 默认） */
}
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 16px 12px; }
.card-title { font-size:15px; font-weight:600; color:var(--text-heading); line-height:1.4; }
.card-sub { font-size:12px; color:var(--text-tertiary); margin-top:2px; }
.card-body { padding:16px; }
.card-foot {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-tertiary);
}

/* ============ 经营数据卡 ×5（标签 12px + 数值 24px tabular + 同比 12px） ============ */
.stat-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.stat-card { padding:16px; }
.stat-label { font-size:12px; color:var(--text-tertiary); }
.stat-value {
  font-size:24px; font-weight:600; color:var(--text-heading);
  line-height:1.2; margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.stat-trend { display:flex; align-items:center; gap:4px; font-size:12px; margin-top:6px; }
.stat-trend svg { flex:none; }
.trend-up  { color:var(--success-700); }      /* 经营向好：升绿 */
.trend-bad  { color:var(--warning-red-text); } /* 经营恶化：降红 */
.trend-flat { color:var(--text-tertiary); }

/* ============ 待办汇总条 ============ */
.grid-2 { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px; align-items:start; }
.todo-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0 16px 4px; }
.todo-sum-item { background:var(--bg-subtle); border-radius:6px; padding:8px 10px; }
.todo-sum-count { font-size:16px; font-weight:600; color:var(--text-heading); line-height:1.3; font-variant-numeric:tabular-nums; }
.todo-sum-label { font-size:12px; color:var(--text-tertiary); line-height:1.3; }

/* ============ 表格（表头 --bg-subtle / 行分隔 --border / hover --bg-hover） ============ */
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; }
.table th {
  background:var(--bg-subtle);
  font-size:12px; font-weight:500; color:var(--text-tertiary);
  text-align:left; padding:8px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
.table td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  font-size:13px; color:var(--text-primary); vertical-align:middle;
}
.table tbody tr { transition:background .15s; }
.table tbody tr:hover { background:var(--bg-hover); }
.table tbody tr:last-child td { border-bottom:none; }
.cell-main { font-weight:500; color:var(--text-primary); }
.cell-sub { font-size:12px; color:var(--text-tertiary); margin-top:1px; font-variant-numeric:tabular-nums; }
.ta-r { text-align:right; }

/* ============ 六件套仪表盘（240° 环形） ============ */
.gauge-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.gauge-svg { flex:none; }
.gauge-num {
  font-family:var(--font-sans); font-size:34px; font-weight:600;
  fill:var(--text-heading); font-variant-numeric:tabular-nums;
}
.gauge-cap { font-size:12px; fill:var(--text-tertiary); }
.gauge-legend { flex:1; min-width:260px; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.gauge-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-primary); }
.mark {
  width:18px; height:18px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1;
}
.mark-yes { background:var(--success-50); color:var(--success-700); }
.mark-mid { background:var(--review-pending-bg); color:var(--review-pending-text); }
.mark-no  { background:var(--bg-subtle); color:var(--text-placeholder); }
.gauge-status { margin-left:auto; font-size:12px; color:var(--text-tertiary); }

/* ============ 按钮尺寸（颜色语义沿用 tokens-v2） ============ */
.btn { height:32px; padding:0 14px; font-size:13px; }
.btn-sm { height:28px; padding:0 12px; font-size:12px; }
.btn svg { flex:none; }

/* ============ 页脚 ============ */
.page-foot {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--text-tertiary); padding-top:4px;
}

/* ============ 模态框与表单（机构端共用：M2 新增家庭 / M3 新建班级 / M4 员工管理） ============
   视觉沿用 V2 原型的模态框语言（遮罩 + 520px 卡片 + 步骤条 + 等宽码块），
   令牌全部来自 shared/tokens-v2.css，不引入新色相。
   ============================================================== */
.modal-mask{
  position:fixed; inset:0; z-index:var(--z-modal);
  background:rgba(17,24,39,.45); /* 遮罩：由令牌 --text-heading 同色相派生（45% 透明），不引入新色相 */
  display:none; align-items:center; justify-content:center; padding:var(--space-6);
}
.modal-mask.open{ display:flex; }
.modal{ width:520px; max-width:100%; background:var(--bg-surface); border-radius:var(--radius-card); box-shadow:var(--shadow-3); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.modal-title{ font-size:16px; font-weight:600; color:var(--text-heading); }
.modal-body{ padding:var(--space-5); }
.modal-foot{ display:flex; justify-content:flex-end; gap:var(--space-2); padding:var(--space-4) var(--space-5); border-top:1px solid var(--border); }
.modal-close{ width:28px; height:28px; border-radius:var(--radius-btn); display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); }
.modal-close:hover{ background:var(--bg-hover); color:var(--text-primary); }
.steps{ display:flex; flex-direction:column; gap:var(--space-5); }
.step{ display:flex; gap:var(--space-3); }
.step-num{
  width:24px; height:24px; flex:none; border-radius:var(--radius-chip);
  background:var(--primary-100); border:1px solid var(--primary-300);
  color:var(--primary-700); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.step-title{ font-size:14px; font-weight:600; color:var(--text-heading); }
.step-desc{ font-size:12px; color:var(--text-secondary); margin-top:2px; line-height:1.6; }
.invite-code{
  display:inline-block; margin-top:var(--space-2);
  font-family:var(--font-mono); font-size:18px; letter-spacing:.14em; color:var(--text-heading);
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-input);
  padding:6px 12px; font-variant-numeric:tabular-nums;
}
.qr{ margin-top:var(--space-2); width:96px; height:96px; padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-input); background:var(--bg-surface); }
.qr svg{ width:100%; height:100%; }

/* ---------- 表单（模态框内） ---------- */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field-full{ grid-column:1 / -1; }
.field-label{ font-size:12px; color:var(--text-secondary); }
.field-label .req{ color:var(--warning-red-text); margin-left:2px; }
.field-input{
  height:34px; border:1px solid var(--border); border-radius:var(--radius-input);
  background:var(--bg-surface); padding:0 var(--space-3);
  font-size:13px; color:var(--text-primary); font-family:inherit; width:100%;
}
.field-input::placeholder{ color:var(--text-placeholder); }
.field-input:focus{ outline:none; border-color:var(--primary-500); box-shadow:0 0 0 3px var(--primary-100); }
select.field-input{ padding-right:var(--space-2); }
.form-hint{ font-size:12px; color:var(--text-tertiary); margin-top:var(--space-3); line-height:1.6; }
.form-error{ font-size:12px; color:var(--warning-red-text); margin-top:var(--space-2); min-height:18px; line-height:1.5; }

/* ---------- 结果区（创建成功后回显家庭编号 / 邀请码 / 激活码） ---------- */
.result-box{ margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:8px; background:var(--bg-subtle); }
.result-row{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-2); flex-wrap:wrap; }
.result-label{ font-size:12px; color:var(--text-secondary); flex:none; }
.result-row .invite-code{ margin-top:0; }

/* ---------- 二次确认正文（停用等有副作用的操作） ---------- */
.confirm-text{ font-size:13px; color:var(--text-secondary); line-height:1.8; }
.confirm-text strong{ font-weight:600; color:var(--text-primary); }

/* ---------- 危险操作按钮（停用账号等不可逆/有副作用的二次确认）
   红色语义只用既有令牌 --warning-red / --bg-surface，不引入新色相、不写裸 HEX ---------- */
.btn-danger{ background:var(--warning-red); color:var(--bg-surface); border:1px solid var(--warning-red); }
.btn-danger:hover{ background:var(--warning-red-text); border-color:var(--warning-red-text); }
.btn-danger.btn-sm{ height:28px; padding:0 var(--space-3); font-size:12px; }

/* ---------- 提示条（模态框内的次级说明，与页面 .notice 同语义不同容器） ---------- */
.modal-hint{ font-size:12px; color:var(--text-secondary); line-height:1.7; margin-top:var(--space-4); }
.modal-hint strong{ font-weight:600; color:var(--text-primary); }

/* ============ 响应式（≥1280 主形态，窄屏降级不丢内容） ============ */
@media (max-width:1439px) {
  .stat-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .todo-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1279px) {
  .grid-2 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1023px) {
  .sidebar { display:none; }
  .stat-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .todo-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gauge-legend { grid-template-columns:1fr; }
}