/* 定义CSS设计令牌 */
:root {
  /* 定义主色调变量组 */
  --primary:         #1a5fd8;
  --primary-dark:    #0e47b0;
  --primary-light:   #e8f0fd;
  --primary-rgb:     26, 95, 216;

  /* 定义辅助色变量组 */
  --success:         #12a05c;
  --success-light:   #e6f7ef;
  --info:            #0891b2;
  --info-light:      #e0f5fa;
  --warning:         #d97706;
  --warning-light:   #fef3c7;
  --danger:          #dc2626;
  --danger-light:    #fef2f2;

  /* 定义中性色阶变量组 */
  --gray-50:         #f8fafc;
  --gray-100:        #f1f5f9;
  --gray-200:        #e2e8f0;
  --gray-300:        #cbd5e1;
  --gray-400:        #94a3b8;
  --gray-500:        #64748b;
  --gray-600:        #475569;
  --gray-700:        #334155;
  --gray-800:        #1e293b;
  --gray-900:        #0f172a;

  /* 定义页面背景与卡片变量 */
  --bg-page:         #f1f5f9;
  --bg-card:         #ffffff;
  --border-color:    #e2e8f0;

  /* 定义圆角尺寸变量 */
  --radius-sm:       0.5rem;
  --radius-md:       0.75rem;
  --radius-lg:       1rem;

  /* 定义阴影效果变量 */
  --shadow-xs:       0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:       0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:       0 4px 16px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:       0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  /* 定义过渡效果变量 */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 220ms;
  --duration-slow:   350ms;

  /* z-index 层叠管理变量
   * 层级从低到高：横幅(1040) < 遮罩(1050) < 弹窗(1055) < 第二层遮罩(1085) < 确认弹窗(1090) < 全屏加载(9000) < 调试弹窗(9100) < Toast(11000)
   * 维护说明：所有 z-index 必须从此处统一修改，禁止在具体规则中使用魔法数字 */
  --z-banner:              1040;   /* 页面横幅，低于遮罩层确保弹窗打开时被正确覆盖 */
  --z-modal-backdrop:      1050;   /* Bootstrap 默认遮罩层（与 Bootstrap 源码一致，勿改） */
  --z-modal:               1055;   /* Bootstrap 默认弹窗（与 Bootstrap 源码一致，勿改） */
  --z-modal-2nd-backdrop:  1085;   /* 两个弹窗同时打开时第二个遮罩层的层级 */
  --z-modal-confirm:       1090;   /* 确认删除弹窗，需置于所有普通弹窗之上 */
  --z-loading:             9000;   /* 全屏加载遮罩，高于所有业务弹窗 */
  --z-debug-modal:         9100;   /* 调试信息弹窗，高于全屏加载遮罩 */
  --z-toast:              11000;   /* Toast 通知，永远置于最顶层 */
}

/* 定义基础全局样式 */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg-page);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--gray-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 定义导航栏样式 */
.navbar {
  background: linear-gradient(135deg, #1a5fd8 0%, #0e3fa8 100%) !important;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(14,63,168,.35);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.55rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff !important;
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.18);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
  vertical-align: middle;
}

.brand-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0;
}

#siteSwitcherBtn {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* 统一导航栏按钮样式 */
.navbar .btn-outline-light {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.navbar .btn-outline-light:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  transform: translateY(-1px);
}
.navbar .btn-outline-light:active { transform: translateY(0); }

/* 定义全局卡片样式 */
.card {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--bg-card);
}

.card-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.875rem 1.25rem !important;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-800);
}

.card-body { padding: 1.25rem; }

.card-footer {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 0.75rem 1.25rem !important;
}

/* 定义统计卡片样式 */
.stat-card {
  border-left: 4px solid transparent !important;
  border-radius: var(--radius-md) !important;
  transition: transform var(--duration-normal) var(--ease),
              box-shadow var(--duration-normal) var(--ease);
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md) !important;
}

.stat-card .card-body { padding: 1.1rem 1.25rem; }
.stat-card.c-blue   { border-left-color: var(--primary) !important; }
.stat-card.c-green  { border-left-color: var(--success) !important; }
.stat-card.c-cyan   { border-left-color: var(--info) !important; }
.stat-card.c-yellow { border-left-color: var(--warning) !important; }

/* 定义统计标签样式 */
.stat-card .text-muted.small {
  font-size: 0.875rem !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 0.375rem !important;
}

.stat-number {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-icon {
  font-size: 2.5rem;
  opacity: 0.5;
  transition: opacity var(--duration-normal) var(--ease);
}
.stat-card:hover .stat-icon { opacity: 0.22; }

/* 定义统计卡片入场动画 */
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-card { animation: statCardIn 0.4s var(--ease) both; }
.row .col-6:nth-child(1) .stat-card { animation-delay: 0.05s; }
.row .col-6:nth-child(2) .stat-card { animation-delay: 0.10s; }
.row .col-6:nth-child(3) .stat-card { animation-delay: 0.15s; }
.row .col-6:nth-child(4) .stat-card { animation-delay: 0.20s; }

/* 定义站点标题行布局 */
#siteCurrentTitleRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  min-width: 0;
}
#siteCurrentTitleRow > i {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
#currentSiteTitle {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: -0.01em;
  margin: 0 !important;
  /* 覆盖HTML默认外边距 */
  line-height: 1;
  /* 消除字体默认行高偏移 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 定义分布卡片样式 */
.dist-card .card-header {
  padding: 0.625rem 1.125rem !important;
  font-size: 0.9375rem;
}
.dist-card .card-body {
  padding: 0.625rem 1.125rem !important;
  min-height: 120px;
}
.dist-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  min-width: 0;
}
.dist-item + .dist-item { border-top: 1px solid var(--gray-100); }
/* 配置分布项弹性布局 */
.dist-label {
  flex: 1 0 0;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dist-label a {
  color: inherit;
  text-decoration: none;
}
.dist-label a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.dist-bar-wrap {
  flex: 0 0 35%;
  background: var(--gray-100);
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}
.dist-bar {
  height: 7px;
  border-radius: 99px;
  transition: width 0.5s var(--ease);
  min-width: 2px;
  will-change: width;
}
.dist-pct {
  flex: 0 0 36px;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-500);
}
.dist-count {
  flex: 0 0 68px;
  text-align: right;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* 定义图表容器样式 */
.chart-wrap { position: relative; height: 240px; }

/* 定义周月切换按钮组样式 */
.btn-group .btn-outline-secondary {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  border-color: var(--gray-300);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
  padding: 0.25rem 0.65rem;
}
.btn-group .btn-outline-secondary:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-group .btn-outline-secondary.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(26,95,216,.35);
}

/* 定义表格样式 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  font-size: 0.9375rem;
  border-color: var(--border-color) !important;
}

.table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--gray-800) !important;
  color: rgba(255,255,255,0.88) !important;
  border-color: var(--gray-700) !important;
  padding: 0.7rem 0.875rem;
}

.table tbody td {
  vertical-align: middle;
  padding: 0.6rem 0.875rem;
  border-color: var(--gray-100) !important;
  color: var(--gray-700);
}

.table tbody tr:nth-child(odd)  { background-color: var(--gray-50); }
.table tbody tr:hover           { background-color: rgba(26,95,216,0.05) !important; }

/* 定义徽章样式 */
.badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3em 0.6em;
  border-radius: 0.375rem;
  letter-spacing: 0.01em;
}

/* 定义全局按钮样式 */
.btn {
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

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

.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(26,95,216,.35);
  transform: translateY(-1px);
}
.btn-primary:not(:disabled):active { transform: scale(0.97) translateY(0); box-shadow: none; }

.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(220,38,38,.35);
  transform: translateY(-1px);
}
.btn-danger:not(:disabled):active { transform: scale(0.97) translateY(0); box-shadow: none; }

.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-danger:hover,
.btn-success:hover { transform: translateY(-1px); }

.btn-sm {
  font-size: 0.875rem;
  padding: 0.32rem 0.7rem;
  border-radius: 0.4rem;
}

/* 定义表单控件样式 */
.form-control,
.form-select {
  font-size: 0.9375rem;
  border-color: var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--gray-800);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
  background-color: #fff;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,95,216,.15);
}
.form-control-sm,
.form-select-sm {
  font-size: 0.9rem;
  border-radius: 0.4rem;
}
.form-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-600);
  margin-bottom: 0.35rem;
}
.form-text { font-size: 0.875rem; color: var(--gray-500); }
.td-text {font-size: 0.875rem; }

/* 定义过滤器面板样式 */
.filter-panel {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--gray-50);
}

/* 定义分页控件样式 */
.pagination-sm .page-link {
  font-size: 0.875rem;
  padding: 0.38rem 0.72rem;
  color: var(--gray-600);
  border-color: var(--border-color);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}
.pagination-sm .page-link:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.pagination-sm .page-item.active .page-link {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(26,95,216,.3);
}
.pagination-sm .page-item.disabled .page-link { color: var(--primary); }



/* 定义危险操作卡片样式 */
.danger-card {
  border: 1px solid #fca5a5 !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
.danger-card .card-header {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.25rem !important;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 定义站点管理列表项样式 */
.site-list-item {
  transition: background var(--duration-fast) var(--ease);
  border-bottom: 1px solid var(--border-color);
}
.site-list-item:last-child { border-bottom: none; }
.site-list-item:hover { background: var(--primary-light); }

.site-list-item .fw-semibold { font-size: 0.9375rem; }
.site-list-item .text-muted  { font-size: 0.8125rem; }

/* 定义API代码块样式 */
.api-code {
  background: #0f1117;
  color: #c9d1d9;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Consolas', 'Courier New', monospace;
  font-size: 0.875rem;
  padding: 1.125rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.75;
  border: 1px solid rgba(255,255,255,0.07);
}

/* 定义卡片级加载遮罩 */
.card-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  z-index: 10;
  pointer-events: none;
}
.card-loading-overlay .spinner-border {
  width: 1.75rem;
  height: 1.75rem;
  border-width: 0.18rem;
}

/* 定义表格加载行样式 */
.table-loading-row td {
  padding: 2rem 0 !important;
}

/* 事件记录表格：所有单元格禁止换行，防止文字折行撑高行高 */
#tableScrollWrap .table td {
  white-space: nowrap;
  overflow: hidden;
}

.cell-clip {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.cell-clip-sm {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* 分页换页时表格区域渐隐过渡，替代 display:none 防止页面跳动 */
#tableScrollWrap {
  transition: opacity 0.15s ease;
}
#tableScrollWrap.table-paging {
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* 定义全局加载遮罩层 */
#loadingOverlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
}
#loadingOverlay .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 0.22rem;
}

/* 定义Toast提示容器样式 */
#toastContainer { z-index: var(--z-toast); }

.toast {
  border-radius: 0.625rem !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 0.9375rem;
  border: none !important;
  min-width: 280px;
  animation: toastIn 0.25s var(--ease);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-body { padding: 0.75rem 1rem; font-weight: 500; }

/* 定义模态框样式 */
.modal-content {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}
.modal-header {
  padding: 1.125rem 1.5rem !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.modal-body   { padding: 1.5rem !important; }
.modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid var(--border-color) !important;
  background: var(--gray-50);
}

/* 对抗扩展强制隐藏：用更高特异性的选择器压过去 */
body > .modal-backdrop {
  display: block !important;
  opacity: 1 !important;
}

.modal-backdrop {
  --bs-backdrop-bg: #0f172a;           /* 颜色底色：深蓝黑色 */
  --bs-backdrop-opacity: 0.8;          
}
.modal-backdrop.show {
  opacity: 0.8 !important; 
}
/* 深色模式下的遮罩层适配 (更深一些，防止刺眼) */
[data-bs-theme="dark"] .modal-backdrop {
  --bs-backdrop-bg: #000000;
  --bs-backdrop-opacity: 0.9;
}
.btn-close {
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn-close:hover { opacity: 1; transform: rotate(90deg); }

/* 定义下拉菜单样式 */
.dropdown-menu {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.375rem !important;
  animation: dropdownIn 0.18s var(--ease);
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown-item {
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.dropdown-item:hover  { background: var(--primary-light); color: var(--primary); }
.dropdown-item.active { background: var(--primary) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--border-color) !important; margin: 0.25rem 0 !important; }

/* 定义空状态样式 */
.empty-state { color: var(--gray-500); }
.empty-state .bi { font-size: 3rem; }
.empty-state span { font-size: 0.9375rem; }

/* 定义复制按钮激活状态 */
.btn-copied {
  color: var(--success) !important;
  border-color: var(--success) !important;
  background: var(--success-light) !important;
}

/* 定义骨架屏加载动画 */
.skeleton {
  display: inline-block;
  height: 2.25rem;
  width: 4.5rem;
  background: linear-gradient(90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 0.375rem;
  vertical-align: middle;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 定义Alert提示框样式 */
.alert {
  border-radius: var(--radius-sm) !important;
  font-size: 0.9375rem;
  border: none !important;
}
.alert-danger  { background: var(--danger-light);  color: #991b1b; }
.alert-success { background: var(--success-light); color: #065f46; }
.alert-warning { background: var(--warning-light);}

/* 定义预览模式横幅样式 */
#previewModeBanner {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: var(--z-banner); /* 低于遮罩(--z-modal-backdrop:1050)，弹窗打开时横幅被正确覆盖 */
  box-shadow: 0 2px 8px rgba(180,83,9,.35);
}

/* 确保确认删除弹窗置于最上层 */
#confirmModal { 
  z-index: var(--z-modal-confirm); 
}
/* 当页面同时打开两个弹窗时，提升第二个遮罩层的层级
 * 注：使用 nth-child 而非 nth-of-type，后者按元素类型计数会导致选择器失效 */
body > .modal-backdrop:nth-child(2) { 
  z-index: var(--z-modal-2nd-backdrop); 
}

/* 定义分区标题分隔线 */
.section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 0.75rem;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.section-divider span {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  white-space: nowrap;
}

/* 定义分享链接展示框 */
.share-link-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  word-break: break-all;
  color: var(--gray-700);
}
.share-link-box .share-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 定义页脚样式 */
/*
 * 布局说明：dashboardPage 使用 flex column 撑满视口，
 * 主内容区 flex:1 自动占满剩余空间，footer flex-shrink:0 始终贴底且占满宽度。
 * showDashboardPage() 通过 style.display='' 清除 inline none，
 * CSS 的 display:flex 随即生效，无需 JS 干预。
 */
#dashboardPage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* 现代浏览器使用动态视口高度，规避移动端地址栏引起的抖动 */
}

/* 主内容区（navbar 与 footer 之间）撑满剩余高度 */
#dashboardPage > .container-fluid {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;   /* 防止 flex 压缩页脚 */
  width: 100%;      /* 确保始终撑满父容器宽度 */
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 1rem 0 !important;
  margin-bottom: 0 !important; /* 消除任何可能的底部外边距 */
}
footer .text-muted { font-size: 0.875rem; color: var(--gray-500) !important; }
footer a { color: var(--gray-500) !important; transition: color var(--duration-fast) var(--ease); }
footer a:hover { color: var(--primary) !important; }

/* 定义添加新站点卡片样式 */
.card.border-primary-subtle { border-color: rgba(26,95,216,0.25) !important; }
.bg-primary-subtle { background: rgba(26,95,216,0.04) !important; }
.card.border-primary-subtle .card-title { font-size: 0.9375rem; font-weight: 600; }

/* 滚动条美化 */
::-webkit-scrollbar { 
  width: 8px; 
  height: 8px; 
}
::-webkit-scrollbar-track { 
  background: var(--bg-page); 
}
::-webkit-scrollbar-thumb { 
  background: var(--gray-400); 
  border-radius: 99px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: var(--gray-500); 
}

/* 兼容 Firefox 等非 Webkit 浏览器 */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--bg-page);
  }
}

/* 设置站点切换菜单尺寸 */
#siteSwitcherMenu { min-width: 220px; max-height: 320px; overflow-y: auto; }

/* 定义按钮全局Loading状态 */
.btn-loading {
  position: relative;
  pointer-events: none !important;
  opacity: 0.85;
}

/* 隐藏按钮内原有的Bootstrap Icon */
.btn-loading .bi {
  display: none !important;
}

/* 使用::before伪元素动态生成独立的Spinner，避免HTML冗余 */
.btn-loading::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.125em;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-loading-spinner .75s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes btn-loading-spinner {
  to { transform: rotate(360deg); }
}

/* ==============================================================
   定义深色模式 (Dark Mode) 的 CSS 令牌覆盖与组件适配
   ============================================================== */
[data-bs-theme="dark"] {
  /* 反转页面与卡片背景 */
  --bg-page:         #0f172a;
  --bg-card:         #1e293b;
  --border-color:    #334155;

  /* 文字颜色阶梯反转：将原来的深色变浅色，浅色变深色 */
  --gray-800:        #f1f5f9;
  --gray-700:        #e2e8f0;
  --gray-600:        #cbd5e1;
  --gray-500:        #94a3b8;
  --gray-400:        #64748b;
  --gray-300:        #475569;
  --gray-200:        #334155;
  --gray-100:        #1e293b;
  --gray-50:         #0f172a;

  /* 适配彩色背景色的深色环境（降低透明度与明度） */
  --primary-light:   rgba(26, 95, 216, 0.15);
  --success-light:   rgba(18, 160, 92, 0.15);
  --warning-light:   rgba(217, 119, 6, 0.15);
  --danger-light:    rgba(220, 38, 38, 0.15);
  --info-light:      rgba(8, 145, 178, 0.15);

  /* 适配深色模式的滚动条 */
  scrollbar-color: #475569 #0f172a;
}

/* --- Tooltip 样式 --- */
.tooltip-inner {
  max-width: 320px; 
  text-align: left; /* 阿拉伯语下 Bootstrap 会自动反转为 right */
  padding: 0.6rem 0.8rem;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.85rem;
}
[data-bs-theme="dark"] .tooltip-inner {
  color: #f8fafc;
  background-color: #1e293b;
  border: 1px solid #334155;
}
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, 
[data-bs-theme="dark"] .bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #334155;
}
[data-bs-theme="dark"] .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, 
[data-bs-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #334155;
}

/* 确保表格内使用了 Tooltip 的链接超出截断，避免撑破布局 */
.cell-clip {
  display: inline-block;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.cell-clip-sm {
  max-width: 120px;
}
@media (min-width: 992px) {
  .cell-clip { max-width: 300px; }
}

/* =========================================
   深色模式
   ========================================= */

/* 1. 表头强制为深黑色背景 */
[data-bs-theme="dark"] .table thead th {
  background-color: #222222 !important;
  color: rgba(255,255,255,0.88) !important;
  border-color: #334155 !important;
}

/* 2. 页脚 (Footer) 强制覆盖 Bootstrap 原生 .bg-white 类对深色模式的干扰 */
[data-bs-theme="dark"] footer.bg-white {
  background-color: var(--bg-card) !important;
}

/* 3. 增强弹窗与下拉菜单的层次感 */
[data-bs-theme="dark"] .modal-content {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: var(--bg-card);
}
[data-bs-theme="dark"] .dropdown-menu {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background-color: var(--bg-card);
}

/* 4. 覆盖表单背景色与文字颜色 */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--bg-card);
  color: var(--gray-800);
}

/* 5. 深色模式下的表格斑马线及悬停效果特殊处理 */
[data-bs-theme="dark"] .table tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}
[data-bs-theme="dark"] .table tbody tr:hover {
  background-color: rgba(26, 95, 216, 0.15) !important;
}

/* 6. 深色模式代码块背景适配 */
[data-bs-theme="dark"] .api-code {
  background: #000000;
  border-color: #334155;
}

/* 7. 深色模式下的加载遮罩层适配（调整模糊层颜色） */
[data-bs-theme="dark"] .card-loading-overlay,
[data-bs-theme="dark"] #loadingOverlay {
  background: rgba(30, 41, 59, 0.95);
}

/* 8. 适配全屏登录页面的居中卡片背景与标题文字 */
[data-bs-theme="dark"] #loginPage .card {
  background-color: var(--bg-card);
}
[data-bs-theme="dark"] #loginPage h4 {
  color: var(--gray-800) !important;
}

/* 定义移动端响应式适配 */
@media (max-width: 576px) {
  body { font-size: 0.9375rem; }
  .navbar .container-fluid { flex-wrap: wrap; row-gap: 0.5rem; }
  .navbar .d-flex.ms-auto { flex-grow: 1; justify-content: flex-end; }
  #siteSwitcherBtn { max-width: 140px; }
  .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
  .stat-number { font-size: 1.75rem; }
  .stat-icon   { font-size: 2rem; }
  .stat-card .card-body { padding: 0.875rem 1rem; }
  .card-header { padding: 0.75rem 1rem !important; font-size: 0.9rem; }
  .card-body   { padding: 1rem; }
  .chart-wrap  { height: 200px; }
  .modal-body   { padding: 1.125rem !important; }
  .modal-header { padding: 1rem 1.125rem !important; }
  .modal-footer { padding: 0.875rem 1.125rem !important; }
  .modal-title  { font-size: 1rem; }
  .table { font-size: 0.875rem; }
  .table thead th { font-size: 0.75rem; padding: 0.5rem 0.625rem; }
  .table tbody td { padding: 0.5rem 0.625rem; }
  .brand-sub { display: none !important; }
  .api-code { font-size: 0.8125rem; padding: 0.875rem 1rem; }
}
@media (max-width: 768px) {
  .stat-number { font-size: 1.875rem; }
  .chart-wrap  { height: 220px; }
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  input[type="text"],
  input[type="password"],
  input[type="date"] {
    font-size: 16px !important; /* 阻止 iOS 自动缩放 */
  }
}
/* 中等屏幕（平板） */
@media (min-width: 768px) and (max-width: 991px) {
  .chart-wrap { height: 200px; }
}
@media (min-width: 1400px) {
  .container-fluid { padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* 解决极小屏幕过滤器面板拥挤问题 */
@media (max-width: 400px) {
  .filter-panel .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* 响应用户系统的“减弱动态效果”设置，但放过加载动画 */
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner-border):not(.skeleton):not(.btn-loading):not(.btn-loading::before),
  *:not(.spinner-border):not(.skeleton):not(.btn-loading):not(.btn-loading::before)::before,
  *:not(.spinner-border):not(.skeleton):not(.btn-loading):not(.btn-loading::before)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}