/* ============ 代理招生第一批:代理管理页(纯新增,独立样式层) ============
   铁律:本文件只服务 .agent-page 容器,不写任何全局选择器,不覆盖 admin.css/ui-refresh.css 既有样式。
   所有规则都挂在 .agent-page 下,避免污染其它页面。 */

.agent-page { --agent-brand: var(--brand, #14A178); }

/* 页头下方的说明条:本批只读,写入操作留待第二批 */
.agent-page .agent-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; margin: 0 0 14px;
  border: 1px solid rgba(20, 161, 120, .25);
  border-radius: 10px;
  background: rgba(20, 161, 120, .06);
  color: var(--ink-2, #5b6472);
  font-size: 13px; line-height: 1.7;
}
.agent-page .agent-note b { color: var(--agent-brand); }

/* Tab 行:手机上可横滑,但不撑破页面 */
.agent-page .agent-tabs {
  display: flex; gap: 8px; margin: 0 0 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.agent-page .agent-tabs::-webkit-scrollbar { display: none; }
.agent-page .agent-tab {
  flex: 0 0 auto; min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--line, #e3e7ee);
  background: #fff; color: var(--ink-2, #5b6472);
  font-size: 14px; cursor: pointer; white-space: nowrap;
}
.agent-page .agent-tab.active {
  border-color: var(--agent-brand);
  color: var(--agent-brand);
  background: rgba(20, 161, 120, .08);
  font-weight: 600;
}
.agent-page .agent-tab .num {
  font-size: 12px; color: var(--ink-3, #8a93a3);
}
.agent-page .agent-tab.active .num { color: var(--agent-brand); }

/* 工具条 */
.agent-page .agent-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 12px;
}
.agent-page .agent-toolbar input,
.agent-page .agent-toolbar select {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line, #e3e7ee); border-radius: 8px;
  background: #fff; color: var(--ink, #1f2430); font-size: 14px;
  max-width: 100%;
}
.agent-page .agent-toolbar input { flex: 1 1 200px; min-width: 0; }
.agent-page .agent-btn {
  height: 38px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line, #e3e7ee); background: #fff;
  color: var(--ink-2, #5b6472); font-size: 14px; cursor: pointer;
}
.agent-page .agent-btn.primary {
  border-color: var(--agent-brand); background: var(--agent-brand); color: #fff;
}

/* 数据表(桌面) */
.agent-page .agent-table-wrap {
  border: 1px solid var(--line, #e3e7ee); border-radius: 12px;
  background: #fff; overflow-x: auto;
}
.agent-page table.agent-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.agent-page table.agent-tbl th,
.agent-page table.agent-tbl td {
  padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line, #eef1f5);
}
.agent-page table.agent-tbl th {
  font-weight: 600; color: var(--ink-2, #5b6472); background: #fafbfc;
}
.agent-page table.agent-tbl tr:last-child td { border-bottom: 0; }
.agent-page .agent-mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; }

/* 状态徽标 */
.agent-page .agent-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 12px; line-height: 1.6; white-space: nowrap;
}
.agent-page .agent-badge.ok { color: #0b7a5b; background: rgba(20, 161, 120, .12); }
.agent-page .agent-badge.warn { color: #a86a00; background: rgba(240, 173, 32, .16); }
.agent-page .agent-badge.bad { color: #b0392f; background: rgba(214, 69, 69, .12); }
.agent-page .agent-badge.gray { color: #6b7280; background: rgba(107, 114, 128, .12); }

/* 空态 / 错误态 / 加载态 */
.agent-page .agent-state {
  padding: 40px 16px; text-align: center; color: var(--ink-3, #8a93a3);
  font-size: 14px; line-height: 1.9;
}
.agent-page .agent-state .big { font-size: 32px; display: block; margin-bottom: 8px; }
.agent-page .agent-state .agent-btn { margin-top: 12px; }

/* 手机卡片(默认隐藏,≤767 显示) */
.agent-page .agent-cards { display: none; }
.agent-page .agent-card {
  border: 1px solid var(--line, #e3e7ee); border-radius: 12px;
  background: #fff; padding: 12px 14px; margin-bottom: 10px;
}
.agent-page .agent-card .row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 13px; line-height: 1.7;
}
.agent-page .agent-card .row .k { color: var(--ink-3, #8a93a3); flex: 0 0 auto; }
.agent-page .agent-card .row .v { color: var(--ink, #1f2430); text-align: right; word-break: break-all; }
.agent-page .agent-card .name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }

/* ============ 第二批:写操作按钮 / 操作列 / 合计 ============ */
.agent-page .agent-btn.danger { border-color: rgba(214, 69, 69, .45); color: #b0392f; background: #fff; }
.agent-page .agent-btn:disabled { opacity: .5; cursor: not-allowed; }
.agent-page .agent-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-page .agent-ops .agent-btn { height: 32px; padding: 0 10px; font-size: 13px; }
.agent-page .agent-dim { color: var(--ink-3, #8a93a3); font-size: 12px; }
.agent-page .agent-totals {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: rgba(20, 161, 120, .07); border: 1px solid rgba(20, 161, 120, .2);
  font-size: 13px; color: var(--ink-2, #5b6472);
}
.agent-page .agent-totals b { color: var(--ink, #1f2430); }
.agent-page .agent-totals .neg, .agent-modal .neg { color: #b0392f; }

/* ============ 第二批:表单弹窗(独立命名空间 .agent-modal,不依赖 admin.css) ============ */
.agent-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 20, 25, .45);
}
.agent-modal .agent-dialog {
  width: 100%; max-width: 520px; max-height: calc(100vh - 32px);
  overflow: auto; background: #fff; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.agent-modal .hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #eef1f5; font-size: 15px;
}
.agent-modal .hd .agent-x {
  width: 32px; height: 32px; border: 0; background: transparent;
  font-size: 18px; color: #8a93a3; cursor: pointer; border-radius: 8px;
}
.agent-modal .bd { padding: 14px 16px; }
.agent-modal .ft {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px; border-top: 1px solid #eef1f5;
}
.agent-modal .agent-btn {
  height: 38px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #e3e7ee; background: #fff; color: #5b6472;
  font-size: 14px; cursor: pointer;
}
.agent-modal .agent-btn.primary { border-color: #14A178; background: #14A178; color: #fff; }
.agent-modal .agent-btn:disabled { opacity: .5; cursor: not-allowed; }
.agent-modal .agent-field { display: block; margin-bottom: 12px; }
.agent-modal .agent-field > span { display: block; font-size: 13px; color: #5b6472; margin-bottom: 6px; }
.agent-modal .agent-field > span i { color: #b0392f; font-style: normal; }
.agent-modal .agent-field input,
.agent-modal .agent-field select,
.agent-modal .agent-field textarea {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid #e3e7ee; border-radius: 8px;
  font-size: 14px; color: #1f2430; background: #fff; max-width: 100%;
}
.agent-modal .agent-field textarea { resize: vertical; min-height: 56px; }
.agent-modal .agent-field em { display: block; font-size: 12px; color: #8a93a3; font-style: normal; margin-top: 4px; }
.agent-modal .agent-note2 {
  padding: 10px 12px; border-radius: 8px; background: #f6f8fa;
  color: #5b6472; font-size: 12px; line-height: 1.7; margin-top: 4px;
}
.agent-modal .agent-quota {
  margin-top: 10px; font-size: 13px; line-height: 1.8; color: #5b6472;
}
.agent-modal .agent-quota:empty { display: none; }
.agent-modal .agent-err {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: rgba(214, 69, 69, .1); color: #b0392f; font-size: 13px; line-height: 1.6;
}

/* 手机端:表格收起,改卡片;工具条纵向排布;绝不横向溢出 */
@media (max-width: 767px) {
  .agent-page .agent-table-wrap { display: none; }
  .agent-page .agent-cards { display: block; }
  .agent-page .agent-toolbar { gap: 8px; }
  .agent-page .agent-toolbar input { flex: 1 1 100%; }
  .agent-page .agent-toolbar select { flex: 1 1 calc(50% - 4px); }
  .agent-page .agent-note { font-size: 12px; }
  .agent-page .agent-tab { min-height: 44px; }
  .agent-page .agent-btn { min-height: 44px; }
  .agent-page .agent-card .ops { flex-wrap: wrap; justify-content: flex-end; padding-top: 8px; }
  .agent-page .agent-ops { justify-content: flex-end; }
  .agent-modal { align-items: flex-end; padding: 0; }
  .agent-modal .agent-dialog { max-width: 100%; border-radius: 14px 14px 0 0; max-height: 88vh; }
  .agent-modal .agent-btn { min-height: 44px; }
  .agent-modal .agent-field input,
  .agent-modal .agent-field select,
  .agent-modal .agent-field textarea { font-size: 16px; } /* 防 iOS 聚焦自动放大 */
}