/* ===== 博海网络科技 · 全栈学习平台 — 全局响应式样式 ===== */

/* === Reset === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === CSS 自定义属性（设计令牌） === */
:root {
  /* 颜色系统 */
  --bh-primary: #409eff;
  --bh-primary-dark: #337ecc;
  --bh-primary-light: #a0cfff;
  --bh-success: #67c23a;
  --bh-warning: #e6a23c;
  --bh-danger: #f56c6c;
  --bh-info: #909399;

  --bh-bg-main: #f0f2f5;
  --bh-bg-card: #ffffff;
  --bh-bg-dark: #304156;
  --bh-bg-dark-light: #3a4a5e;

  --bh-text-primary: #303133;
  --bh-text-regular: #606266;
  --bh-text-secondary: #909399;
  --bh-text-placeholder: #c0c4cc;

  --bh-border: #e4e7ed;
  --bh-border-light: #ebeef5;

  /* 侧边栏暗色（永恒不变，无论明暗模式） */
  --sidebar-bg: #304156;
  --sidebar-bg-hover: #263445;
  --sidebar-text: #bfcbd9;
  --sidebar-text-active: #409eff;
  --sidebar-logo-bg: #2b3a4a;

  /* 间距系统 */
  --bh-space-xs: 4px;
  --bh-space-sm: 8px;
  --bh-space-md: 12px;
  --bh-space-lg: 16px;
  --bh-space-xl: 20px;
  --bh-space-2xl: 24px;

  /* 圆角 */
  --bh-radius-sm: 4px;
  --bh-radius-md: 8px;
  --bh-radius-lg: 12px;

  /* 阴影 */
  --bh-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --bh-shadow-md: 0 2px 8px rgba(0,0,0,0.08);

  /* 侧边栏宽度 */
  --bh-sidebar-width: 220px;
  --bh-sidebar-collapsed: 64px;

  /* 顶栏高度 */
  --bh-header-height: 60px;

  /* 移动端底部导航高度 */
  --bh-mobile-nav-height: 56px;

  /* 断点变量（用于 JS） */
  --bh-breakpoint-sm: 768px;
  --bh-breakpoint-md: 992px;
  --bh-breakpoint-lg: 1200px;
  --bh-breakpoint-xl: 1920px;

  /* BSC四层泳道标准色 */
  --bsc-finance: #F56C6C;
  --bsc-customer: #409EFF;
  --bsc-process: #67C23A;
  --bsc-learning: #E6A23C;

  /* 统一字号 */
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
}

/* 暗黑模式覆盖 — 只影响内容区，侧边栏保持不变 */
html.dark {
  --bh-bg-main: #121212;
  --bh-bg-card: #1e1e1e;
  --bh-text-primary: #e0e0e0;
  --bh-text-regular: #b0b0b0;
  --bh-text-secondary: #808080;
  --bh-border: #333333;
  --bh-border-light: #2a2a2a;

  /* Element Plus 暗黑变量覆盖 — 让 el-card 等卡片用我们的色值 */
  --el-bg-color: #1e1e1e;
  --el-bg-color-overlay: #1e1e1e;
  --el-bg-color-page: #121212;
  --el-text-color-primary: #e0e0e0;
  --el-text-color-regular: #b0b0b0;
  --el-text-color-secondary: #808080;
  --el-border-color: #333333;
  --el-border-color-light: #2a2a2a;
  --el-fill-color: #252525;
  --el-fill-color-light: #2a2a2a;
  --el-fill-color-lighter: #303030;
  --el-mask-color: rgba(0, 0, 0, 0.6);
}

/* === 侧边栏全局样式（不受暗黑影响） === */
.sidebar-dark {
  background-color: var(--sidebar-bg) !important;
}
.sidebar-dark .el-menu {
  background-color: var(--sidebar-bg) !important;
  border-right: none;
}
.sidebar-dark .el-menu-item {
  color: var(--sidebar-text) !important;
  background-color: transparent !important;
}
.sidebar-dark .el-menu-item:hover {
  background-color: var(--sidebar-bg-hover) !important;
}
.sidebar-dark .el-menu-item.is-active {
  color: var(--sidebar-text-active) !important;
  background-color: var(--sidebar-bg-hover) !important;
}
.sidebar-dark .el-menu-item * {
  color: inherit !important;
}

/* === 响应式工具类 === */
.d-only { display: revert; }
.m-only { display: none !important; }

@media (max-width: 768px) {
  .d-only { display: none !important; }
  .m-only { display: revert; }

  :root {
    --bh-sidebar-width: 0px;
    --bh-sidebar-collapsed: 0px;
    --bh-header-height: 52px;
  }
}

@media (max-width: 480px) {
  :root {
    --bh-header-height: 48px;
  }
}

/* === 通用响应式容器 === */
.bh-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: var(--bh-space-lg);
  padding-right: var(--bh-space-lg);
}

@media (max-width: 768px) {
  .bh-container {
    padding-left: var(--bh-space-md);
    padding-right: var(--bh-space-md);
  }
}

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

/* 暗黑模式滚动条 */
html.dark ::-webkit-scrollbar-thumb { background: #555; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #777; }

/* === Element Plus 全局覆盖 === */
.el-main {
  background: var(--bh-bg-main);
  min-height: calc(100vh - var(--bh-header-height));
}

/* el-card 暗黑适配 */
html.dark .el-card {
  background-color: var(--bh-bg-card);
  border-color: var(--bh-border);
}
html.dark .el-card__header {
  border-bottom-color: var(--bh-border);
}

/* el-table 暗黑适配 */
html.dark .el-table {
  --el-table-bg-color: var(--bh-bg-card);
  --el-table-tr-bg-color: var(--bh-bg-card);
  --el-table-header-bg-color: var(--bh-bg-dark);
  --el-table-row-hover-bg-color: #2a2a2a;
  border-color: var(--bh-border);
}
html.dark .el-table th.el-table__cell {
  background-color: var(--bh-bg-dark);
  color: var(--sidebar-text);
}
html.dark .el-table__inner-wrapper::before,
html.dark .el-table__border-left-patch {
  background-color: var(--bh-border);
}
html.dark .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #555;
}

/* el-tabs 暗黑适配 */
html.dark .el-tabs__header {
  border-bottom-color: var(--bh-border);
}
html.dark .el-tabs__item {
  color: var(--bh-text-regular);
}
html.dark .el-tabs__item.is-active {
  color: var(--bh-primary);
}

/* el-progress 暗黑适配 */
html.dark .el-progress__text {
  color: var(--bh-text-secondary);
}

/* el-collapse 暗黑适配 */
html.dark .el-collapse {
  border-top-color: var(--bh-border);
  border-bottom-color: var(--bh-border);
}
html.dark .el-collapse-item__header {
  background-color: var(--bh-bg-card);
  color: var(--bh-text-primary);
  border-bottom-color: var(--bh-border);
}
html.dark .el-collapse-item__wrap {
  background-color: var(--bh-bg-card);
}
html.dark .el-collapse-item__content {
  color: var(--bh-text-regular);
}

/* el-dialog 暗黑适配 */
html.dark .el-dialog {
  background-color: var(--bh-bg-card);
}
html.dark .el-dialog__title {
  color: var(--bh-text-primary);
}
html.dark .el-dialog__body {
  color: var(--bh-text-regular);
}

/* el-empty 暗黑适配 */
html.dark .el-empty__description p {
  color: var(--bh-text-secondary);
}

/* el-alert 暗黑适配（info 类型保持原样） */
html.dark .el-alert--info {
  background-color: #1a1a2e;
}

/* el-tag 暗黑适配 */
html.dark .el-tag.el-tag--success {
  --el-tag-bg-color: #1a3a1a;
  --el-tag-text-color: #67c23a;
  --el-tag-border-color: #2a5a2a;
}
html.dark .el-tag.el-tag--danger {
  --el-tag-bg-color: #3a1a1a;
  --el-tag-text-color: #f56c6c;
  --el-tag-border-color: #5a2a2a;
}

/* el-form 暗黑适配 */
html.dark .el-form-item__label {
  color: var(--bh-text-regular);
}

/* el-timeline 暗黑适配 */
html.dark .el-timeline-item__timestamp {
  color: var(--bh-text-secondary);
}

/* el-dropdown 暗黑适配 */
html.dark .el-dropdown-menu {
  background-color: var(--bh-bg-card);
  border-color: var(--bh-border);
}
html.dark .el-dropdown-menu__item {
  color: var(--bh-text-regular);
}
html.dark .el-dropdown-menu__item:hover {
  background-color: var(--bh-fill-color, #252525);
}

/* el-drawer 暗黑适配 */
html.dark .el-drawer {
  background-color: var(--bh-bg-card);
}
html.dark .el-drawer__header {
  color: var(--bh-text-primary);
}

/* 表格在小屏横向滚动 */
.el-table {
  @media (max-width: 768px) {
    width: 100% !important;
    overflow-x: auto;
    display: block;
  }
}

/* el-card 间距在手机上缩小 */
@media (max-width: 768px) {
  .el-card { margin-bottom: 12px !important; }
  .el-card__body { padding: 14px !important; }
}

/* 表单在小屏上 label 置顶 */
@media (max-width: 576px) {
  .el-form--label-top .el-form-item__label {
    padding-bottom: 0;
  }
}

/* el-overlay 全局修复 — 确保弹窗可见 */
.el-overlay { z-index: 2000 !important; }
.el-overlay-dialog { z-index: 2001 !important; position: fixed !important; }
.el-message-box__wrapper { z-index: 2002 !important; }
/* 消息提示：置顶居中显示，避开左侧菜单与顶栏（顶栏60px+间距）；必须高于弹窗 */
.el-message {
  position: fixed !important;
  top: 70px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 3000 !important;
  max-width: calc(100vw - 40px) !important;
}
/* el-message-box 保持默认居中（margin:15vh auto），勿清margin否则会靠左重叠菜单 */
.el-dialog { --el-dialog-margin-top: 1vh !important; }

/* 过渡动画 — 明暗切换平滑过渡 */
.page-view { padding: 16px; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.page-title { font-size:18px; font-weight:600; margin:0; }
.page-title h3 { margin:0; }

/* 卡片统计数字 */
.stat-number { font-size:24px; font-weight:600; }
.stat-label { font-size:12px; color:#909399; margin-top:4px; }

/* 通用flex布局 */
.flex-row { display:flex; align-items:center; gap:8px; }
.flex-wrap { flex-wrap:wrap; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.section-gap { margin-bottom:16px; }

/* 过渡动画 — 明暗切换平滑过渡 */
html.dark,
html,
html *,
html *::before,
html *::after {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* 路由过渡动画 — fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
