/* ==================== */
/* 周易排盘基础表格样式 */
/* ==================== */

/* 统一边框颜色变量 */
:root {
  --yi-border-color: #e9e9e9;
  --yi-border-light: #e0e0e0;
}
/* 基础重置 */
.yi-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "SimSun", "宋体", serif;
  margin: 10px 0;
  line-height: 1.5;
}

/* ==================== */
/* 表格宽度控制 */
/* ==================== */

/* 100%宽度表格 */
.yi-table.full-width {
  width: 100%;
  table-layout: fixed;
}

/* 自适应宽度表格 */
.yi-table.auto-width {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  table-layout: auto;
}

/* ==================== */
/* 单元格宽度控制 */
/* ==================== */

/* 固定20px宽度表格 */
.yi-table.width-20 {
  table-layout: fixed;
  width: auto; /* 添加宽度控制 */
}

.yi-table.width-20 td,
.yi-table.width-20 th {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 固定16px宽度表格 */
.yi-table.width-16 {
  table-layout: fixed;
}

.yi-table.width-16 td,
.yi-table.width-16 th {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 自适应宽度表格 */
.yi-table.auto-cell-width {
  table-layout: auto;
}

.yi-table.auto-cell-width td,
.yi-table.auto-cell-width th {
  min-width: 60px; /* 最小宽度保障 */
}

/* 添加缺失的单元格溢出控制 */
.yi-table .cell-40,
.yi-table .cell-30,
.yi-table .cell-20,
.yi-table .cell-16 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 固定40px宽度单元格 */
.yi-table .cell-40 {
  width: 40px!important;
  min-width: 40px!important;
  max-width: 40px!important;
}

/* 固定30px宽度单元格 */
.yi-table .cell-30 {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
}

/* 固定20px宽度单元格 */
.yi-table .cell-20 {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
}

/* 固定16px宽度单元格 */
.yi-table .cell-16 {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
}

/* 自适应宽度单元格 */
.yi-table .cell-auto {
  width: auto;
  min-width: 60px;
}

/* ==================== */
/* 边框控制 */
/* ==================== */

/* 无边框 */
.yi-table.no-border,
.yi-table.no-border th,
.yi-table.no-border td {
  border: none !important;
}

/* 细边框 */
.yi-table.thin-border {
  border: 1px solid #e0e0e0;
}

.yi-table.thin-border th,
.yi-table.thin-border td {
  border: 1px solid #e0e0e0;
}

/* 粗边框 */
.yi-table.thick-border {
  border: 2px solid #8b4513;
}

.yi-table.thick-border th,
.yi-table.thick-border td {
  border: 1px solid #8b4513;
}
/* ==================== */
/* 单元格级边框控制 */
/* ==================== */

/* 单边边框 */
.yi-table .border-top { border-top: 1px solid var(--yi-border-color) !important; }
.yi-table .border-right { border-right: 1px solid var(--yi-border-color) !important; }
.yi-table .border-bottom { border-bottom: 1px solid var(--yi-border-color) !important; }
.yi-table .border-left { border-left: 1px solid var(--yi-border-color) !important; }

/* 组合边框 */
.yi-table .border-horizontal {
  border-left: 1px solid #8b4513 !important;
  border-right: 1px solid #8b4513 !important;
}
.yi-table .border-vertical {
  border-top: 1px solid #8b4513 !important;
  border-bottom: 1px solid #8b4513 !important;
}
.yi-table .border-all {
  border: 1px solid #8b4513 !important;
}

/* ==================== */
/* 口字格表格样式 */
/* ==================== */

/* 基础表格设置 */
.yi-table.frame-only {
  border-collapse: separate; /* 关键：分离边框模式 */
  border-spacing: 0; /* 单元格间距为0 */
  border: 1px solid #8b4513; /* 外边框 */
}

/* 单元格设置 */
.yi-table.frame-only td,
.yi-table.frame-only th {
  border: none; /* 取消所有单元格边框 */
  padding: 8px 12px; /* 内边距 */
}

/* 行首单元格左边框 */
.yi-table.frame-only tr td:first-child,
.yi-table.frame-only tr th:first-child {
  border-left: 1px solid #8b4513 !important;
}

/* 行尾单元格右边框 */
.yi-table.frame-only tr td:last-child,
.yi-table.frame-only tr th:last-child {
  border-right: 1px solid #8b4513 !important;
}

/* 首行上下边框 */
.yi-table.frame-only tr:first-child td,
.yi-table.frame-only tr:first-child th {
  border-top: 1px solid #8b4513 !important;
}

/* 末行下边框 */
.yi-table.frame-only tr:last-child td,
.yi-table.frame-only tr:last-child th {
  border-bottom: 1px solid #8b4513 !important;
}

/* 可选：隔行背景色 */
.yi-table.frame-only.striped tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* ==================== */
/* 边框样式扩展 */
/* ==================== */

/* 虚线边框 */
.yi-table .border-dashed { border-style: dashed !important; }
.yi-table .border-dotted { border-style: dotted !important; }

/* 边框颜色 */
.yi-table .border-red { border-color: #ff0000 !important; }
.yi-table .border-blue { border-color: #0000ff !important; }
.yi-table .border-green { border-color: #008000 !important; }

/* ==================== */
/* 表格级背景控制 */
/* ==================== */

/* 无背景表格 */
.yi-table.no-bg,
.yi-table.no-bg th,
.yi-table.no-bg td {
  background-color: transparent !important;
}

/* 有背景表格 */
.yi-table.with-bg {
  background-color: #f9f9f9;
}

.yi-table.with-bg th,
.yi-table.with-bg td {
  background-color: #ffffff;
}

/* ==================== */
/* 单元格级背景控制 */
/* ==================== */

/* 五行背景色 */
.yi-table .bg-wood { background-color: #e6f3e6 !important; }
.yi-table .bg-fire { background-color: #ffebeb !important; }
.yi-table .bg-earth { background-color: #f5f0e6 !important; }
.yi-table .bg-metal { background-color: #f0f0f0 !important; }
.yi-table .bg-water { background-color: #e6f3ff !important; }

/* 阴阳背景色 */
.yi-table .bg-yang { background-color: #fff0f0 !important; }
.yi-table .bg-yin { background-color: #f0f0ff !important; }

/* 吉凶背景色 */
.yi-table .bg-auspicious { background-color: #e6ffe6 !important; }
.yi-table .bg-ominous { background-color: #ffebeb !important; }
.yi-table .bg-neutral { background-color: #f5f5f5 !important; }

/* 特殊状态 */
.yi-table .bg-highlight { background-color: #fffacd !important; }
.yi-table .bg-disabled { background-color: #f0f0f0 !important; }

/* 常规用灰色背景 (推荐) */
.yi-table .bg-gray {
  background-color: #f8f9fc !important; /* 最常用的浅灰色 */
}

/* 深灰色背景 */
.yi-table .bg-dark-gray {
  background-color: #d3d3d3 !important; /* 较深的灰色 */
}

/* ==================== */
/* 透明度控制 */
/* ==================== */

.yi-table .bg-opacity-50 { opacity: 0.5 !important; }
.yi-table .bg-opacity-75 { opacity: 0.75 !important; }

/* ==================== */
/* 表格级字体控制 */
/* ==================== */

/* 基础字体继承 */
.yi-table {
  font-size: 14px; /* 默认基准字号 */
}

/* 表格级字号控制 */
.yi-table.font-xs { font-size: 10px !important; }
.yi-table.font-sm { font-size: 12px !important; }
.yi-table.font-md { font-size: 14px !important; }
.yi-table.font-lg { font-size: 16px !important; }
.yi-table.font-xl { font-size: 18px !important; }

/* 单元格级字号覆盖（优先级更高） */
.yi-table .cell-font-xs { font-size: 8px !important; }
.yi-table .cell-font-sm { font-size: 10px !important; }
.yi-table .cell-font-md { font-size: 12px !important; }
.yi-table .cell-font-lg { font-size: 14px !important; }
.yi-table .cell-font-xl { font-size: 16px !important; }
.yi-table .cell-font-xxl { font-size: 18px !important; }
.yi-table .cell-font-xxxl { font-size: 20px !important; }

/* 文字对齐 */
.yi-table .text-left { text-align: left !important; }
.yi-table .text-center { text-align: center !important; }
.yi-table .text-right { text-align: right !important; }

/* 文字颜色 */
.yi-table .text-black { color: #000000 !important; }
.yi-table .text-red { color: #ff0000 !important; }
.yi-table .text-blue { color: #0000ff !important; }
.yi-table .text-green { color: #008000 !important; }

/* 表格内文本颜色 */
.yi-table .text-auspicious { 
  color: #008000 !important; /* 吉-深绿色提高可读性 */
}

.yi-table .text-ominous { 
  color: #ff0000 !important; /* 凶-红色 */
}

.yi-table .text-neutral { 
  color: #666666 !important; /* 中平-灰色 */
}

/* span元素支持 */
.yi-table span.text-auspicious,
.yi-table span.text-ominous, 
.yi-table span.text-neutral {
  display: inline-block;
  padding: 0 2px;
}

/* 增强对比度 */
.yi-table .bg-dark .text-neutral {
  color: #f5f5f5 !important; /* 深色背景下的中性文字 */
}

/* ==================== */
/* 信息显示区域 */
/* ==================== */

/* 固定标签宽度区域 */
.yi-info-table {
  width: 100%;
  table-layout: fixed;
}

.yi-info-label {
  width: 80px;
  min-width: 80px;
  text-align: right;
  padding-right: 10px;
  color: #8b4513;
  font-weight: bold;
}

.yi-info-content {
  text-align: left;
  padding-left: 5px;
}

/* ==================== */
/* 响应式处理 */
/* ==================== */

@media (max-width: 768px) {
  .yi-table.mobile-stack {
    display: block;
  }
  
  .yi-table.mobile-stack tr {
    display: flex;
    flex-wrap: wrap;
  }
  
  .yi-table.mobile-stack td {
    flex: 1 0 100px;
  }

  .yi-table.mobile-font {
    font-size: 12px !important;
  }
  
  .yi-table.mobile-font .cell-font-lg {
    font-size: 14px !important;
  }
}