/**
 * ============================================================
 *  融合云管理系统 - 全面响应式框架
 *  Danny Cloud - Comprehensive Responsive Framework
 *  
 *  设计目标:
 *  - 全屏自适应 (320px → 1920px+)
 *  - 移动端优先的侧栏抽屉导航
 *  - 底部快速导航栏 (移动端)
 *  - 卡片动效与交互动画
 *  - 暗色模式支持
 *  - 触控友好 (44px 最小触摸区域)
 * ============================================================
 */

/* ==============================================================
   1. CSS 自定义属性 (Design Tokens)
   ============================================================== */
:root {
  /* 品牌色 */
  --dc-primary: #667eea;
  --dc-secondary: #764ba2;
  --dc-accent: #23a6d5;
  --dc-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --dc-gradient-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);

  /* 功能色 */
  --dc-success: #10b981;
  --dc-warning: #f59e0b;
  --dc-danger: #ef4444;
  --dc-info: #3b82f6;

  /* 中性色 */
  --dc-bg: #f0f2f5;
  --dc-surface: #ffffff;
  --dc-border: #e5e7eb;
  --dc-text: #1f2937;
  --dc-text-secondary: #6b7280;
  --dc-text-muted: #9ca3af;

  /* 间距系统 */
  --dc-space-xs: 4px;
  --dc-space-sm: 8px;
  --dc-space-md: 16px;
  --dc-space-lg: 24px;
  --dc-space-xl: 32px;
  --dc-space-2xl: 48px;

  /* 字体 */
  --dc-font-xs: 0.75rem;
  --dc-font-sm: 0.875rem;
  --dc-font-base: 1rem;
  --dc-font-lg: 1.125rem;
  --dc-font-xl: 1.25rem;
  --dc-font-2xl: 1.5rem;
  --dc-font-3xl: 1.875rem;

  /* 圆角 */
  --dc-radius-sm: 6px;
  --dc-radius-md: 10px;
  --dc-radius-lg: 16px;
  --dc-radius-xl: 20px;
  --dc-radius-full: 9999px;

  /* 阴影 */
  --dc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --dc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --dc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --dc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* 过渡 */
  --dc-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --dc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --dc-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* 布局尺寸 — 百分比自适应，避免固定 px 挤压 */
  --dc-header-height: 3.5rem;
  --dc-bottom-nav-height: 3.75rem;
  --dc-sidebar-width: 18%;
  --dc-sidebar-narrow: 13%;
  --dc-sidebar-collapsed: 5%;
  --dc-sidebar-drawer: 80%;
  --dc-sidebar-collapsed-min: 3.25rem;
  --dc-content-pad: 1.5%;
  --dc-content-pad-lg: 2%;
  --dc-touch-min: 2.75rem;
}


/* ==============================================================
   2. 基础重置与全局优化
   ============================================================== */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--dc-bg);
  color: var(--dc-text);
  overflow-x: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 确保可编辑区域允许文字选择（覆盖 mobile-framework.css 的 user-select: none） */
input, textarea, .form-control, .form-select,
table, td, th, pre, code, .content-wrapper, .main-content,
.list-group-item, .dropdown-item, .modal-body {
  -webkit-user-select: text;
  user-select: text;
}

/* 选择文本样式 */
::selection {
  background: var(--dc-primary);
  color: white;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}


/* ==============================================================
   3. 侧边栏：13"+ 桌面分档 + 移动端抽屉（宽度用百分比）
   ------------------------------------------------------------
   >= 1440px          : 默认 18%，可折到 5% (.mode-icon/.collapsed)
   1280px – 1439px    : 默认窄栏 13%，可 5% 或展开 18%
   992px – 1279px     : 默认图标栏 5%，可展开 18%
   < 992px            : 抽屉 80% 宽（.open）
   ============================================================== */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--dc-transition);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sidebar-overlay.active {
  opacity: 1;
}

/* 默认桌面侧栏百分比 */
.sidebar {
  width: var(--dc-sidebar-width);
}

/* --- 通用：图标栏 / 窄栏 / 全宽 --- */
.sidebar.mode-icon,
.sidebar.collapsed {
  width: var(--dc-sidebar-collapsed) !important;
  min-width: var(--dc-sidebar-collapsed-min);
}
.sidebar.mode-icon .brand-text,
.sidebar.mode-icon .nav-link > span,
.sidebar.mode-icon .submenu,
.sidebar.mode-icon .nav-link .fa-chevron-down,
.sidebar.mode-icon .nav-text,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-link > span,
.sidebar.collapsed .submenu,
.sidebar.collapsed .nav-link .fa-chevron-down,
.sidebar.collapsed .nav-text {
  opacity: 0 !important;
  width: 0 !important;
  margin-left: 0 !important;
  overflow: hidden;
  pointer-events: none;
}
.sidebar.mode-icon .sidebar-header,
.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 1.1rem 0;
}
.sidebar.mode-icon .brand,
.sidebar.collapsed .brand {
  justify-content: center;
}
.sidebar.mode-icon .brand i.fa-cloud,
.sidebar.collapsed .brand i.fa-cloud {
  margin-right: 0 !important;
}
.sidebar.mode-icon .nav-link,
.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0.75rem 0;
}
.sidebar.mode-icon .nav-link i,
.sidebar.collapsed .nav-link i {
  margin-right: 0 !important;
  width: auto;
  font-size: 1.1rem;
}
.sidebar.mode-icon .sidebar-toggle,
.sidebar.collapsed .sidebar-toggle {
  display: none;
}

.sidebar.mode-narrow {
  width: var(--dc-sidebar-narrow) !important;
}
.sidebar.mode-narrow .brand-text {
  font-size: 0.85rem;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar.mode-narrow .nav-link {
  padding: 0.6rem 6%;
  font-size: 0.85rem;
}
.sidebar.mode-narrow .nav-link > span,
.sidebar.mode-narrow .nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 65%;
}
.sidebar.mode-narrow .submenu a {
  padding-left: 18%;
  font-size: 0.8rem;
}

.sidebar.mode-full,
.sidebar.force-expand {
  width: var(--dc-sidebar-width) !important;
}
.sidebar.mode-full .brand-text,
.sidebar.mode-full .nav-link > span,
.sidebar.mode-full .submenu,
.sidebar.mode-full .nav-link .fa-chevron-down,
.sidebar.mode-full .nav-text,
.sidebar.force-expand .brand-text,
.sidebar.force-expand .nav-link > span,
.sidebar.force-expand .submenu,
.sidebar.force-expand .nav-link .fa-chevron-down,
.sidebar.force-expand .nav-text {
  opacity: 1 !important;
  width: auto !important;
  max-width: none;
  pointer-events: auto;
}

/* 内容区 / 顶栏跟随模式宽度（百分比） */
.sidebar.mode-full ~ .main-content,
.sidebar.force-expand ~ .main-content {
  margin-left: var(--dc-sidebar-width) !important;
}
.sidebar.mode-narrow ~ .main-content {
  margin-left: var(--dc-sidebar-narrow) !important;
}
.sidebar.mode-icon ~ .main-content,
.sidebar.collapsed ~ .main-content {
  margin-left: max(var(--dc-sidebar-collapsed), var(--dc-sidebar-collapsed-min)) !important;
}

.sidebar.mode-full ~ .topbar,
.sidebar.force-expand ~ .topbar,
.sidebar.mode-full + .topbar,
.sidebar.force-expand + .topbar {
  left: var(--dc-sidebar-width) !important;
}
.sidebar.mode-narrow ~ .topbar,
.sidebar.mode-narrow + .topbar {
  left: var(--dc-sidebar-narrow) !important;
}
.sidebar.mode-icon ~ .topbar,
.sidebar.collapsed ~ .topbar,
.sidebar.mode-icon + .topbar,
.sidebar.collapsed + .topbar {
  left: max(var(--dc-sidebar-collapsed), var(--dc-sidebar-collapsed-min)) !important;
}

/* --- >= 1440px：默认全宽 18% --- */
@media (min-width: 1440px) {
  .sidebar-overlay {
    display: none !important;
  }
  .sidebar:not(.mode-icon):not(.collapsed):not(.mode-narrow) {
    width: var(--dc-sidebar-width);
  }
  .main-content {
    margin-left: var(--dc-sidebar-width);
  }
  .topbar {
    left: var(--dc-sidebar-width);
  }
  .content-wrapper {
    padding: 1.5% 2%;
  }
}

/* --- 1280–1439：默认窄栏 13% --- */
@media (min-width: 1280px) and (max-width: 1439px) {
  .sidebar-overlay {
    display: none !important;
  }
  .sidebar:not(.mode-full):not(.mode-icon):not(.collapsed):not(.force-expand) {
    width: var(--dc-sidebar-narrow) !important;
  }
  .sidebar:not(.mode-full):not(.mode-icon):not(.collapsed):not(.force-expand) ~ .main-content {
    margin-left: var(--dc-sidebar-narrow) !important;
  }
  .sidebar:not(.mode-full):not(.mode-icon):not(.collapsed):not(.force-expand) ~ .topbar,
  .sidebar:not(.mode-full):not(.mode-icon):not(.collapsed):not(.force-expand) + .topbar {
    left: var(--dc-sidebar-narrow) !important;
  }
  .content-wrapper {
    padding: 1.2% 1.5% !important;
  }
}

/* --- 992–1279：默认图标栏 5% --- */
@media (min-width: 992px) and (max-width: 1279px) {
  .sidebar-overlay {
    display: none !important;
  }
  .sidebar:not(.mode-full):not(.force-expand) {
    width: var(--dc-sidebar-collapsed) !important;
    min-width: var(--dc-sidebar-collapsed-min);
  }
  .sidebar:not(.mode-full):not(.force-expand) .brand-text,
  .sidebar:not(.mode-full):not(.force-expand) .nav-link > span,
  .sidebar:not(.mode-full):not(.force-expand) .submenu,
  .sidebar:not(.mode-full):not(.force-expand) .nav-link .fa-chevron-down,
  .sidebar:not(.mode-full):not(.force-expand) .nav-text {
    opacity: 0 !important;
    width: 0 !important;
    margin-left: 0 !important;
    overflow: hidden;
    pointer-events: none;
  }
  .sidebar:not(.mode-full):not(.force-expand) .nav-link {
    justify-content: center;
    padding: 0.75rem 0;
  }
  .sidebar:not(.mode-full):not(.force-expand) .sidebar-header {
    justify-content: center;
    padding: 1.1rem 0;
  }
  .sidebar:not(.mode-full):not(.force-expand) ~ .main-content {
    margin-left: max(var(--dc-sidebar-collapsed), var(--dc-sidebar-collapsed-min)) !important;
  }
  .sidebar:not(.mode-full):not(.force-expand) ~ .topbar,
  .sidebar:not(.mode-full):not(.force-expand) + .topbar {
    left: max(var(--dc-sidebar-collapsed), var(--dc-sidebar-collapsed-min)) !important;
  }
  .content-wrapper {
    padding: 1% 1.2% !important;
  }
}

/* --- < 992px：移动端抽屉（宽度百分比） --- */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--dc-sidebar-drawer) !important;
    max-width: 90% !important;
    height: 100vh !important;
    z-index: 1000 !important;
    transform: translateX(-110%);
    transition: transform var(--dc-transition-slow);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 1.25rem 1.25rem 0;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar.mode-icon,
  .sidebar.mode-narrow,
  .sidebar.mode-full,
  .sidebar.collapsed,
  .sidebar.force-expand {
    width: var(--dc-sidebar-drawer) !important;
    max-width: 90% !important;
  }
  .sidebar.mode-icon .brand-text,
  .sidebar.mode-icon .nav-link > span,
  .sidebar.mode-icon .submenu,
  .sidebar.mode-icon .nav-text,
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-link > span,
  .sidebar.collapsed .submenu,
  .sidebar.collapsed .nav-text {
    opacity: 1 !important;
    width: auto !important;
    max-width: none;
    pointer-events: auto;
  }
  .sidebar.mode-icon .nav-link,
  .sidebar.collapsed .nav-link {
    justify-content: flex-start;
    padding: 0.7rem 6%;
  }

  .sidebar-overlay.active {
    display: block;
  }

  .main-content {
    margin-left: 0 !important;
    margin-top: var(--dc-header-height);
  }

  .topbar {
    left: 0 !important;
  }

  .content-wrapper {
    padding: 3% !important;
    padding-bottom: calc(3% + var(--dc-bottom-nav-height)) !important;
  }
}


/* ==============================================================
   4. 移动端底部导航栏
   ============================================================== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--dc-bottom-nav-height);
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-border);
  z-index: 998;
  padding: 0 env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

@media (max-width: 991.98px) {
  .mobile-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  body.has-bottom-nav {
    padding-bottom: var(--dc-bottom-nav-height);
  }
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  padding: 4px 0;
  color: var(--dc-text-secondary);
  text-decoration: none;
  font-size: var(--dc-font-xs);
  transition: color var(--dc-transition-fast);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  border: none;
  background: none;
}

.mobile-bottom-nav-item i,
.mobile-bottom-nav-item .bi {
  font-size: 1.25rem;
  margin-bottom: 2px;
  transition: transform var(--dc-transition-fast);
}

.mobile-bottom-nav-item span {
  font-size: 0.65rem;
  line-height: 1;
  white-space: nowrap;
}

.mobile-bottom-nav-item:active i,
.mobile-bottom-nav-item:active .bi {
  transform: scale(0.85);
}

.mobile-bottom-nav-item.active {
  color: var(--dc-primary);
}

.mobile-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--dc-gradient);
  border-radius: 0 0 4px 4px;
}

/* 角标 */
.mobile-bottom-nav-item .badge {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translateX(16px);
  font-size: 0.6rem;
  padding: 1px 5px;
  min-width: 16px;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-full);
}


/* ==============================================================
   5. 卡片系统 (Enhanced)
   ============================================================== */

/* 增强卡片 */
.card {
  border: none;
  border-radius: var(--dc-radius-lg) !important;
  box-shadow: var(--dc-shadow-sm) !important;
  transition: transform var(--dc-transition), box-shadow var(--dc-transition);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dc-shadow-lg) !important;
}

.card:active {
  transform: translateY(-1px);
}

/* 卡片头部 */
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--dc-border);
  padding: var(--dc-space-md) var(--dc-space-lg);
  font-weight: 600;
}

/* 卡片身体 */
.card-body {
  padding: var(--dc-space-lg);
}

/* 卡片入场动画 */
.card-enter {
  animation: cardEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 统计卡片 */
.stat-card {
  position: relative;
  padding: var(--dc-space-lg);
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  transition: transform var(--dc-transition), box-shadow var(--dc-transition);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: transform var(--dc-transition-slow);
}

.stat-card:hover::before {
  transform: scale(1.2) rotate(15deg);
}

.stat-card .stat-icon {
  position: absolute;
  top: var(--dc-space-md);
  right: var(--dc-space-md);
  font-size: 2rem;
  opacity: 0.2;
  transition: opacity var(--dc-transition), transform var(--dc-transition);
}

.stat-card:hover .stat-icon {
  opacity: 0.4;
  transform: scale(1.1);
}

.stat-card .stat-value {
  font-size: var(--dc-font-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--dc-space-xs);
}

.stat-card .stat-label {
  font-size: var(--dc-font-sm);
  opacity: 0.85;
}

.stat-card .stat-footer {
  font-size: var(--dc-font-xs);
  opacity: 0.65;
  margin-top: var(--dc-space-sm);
}

/* 渐变色统计卡片 */
.stat-card-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.stat-card-success {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: white;
}
.stat-card-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}
.stat-card-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: white;
}
.stat-card-info {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}
.stat-card-dark {
  background: linear-gradient(135deg, #374151 0%, #111827 100%);
  color: white;
}

/* 卡片式列表项 */
.list-group-item {
  border: none;
  border-bottom: 1px solid var(--dc-border);
  padding: var(--dc-space-md) var(--dc-space-lg);
  transition: background var(--dc-transition-fast), padding var(--dc-transition-fast);
}

.list-group-item:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--dc-radius-lg) var(--dc-radius-lg);
}

.list-group-item:hover {
  background: #f9fafb;
  padding-left: calc(var(--dc-space-lg) + 4px);
}

.list-group-item:active {
  background: #f3f4f6;
}


/* ==============================================================
   6. 响应式表格系统
   ============================================================== */

/* 表格基础增强 */
.table {
  margin-bottom: 0;
}

.table thead th {
  border-bottom: 2px solid var(--dc-border);
  font-weight: 600;
  font-size: var(--dc-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--dc-text-secondary);
  padding: var(--dc-space-sm) var(--dc-space-md);
}

.table tbody td {
  padding: var(--dc-space-sm) var(--dc-space-md);
  vertical-align: middle;
}

.table tbody tr {
  transition: background var(--dc-transition-fast);
}

.table tbody tr:hover {
  background: #f9fafb;
}

/* 移动端表格 → 卡片转换 */
@media (max-width: 576px) {
  .table-responsive-sm,
  .table-responsive {
    border: 0 !important;
  }

  .table-responsive-sm table,
  .table-responsive table,
  table.table-mobile-cards {
    border: 0;
  }

  .table-responsive-sm thead,
  .table-responsive thead,
  table.table-mobile-cards thead {
    display: none;
  }

  .table-responsive-sm tbody tr,
  .table-responsive tbody tr,
  table.table-mobile-cards tbody tr {
    display: block;
    margin-bottom: var(--dc-space-md);
    border-radius: var(--dc-radius-lg);
    box-shadow: var(--dc-shadow-sm);
    background: var(--dc-surface);
    border: 1px solid var(--dc-border);
    padding: var(--dc-space-md);
    transition: transform var(--dc-transition), box-shadow var(--dc-transition);
  }

  .table-responsive-sm tbody tr:hover,
  .table-responsive tbody tr:hover,
  table.table-mobile-cards tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: var(--dc-shadow-md);
  }

  .table-responsive-sm tbody td,
  .table-responsive tbody td,
  table.table-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dc-space-xs) 0;
    border: none;
    border-bottom: 1px dashed var(--dc-border);
    font-size: var(--dc-font-sm);
  }

  .table-responsive-sm tbody td:last-child,
  .table-responsive tbody td:last-child,
  table.table-mobile-cards tbody td:last-child {
    border-bottom: none;
  }

  .table-responsive-sm tbody td::before,
  .table-responsive tbody td::before,
  table.table-mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--dc-font-xs);
    color: var(--dc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-right: var(--dc-space-md);
    flex-shrink: 0;
  }
}


/* ==============================================================
   7. 响应式表单系统
   ============================================================== */

@media (max-width: 991.98px) {
  .form-label {
    font-size: var(--dc-font-sm);
    font-weight: 600;
    margin-bottom: var(--dc-space-xs);
  }

  .form-control,
  .form-select {
    min-height: 44px;
    font-size: var(--dc-font-base);
    border-radius: var(--dc-radius-md);
    padding: var(--dc-space-sm) var(--dc-space-md);
  }

  .form-control:focus,
  .form-select:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  }

  .input-group {
    flex-direction: column;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    border-radius: var(--dc-radius-md) !important;
    margin-bottom: var(--dc-space-xs);
  }

  .input-group > .btn {
    border-radius: var(--dc-radius-md) !important;
    min-height: 44px;
  }

  textarea.form-control {
    min-height: 100px;
  }

  /* 复选框 & 单选按钮触摸优化 */
  .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-left: 2rem;
  }

  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -2rem;
    margin-top: 0;
  }

  .form-check-label {
    font-size: var(--dc-font-sm);
    padding-left: var(--dc-space-xs);
  }
}

/* 按钮系统 */
.btn {
  border-radius: var(--dc-radius-md);
  font-weight: 500;
  transition: all var(--dc-transition);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--dc-gradient);
  border: none;
}

.btn-primary:hover {
  background: var(--dc-gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-primary {
  border-color: var(--dc-primary);
  color: var(--dc-primary);
}

.btn-outline-primary:hover {
  background: var(--dc-gradient);
  border-color: transparent;
}

/* 按钮涟漪效果 */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.3), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.btn:active::after {
  opacity: 1;
}

@media (max-width: 991.98px) {
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dc-space-sm);
  }

  .btn-block-mobile {
    width: 100%;
    display: flex;
  }

  .btn-group {
    flex-wrap: wrap;
    gap: var(--dc-space-xs);
  }

  .btn-group > .btn {
    border-radius: var(--dc-radius-md) !important;
  }
}


/* ==============================================================
   8. 响应式导航/菜单
   ============================================================== */

/* Topbar 响应式 */
@media (max-width: 991.98px) {
  .topbar {
    height: var(--dc-header-height) !important;
    padding: 0 var(--dc-space-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  .topbar-link span:not(.badge) {
    display: none;
  }

  .topbar-link {
    padding: var(--dc-space-sm) !important;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .sidebar-toggle-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dropdown-menu {
    border: none;
    border-radius: var(--dc-radius-lg);
    box-shadow: var(--dc-shadow-lg);
  }
}

/* 侧栏在移动端 — 图标 + 文字的优化 */
@media (max-width: 991.98px) {
  .sidebar .brand-text {
    font-size: var(--dc-font-lg);
  }

  .sidebar .nav-link {
    padding: 14px 20px;
    font-size: var(--dc-font-base);
  }

  .sidebar .nav-link i {
    font-size: 1.2rem;
    width: 24px;
  }

  .sidebar .submenu a {
    padding: 12px 20px 12px 54px;
    font-size: var(--dc-font-sm);
  }

  /* 关闭面板按钮 */
  .sidebar-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: var(--dc-radius-full);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--dc-transition-fast);
  }
  .sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

.sidebar-close-btn {
  display: none;
}


/* ==============================================================
   9. 动画系统
   ============================================================== */

/* 淡入上滑 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 左侧滑入 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 右侧滑入 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 放大淡入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 脉冲 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 闪烁 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 渐变色流动 (用于背景) */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 实用动画类 */
.animate-fade-in {
  animation: fadeIn 0.5s ease both;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease both;
}

.animate-slide-in-left {
  animation: slideInLeft 0.5s ease both;
}

.animate-slide-in-right {
  animation: slideInRight 0.5s ease both;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease both;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* 入场延迟工具 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* 加载骨架屏 */
.skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--dc-radius-sm);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  width: 100%;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1em;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--dc-radius-full);
}

.skeleton-card {
  height: 120px;
  border-radius: var(--dc-radius-lg);
}


/* ==============================================================
   10. 页面过渡与加载优化
   ============================================================== */

/* 页面切换过渡 */
.page-transition {
  animation: fadeInUp 0.4s ease both;
}

/* 内容区块动画 */
.content-section {
  animation: fadeInUp 0.5s ease both;
}

/* 给主要内容区域的卡片添加交错入场 */
.main-content .card:nth-child(1) { animation: cardEnter 0.5s ease 0.05s both; }
.main-content .card:nth-child(2) { animation: cardEnter 0.5s ease 0.1s both; }
.main-content .card:nth-child(3) { animation: cardEnter 0.5s ease 0.15s both; }
.main-content .card:nth-child(4) { animation: cardEnter 0.5s ease 0.2s both; }
.main-content .card:nth-child(5) { animation: cardEnter 0.5s ease 0.25s both; }
.main-content .card:nth-child(6) { animation: cardEnter 0.5s ease 0.3s both; }

/* 列表项交错入场 */
.list-group .list-group-item:nth-child(1) { animation: slideInLeft 0.3s ease 0.05s both; }
.list-group .list-group-item:nth-child(2) { animation: slideInLeft 0.3s ease 0.1s both; }
.list-group .list-group-item:nth-child(3) { animation: slideInLeft 0.3s ease 0.15s both; }
.list-group .list-group-item:nth-child(4) { animation: slideInLeft 0.3s ease 0.2s both; }
.list-group .list-group-item:nth-child(5) { animation: slideInLeft 0.3s ease 0.25s both; }


/* ==============================================================
   11. 响应式网格布局工具
   ============================================================== */

/* 自适应网格 */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--dc-space-md);
}

.grid-auto-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--dc-space-md);
}

/* 统计卡片网格 — 在手机上始终 2 列 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dc-space-md);
}

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

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card .stat-value { font-size: var(--dc-font-2xl); }
}


/* ==============================================================
   12. 动效徽章与标签
   ============================================================== */

.badge {
  font-weight: 500;
  padding: 0.25em 0.6em;
  border-radius: var(--dc-radius-full);
}

.badge-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* 状态灯 */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot-active {
  background: var(--dc-success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.status-dot-inactive {
  background: var(--dc-text-muted);
}

.status-dot-warning {
  background: var(--dc-warning);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.status-dot-danger {
  background: var(--dc-danger);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}


/* ==============================================================
   13. 移动端特化调整
   ============================================================== */

@media (max-width: 991.98px) {
  /* 标题缩小 */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.375rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.875rem; }

  /* 段落 */
  p { font-size: var(--dc-font-sm); }

  /* 模态框全屏 */
  .modal-dialog {
    margin: 0;
    min-height: 100vh;
  }
  .modal-dialog .modal-content {
    border-radius: 0;
    border: none;
    min-height: 100vh;
  }
  .modal-dialog.modal-dialog-centered {
    align-items: flex-end;
  }
  .modal-dialog.modal-dialog-centered .modal-content {
    border-radius: var(--dc-radius-xl) var(--dc-radius-xl) 0 0;
    min-height: auto;
    max-height: 90vh;
  }

  /* 面包屑精简 */
  .breadcrumb {
    font-size: var(--dc-font-sm);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumb-item {
    white-space: nowrap;
  }

  /* 分页触摸友好 */
  .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }
  .page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dc-radius-sm) !important;
    margin: 0;
  }

  /* 选项卡 */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: var(--dc-space-sm) var(--dc-space-md);
    font-size: var(--dc-font-sm);
  }

  /* 警告框 */
  .alert {
    padding: var(--dc-space-sm) var(--dc-space-md);
    font-size: var(--dc-font-sm);
    border-radius: var(--dc-radius-md);
  }

  /* 进度条 */
  .progress {
    height: 8px;
    border-radius: var(--dc-radius-full);
  }

  /* 浮动按钮 */
  .floating-buttons {
    right: var(--dc-space-md) !important;
    top: auto !important;
    bottom: calc(var(--dc-bottom-nav-height) + var(--dc-space-md)) !important;
    transform: none !important;
    flex-direction: row !important;
    gap: var(--dc-space-sm) !important;
  }

  .floating-buttons .btn {
    width: 44px !important;
    height: 44px !important;
    box-shadow: var(--dc-shadow-lg) !important;
    opacity: 1 !important;
  }

  /* 空状态 */
  .text-center.py-5 {
    padding: var(--dc-space-xl) var(--dc-space-md) !important;
  }
  .text-center.py-5 i.bi {
    font-size: 2.5rem !important;
  }
}

/* ==============================================================
   14. 安全区域适配 (刘海屏)
   ============================================================== */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--dc-header-height) + env(safe-area-inset-top)) !important;
  }

  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--dc-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  @media (max-width: 991.98px) {
    .sidebar {
      padding-top: env(safe-area-inset-top);
    }
  }
}


/* ==============================================================
   15. 暗色模式增强
   ============================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --dc-bg: #0f1117;
    --dc-surface: #1a1b23;
    --dc-border: #2d2e3a;
    --dc-text: #e5e7eb;
    --dc-text-secondary: #9ca3af;
    --dc-text-muted: #6b7280;
  }

  body {
    background: var(--dc-bg);
    color: var(--dc-text);
  }

  .card,
  .mobile-bottom-nav,
  .topbar {
    background: var(--dc-surface) !important;
    color: var(--dc-text);
  }

  .card-header {
    border-bottom-color: var(--dc-border);
  }

  .table {
    color: var(--dc-text);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
  }

  .table thead th {
    color: var(--dc-text-secondary);
    border-bottom-color: var(--dc-border);
  }

  .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  @media (max-width: 576px) {
    .table-responsive-sm tbody tr,
    .table-responsive tbody tr {
      background: var(--dc-surface);
      border-color: var(--dc-border);
    }
  }

  .form-control,
  .form-select {
    background: var(--dc-surface);
    border-color: var(--dc-border);
    color: var(--dc-text);
  }

  .form-control:focus,
  .form-select:focus {
    background: var(--dc-surface);
    border-color: var(--dc-primary);
    color: var(--dc-text);
  }

  .modal-content {
    background: var(--dc-surface);
    color: var(--dc-text);
  }

  .modal-header {
    border-bottom-color: var(--dc-border);
  }

  .modal-footer {
    border-top-color: var(--dc-border);
  }

  .list-group-item {
    background: var(--dc-surface);
    border-bottom-color: var(--dc-border);
    color: var(--dc-text);
  }

  .list-group-item:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .dropdown-menu {
    background: var(--dc-surface);
    border-color: var(--dc-border);
  }

  .dropdown-item {
    color: var(--dc-text);
  }

  .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--dc-text);
  }

  .dropdown-divider {
    border-top-color: var(--dc-border);
  }

  .breadcrumb {
    background: transparent;
  }

  .breadcrumb-item.active {
    color: var(--dc-text);
  }

  .alert {
    background: var(--dc-surface);
    border-color: var(--dc-border);
  }

  .page-link {
    background: var(--dc-surface);
    border-color: var(--dc-border);
    color: var(--dc-text);
  }

  .page-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--dc-border);
  }

  .page-item.active .page-link {
    background: var(--dc-gradient);
    border-color: transparent;
  }

  .progress {
    background: var(--dc-border);
  }

  .nav-tabs {
    border-bottom-color: var(--dc-border);
  }

  .nav-tabs .nav-link {
    color: var(--dc-text-secondary);
  }

  .nav-tabs .nav-link:hover {
    border-color: transparent;
  }

  .nav-tabs .nav-link.active {
    background: var(--dc-surface);
    border-color: var(--dc-border);
    border-bottom-color: var(--dc-surface);
    color: var(--dc-text);
  }

  .table-bordered,
  .table-bordered th,
  .table-bordered td {
    border-color: var(--dc-border);
  }
}


/* ==============================================================
   16. 打印优化
   ============================================================== */
@media print {
  .sidebar,
  .topbar,
  .mobile-bottom-nav,
  .sidebar-overlay,
  .floating-buttons {
    display: none !important;
  }

  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }

  .table td,
  .table th {
    background: white !important;
    color: black !important;
  }
}


/* ==============================================================
   17. 业务页通用布局（单模板移动端，字段零丢失）
   百分比 / rem，禁止删减表单控件
   ============================================================== */

/* 顶栏小屏：隐藏长文案，仅图标 */
@media (max-width: 991.98px) {
  .topbar-link > span:not(.badge) {
    display: none !important;
  }
  .topbar-link {
    min-width: var(--dc-touch-min);
    min-height: var(--dc-touch-min);
    justify-content: center;
  }
  .sidebar-close-btn {
    display: flex !important;
  }
}

@media (min-width: 992px) {
  .sidebar-close-btn {
    display: none !important;
  }
}

/* 容器与栅格：小屏满宽堆叠，不丢字段 */
@media (max-width: 991.98px) {
  .main-content .container,
  .main-content .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Bootstrap md+ 列在小屏已满宽；仅兜底强制避免挤压 */
  .row > [class*="col-md"],
  .row > [class*="col-lg"],
  .row > [class*="col-xl"],
  .row > [class*="col-xxl"] {
    max-width: 100%;
  }

  /* 表单控件触摸友好，保留全部 input/select/hidden */
  .form-control,
  .form-select,
  .bootstrap-select > .dropdown-toggle {
    min-height: var(--dc-touch-min);
    width: 100%;
    font-size: 1rem;
  }

  .input-group {
    flex-wrap: wrap;
    width: 100%;
  }
  .input-group > .form-control,
  .input-group > .form-select,
  .input-group > .btn {
    width: 100%;
    margin-bottom: 0.4rem;
    border-radius: 0.5rem !important;
  }

  /* 按钮组不删按钮，改为可换行全宽 */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.4rem;
  }
  .btn-group > .btn {
    flex: 1 1 auto;
    min-width: 40%;
    min-height: var(--dc-touch-min);
    border-radius: 0.5rem !important;
  }

  .btn,
  button[type="submit"],
  input[type="submit"] {
    min-height: var(--dc-touch-min);
  }

  .card {
    width: 100%;
    margin-bottom: 3%;
  }

  .card-body {
    padding: 4%;
  }

  /* 表格：横向滚动，不删列 */
  .table-responsive,
  .table-responsive-sm,
  .table-responsive-md {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.table {
    min-width: 100%;
  }

  /* 模态：底部 sheet，字段完整 */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
  .modal-dialog.modal-dialog-centered {
    align-items: flex-end;
    min-height: 100%;
  }
  .modal-dialog.modal-dialog-centered .modal-content {
    border-radius: 1rem 1rem 0 0;
    max-height: 90vh;
    overflow-y: auto;
  }
  .modal-body {
    padding: 4%;
  }
  .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .modal-footer .btn {
    flex: 1 1 40%;
  }

  /* 分页触摸友好 */
  .pagination .page-link {
    min-width: var(--dc-touch-min);
    min-height: var(--dc-touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 列表组 */
  .list-group-item {
    padding: 3% 4%;
  }

  /* 个人中心侧栏：小屏改为横向滚动 tabs */
  .col-md-3 .list-group {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .col-md-3 .list-group-item {
    white-space: nowrap;
    flex: 0 0 auto;
    border-radius: 0.5rem !important;
    margin-right: 0.4rem;
  }
}

/* 极窄屏：统计卡单列 */
@media (max-width: 575.98px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .display-6 {
    font-size: 1.5rem;
  }
  h1, .h1 { font-size: 1.35rem; }
  h2, .h2 { font-size: 1.2rem; }
  h3, .h3 { font-size: 1.1rem; }
}

/* 登录/独立页移动适配 */
@media (max-width: 991.98px) {
  body > .container {
    width: 94% !important;
    max-width: 94% !important;
    padding: 0 !important;
  }
  .ai-chat-modal {
    width: 94% !important;
    right: 3% !important;
    left: 3% !important;
    height: 70vh !important;
    bottom: 5rem !important;
  }
  .partners-section {
    height: auto !important;
    padding: 2% 0 !important;
  }
  .partners-container {
    max-width: 70%;
  }
  .partner-link {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}