/* DDKK 首页布局样式 - 基于 Ant Design 5.x 设计规范 */
/* 所有选择器均使用完整前缀，避免样式冲突 */

/* ==================== 全局背景 ==================== */
body {
  background-color: #f2f3f5;
}

/* ==================== 容器布局 ==================== */
.ddkk-index-wrapper {
  /* 容器居中布局，水平内边距 24px */
  max-width: 1200px; /* 默认最大宽度（适用于屏幕宽度小于 1366px） */
  margin: 0 auto;
  padding: 24px 24px 24px 24px;
}

.ddkk-index-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* ==================== 侧边栏 ==================== */
.ddkk-index-sidebar {
  flex-shrink: 0;
  width: 200px;
  position: sticky;
  top: 55px;
  max-height: calc(100vh - 55px - 48px); /* 减去导航栏高度和容器内边距 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 确保子元素滚动条正常显示 */
  /* 移除页面加载时的动画效果 */
  animation: none !important;
  opacity: 1 !important;
}

/* ==================== 主内容区域 ==================== */
.ddkk-index-main {
  flex: 1;
  min-width: 0;
  padding-top: 32px !important; /* 顶部内边距，避免内容被导航栏遮挡 */
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 767.98px) {
  .ddkk-index-wrapper {
    padding: 10px;
    padding-top: 45px;
  }

  .ddkk-index-container {
    gap: 0;
  }

  /* 侧边栏容器 - 移动端固定定位 */
  .ddkk-index-sidebar {
    position: fixed;
    top: 55px;
    left: 0;
    width: 240px;
    /* 优先使用动态视口高度，避免移动端浏览器工具栏导致的底部空隙 */
    height: calc(100vh - 55px)!important; 
    height: calc(100dvh - 55px)!important; 
    max-height: none;   /* 移动端清除最大高度限制 */
    /* 提高层级，确保在移动端显示在文章锁定器之上 */
    z-index: 10001 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    overflow-y: auto;
    background: #ffffff;
    /* 移除与顶部导航之间的阴影，保持纯白贴合效果 */
    box-shadow: none;
    padding: 0;
  }

  .ddkk-index-sidebar.show {
    transform: translateX(0);
  }

  /* 主内容区域 - 移动端：抽屉打开时向右移动 */
  .ddkk-index-main {
    padding-top: 30px !important; /* 顶部内边距，避免内容被导航栏遮挡 */
    transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    width: 100%;
  }

  .ddkk-index-container.sidebar-open .ddkk-index-main {
    transform: translateX(240px);
  }

  /* 遮罩层 */
  .ddkk-sidebar-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    /* 提高层级，位于文章锁定器之上但低于侧边栏 */
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
                visibility 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  }

  .ddkk-sidebar-mask.show {
    opacity: 1;
    visibility: visible;
  }

  /* 抽屉打开时禁止页面滚动 */
  body.ddkk-sidebar-open {
    overflow: hidden;
  }
}

/* 桌面端样式 */
@media (min-width: 768px) {
  header nav.ddkk-navbar .sidebar-toggler {
    display: none !important;
  }

  .ddkk-sidebar-mask {
    display: none !important;
  }
}

/* 中等屏幕优化（平板） */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ddkk-index-wrapper {
    padding: 20px;
  }

  .ddkk-index-container {
    gap: 20px;
  }

  .ddkk-index-sidebar {
    width: 180px;
  }
}

/* 大屏幕优化（桌面端） */
@media (min-width: 1024px) {
  .ddkk-index-wrapper {
    padding: 24px;
  }

  .ddkk-index-container {
    gap: 24px;
  }

  .ddkk-index-sidebar {
    width: 200px;
  }
}

/* ============= 首页主容器宽度响应式适配（PC端） ============= */
/* <1366px：使用默认最大宽度 1200px */

/* 1366px–1499px：最大宽度 1300px */
@media (min-width: 1366px) and (max-width: 1499.98px) {
  .ddkk-index-wrapper {
    max-width: 1300px;
  }
}

/* 1500px–1599px：最大宽度 1500px */
@media (min-width: 1500px) and (max-width: 1599.98px) {
  .ddkk-index-wrapper {
    max-width: 1500px;
  }
}

/* 1600px–1699px：最大宽度 1600px */
@media (min-width: 1600px) and (max-width: 1699.98px) {
  .ddkk-index-wrapper {
    max-width: 1600px;
  }
}

/* 1700px–1919px：最大宽度 1700px */
@media (min-width: 1700px) and (max-width: 1919.98px) {
  .ddkk-index-wrapper {
    max-width: 1700px;
  }
}

/* 1920px–2559px：最大宽度 1700px */
@media (min-width: 1920px) and (max-width: 2559.98px) {
  .ddkk-index-wrapper {
    max-width: 1700px;
  }
}

/* ≥2560px：最大宽度 1900px */
@media (min-width: 2560px) {
  .ddkk-index-wrapper {
    max-width: 1900px;
  }
}