/* docs/stylesheets/extra.css */

/* =========================================
   1. 全局色彩：用户指定清新莫兰迪绿
   ========================================= */
[data-md-color-primary="custom"],
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #61A165; /* morandi_green (主色) */
  --md-primary-fg-color--light: #7EBA82; /* 悬浮浅色 */
  --md-primary-fg-color--dark:  #49814D; /* morandi_dark_green (深色/强调) */
  --md-default-bg-color:        #F0F5F1; /* morandi_light_green (全局底色) */
  
  /* 👇 核心修复 1：恢复代码框底色（与引用块相同） */
  --md-code-bg-color:           rgba(97, 161, 101, 0.08); 
  
  --md-typeset-color:           #2D382E; /* 文本主色：深墨绿，极其清晰 */
  --md-typeset-a-color:         #49814D; /* 超链接颜色 */
  --md-typeset-font-size:       16px;
}

/* =========================================
   2. 基础元素：线条、引用与圆角
   ========================================= */
.md-typeset pre, 
.md-typeset code,
.md-search__inner,
.md-search__form,
.admonition {
  border-radius: 8px !important;
}

/* 分割线 */
.md-typeset hr {
  border-bottom: 1px dashed #61A165;
  opacity: 0.6; 
}

/* 引用块 */
.md-typeset blockquote {
  border-left: 5px solid #61A165 !important; /* 👈 强制莫兰迪绿，彻底干掉灰色 */
  color: #2D382E !important; /* 引用内的文字使用深墨绿，清晰又护眼 */
  background-color: rgba(97, 161, 101, 0.08) !important; /* 清新浅绿底色 */
  padding: 0.8rem 1.2rem !important; /* 增加内边距，让文字不要太贴边 */
  border-radius: 0 8px 8px 0 !important; /* 右侧保持圆角 */
  margin: 1.5em 0 !important; /* 上下留出一点空白，避免和正文挤在一起 */
  box-shadow: 2px 2px 10px rgba(97, 161, 101, 0.05) !important; /* ✨ 增加高级微阴影，让它像个卡片一样浮起来 */
}

/* =========================================
   3. 表格终极美化 (现代大厂风)
   ========================================= */
.md-typeset__table {
  width: 100%;
  margin: 1.5em 0;
  overflow: visible !important; 
}

.md-typeset table:not([class]) {
  display: table !important;    
  width: 100% !important;      
  table-layout: auto;          
  border-collapse: collapse;
  border: 1px solid #61A165; 
  border-radius: 8px; 
  overflow: hidden;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(97, 161, 101, 0.1); 
  margin: 1em 0; 
}

.md-typeset table:not([class]) th {
  background-color: #F0F5F1;   
  color: #49814D;              
  border-bottom: 2px solid #61A165; 
  font-weight: bold;
  padding: 12px 16px;
  text-align: left;
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid rgba(97, 161, 101, 0.2);
  padding: 12px 16px;
  line-height: 1.5;
}

.md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: #F0F5F1; 
}

.md-typeset table:not([class]) tr:hover td {
  background-color: rgba(97, 161, 101, 0.05);
}

/* =========================================
   4. 首页网格卡片 (Grid Cards) 
   ========================================= */
.md-typeset .grid.cards > :is(ul, ol) > li {
  background-color: #FFFFFF; 
  border: 1px solid rgba(97, 161, 101, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  border-radius: 12px;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  box-shadow: 0 8px 24px rgba(97, 161, 101, 0.15); 
  border-color: #61A165;
  transform: translateY(-3px); 
}

/* =========================================
   5. 顶栏 1：搜索栏 (莫兰迪绿微渐变)
   ========================================= */
.md-header {
  background: linear-gradient(135deg, #61A165 0%, #4da252 100%) !important;
  box-shadow: none !important; 
}

/* =========================================
   6. 顶栏 2：分类导航栏 (干净纯白)
   ========================================= */
.md-tabs {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(97, 161, 101, 0.15) !important; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important; 
}

/* =========================================
   7. 标签页文字与横线：彻底修复隐身与色条
   ========================================= */
.md-tabs__list {
  gap: 16px; 
}

.md-tabs__list .md-tabs__link {
  color: #333333 !important; 
  font-weight: 600 !important;
  font-size: 15px !important;
  opacity: 0.8 !important;
  background-color: transparent !important;
  text-shadow: none !important; 
  padding: 8px 16px !important; 
  border-radius: 6px !important; 
  transition: all 0.3s ease;
  position: relative;
}

.md-tabs__list .md-tabs__link:hover {
  opacity: 1 !important;
  color: #61A165 !important; 
  background-color: rgba(97, 161, 101, 0.05) !important; 
}

.md-tabs__list .md-tabs__link--active {
  opacity: 1 !important;
  color: #61A165 !important; 
  font-weight: 800 !important;
  background-color: transparent !important;
}

/* 👇 核心修复：把 bottom 改回 0，确保莫兰迪绿色条不被隐藏！ */
.md-tabs__list .md-tabs__link::after {
  content: "";
  position: absolute;
  bottom: 0; /* 贴紧文字框的内底边 */
  left: 0;
  width: 100%;
  height: 3px; 
  background-color: #61A165 !important; /* 强制纯正莫兰迪绿 */
  border-radius: 4px 4px 0 0;
  transform: scaleX(0); 
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.md-tabs__list .md-tabs__link--active::after {
  transform: scaleX(1);
}

/* 悬浮时色条保持 100% 显色，不发虚 */
.md-tabs__list .md-tabs__link:hover::after {
  transform: scaleX(1);
  opacity: 1 !important; 
}
/* =========================================
   8. 左侧导航栏 (Sidebar) 层级缩进引导线
   ========================================= */
/* 定位到左侧主导航栏的所有“子菜单”容器 */
.md-sidebar--primary .md-nav__item--nested > .md-nav {
  /* 加上一条莫兰迪绿的细虚线 (0.5透明度，极其优雅) */
  border-left: 1px dashed rgba(97, 161, 101, 0.5) !important; 
  
  /* 调整线的位置，让它正好对准上一级图标的中心点附近 */
  margin-left: 0.4rem !important; 
  
  /* 让文字和线之间保持一点呼吸感 */
  padding-left: 0.1rem !important; 
  
  /* 加上一点过渡动画 */
  transition: border-color 0.3s ease;
}

/* 锦上添花：当鼠标悬浮在这一组子菜单上时，虚线微微变亮，增加交互感 */
.md-sidebar--primary .md-nav__item--nested > .md-nav:hover {
  border-left: 1px dashed rgba(97, 161, 101, 0.9) !important;
}
/* =========================================
   9 & 10. 侧边栏与正文：绝对定位对齐版 (折腾出来的完美终稿)
   ========================================= */
@media screen and (min-width: 50.25em) {
  /* 1. 总容器：70rem 的宽度在大屏上会显得非常紧凑、高级 */
  .md-grid {
    max-width: 70rem !important;
    position: relative;
  }

  /* 2. 侧边栏：锁定 13rem 宽度，绝对定位不占 Flex 空间 */
  .md-sidebar--primary {
    position: absolute !important;
    left: 0 !important;
    width: 13rem !important; 
    flex: none !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    width: 13rem !important;
  }

  /* 3. 正文：精准吸附在 13rem 之后，消除所有幽灵空白 */
  .md-content {
    margin-left: 13rem !important; 
    padding-left: 1.2rem !important; 
    max-width: none !important;
    display: block !important;
  }

  /* 4. 彻底消除省略号：让长文字（如鸿蒙）自由伸展 */
  .md-nav__link {
    white-space: nowrap !important;
    text-overflow: clip !important; 
    overflow: visible !important;   
  }

  /* 5. 箭头定位：钉在侧边栏最右侧，不干扰文字 */
  .md-nav__link .md-nav__icon {
    position: absolute !important;
    right: 0.5rem !important;
  }
}

/* 额外修复：防止出现不必要的横向滚动条 */
body {
  overflow-x: hidden;
}
/* =========================================
   12. 文章主标题 (H1) 莫兰迪绿美化
   ========================================= */
.md-content h1 {
  /* 1. 使用莫兰迪绿色 (与你之前的绿色呼应) */
  color: #61a165 !important; 
  
  /* 2. 加粗并微调字体 */
  font-weight: 800 !important;
  letter-spacing: -0.02em; /* 略微收紧字间距，更有张力 */
  
  /* 3. 布局调整：增加下方间距，不显得局促 */
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.5rem;
  
  /* 4. 可选：加一条淡淡的下划线作为装饰 (如果不喜欢可以删掉这行) */
  border-bottom: 1px solid rgba(97, 161, 101, 0.1);
  
  /* 5. 让标题里的 Emoji 也能对齐 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* =========================================
   14. Grid 左右分栏代码块优雅对齐 (等高 & 无痕滚动条)
   ========================================= */
.md-typeset .grid {
  align-items: stretch !important; /* 强制左右容器等高 */
}

/* 让代码块外壳撑满整个高度 */
.md-typeset .grid > .md-code,
.md-typeset .grid > .highlight,
.md-typeset .grid > div[class*="language-"] {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--md-code-bg-color) !important; /* 强制统一下方底色 */
}

/* 让实际的代码区域 (pre) 填满剩余的下半部分空白 */
.md-typeset .grid pre {
  flex-grow: 1;
  margin: 0 !important;
}

/* -----------------------------------------
   优化滚动条：让莫兰迪绿底色透出来
----------------------------------------- */
/* Webkit 浏览器 (Chrome/Edge/Safari) */
.md-typeset .grid pre::-webkit-scrollbar {
  height: 6px; /* 让滚动条变细一点更精致 */
}
.md-typeset .grid pre::-webkit-scrollbar-track {
  background: transparent !important; /* 核心：把灰色轨道变透明，透出绿色底色 */
}
.md-typeset .grid pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important; /* 半透明的灰色滑块 */
  border-radius: 4px;
}
.md-typeset .grid pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Firefox 浏览器 */
.md-typeset .grid pre > code {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent; 
}
/* =========================================
   15. 暗黑模式 (Slate) 适配补丁
   ========================================= */

[data-md-color-scheme="slate"] {
  /* 1. 全局底色重写：保持幽暗的莫兰迪绿氛围，而不是死板的纯黑 */
  --md-default-bg-color:        #1A201C; 
  --md-typeset-color:           #D3DFD4; /* 浅色正文文本，极度护眼 */
  --md-typeset-a-color:         #7EBA82; /* 暗黑下的超链接，使用提亮的浅绿 */
  
  /* 解决代码框问题：调暗底色，微微增加透明度以融合黑底 */
  --md-code-bg-color:           rgba(97, 161, 101, 0.15); 
}

/* 2. 引用块暗黑适配 */
[data-md-color-scheme="slate"] .md-typeset blockquote {
  color: #D3DFD4 !important; /* 强制覆盖浅色模式下的深墨绿文本 */
  background-color: rgba(97, 161, 101, 0.12) !important;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3) !important; /* 加深阴影融入暗色环境 */
}

/* 3. 表格暗黑适配 (彻底消灭刺眼的纯白背景) */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background-color: #212922; /* 幽暗的卡片底色 */
  border-color: rgba(97, 161, 101, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #161D17; /* 表头颜色更深一点，产生层次 */
  color: #7EBA82;            /* 表头文字使用亮绿色 */
  border-bottom: 2px solid rgba(97, 161, 101, 0.6);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-bottom: 1px solid rgba(97, 161, 101, 0.15);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: #1A201C; /* 斑马线深色条 */
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
  background-color: rgba(97, 161, 101, 0.2); /* 悬浮高亮反馈 */
}

/* 4. 首页网格卡片 (Grid Cards) 暗黑适配 */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > :is(ul, ol) > li {
  background-color: #212922; /* 替换纯白背景 */
  border: 1px solid rgba(97, 161, 101, 0.2);
}
[data-md-color-scheme="slate"] .md-typeset .grid.cards > :is(ul, ol) > li:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* 黑夜中的悬浮投影需要更重一点 */
  border-color: #7EBA82;
}

/* 5. 分类导航栏 (Tabs) 暗黑适配 */
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1A201C !important; /* 替换纯白顶栏 */
  border-bottom: 1px solid rgba(97, 161, 101, 0.1) !important; 
}
[data-md-color-scheme="slate"] .md-tabs__list .md-tabs__link {
  color: #A3B8A5 !important; /* 未激活的灰色文本，带点绿调 */
}
[data-md-color-scheme="slate"] .md-tabs__list .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__list .md-tabs__link--active {
  color: #7EBA82 !important; /* 激活时的高亮绿色 */
}

/* 6. 主标题 (H1) 提亮对比度 */
[data-md-color-scheme="slate"] .md-content h1 {
  /* 在暗黑背景下，原来的深绿不够显眼，替换为更亮的浅莫兰迪绿 */
  color: #7EBA82 !important; 
}

/* 7. 修正左侧边栏嵌套虚线在暗黑下的表现 */
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--nested > .md-nav {
  border-left-color: rgba(97, 161, 101, 0.3) !important;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--nested > .md-nav:hover {
  border-left-color: rgba(97, 161, 101, 0.8) !important;
}