/**
 * 专门存储底部的“实时对照预览卡片”所有细节。包括自适应排版网格、红字高亮警告、删改行图标控制、动态示例加载和动画。
 */
 
.renamer-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* 1. 允许在极端窄屏/中屏下左右两块优雅换行，而不是互相挤压 */
  gap: 12px 16px;  /* 2. 增加上下/左右弹性间距 */
  padding: 12px 24px;
  background-color: var(--bs-like-light-bg);
  border-bottom: 1px solid var(--bs-like-border-color);
}

.list-summary { 
  font-weight: 600; 
  font-size: 0.95rem; 
  white-space: nowrap; /* 3. 核心修复：强制文字单行显示，绝不被挤成两行 */
  flex-shrink: 0;      /* 4. 禁止缩小统计文本区 */
}

.btn-group-gap { 
  display: flex; 
  flex-wrap: wrap;     /* 5. 按钮组在空间不足时可以整齐分行，避免超出容器 */
  gap: 8px; 
  align-items: center;
}

/* 响应式表格外容器：保证极宽表格时整卡片可平滑左右滑动 */
.custom-table-responsive { 
  width: 100%; 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; /* 开启 iOS 的弹性丝滑滚动 */
}

.custom-table-header, .custom-table-row {
  display: grid;
  /* 优化各列宽度，确保 c-old 和 c-new 拥有合理的最小/弹性宽度 */
  grid-template-columns: 50px minmax(180px, 1fr) 40px minmax(200px, 1.2fr) 80px;
  align-items: center; 
  padding: 10px 24px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--bs-like-border-color);
  min-width: 650px;
  box-sizing: border-box;
}

.custom-table-row .c-idx,
.custom-table-row .c-old,
.custom-table-row .c-arrow,
.custom-table-row .c-new,
.custom-table-row .c-opt {
  display: flex;
  align-items: center;
  height: 38px; 
  line-height: 1;
  box-sizing: border-box;
}

/* 输入框防止被内容撑大，超长文件名可选中后光标左右滑动 */
.custom-table-row .custom-form-control {
  margin: 0 !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  height: 34px; 
  line-height: 20px;
  text-overflow: clip; /* 允许通过光标左右移动滑动查看完全部路径 */
}

.custom-table-header { font-weight: 600; background-color: var(--bs-like-light-bg); color: var(--bs-like-text-muted); }
.custom-table-row { transition: background-color 0.15s; }
.custom-table-row:hover { background-color: #f8f9fa; }
.custom-table-row:last-child { border-bottom: none; }
.custom-table-body.scrollable-active { max-height: 520px; overflow-y: auto; border-bottom: 1px solid var(--bs-like-border-color); }

/* 核心修复：旧文件名容器在超长时支持内部独立左右滑动 */
.c-old { 
  white-space: nowrap !important; 
  overflow-x: auto !important;     /* 内容超长时显示左右滚动条/支持滑动 */
  overflow-y: hidden !important;
  display: inline-flex !important; 
  align-items: center; 
  width: 100%; 
  max-width: 100%;
  box-sizing: border-box;
  height: 38px;
  line-height: 38px; 
  scrollbar-width: thin;           /* 针对 Firefox 的细滚动条优化 */
}

/* 隐藏过度粗糙的默认原生滚动条，保持精致视觉 */
.c-old::-webkit-scrollbar {
  height: 3px;
}
.c-old::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.file-size { 
  font-size: 0.75rem; 
  color: var(--bs-like-text-muted); 
  margin-left: 6px; 
  display: inline-block; 
  flex-shrink: 0; /* 阻止文件大小标记被压缩 */
}

.c-arrow { color: var(--bs-like-text-muted); justify-content: center; font-weight: bold; }
.c-new { width: 100%; min-width: 0; } /* min-width: 0 防止 Grid 子项被内部控件无限撑大 */
.c-opt { justify-content: center; }
.action-delete { color: #dc3545; text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.action-delete:hover { text-decoration: underline; }
.empty-tip-row { padding: 48px; text-align: center; color: var(--bs-like-text-muted); font-size: 0.9rem; width: 100%; grid-column: span 5; }

.custom-form-control.preview-red-text {
  color: #dc3545 !important;
  border-color: #f5c2c7;
  background-color: #fff8f8;
  font-weight: 500;
}

.tab-pane h2 { font-size: 1.25rem; font-weight: 600; color: var(--bs-like-dark); margin: 0 0 6px 0; }
.pane-desc { font-size: 0.875rem; line-height: 1.5; color: var(--bs-like-text-muted); margin: 0 0 12px 0; }

.pane-example-box {
  margin-bottom: 20px;
  padding: 8px 14px;
  background-color: var(--bs-like-light-bg);
  border-left: 3px solid var(--bs-like-border-color);
  font-size: 0.85rem;
  border-radius: 0 var(--bs-like-radius) var(--bs-like-radius) 0;
}
.pane-example-box .example-label { font-weight: 600; color: var(--bs-like-text-muted); }
.pane-example-box .example-flow { font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 500; color: #333; }

.pane-extension-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--bs-like-border-color); }
.ext-links-list { display: flex; list-style: none; padding: 0; margin: 0; gap: 16px; }
.ext-link-item { font-size: 0.8rem; font-weight: 500; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; }
.ext-link-item.disabled { color: #adb5bd; cursor: not-allowed; pointer-events: none; }
.tab-pane[hidden] { display: none !important; }

/* 编号模板下方动态示例样式 */
.field-input-tip {
  margin-top: 6px;
  font-size: 0.825rem;
  color: var(--bs-like-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  animation: fadeInTip 0.2s ease-in-out;
}
.field-input-tip .tip-label {
  font-weight: 500;
}
.field-input-tip .tip-code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: var(--bs-like-light-bg);
  padding: 2px 6px;
  border-radius: 3px;
  color: #333;
  border: 1px solid var(--bs-like-border-color);
}
@keyframes fadeInTip {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   手机端“实时对照预览列表框”专项深度布局优化
   ========================================================================== */
@media (max-width: 768px) {
  .renamer-list-header {
    flex-direction: column;   
    align-items: stretch;     
    gap: 12px;
    padding: 12px 16px;
  }
  
  .list-summary {
    text-align: center;       
    font-size: 0.9rem;
  }
  
  .btn-group-gap {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px;
    width: 100%;
  }
  
  .btn-group-gap .custom-btn {
    margin: 0;
    padding: 8px 4px;
    font-size: 0.8rem;        
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  
  .custom-table-header, .custom-table-row {
    padding: 10px 12px;       
  }

  /* 移动端横向边缘渐变遮罩 (Mask) */
  .custom-table-responsive {
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
}