/* ============================================

 * 麦兜 PC 端 - 公共样式 v2.0

 * 现代化 SaaS 设计 (Element / Ant Design Pro 风格)

 * ============================================ */



:root {

  /* 主色 */

  --primary-color: #5B8C5A;

  --primary-hover: #4A7349;

  --primary-active: #3D5F3C;

  --primary-light: #e8f5e9;

  --primary-lighter: #f0f7f0;



  /* 强调色 */

  --accent-color: #D4A574;



  /* 语义色 */

  --info-color: #1890ff;

  --info-light: #e6f7ff;

  --success-color: #52c41a;

  --success-light: #f6ffed;

  --warning-color: #fa8c16;

  --warning-light: #fff7e6;

  --danger-color: #ff4d4f;

  --danger-light: #fff1f0;



  /* 中性色 */

  --text-1: #1f1f1f;        /* 标题 */

  --text-2: #434343;        /* 正文 */

  --text-3: #595959;        /* 次要 */

  --text-4: #8c8c8c;        /* 辅助 */

  --text-5: #bfbfbf;        /* 占位 */

  --text-disabled: #d9d9d9;



  --bg-body: #f0f2f5;       /* 页面背景 */

  --bg-card: #ffffff;

  --bg-hover: #fafafa;

  --bg-disabled: #f5f5f5;



  --border-1: #d9d9d9;

  --border-2: #e8e8e8;

  --border-3: #f0f0f0;



  /* 侧边栏 */

  --sidebar-bg: #001529;

  --sidebar-bg-hover: #1f2d3d;

  --sidebar-text: #c0c4cc;

  --sidebar-text-hover: #ffffff;

  --sidebar-text-active: #ffffff;

  --sidebar-active-bg: #5B8C5A;

  --sidebar-width: 200px;

  --sidebar-collapsed-width: 64px;



  /* 阴影 */

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);

  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);

  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);

  --shadow-xl: 0 8px 24px rgba(0,0,0,0.12);



  /* 圆角 */

  --radius-sm: 4px;

  --radius-md: 6px;

  --radius-lg: 10px;

  --radius-xl: 16px;

}



/* ===== Reset ===== */

*, *::before, *::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html, body {

  height: 100%;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,

               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",

               "Helvetica Neue", Arial, sans-serif;

  font-size: 14px;

  color: var(--text-2);

  background: var(--bg-body);

  line-height: 1.5715;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



a { color: var(--primary-color); text-decoration: none; }

a:hover { color: var(--primary-hover); }



/* ===== 整体布局 ===== */

.app-container {

  display: flex;

  min-height: 100vh;

}



/* ===== 侧边栏（深色） ===== */

.sidebar {

  width: var(--sidebar-width, 232px) !important;

  min-width: var(--sidebar-width, 232px) !important;

  background: var(--sidebar-bg, #001529) !important;

  position: fixed;

  display: flex;

  flex-direction: column;

  top: 0;

  left: 0;

  height: 100vh;

  overflow-y: auto;

  overflow-x: hidden;

  z-index: 100;

  transition: width 0.3s ease;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,

               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",

               "Helvetica Neue", Arial, sans-serif !important;

  font-size: 14px !important;

  line-height: 1.5715 !important;

  color: var(--sidebar-text, #c0c4cc) !important;

  box-sizing: border-box;

}



.sidebar.collapsed {

  width: var(--sidebar-collapsed-width) !important;

  min-width: var(--sidebar-collapsed-width) !important;

}



.sidebar.collapsed .logo-info,

.sidebar.collapsed .logo-text,

.sidebar.collapsed .logo-sub,

.sidebar.collapsed .nav-section-title,

.sidebar.collapsed .nav-text,

.sidebar.collapsed .nav-badge {

  display: none !important;

}

.sidebar.collapsed .nav-section-header {

  display: none !important;

}

.sidebar.collapsed .nav-section-body {

  display: block !important;

}



.sidebar.collapsed .sidebar-logo {

  justify-content: center;

  padding: 0 14px;

}



.sidebar.collapsed .nav-item {

  justify-content: center;

  padding: 0;

}



.sidebar.collapsed .nav-icon {

  margin-right: 0;

}



/* 折叠按钮 */

.sidebar-toggle {

  width: 100%;

  height: 48px;

  background: rgba(255,255,255,0.05);

  border: none;

  border-top: 1px solid rgba(255,255,255,0.1);

  color: #fff;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  transition: all 0.2s;

  flex-shrink: 0;

}



/* 展开/折叠状态图标（SVG，由 JS 注入 data-icon=menu/grid） */
.sidebar-toggle .ico {
  width: 20px;
  height: 20px;
}



/* 折叠状态图标由 JS 切换为 data-icon="grid"，无需 CSS content */



.sidebar-toggle:hover {

  background: rgba(255,255,255,0.1);

}



.sidebar::-webkit-scrollbar { width: 6px; }

.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }



.sidebar-logo {

  height: 64px !important;

  min-height: 64px !important;

  padding: 0 20px;

  display: flex;

  align-items: center;

  gap: 12px;

  border-bottom: 1px solid rgba(255,255,255,0.06);

  background: rgba(0,0,0,0.2);

  flex-shrink: 0;

  box-sizing: border-box;

}



/* 折叠时保持图标居中 */

.sidebar.collapsed .sidebar-logo {

  padding: 0 !important;

  justify-content: center !important;

  display: flex !important;

  align-items: center !important;

  flex-direction: row !important;

  gap: 0 !important;

}



.sidebar.collapsed .sidebar-logo .logo-info {

  display: none !important;

}



.sidebar.collapsed .logo-icon {

  margin: 0 auto !important;

  flex-shrink: 0 !important;

}



/* 折叠按钮居中 */

.sidebar.collapsed .sidebar-toggle {

  width: 100%;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

}



.sidebar.collapsed .sidebar-toggle::before {

  text-align: center;

}



.logo-icon {

  width: 36px;

  height: 36px;

  min-width: 36px;

  min-height: 36px;

  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 18px;

  box-shadow: 0 2px 8px rgba(91,140,90,0.4);

  flex-shrink: 0;

}



.logo-info {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.logo-text {

  font-size: 16px !important;

  font-weight: 600;

  color: #fff !important;

  letter-spacing: 0.5px;

  line-height: 1.2 !important;

  display: block;

}



.logo-sub {

  font-size: 11px !important;

  color: rgba(255,255,255,0.4) !important;

  letter-spacing: 0.5px;

  margin-top: 2px;

  display: block !important;

  line-height: 1.2 !important;

}



.sidebar-nav {

  padding: 12px 0;

  flex: 1;

  overflow-y: auto;

}



.nav-section {

  margin-bottom: 4px;

}



.nav-section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 20px 6px;

  cursor: pointer;

  user-select: none;

}

.sidebar:not(.collapsed) .nav-section-header:hover .nav-section-title {

  color: rgba(255,255,255,0.7) !important;

}

.nav-section-title {

  font-size: 14px !important;

  color: rgba(255,255,255,0.45) !important;

  letter-spacing: normal;

  text-transform: none;

  font-weight: 600 !important;

  line-height: 1.4 !important;

  display: block;

  box-sizing: border-box;

}

.nav-caret {

  width: 0;

  height: 0;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 5px solid rgba(255,255,255,0.4);

  transition: transform 0.2s ease;

  flex-shrink: 0;

  margin-left: 8px;

}

.nav-section.collapsed .nav-caret {

  transform: rotate(-90deg);

}

.nav-section-body {

  /* 子菜单容器，默认展开 */

}

.nav-section.collapsed .nav-section-body {

  display: none;

}



.nav-item {

  display: flex !important;

  align-items: center;

  padding: 0 20px !important;

  height: 42px !important;

  min-height: 42px !important;

  color: var(--sidebar-text, #c0c4cc) !important;

  text-decoration: none;

  transition: all 0.2s;

  cursor: pointer;

  gap: 12px;

  position: relative;

  font-size: 14px !important;

  line-height: 1 !important;

  border-left: 3px solid transparent;

  box-sizing: border-box;

}



.nav-item:hover {

  background: var(--sidebar-bg-hover);

  color: var(--sidebar-text-hover);

}



.nav-item.active {

  background: var(--sidebar-active-bg);

  color: var(--sidebar-text-active);

  border-left-color: #FFD700;

  font-weight: 500;

}



.nav-item .nav-icon {

  font-size: 16px !important;

  width: 18px !important;

  min-width: 18px !important;

  text-align: center;

  flex-shrink: 0;

  line-height: 1 !important;

  display: inline-block;

}



.nav-item .nav-text {

  flex: 1;

  font-size: 14px !important;

  line-height: 1.4 !important;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.nav-item .nav-badge {

  background: var(--danger-color);

  color: #fff;

  font-size: 10px;

  padding: 1px 6px;

  border-radius: 10px;

  min-width: 18px;

  text-align: center;

  font-weight: 500;

}



/* ===== 内联 SVG 图标（全站统一，零外部依赖） ===== */
.ico,
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  width: 1em;
  height: 1em;
}
.ico svg,
[data-icon] svg,
svg.ico-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 侧边栏导航图标：固定 18px 视觉槽位，与文字垂直居中对齐 */
.nav-item .nav-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px !important;
  min-width: 18px !important;
}
.nav-item .nav-icon svg {
  width: 18px;
  height: 18px;
}

/* 正文 UI 图标尺寸（与导航栏一致的线性 SVG，零外部依赖） */
.logo-icon .ico { width: 100%; height: 100%; }

.page-title .ico { width: 22px; height: 22px; margin-right: 8px; }
.card-title .ico { width: 18px; height: 18px; }
.card-header .ico,
.section-title .ico,
.panel-title .ico,
.modal-title .ico { width: 18px; height: 18px; margin-right: 6px; }

/* 按钮 / 操作区 */
.btn .ico,
button .ico,
.view-btn .ico,
.action-btn .ico { width: 16px; height: 16px; margin-right: 6px; }
.btn-sm .ico,
.btn.btn-sm .ico { width: 14px; height: 14px; margin-right: 4px; }
.btn-icon .ico,
.icon-btn .ico { width: 16px; height: 16px; margin-right: 0; }

/* 工具栏 */
.toolbar .ico,
.toolbar-left .ico,
.toolbar-right .ico,
.actions .ico,
.table-actions .ico { width: 16px; height: 16px; margin-right: 6px; }

/* 统计 / 指标卡 */
.stat .ico,
.stat-card .ico,
.metric .ico,
.stat-item .ico { width: 18px; height: 18px; }

/* 徽标 / 标签 */
.badge .ico,
.tag .ico,
.chip .ico { width: 12px; height: 12px; margin-right: 4px; }

/* 提示 / 空状态 */
.toast .ico { width: 16px; height: 16px; margin-right: 6px; flex-shrink: 0; }
.empty-icon .ico,
.empty .ico { width: 44px; height: 44px; opacity: 0.5; display: block; margin: 0 auto 12px; }
.logo-placeholder .ico,
.placeholder .ico { width: 40px; height: 40px; opacity: 0.4; }

/* 行内文本 / 列表 */
li .ico { width: 14px; height: 14px; margin-right: 6px; opacity: 0.7; }
p .ico,
span .ico,
td .ico,
th .ico,
b .ico,
strong .ico { width: 1.1em; height: 1.1em; }

/* ===== 主内容区 ===== */

.main-content {

  margin-left: var(--sidebar-width);

  flex: 1;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  transition: margin-left 0.3s ease;

}



.main-content > * {

  margin-left: 12px;

  margin-right: 12px;

}



.main-content > *:last-child {

  margin-bottom: 12px;

}



/* header 是 fixed，不需要 margin */

.main-content > .header,

.main-content > .header-bar {

  margin-left: 0;

  margin-right: 0;

}



.main-content.expanded {

  margin-left: var(--sidebar-collapsed-width);

}



/* ===== 顶部 Header ===== */

.header-bar, .header {

  background: #fff;

  height: 56px;

  padding: 0 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-shadow: 0 1px 2px rgba(0,0,0,0.04);

  position: fixed;

  top: 0;

  left: var(--sidebar-width);

  right: 0;

  z-index: 50;

  box-sizing: border-box;

}



.sidebar.collapsed ~ .main-content .header,

.sidebar.collapsed ~ .main-content .header-bar {

  left: var(--sidebar-collapsed-width);

}



/* 为 fixed header 留出空间 */

.main-content {

  padding-top: 68px;

}



.header-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



.breadcrumb {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  color: var(--text-4);

}



.breadcrumb .crumb-current {

  color: var(--text-2);

  font-weight: 500;

}



.breadcrumb .crumb-sep {

  color: var(--text-5);

  font-size: 12px;

}



.header-right {

  display: flex;

  align-items: center;

  gap: 8px;

  position: relative;

}



.header-icon-btn {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: transparent;

  border: none;

  cursor: pointer;

  font-size: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  transition: background 0.2s;

  color: var(--text-3);

}



.header-icon-btn:hover {

  background: var(--bg-hover);

}



.header-icon-btn .dot {

  position: absolute;

  top: 8px;

  right: 8px;

  width: 8px;

  height: 8px;

  background: var(--danger-color);

  border-radius: 50%;

  border: 2px solid #fff;

}



.header-divider {

  width: 1px;

  height: 24px;

  background: var(--border-2);

  margin: 0 8px;

}



.header-user {

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  padding: 6px 12px 6px 6px;

  border-radius: 20px;

  transition: background 0.2s;

  position: relative;

}



.header-user:hover {

  background: var(--bg-hover);

}



.header-avatar {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

  font-weight: 500;

}



.header-username {

  font-size: 13px;

  color: var(--text-2);

  font-weight: 500;

}



.header-role {

  font-size: 11px;

  color: var(--text-4);

}



.header-menu {

  position: absolute;

  top: 100%;

  right: 0;

  margin-top: 8px;

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 4px 16px rgba(0,0,0,0.15);

  min-width: 120px;

  display: none;

  z-index: 1000;

}



.header-menu.show {

  display: block;

}



.header-menu-item {

  padding: 0 16px;

  font-size: 13px;

  height: 36px;

  line-height: 36px;

  color: var(--text-2);

  cursor: pointer;

  transition: background 0.2s;

  box-sizing: border-box;

  white-space: nowrap;

  text-align: center;

}



.header-menu-item:hover {

  background: var(--bg-hover);

  color: var(--danger-color);

}



.header-menu-item:first-child {

  border-radius: 8px 8px 0 0;

}



.header-menu-item:last-child {

  border-radius: 0 0 8px 8px;

}

.header-menu-item.primary {

  color: #5B8C5A;

}

.header-menu-item.primary:hover {

  background: #f0f7f0;

  color: #4a7a49;

}



/* ===== 页面内容 ===== */

.page-content {

  flex: 1;

  padding: 24px;

}



.page-header {

  margin-bottom: 20px;

}



.page-title {

  font-size: 20px;

  font-weight: 600;

  color: var(--text-1);

  margin-bottom: 4px;

  letter-spacing: 0.2px;

}



.page-subtitle {

  font-size: 13px;

  color: var(--text-4);

}



/* ===== 卡片 ===== */

.card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-md);

  overflow: hidden;

}



.card-header {

  padding: 16px 20px;

  border-bottom: 1px solid var(--border-3);

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.card-title {

  font-size: 15px;

  font-weight: 600;

  color: var(--text-1);

  display: flex;

  align-items: center;

  gap: 8px;

}



.card-title::before {

  content: '';

  width: 3px;

  height: 14px;

  background: var(--primary-color);

  border-radius: 2px;

}



.card-body { padding: 20px; }

.card-body-flush { padding: 0; }



/* ===== 统计卡片 ===== */

.stat-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 16px;

  margin-bottom: 20px;

}



.stat-card {

  background: var(--bg-card);

  border-radius: var(--radius-lg);

  padding: 20px;

  box-shadow: var(--shadow-md);

  position: relative;

  overflow: hidden;

  transition: all 0.2s;

}



.stat-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-lg);

}



.stat-card::before {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  width: 80px;

  height: 80px;

  background: var(--primary-color);

  opacity: 0.04;

  border-radius: 50%;

  transform: translate(30%, -30%);

}



.stat-icon-wrap {

  width: 48px;

  height: 48px;

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  margin-bottom: 12px;

}



.stat-icon-wrap.green { background: var(--primary-light); color: var(--primary-color); }

.stat-icon-wrap.orange { background: var(--warning-light); color: var(--warning-color); }

.stat-icon-wrap.red { background: var(--danger-light); color: var(--danger-color); }

.stat-icon-wrap.blue { background: var(--info-light); color: var(--info-color); }



.stat-value {

  font-size: 28px;

  font-weight: 600;

  color: var(--text-1);

  line-height: 1.2;

  letter-spacing: -0.5px;

}



.stat-label {

  font-size: 13px;

  color: var(--text-4);

  margin-top: 4px;

}



.stat-extra {

  position: absolute;

  top: 16px;

  right: 16px;

  font-size: 12px;

  color: var(--text-4);

}



/* ===== 表格 ===== */

.data-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 14px;

}



.data-table th {

  background: #fafbfc;

  padding: 12px 16px;

  text-align: left;

  font-weight: 500;

  color: var(--text-3);

  border-bottom: 1px solid var(--border-2);

  white-space: nowrap;

  font-size: 13px;

}



.data-table td {

  padding: 14px 16px;

  border-bottom: 1px solid var(--border-3);

  color: var(--text-2);

}



.data-table tbody tr {

  transition: background 0.15s;

}



.data-table tbody tr:hover {

  background: var(--primary-lighter);

}



.data-table tbody tr:last-child td {

  border-bottom: none;

}



.table-actions {

  display: flex;

  gap: 4px;

  align-items: center;

}



.table-action-btn {

  background: transparent;

  border: none;

  padding: 4px 8px;

  font-size: 13px;

  color: var(--text-3);

  cursor: pointer;

  border-radius: var(--radius-sm);

  transition: all 0.15s;

}



.table-action-btn:hover {

  background: var(--primary-light);

  color: var(--primary-color);

}



.table-action-btn.danger:hover {

  background: var(--danger-light);

  color: var(--danger-color);

}



/* ===== 按钮 ===== */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  height: 32px;

  padding: 0 16px;

  border-radius: var(--radius-sm);

  font-size: 14px;

  cursor: pointer;

  border: 1px solid transparent;

  background: transparent;

  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

  font-family: inherit;

  white-space: nowrap;

  user-select: none;

}



.btn:disabled {

  cursor: not-allowed;

  opacity: 0.5;

}



.btn-primary {

  background: var(--primary-color);

  border-color: var(--primary-color);

  color: #fff;

  box-shadow: 0 2px 0 rgba(0,0,0,0.045);

}



.btn-primary:hover:not(:disabled) {

  background: var(--primary-hover);

  border-color: var(--primary-hover);

}



.btn-primary:active:not(:disabled) {

  background: var(--primary-active);

}



.btn-default {

  background: #fff;

  border-color: var(--border-1);

  color: var(--text-2);

}



.btn-default:hover:not(:disabled) {

  border-color: var(--primary-color);

  color: var(--primary-color);

}



.btn-danger {

  background: var(--danger-color);

  border-color: var(--danger-color);

  color: #fff;

}



.btn-danger:hover:not(:disabled) {

  background: #ff7875;

  border-color: #ff7875;

}



.btn-link {

  color: var(--primary-color);

  border: none;

  padding: 0 8px;

  height: auto;

}



.btn-link:hover {

  color: var(--primary-hover);

}



.btn-text {

  color: var(--text-3);

  border: none;

  padding: 0 8px;

  height: auto;

}



.btn-text:hover {

  color: var(--primary-color);

  background: transparent;

}



.btn-large { height: 40px; padding: 0 20px; font-size: 15px; }

.btn-small { height: 24px; padding: 0 8px; font-size: 12px; }

.btn-block { width: 100%; }



/* ===== 标签 ===== */

.tag {

  display: inline-flex;

  align-items: center;

  height: 22px;

  padding: 0 8px;

  border-radius: var(--radius-sm);

  font-size: 12px;

  line-height: 20px;

  border: 1px solid;

  background: transparent;

}



.tag-default { color: var(--text-3); background: var(--bg-disabled); border-color: var(--border-3); }

.tag-success { color: var(--success-color); background: var(--success-light); border-color: #b7eb8f; }

.tag-warning { color: var(--warning-color); background: var(--warning-light); border-color: #ffd591; }

.tag-danger  { color: var(--danger-color); background: var(--danger-light); border-color: #ffa39e; }

.tag-info    { color: var(--info-color); background: var(--info-light); border-color: #91d5ff; }

.tag-primary { color: var(--primary-color); background: var(--primary-light); border-color: #b7d9b7; }



/* ===== 表单 ===== */

.form-group {

  margin-bottom: 20px;

}



.form-label {

  display: block;

  font-size: 14px;

  color: var(--text-2);

  margin-bottom: 6px;

  font-weight: 400;

}



.form-label .required {

  color: var(--danger-color);

  margin-right: 4px;

}



.form-label .optional {

  color: var(--text-4);

  font-weight: normal;

  margin-left: 4px;

  font-size: 12px;

}



.form-control {

  width: 100%;

  height: 32px;

  padding: 4px 11px;

  border: 1px solid var(--border-1);

  border-radius: var(--radius-sm);

  font-size: 14px;

  color: var(--text-2);

  background: #fff;

  transition: all 0.2s;

  font-family: inherit;

}



.form-control:hover {

  border-color: var(--primary-hover);

}



.form-control:focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 2px rgba(91,140,90,0.1);

}



.form-control:disabled,

.form-control[disabled] {

  background: var(--bg-disabled);

  color: var(--text-disabled);

  cursor: not-allowed;

}



.form-control::placeholder {

  color: var(--text-5);

}



textarea.form-control {

  height: auto;

  min-height: 80px;

  padding: 8px 11px;

  resize: vertical;

}



select.form-control {

  appearance: none;

  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238c8c8c' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;

  padding-right: 32px;

  cursor: pointer;

}



.form-hint {

  font-size: 12px;

  color: var(--text-4);

  margin-top: 4px;

  line-height: 1.5;

}



/* 字段级校验错误：统一显示在字段正下方（由 window.FieldError 注入）
   所有管理页「新增 / 编辑」弹窗的必填校验一律走这里，不再用右上角 toast */

.form-error {

  display: flex;

  align-items: flex-start;

  gap: 4px;

  font-size: 12px;

  color: var(--danger-color);

  margin-top: 6px;

  line-height: 1.5;

  animation: fieldErrorIn 0.18s ease-out;

}

.form-error .ico {

  width: 13px;

  height: 13px;

  flex: 0 0 auto;

  margin-top: 2px;

}

@keyframes fieldErrorIn {

  from { opacity: 0; transform: translateY(-2px); }

  to   { opacity: 1; transform: translateY(0); }

}

/* 校验失败的输入控件：红框，与下方红字提示配套 */

.form-input.is-invalid,

.form-input.invalid,

.form-control.is-invalid,

.form-select.is-invalid,

.form-textarea.is-invalid {

  border-color: var(--danger-color) !important;

}

.form-input.is-invalid:focus,

.form-input.invalid:focus,

.form-control.is-invalid:focus,

.form-select.is-invalid:focus,

.form-textarea.is-invalid:focus {

  border-color: var(--danger-color) !important;

  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.15) !important;

}



/* 表单栅格 */

.form-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0 24px;

}



@media (max-width: 768px) {

  .form-grid { grid-template-columns: 1fr; }

}



/* 表单分组分隔线（带文字标签） */

.form-divider {

  display: flex;

  align-items: center;

  gap: 12px;

  margin: 20px 0 16px;

}

.form-divider .divider-line {

  flex: 1;

  height: 1px;

  background: var(--border-1, #e4e7ed);

}

.form-divider .divider-text {

  font-size: 13px;

  font-weight: 600;

  color: var(--text-2, #606266);

  white-space: nowrap;

  letter-spacing: 0.5px;

}



/* 开关行：label + 开关 + 提示，严格贴左对齐 */

.form-group.form-switch-row {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 8px;

  padding: 6px 0;

  text-align: left;

}

.form-switch-row > .form-label {

  display: block;

  margin-bottom: 0;

  text-align: left;

}

.form-switch-row > .switch-wrapper,

.form-switch-row > .switch-row {

  display: inline-flex;

  align-items: center;

  gap: 10px;

}

.form-switch-row > .switch-wrapper > span,

.form-switch-row > .switch-row > span.switch-state {

  font-size: 13px;

  color: var(--text-2, #606266);

  min-width: 20px;

}

.form-switch-row > .form-hint {

  margin-top: 0;

  margin-left: 0;

  text-align: left;

}



/* ===== Switch 开关 ===== */

.switch {

  position: relative;

  display: inline-block;

  width: 36px;

  height: 20px;

  background: var(--text-5);

  border-radius: 10px;

  cursor: pointer;

  transition: background 0.2s;

  vertical-align: middle;

  flex-shrink: 0;

}



/* 隐藏 input（模式 A：<label class="switch"><input><span class="slider">） */

.switch input[type="checkbox"] {

  position: absolute;

  opacity: 0;

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  cursor: pointer;

  z-index: 2;

}



/* 模式 A：span.slider 做圆球 */

.switch .slider {

  position: absolute;

  top: 2px;

  left: 2px;

  width: 16px;

  height: 16px;

  background: #fff;

  border-radius: 50%;

  transition: all 0.2s;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

  pointer-events: none;

}



/* 模式 B：纯 div 模式（member-cards.html 等），用 ::after 做圆球 */

.switch:not(:has(.slider))::after {

  content: '';

  position: absolute;

  top: 2px;

  left: 2px;

  width: 16px;

  height: 16px;

  background: #fff;

  border-radius: 50%;

  transition: all 0.2s;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

}



/* 模式 A：input 选中时，背景变绿 + 圆球右移 */

.switch:has(input[type="checkbox"]:checked) {

  background: var(--primary-color);

}

.switch:has(input[type="checkbox"]:checked) .slider {

  left: 18px;

}



/* 模式 B：JS 加 .on 类 */

.switch.on:not(:has(.slider)) {

  background: var(--primary-color);

}

.switch.on:not(:has(.slider))::after {

  left: 18px;

}



/* ===== 空状态 ===== */

.empty {

  text-align: center;

  padding: 60px 20px;

  color: var(--text-4);

}



.empty-icon {

  font-size: 48px;

  margin-bottom: 12px;

  display: block;

  opacity: 0.5;

}



.empty-title {

  font-size: 14px;

  color: var(--text-3);

  margin-bottom: 4px;

}



.empty-desc {

  font-size: 13px;

  color: var(--text-4);

}



/* ===== 工具类 ===== */

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-muted { color: var(--text-4); }

.text-primary { color: var(--primary-color); }

.text-danger { color: var(--danger-color); }

.text-success { color: var(--success-color); }

.text-warning { color: var(--warning-color); }

.text-info { color: var(--info-color); }

.font-bold { font-weight: 600; }

.font-medium { font-weight: 500; }



.mt-8 { margin-top: 8px; }

.mt-12 { margin-top: 12px; }

.mt-16 { margin-top: 16px; }

.mt-20 { margin-top: 20px; }

.mt-24 { margin-top: 24px; }

.mb-8 { margin-bottom: 8px; }

.mb-12 { margin-bottom: 12px; }

.mb-16 { margin-bottom: 16px; }

.mb-20 { margin-bottom: 20px; }

.mb-24 { margin-bottom: 24px; }

.p-16 { padding: 16px; }

.p-20 { padding: 20px; }



.flex { display: flex; }

.flex-1 { flex: 1; }

.flex-center { display: flex; align-items: center; justify-content: center; }

.flex-between { display: flex; align-items: center; justify-content: space-between; }

.flex-end { display: flex; align-items: center; justify-content: flex-end; }

.items-center { align-items: center; }

.gap-4 { gap: 4px; }

.gap-8 { gap: 8px; }

.gap-12 { gap: 12px; }

.gap-16 { gap: 16px; }

.gap-20 { gap: 20px; }

.gap-24 { gap: 24px; }



/* ===== 徽章 ===== */

.badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 18px;

  height: 18px;

  padding: 0 6px;

  border-radius: 9px;

  font-size: 11px;

  font-weight: 500;

  color: #fff;

  background: var(--danger-color);

  line-height: 1;

}



.badge-green { background: var(--primary-color); }

.badge-blue { background: var(--info-color); }

.badge-orange { background: var(--warning-color); }



/* ===== 工具栏 ===== */

.toolbar {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  flex-wrap: wrap;

}



.toolbar-left { display: flex; align-items: center; gap: 12px; flex: 1; }

.toolbar-right { display: flex; align-items: center; gap: 12px; }



.search-box {

  position: relative;

  width: 240px;

}



.search-box input {

  width: 100%;

  height: 32px;

  padding: 0 12px 0 32px;

  border: 1px solid var(--border-1);

  border-radius: var(--radius-sm);

  font-size: 14px;

  background: #fff;

  transition: all 0.2s;

}



.search-box input:focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 2px rgba(91,140,90,0.1);

}



.search-box .search-icon {

  position: absolute;

  left: 10px;

  top: 50%;

  transform: translateY(-50%);

  width: 14px;

  height: 14px;

  opacity: 0.5;

  pointer-events: none;

}



/* ===== 警告框 ===== */

.alert {

  padding: 10px 16px;

  border-radius: var(--radius-sm);

  font-size: 14px;

  display: flex;

  align-items: flex-start;

  gap: 8px;

  line-height: 1.5;

}



.alert-info { background: var(--info-light); border: 1px solid #91d5ff; color: var(--info-color); }

.alert-success { background: var(--success-light); border: 1px solid #b7eb8f; color: var(--success-color); }

.alert-warning { background: var(--warning-light); border: 1px solid #ffd591; color: var(--warning-color); }

.alert-danger { background: var(--danger-light); border: 1px solid #ffa39e; color: var(--danger-color); }



/* ===== Tabs ===== */

.tabs {

  display: flex;

  background: #fff;

  border-radius: var(--radius-lg) var(--radius-lg) 0 0;

  border-bottom: 1px solid var(--border-3);

  padding: 0 20px;

}



.tab-item {

  padding: 12px 16px;

  font-size: 14px;

  color: var(--text-3);

  cursor: pointer;

  border-bottom: 2px solid transparent;

  transition: all 0.2s;

  margin-bottom: -1px;

  position: relative;

}



.tab-item:hover {

  color: var(--primary-color);

}



.tab-item.active {

  color: var(--primary-color);

  border-bottom-color: var(--primary-color);

  font-weight: 500;

}



.tab-content {

  background: #fff;

  border-radius: 0 0 var(--radius-lg) var(--radius-lg);

  padding: 20px;

  min-height: 200px;

}



/* ===== Toast ===== */

.toast {

  position: fixed;

  top: 80px;

  left: 50%;

  transform: translateX(-50%);

  padding: 10px 16px;

  border-radius: var(--radius-sm);

  color: #fff;

  font-size: 14px;

  z-index: 9999;

  box-shadow: var(--shadow-xl);

  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 200px;

  justify-content: center;

}



/* Toast 类型背景 — JS 设置 className='toast success' (空格分隔两个类), 这里必须用 .toast.success 而不是 .toast-success */

.toast.success { background: var(--success-color); }

.toast.error { background: var(--danger-color); }

.toast.info { background: var(--info-color); }

.toast.warning { background: var(--warning-color); }

/* 兼容旧版连字符写法 */

.toast-success { background: var(--success-color); }

.toast-error { background: var(--danger-color); }

.toast-info { background: var(--info-color); }

.toast-warning { background: var(--warning-color); }



/* ===== Modal ===== */

.modal-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.45);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 1000;

  animation: fadeIn 0.2s;

}



.modal-overlay.active {

  display: flex;

}



.modal {

  background: #fff;

  border-radius: var(--radius-lg);

  width: 90%;

  max-width: 520px;

  max-height: 90vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  box-shadow: var(--shadow-xl);

  animation: zoomIn 0.2s;

}



.modal-header {

  padding: 16px 20px;

  border-bottom: 1px solid var(--border-3);

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.modal-title {

  font-size: 16px;

  font-weight: 600;

  color: var(--text-1);

}



.modal-close {

  background: transparent;

  border: none;

  font-size: 20px;

  cursor: pointer;

  color: var(--text-4);

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: var(--radius-sm);

}



.modal-close:hover {

  background: var(--bg-hover);

  color: var(--text-2);

}



.modal-body {

  padding: 20px;

  overflow-y: auto;

  flex: 1;

}



.modal-footer {

  padding: 12px 20px;

  border-top: 1px solid var(--border-3);

  display: flex;

  justify-content: flex-end;

  gap: 8px;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes zoomIn {

  from { opacity: 0; transform: scale(0.95); }

  to { opacity: 1; transform: scale(1); }

}



/* ===== 响应式 ===== */

@media (max-width: 1200px) {

  .stat-grid { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 768px) {

  :root { --sidebar-width: 0px; }

  .sidebar { transform: translateX(-100%); }

  .sidebar.open { transform: translateX(0); --sidebar-width: 232px; }

  .main-content { margin-left: 0; }

  .stat-grid { grid-template-columns: 1fr; }

  .page-content { padding: 16px; }

}



/* ===== 滚动条 ===== */

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }

::-webkit-scrollbar-thumb:hover { background: var(--text-5); }



/* ===== 乱码防御机制 v2.0 ===== */

/* 1. 表头最小宽度保护：保证中文不被截断 */

.data-table th,

.list-table th,

table th {

  min-width: 70px;

  white-space: nowrap;

}

.data-table th[style*="width: 80px"],

.data-table th[style*="width: 100px"],

.data-table th[style*="width: 120px"] {

  min-width: auto; /* 保留自定义宽度 */

}



/* 2. 表格容器防溢出：自动横向滚动 */

.data-table,

.list-table,

table {

  table-layout: auto;

  width: 100%;

}

.data-table-wrap,

.list-table-wrap,

.table-wrap {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



/* 3. 统计卡片标题防截断 */

.stat-card .stat-label,

.stat-card .stat-title {

  white-space: nowrap;

  overflow: visible;

  text-overflow: clip;

  font-size: 13px;

  letter-spacing: 0;

}



/* 4. 搜索框占位符防截断 */

.search-bar input,

.search-input,

.filter-input {

  min-width: 160px;

  max-width: 280px;

}



/* 5. 全局文本防御：禁止CSS截断中文 */

body {

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



/* 6. 乱码自动修复CSS（视觉兜底） */

[data-encode-fix] {

  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;

}



/* 7. 响应式表格：窄屏自动横向滚动 */

@media (max-width: 1280px) {

  .data-table-wrap,

  .list-table-wrap,

  .table-wrap {

    overflow-x: auto;

  }

}



/* 8. 修复 input-hint 截断 */

.input-hint,

.form-hint,

.help-text {

  white-space: normal;

  word-break: break-word;

  font-size: 12px;

  color: var(--text-4);

  margin-top: 4px;

  line-height: 1.5;

}



/* 9. 修复统计卡片中的孤立字符 */

.stat-card {

  min-width: 180px;

}



/* ============================================

 * 乱码防御机制 v3.0 - 企业级升级

 * ============================================ */



/* A. 字体强制：跨平台中文一致 */

* {

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",

               "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Helvetica Neue",

               Helvetica, Arial, sans-serif;

}



/* B. 表格单元格防截断 */

.data-table td,

.data-table th,

.list-table td,

.list-table th,

table td,

table th {

  word-break: break-word;

  overflow-wrap: break-word;

  hyphens: auto;

  -webkit-hyphens: auto;

}



/* C. 按钮文本防截断 */

.btn,

button,

.action-btn,

.page-btn,

.tab-item {

  white-space: nowrap;

  overflow: visible;

  text-overflow: clip;

}



/* D. 状态标签/徽章防损坏 */

.badge,

.tag,

.status-tag,

.stat-label,

.tab-text,

.nav-text,

.menu-text,

.toolbar-text {

  white-space: nowrap;

  font-variant: normal;

}



/* E. Input/Select placeholder 防截断 */

input,

select,

textarea {

  min-width: 60px;

}

input[placeholder],

input[type="text"],

input[type="search"],

input[type="email"],

input[type="tel"] {

  min-width: 120px;

}



/* F. 列表表头防溢出 */

.toolbar,

.search-bar,

.filter-bar,

.batch-bar {

  flex-wrap: wrap;

  row-gap: 8px;

}



/* G. 防御性滚动容器 */

.page-content,

.main-content,

.content-area {

  overflow-x: auto;

}



/* H. 模态框防变形 — 保留 word-wrap 保护, 移除 max-width 干扰(各页自己控制宽度) */

.modal,

.modal-content,

.dialog {

  word-wrap: break-word;

}



/* I. 隐藏正常查不到的?孤立字符（以防万一） */

.encoding-broken {

  display: none !important;

}



/* J. 响应式保护 */

@media (max-width: 1440px) {

  .page-content { padding: 16px 20px; }

}

@media (max-width: 1024px) {

  .stat-card { min-width: 140px; }

  .filter-card { padding: 16px; }

}