/* Notion风格表格样式 - 适用于Hugo Markdown表格 */

/* 基础表格样式 */
.markdown-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  
  /* 表头样式 */
  .markdown-body thead {
    background-color: rgba(242, 241, 238, 0.6);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  
  /* 浅色模式单元格样式 */
  .markdown-body th, 
  .markdown-body td {
    padding: 8px 12px;
    text-align: left;
    border: none;
    transition: background-color 0.2s ease;
  }
  
  .markdown-body th {
    font-weight: 500;
    color: rgba(55, 53, 47, 0.8);
    white-space: nowrap;
  }
  
  .markdown-body td {
    color: rgba(55, 53, 47, 0.9);
  }
  
  /* 表格条纹样式 */
  .markdown-body tbody tr:nth-child(odd) {
    background-color: transparent;
  }
  
  .markdown-body tbody tr:nth-child(even) {
    background-color: rgba(242, 241, 238, 0.3);
  }
  
  /* 鼠标悬停行高亮效果 */
  .markdown-body tbody tr:hover {
    background-color: rgba(235, 236, 237, 0.5);
  }
  
  /* 单元格边框样式 */
  .markdown-body th:not(:last-child),
  .markdown-body td:not(:last-child) {
    border-right: 1px solid rgba(233, 233, 231, 0.7);
  }
  
  .markdown-body tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(233, 233, 231, 0.7);
  }
  
  /* 响应式表格 */
  @media (max-width: 768px) {
    .markdown-body table {
      display: block;
      overflow-x: auto;
    }
  }
  
  /* 深色模式样式 */
  @media (prefers-color-scheme: dark) {
    .markdown-body table {
      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
    }
    
    .markdown-body thead {
      background-color: rgba(47, 47, 47, 0.6);
    }
    
    .markdown-body th {
      color: rgba(255, 255, 255, 0.8);
    }
    
    .markdown-body td {
      color: rgba(255, 255, 255, 0.85);
    }
    
    .markdown-body tbody tr:nth-child(even) {
      background-color: rgba(47, 47, 47, 0.3);
    }
    
    .markdown-body tbody tr:hover {
      background-color: rgba(55, 55, 55, 0.5);
    }
    
    .markdown-body th:not(:last-child),
    .markdown-body td:not(:last-child) {
      border-right: 1px solid rgba(60, 60, 60, 0.7);
    }
    
    .markdown-body tbody tr:not(:last-child) td {
      border-bottom: 1px solid rgba(60, 60, 60, 0.7);
    }
  }
  
  /* 自定义类支持 */
  /* 提供额外的类以便在特定元素上覆盖样式 */
  
  /* 紧凑型表格 */
  .table-compact th,
  .table-compact td {
    padding: 4px 8px;
  }
  
  /* 宽松型表格 */
  .table-roomy th,
  .table-roomy td {
    padding: 12px 16px;
  }
  
  /* 可以为特定元素添加的类，用于创建无边框表格 */
  .table-borderless {
    box-shadow: none;
  }
  
  .table-borderless th:not(:last-child),
  .table-borderless td:not(:last-child) {
    border-right: none;
  }
  
  .table-borderless tbody tr:not(:last-child) td {
    border-bottom: none;
  }
  
  /* 为了确保表格能够在 Hugo 主题中正确工作，可能需要额外的特异性 */
  /* 如果你的Hugo主题使用不同的类名，将'.markdown-body'替换为相应的类名 */