/**
 * ==========================================================================
 * admin.css —— 商家后台管理端专属样式
 * --------------------------------------------------------------------------
 * 说明：
 *   1. 后台管理界面样式，基于通用组件库扩展
 *   2. 包含侧边栏、数据卡片、图表容器、表格等后台专用组件
 *   3. 响应式设计，支持移动端侧边栏收起
 * ==========================================================================
 */

/* ═══════════════════════════════════════════════════════════
   1. 后台布局框架
   ═══════════════════════════════════════════════════════════ */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg-secondary);
}

/* 侧边栏 */
.admin-sidebar {
  width: 260px;
  background: var(--color-text-main);
  color: var(--c-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}
.admin-sidebar.is-collapsed {
  transform: translateX(-100%);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-brand__icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.sidebar-brand__text {
  font-weight: 700;
  font-size: 16px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.sidebar-menu {
  list-style: none;
}
.sidebar-menu__item {
  position: relative;
}
.sidebar-menu__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 14px;
  transition: var(--transition-base);
  cursor: pointer;
}
.sidebar-menu__link:hover,
.sidebar-menu__link.is-active {
  color: var(--c-bg);
  background: rgba(255,255,255,0.1);
}
.sidebar-menu__link i {
  width: 20px;
  text-align: center;
}
.sidebar-menu__arrow {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.3s;
}
.sidebar-menu__item.is-open > .sidebar-menu__link .sidebar-menu__arrow {
  transform: rotate(90deg);
}

/* 子菜单 */
.sidebar-submenu {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0,0,0,0.2);
}
.sidebar-menu__item.is-open > .sidebar-submenu {
  max-height: 500px;
}
.sidebar-submenu__link {
  display: block;
  padding: 10px 20px 10px 52px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 13px;
  transition: var(--transition-base);
}
.sidebar-submenu__link:hover,
.sidebar-submenu__link.is-active {
  color: var(--c-bg);
  background: rgba(255,255,255,0.05);
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-user__avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sidebar-user__info {
  flex: 1;
  overflow: hidden;
}
.sidebar-user__name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user__role {
  font-size: 12px;
  opacity: 0.7;
}

/* 主内容区 */
.admin-main {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 顶部导航 */
.admin-header {
  height: 64px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 99;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sidebar-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--color-primary);
}
.breadcrumb__sep {
  color: var(--color-text-tertiary);
}
.breadcrumb__current {
  color: var(--color-text-main);
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  position: relative;
}
.header-btn:hover {
  background: var(--color-border);
}
.header-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: var(--color-error);
  color: var(--c-bg);
  font-size: 11px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* 内容区域 */
.admin-content {
  flex: 1;
  padding: 24px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
}
.page-actions {
  display: flex;
  gap: 12px;
}

/* 遮罩层 */
.sidebar-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
}
.sidebar-mask.is-show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 991px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }
  .admin-sidebar.is-open {
    transform: translateX(0);
  }
  .admin-main {
    margin-left: 0;
  }
  .sidebar-toggle {
    display: flex;
  }
}
@media (min-width: 992px) {
  .sidebar-toggle {
    display: none;
  }
  .sidebar-mask {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   2. 数据看板卡片
   ═══════════════════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.stat-card__icon--primary { background: var(--color-primary-light); color: var(--color-primary); }
.stat-card__icon--success { background: var(--c-success-light); color: var(--c-success); }
.stat-card__icon--warning { background: var(--c-warning-light); color: var(--c-warning-dark); }
.stat-card__icon--danger { background: var(--c-danger-light); color: var(--c-danger); }

.stat-card__content {
  flex: 1;
}
.stat-card__label {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.stat-card__value {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.stat-card__trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-card__trend.up { color: var(--color-success); }
.stat-card__trend.down { color: var(--color-error); }

@media (max-width: 1200px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   3. 图表容器
   ═══════════════════════════════════════════════════════════ */
.chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.chart-card {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.chart-card__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart-card__title {
  font-size: 16px;
  font-weight: 600;
}
.chart-card__body {
  padding: 24px;
  height: 320px;
}
.chart-canvas {
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   4. 数据表格
   ═══════════════════════════════════════════════════════════ */
.data-card {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.data-card__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.data-card__title {
  font-size: 16px;
  font-weight: 600;
}
.data-card__tools {
  display: flex;
  gap: 12px;
  align-items: center;
}
.data-card__body {
  padding: 0;
}

/* 表格工具栏 */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 12px;
}
.table-search {
  display: flex;
  gap: 8px;
}
.table-search input {
  width: 240px;
}
.table-filters {
  display: flex;
  gap: 8px;
}

/* 表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th,
.data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.data-table th {
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  white-space: nowrap;
}
.data-table tbody tr:hover {
  background: var(--color-bg-secondary);
}
.data-table tbody tr.is-warning {
  background: var(--c-warning-light);
}
.data-table tbody tr.is-danger {
  background: var(--c-danger-light);
}

/* 表格单元格内容 */
.td-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.td-user__avatar {
  width: 36px;
  height: 36px;
  background: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-primary);
}
.td-user__info {
  line-height: 1.4;
}
.td-user__name {
  font-weight: 500;
}
.td-user__meta {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.td-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}
.td-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.td-status--pending { background: var(--c-warning-light); color: var(--c-warning-deep); }
.td-status--pending::before { background: var(--c-warning); }
.td-status--success { background: var(--c-success-light); color: var(--c-success-deep); }
.td-status--success::before { background: var(--c-success-vivid); }
.td-status--error { background: var(--c-danger-light); color: var(--c-danger-deep); }
.td-status--error::before { background: var(--c-danger-vivid); }
.td-status--info { background: var(--c-primary-light); color: var(--c-primary-deep); }
.td-status--info::before { background: var(--c-primary-vivid); }

.td-actions {
  display: flex;
  gap: 8px;
}
.td-actions .ui-btn {
  padding: 6px 10px;
  font-size: 12px;
}

/* 星级评分 */
.star-rating {
  display: flex;
  gap: 2px;
  color: var(--c-warning-soft);
}
.star-rating .empty {
  color: var(--color-border);
}

/* 表格分页 */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.pagination-info {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pagination-pages {
  display: flex;
  gap: 4px;
}
.pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  background: var(--c-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pagination-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--c-bg);
}
.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   5. 标签页
   ═══════════════════════════════════════════════════════════ */
.ui-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}
.ui-tab {
  padding: 12px 20px;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-base);
}
.ui-tab:hover {
  color: var(--color-primary);
}
.ui-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   6. 详情弹窗
   ═══════════════════════════════════════════════════════════ */
.detail-modal .ui-modal__wrap {
  max-width: 720px;
}
.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.detail-avatar {
  width: 64px;
  height: 64px;
  background: var(--color-primary-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-primary);
}
.detail-info h3 {
  font-size: 18px;
  margin-bottom: 4px;
}
.detail-info p {
  color: var(--color-text-secondary);
  font-size: 13px;
}
.detail-section {
  margin-bottom: 24px;
}
.detail-section__title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-item__label {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.detail-item__value {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   7. 表单布局
   ═══════════════════════════════════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.form-grid .ui-field--full {
  grid-column: 1 / -1;
}
@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   8. 二维码展示
   ═══════════════════════════════════════════════════════════ */
.qr-display {
  text-align: center;
  padding: 24px;
}
.qr-display__code {
  width: 200px;
  height: 200px;
  background: var(--c-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: var(--color-text-tertiary);
}
.qr-display__text {
  font-size: 14px;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════
   9. 时间线
   ═══════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: 24px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--c-bg);
}
.timeline-item__time {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}
.timeline-item__content {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   10. 通知列表
   ═══════════════════════════════════════════════════════════ */
.notice-list {
  max-height: 400px;
  overflow-y: auto;
}
.notice-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition-base);
}
.notice-item:hover {
  background: var(--color-bg-secondary);
}
.notice-item.is-unread {
  background: var(--color-primary-light);
}
.notice-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.notice-item__icon--warning { background: var(--c-warning-light); color: var(--c-warning-dark); }
.notice-item__icon--danger { background: var(--c-danger-light); color: var(--c-danger); }
.notice-item__icon--info { background: var(--c-primary-light); color: var(--c-primary); }
.notice-item__content {
  flex: 1;
}
.notice-item__title {
  font-weight: 500;
  margin-bottom: 4px;
}
.notice-item__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.notice-item__time {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   11. 仪表盘快捷入口
   ═══════════════════════════════════════════════════════════ */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.quick-action {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-base);
  border: 1px solid transparent;
}
.quick-action:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.quick-action__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
}
.quick-action__label {
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 991px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   12. 空状态
   ═══════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}
.empty-state__icon {
  font-size: 64px;
  color: var(--color-border);
  margin-bottom: 16px;
}
.empty-state__title {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.empty-state__desc {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════
   13. 兼容补充层（Compatibility & Supplement Layer）
   --------------------------------------------------------
   说明：
     1. 上方原有样式引用了一批 --color-* / --radius-* 令牌，
        而 variables.css 使用的是 --c-* / --r-* 命名，此处做映射，
        避免变量未定义导致的"无色"渲染。
     2. 补齐后台专用组件：弹窗遮罩层、下拉框、按钮/标签语义色等。
     3. 新增模块（系统设置 / 智能通知 / 数据导入）的专属样式。
   ═══════════════════════════════════════════════════════════ */

:root {
  /* —— 颜色令牌映射（admin.css 旧命名 → variables.css 新命名） —— */
  --color-primary:        var(--c-primary);
  --color-primary-dark:   var(--c-primary-dark);
  --color-primary-light:  var(--c-primary-light);
  --color-secondary:      var(--c-accent);
  --color-success:        var(--c-success);
  --color-success-light:  var(--c-success-light);
  --color-warning:        var(--c-warning);
  --color-warning-light:  var(--c-warning-light);
  --color-error:          var(--c-danger);
  --color-error-light:    var(--c-danger-light);
  --color-info:           var(--c-info);
  --color-info-light:     var(--c-info-light);

  --color-text-main:      var(--c-text);
  --color-text-secondary: var(--c-text-sub);
  --color-text-tertiary:  var(--c-text-muted);

  --color-border:         var(--c-border);
  --color-bg:             var(--c-bg);
  --color-bg-secondary:   var(--c-bg-mute);
  --color-bg-tertiary:    var(--c-bg-soft);

  --radius-sm:            var(--r-sm);
  --radius-md:            var(--r-base);
  --radius-lg:            var(--r-md);

  --shadow-sm:            var(--sh-sm);
  --shadow-md:            var(--sh-md);

  --transition-base:      var(--t-base);
}

/* ---------- 13.1 后台弹窗：整屏遮罩 + 居中容器 ----------
 * 后台页面统一结构：
 *   .ui-modal > .ui-modal__mask + .ui-modal__wrap > __head/__body/__footer
 * 这里覆盖 components.css 中".ui-modal 即卡片本身"的定义。
 */
.admin-layout .ui-modal,
body.admin-layout .ui-modal {
  position: fixed;
  inset: 0;
  left: 0; top: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  z-index: 1300;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.admin-layout .ui-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.ui-modal__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.ui-modal__wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-lg);
  transform: translateY(16px) scale(.98);
  transition: transform var(--t-base);
  overflow: hidden;
}
.ui-modal.is-open .ui-modal__wrap { transform: translateY(0) scale(1); }
.ui-modal__wrap--sm { max-width: 420px; }
.ui-modal__wrap--lg { max-width: 800px; }
.ui-modal__wrap--xl { max-width: 1080px; }
.ui-modal__head {
  flex-shrink: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
}
.ui-modal__head .ui-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-modal__wrap > .ui-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
/* 注意：各页面实际使用的是 __foot（非 components.css 的 __footer），两者都支持 */
.ui-modal__wrap > .ui-modal__foot,
.ui-modal__wrap > .ui-modal__footer {
  flex-shrink: 0;
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}
@media (max-width: 767px) {
  .ui-modal__wrap > .ui-modal__foot,
  .ui-modal__wrap > .ui-modal__footer { flex-wrap: wrap; }
  .ui-modal__wrap > .ui-modal__foot .ui-btn,
  .ui-modal__wrap > .ui-modal__footer .ui-btn { flex: 1; justify-content: center; }
}

/* ---------- 13.2 按钮 / 标签语义色补充 ---------- */
.ui-btn--error {
  background: var(--color-error);
  color: var(--c-bg);
  border: 1px solid var(--color-error);
}
.ui-btn--error:hover { background: var(--c-danger-darker); border-color: var(--c-danger-darker); }
.ui-btn--info {
  background: var(--color-info);
  color: var(--c-bg);
  border: 1px solid var(--color-info);
}
.ui-btn--info:hover { background: var(--c-info-dark); border-color: var(--c-info-dark); }
.ui-tag--error {
  background: var(--color-error-light);
  color: var(--color-error);
}
.ui-tag--default {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}
.stat-card__icon--info {
  background: var(--color-info-light);
  color: var(--color-info);
}

/* ---------- 13.3 下拉选择框 ---------- */
.ui-select {
  height: 38px;
  padding: 0 32px 0 12px;
  font-size: 14px;
  color: var(--color-text-main);
  background: var(--color-bg) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: var(--transition-base);
}
.ui-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ghost);
}
.ui-select--sm { height: 32px; font-size: 13px; }

/* ---------- 13.4 表单栅格补充 ---------- */
.form-grid--1 { grid-template-columns: 1fr; }
.form-grid .ui-field--full { grid-column: 1 / -1; }
.ui-field__hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: 1.5;
}

/* ---------- 13.5 数据导入卡片 ---------- */
.import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.import-card {
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition-base);
}
.import-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.import-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 50%;
}
.import-card h4 { font-size: 15px; margin-bottom: 6px; }
.import-card p {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  min-height: 38px;
}
.import-card__actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- 13.6 AI 工具卡片 ---------- */
.ai-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.ai-tool-card {
  padding: 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
}
.ai-tool-card:hover,
.ai-tool-card.is-active {
  border-color: var(--color-primary);
  background: var(--c-primary-ghost);
}
.ai-tool-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--c-bg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-md);
}
.ai-tool-card h4 { font-size: 14px; margin-bottom: 4px; }
.ai-tool-card p { font-size: 12px; color: var(--color-text-secondary); }

/* ---------- 13.7 AI 对话气泡 ---------- */
.ai-msg { display: flex; gap: 10px; margin-bottom: 14px; }
.ai-msg__avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 14px;
}
.ai-msg__content {
  padding: 10px 14px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- 13.8 二维码展示 ---------- */
.qr-item {
  padding: 16px;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.qr-item h4 { font-size: 14px; margin-bottom: 10px; }
.qr-placeholder {
  width: 148px;
  height: 148px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
}
.qr-placeholder:hover { border-color: var(--color-primary); }
.qr-placeholder img,
.qr-placeholder canvas { width: 100%; height: 100%; object-fit: contain; }
.qr-canvas-box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  padding: 8px;
  background: var(--c-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-canvas-box img, .qr-canvas-box canvas { max-width: 100%; height: auto; }

/* ---------- 13.9 复选框组（权限矩阵 / 通知渠道等） ---------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
}
.check-item:hover { border-color: var(--color-primary); }
.check-item input { accent-color: var(--color-primary); cursor: pointer; }
.check-item.is-checked {
  background: var(--c-primary-ghost);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- 13.10 设置页分区 ---------- */
.settings-section {
  margin-bottom: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.settings-section__head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}
.settings-section__title {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-section__title i { color: var(--color-primary); }
.settings-section__desc {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 2px;
  font-weight: 400;
}
.settings-section__body { padding: 18px; }

/* ---------- 13.11 规则行（智能通知配置） ---------- */
.rule-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--color-border);
}
.rule-row:last-child { border-bottom: none; }
.rule-row__main { flex: 1; min-width: 0; }
.rule-row__name {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rule-row__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.rule-row__ctrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 开关 Switch */
.ui-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.ui-switch input { opacity: 0; width: 0; height: 0; }
.ui-switch__slider {
  position: absolute;
  inset: 0;
  background: var(--c-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition-base);
}
.ui-switch__slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: var(--c-bg);
  border-radius: 50%;
  transition: var(--transition-base);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ui-switch input:checked + .ui-switch__slider { background: var(--color-primary); }
.ui-switch input:checked + .ui-switch__slider::before { transform: translateX(20px); }

/* ---------- 13.12 消息预览气泡 ---------- */
.msg-preview {
  padding: 12px 14px;
  background: var(--color-success-light);
  border-left: 3px solid var(--color-success);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-main);
}

/* ---------- 13.13 进度条 / 活跃度分层 ---------- */
.progress-bar {
  height: 8px;
  background: var(--color-bg-secondary);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: 999px;
  transition: width .4s ease;
}
.activity-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.activity-dot--active  { background: var(--color-success); }
.activity-dot--warning { background: var(--color-warning); }
.activity-dot--danger  { background: var(--color-error); }

/* ---------- 13.14 Toast（后台内置，无需依赖 ui.js） ---------- */
.admin-toast-box {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.admin-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  max-width: 80vw;
  font-size: 14px;
  color: var(--c-bg);
  background: rgba(15, 23, 42, .92);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-10px);
  transition: all .25s ease;
}
.admin-toast.is-show { opacity: 1; transform: translateY(0); }
.admin-toast--success { background: rgba(22, 163, 74, .95); }
.admin-toast--error   { background: rgba(220, 38, 38, .95); }
.admin-toast--warning { background: rgba(217, 119, 6, .95); }

/* ---------- 13.15 文件拖拽上传区 ---------- */
.upload-zone {
  padding: 32px 20px;
  text-align: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  transition: var(--transition-base);
}
.upload-zone:hover,
.upload-zone.is-drag {
  border-color: var(--color-primary);
  background: var(--c-primary-ghost);
}
.upload-zone__icon {
  font-size: 36px;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.upload-zone__text { font-size: 14px; margin-bottom: 4px; }
.upload-zone__hint { font-size: 12px; color: var(--color-text-tertiary); }

/* ---------- 13.16 图表容器高度约束（避免 Chart.js 无限拉伸） ---------- */
.chart-card__body { position: relative; height: 300px; }
.chart-card__body canvas { max-height: 100%; }
.chart-card__body--sm { height: 240px; }

/* ---------- 13.17 表格内文字省略 ---------- */
.data-table td .u-clip {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---------- 13.18 移动端适配补充 ---------- */
@media (max-width: 767px) {
  .ui-modal__wrap,
  .ui-modal__wrap--sm,
  .ui-modal__wrap--lg,
  .ui-modal__wrap--xl { max-width: 100%; max-height: 92vh; }
  .detail-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr !important; }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-section__head { flex-direction: column; align-items: flex-start; }
  .rule-row { flex-direction: column; }
  .rule-row__ctrl { width: 100%; justify-content: flex-end; }
  .chart-card__body { height: 260px; }
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .data-table { min-width: 640px; }
  .data-card__body { overflow-x: auto; }
}