/* 页脚基本样式 */
.footer {
  background-color: var(--footer-bg, #f8f9fa);
  color: var(--footer-text, #6c757d);
  padding: 1.5rem 0;
  margin-top: 0 !important;
  width: 100%;
  border-top: 1px solid var(--border-color, #e9ecef);
  font-size: 0.9rem;
  position: relative;
  z-index: 900;
  transition: padding-left 0.3s ease; /* 添加过渡效果，与侧边栏开关同步 */
}

/* 简单的粘性页脚 - 应用于整个HTML布局 */
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto; /* 让主内容区域自动伸展 */
}

.footer {
  flex-shrink: 0; /* 防止页脚被压缩 */
}

/* 当侧边栏激活时，调整页脚左侧边距，避免重叠 */
body.sidebar-active .footer {
  padding-left: var(--sidebar-width, 220px);
}

/* 响应式样式 */
@media (max-width: 768px) {
  .footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.9rem;
    padding-left: 0 !important; /* 移动设备上不考虑侧边栏宽度 */
  }
}

/* 暗黑模式适配 */
.dark-mode .footer {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    to right,
    rgba(30, 30, 45, 0.8),
    rgba(35, 35, 50, 0.8)
  );
  color: #e2e8f0;
}

.dark-mode .footer .text-muted {
  color: #a0aec0 !important;
}

/* 管理后台页脚样式 */
.admin-footer {
  margin-top: 0 !important;
  font-size: 0.9rem;
  opacity: 0.8;
  background: white;
  border-top: 1px solid rgba(112, 73, 240, 0.1);
  box-shadow: none;
  padding-left: 0 !important; /* 管理后台的页脚不需要预留侧边栏宽度 */
}

.admin-footer .text-muted {
  opacity: 0.7;
}

body:not(.bg-none) .footer {
  background: rgba(0, 0, 0, 0.4);
  color: #f3f3f3;
  border: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body:not(.bg-none) .footer .text-muted,
body:not(.bg-none) .footer p.small {
  color: #b0b8c9 !important;
}