/* 通用错误与空状态样式 */
.error-box { 
    background:#fff; 
    border-radius:12px; 
    padding:16px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.05); 
    color:#c00; 
    border-left: 4px solid #ff4d4f; /* 添加左侧强调边框 */
}
.empty-box { 
    background:#fff; 
    border-radius:12px; 
    padding:16px; 
    box-shadow:0 4px 12px rgba(0,0,0,0.05); 
    color:#888; 
    text-align: center; /* 居中显示空状态内容 */
    border: 1px dashed #d9d9d9; /* 虚线边框更明显 */
}
.hint { 
    font-size:0.95rem; 
    color:#666; 
    background: #f8f9fa; /* 添加背景色突出提示 */
    padding: 8px 12px; /* 添加内边距 */
    border-radius: 6px; /* 添加圆角 */
    border-left: 3px solid #1890ff; /* 添加左侧强调边框 */
}

/* 底部导航栏统一样式 */
body { 
    padding-bottom: 100px; /* 为底部菜单留出更充足的空间 */
}
/* 页面紧凑化建议：如需限制列表/表格高度，可在具体页面添加
   .list-limit 或 .table-limit 类，并以脚本控制“展开更多”。
   公共样式不强制隐藏滚动条，保留自然滚动行为。 */
/* iOS 安全区适配：在支持 env() 的浏览器中增加底部安全区留白 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

.bottom-nav { 
    position: fixed; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #fff; 
    display: flex; 
    justify-content: space-around; 
    z-index: 9999; 
    height: 56px; 
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06); 
}

.bottom-nav-item { 
    flex: 1; 
    text-align: center; 
    color: #888; 
    font-size: 0.85rem; 
    padding-top: 6px; 
    background: transparent; 
    text-decoration: none;
    transition: color 0.18s cubic-bezier(.4,0,.2,1);
}

.bottom-nav-item img { 
    width: 24px; 
    height: 24px; 
    display: block; 
    margin: 0 auto 2px; 
    object-fit: contain; 
}

.bottom-nav-item.active { 
    color: #ff6600; 
    font-weight: bold; 
}

.bottom-nav-item:hover {
    color: #ff6600;
    text-decoration: none;
}

/* 响应式调整 */
@media (max-width: 600px) {
    .bottom-nav { 
        height: 60px; 
    }
    
    .bottom-nav-item {
        font-size: 0.8rem;
    }
}

/* 桌面端显示底部导航，并保留底部留白 */
@media (min-width: 992px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: 100px; }
}

/* 自定义开关统一视觉（Bootstrap custom-switch） */
.custom-control.custom-switch .custom-control-label::before {
  background-color: #e9ecef;
  border-radius: 1rem;
}
.custom-control.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #4dabf7; /* 主题蓝 */
}
.custom-control.custom-switch .custom-control-label::after {
  background-color: #fff;
  border-radius: 50%;
}

/* 深色模式基础样式 */
body.dark-mode {
  background-color: #0f1217;
  color: #e3e6ea;
}
body.dark-mode .card { background-color: #171b22; color: #e3e6ea; }
body.dark-mode .btn-outline-primary, body.dark-mode .btn-outline-secondary, body.dark-mode .btn-outline-info, body.dark-mode .btn-outline-danger {
  border-color: #3a3f47;
  color: #e3e6ea;
}
body.dark-mode .btn-primary { background-color: #2a7ff3; border-color: #2a7ff3; }
body.dark-mode .bottom-nav { background-color: #1a1f27; box-shadow: none; }
body.dark-mode .bottom-nav-item { color: #c7cbd2; }
body.dark-mode .bottom-nav-item.active { color: #4dabf7; }

/* 底部导航商业化细节增强（玻璃态 + 安全区） */
.bottom-nav {
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  /* 添加微妙的阴影效果 */
  box-shadow: 0 -2px 20px rgba(0,0,0,0.08), 0 -1px 8px rgba(0,0,0,0.04);
}
.bottom-nav-item { 
    position: relative; 
    transition: all 0.2s ease; /* 添加平滑过渡效果 */
}
.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: #ff6600;
  /* 添加动画效果 */
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from { width: 0; }
  to { width: 28px; }
}
/* 添加图标悬停效果 */
.bottom-nav-item:hover img {
  transform: scale(1.1);
}

/* 夜间模式覆盖：玻璃态与分隔线 */
body.dark-mode .bottom-nav {
  background-color: rgba(26,31,39,0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -2px 20px rgba(0,0,0,0.2), 0 -1px 8px rgba(0,0,0,0.1);
}

/* 优化深色模式下的错误、空状态和提示样式 */
body.dark-mode .error-box {
  background-color: #1a1f2e;
  border-left-color: #ff7875;
  color: #ff7875;
}
body.dark-mode .empty-box {
  background-color: #1a1f2e;
  border-color: #3a3f47;
  color: #a0a7b4;
}
body.dark-mode .hint {
  background-color: #1a1f2e;
  border-left-color: #4dabf7;
  color: #a0a7b4;
}

/* 添加全局动画类 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* 添加通用按钮增强样式 */
.btn {
  transition: all 0.2s ease;
  font-weight: 500;
  border-radius: 6px;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 添加卡片通用增强样式 */
.card {
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.06);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}