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

/* === 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;
}

/* 暗黑模式覆盖 — 只影响内容区，侧边栏保持不变 */
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);
}

/* 自定义弹窗内下拉选择框层级修复 */
.dialog-select-popper {
  z-index: 10001 !important;
}

/* 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-message-box / el-dialog 弹窗全局居中修复 —
   注意：不移除 .el-overlay 的 display:flex 会导致遮罩层布局问题，
   Element Plus 默认的 el-overlay 已经有 position:fixed + inset:0，
   居中应该用 center 属性而非覆盖样式 */
.el-message-box {
  margin: 0 !important;
}
.el-dialog {
  --el-dialog-margin-top: 1vh !important;
}

/* 过渡动画 — 明暗切换平滑过渡 */
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;
}