body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f5f5f5;
   overflow-x: hidden; /* 防止页面级水平滚动 */
}

.container {
  max-width: none;
  width: 100%;

  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* 添加以下属性以允许内容扩展 */
  overflow-x: auto;
  box-sizing: border-box;

}
/* 在超宽屏幕或内容过多时 */
@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}


h1 {
  text-align: center;
  color: #333;
}

.upload-section {
  border: 2px dashed #ccc;
  padding: 30px;
  text-align: center;
  margin-bottom: 30px;
  border-radius: 5px;
  background-color: #fafafa;
   display: none;
}

.upload-section:hover {
  border-color: #999;
}

.file-input {
  margin: 20px 0;
}

.file-input input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin: 10px;
}

.btn:hover {
  background-color: #45a049;
}

.btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.result-section {
  margin-top: 30px;
}

/* 文件列表区域样式 */
.file-list-section {
  border: 2px dashed #ccc;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 5px;
  background-color: #fafafa;
  display: none; /* 默认隐藏，由JS控制显示 */
}

.file-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 300px;
}

.file-list2-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
}

/* 确保 select 元素在水平布局中表现良好 */
#fileList, #fileList2 {
  width: 50%;
  max-width: none;
  flex: 1;
}


/* 清理并重新定义 time-period 样式 */
.time-period {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-right: 20px;
  vertical-align: top;
  min-width: max-content;
  align-self: flex-start;
  /* 移除可能导致冲突的其他定义 */
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.left-support {
  background-color: #e3f2fd;
}

.middle {
  background-color: #f3e5f5;
}

.empty {
  background-color: #fff3e0;
}

.right {
  background-color: #e8f5e9;
}

.right-support {
  background-color: #ffebee;
}

.hidden {
  display: none;
}

.instructions {
  background-color: #e3f2fd;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.instructions h3 {
  margin-top: 0;
}

.instructions ul {
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 8px;
}

.table-group {
  margin-bottom: 50px;
  padding: 20px;
  border: 2px solid #4CAF50;
  border-radius: 8px;
}

.table-group-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #4CAF50;
}

.center-cell {
  background-color: #ffcdd2 !important;
}

.row-number {
  background-color: #f5f5f5;
  color: #999;
  font-weight: normal;
  font-size: 0.9em;
}

/* Highlighted row number styles */
.highlighted-row .row-number {
  background-color: #ffeb3b;
  color: #000;
  font-weight: bold;
  font-size: 1em;
}

/* Highlighted row styles */
.highlighted-row td {
  background-color: #fff9c4;
}

/* 更新 periods-container 样式 */
.periods-container {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  align-items: flex-start;
  min-width: min-content;
  width: max-content;
  /* 添加以下样式以确保一致的对齐 */
  align-content: flex-start;
    /* 添加以下属性以确保宽度扩展 */
  overflow-x: auto;
  padding-bottom: 10px;
   flex-wrap: nowrap; /* 防止换行 */
}

@media (max-width: 768px) {
  .periods-container {
    flex-direction: column;
  }
/* 确保 time-period 元素不会收缩 */
  .time-period {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-right: 20px;
  vertical-align: top;
  min-width: max-content;
  align-self: flex-start;
  /* 添加以下属性 */
  flex-shrink: 0;
  }
}

/* Middle row highlight */
.middle-row {
  background-color: #e0f7fa !important;
}

/* Empty cell highlight */
.highlighted-empty {
  background-color: #f3e5f5 !important;
}

/* Missing numbers row */
/* Add or modify this CSS rule */
.missing-numbers-row {
  margin-top: 20px;
  padding: 15px;
  background-color: #e3f2fd;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  clear: both;
  /* Ensure it appears below all content */
}

.highlighted-number {
  border: 2px solid red;
  border-radius: 50%;
  padding: 2px 4px;
  background-color: yellow;
  font-weight: bold;
}

.highlight-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.highlight-section label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.highlight-section input {
  padding: 8px;
  width: 300px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.highlight-section button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.highlight-section button:hover {
  background-color: #0056b3;
}

.highlighted-number {
  border: 2px solid red;
  border-radius: 50%;
  padding: 0 4px;
  background-color: yellow;
  font-weight: bold;
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
}

/* Updated CSS for better responsive behavior */
.table-group {
  display: block;
  width: 100%;
  min-width: min-content;
  overflow-x: auto;
  border: 2px solid #4CAF50;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 50px;
}

.table-group::after {
  content: "";
  display: table;
  clear: both;
}

.periods-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  align-items: flex-start;
  min-width: min-content;
}

/* Ensure proper box-sizing */
* {
  box-sizing: border-box;
}

/* Handle small screens */
@media (max-width: 768px) {
  .table-group {
    padding: 5px;
  }

  .periods-container {
    gap: 10px;
  }

  .time-period {
    margin-right: 10px;
  }
}

/* 缩小行号列宽度 */
.table-group table th:first-child,
.table-group table td:first-child {
  width: 30px;
  /* 设置您想要的宽度 */
  min-width: 30px;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
  /* 减小内边距 */
  font-size: 12px;
  /* 可选：减小字体大小 */
}

/* 确保主数据显示在底部 */
.main-trunk-display {
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
  flex-shrink: 0;
  order: 2;
  /* 确保主数据显示在底部 */
  margin-top: auto;
}

.main-trunk-content {
  font-family: 'Courier New', monospace;
  word-break: break-all;
  line-height: 1.5;
  white-space: pre-wrap;
}

.main-trunk-content .main-trunk-line {
  margin-bottom: 5px;
  padding: 3px 0;
}

.main-trunk-content .main-trunk-number {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  margin: 0 2px;
}

.main-trunk-content .highlighted-number {
  border: 2px solid red;
  border-radius: 50%;
  padding: 0 4px;
  background-color: yellow;
  font-weight: bold;
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  margin: 0 2px;
}

/* 添加新的CSS规则确保时间周期表垂直对齐 */
.periods-container {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  align-items: flex-start;
  /* 保持顶部对齐 */
  min-width: min-content;
}

/* 确保表格在上方 */
.time-period table {
  flex-grow: 1;

  margin-top: 0;
  order: 1;
  /* 确保表格在上方 */
   width: auto;
  min-width: 200px;
}

/* 确保时间周期表标题高度一致 */
.time-header {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
  /* 防止压缩 */
  order: 0;
  /* 确保在最上方显示 */
}

/* 添加到文件末尾 */
.data-selection-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
  flex: 0 1 auto;
  min-width: 300px;
  width: 40%;
  box-sizing: border-box;
}

.data-selection-section.hidden {
  display: none;
}

/* 修改已有的 .selection-controls 样式 */
.selection-controls {
  display: flex;
  flex-direction: row;
  /* 改为水平布局 */
  align-items: flex-end;
  /* 底部对齐 */
  gap: 15px;
  /* 元素之间的间距 */
  flex-wrap: wrap;
  /* 允许换行以适应小屏幕 */
   width: 100%;
}

/* 确保内部元素适应水平布局 */
.selection-controls>div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  /* 设置最小宽度 */
}

.selection-controls>button {
  align-self: flex-end;
  /* 按钮与底部对齐 */
  height: fit-content;
  margin-bottom: 5px;
  /* 与下拉框对齐 */
}

.data-list-container {
  display: none;
  flex-direction: column;
    gap: 15px; /* 增加间距 */
  width: 100%;
}

.data-list-container.show {
  display: flex;
}

#dataSelect {
  width: 100%;
  max-width: none;
  padding: 5px;
  flex: 1;
}

#selectDataBtn {
  align-self: flex-start;
  margin-top: 15px;
    width: auto;
  min-width: 120px;
}

/* 响应式处理 - 在小屏幕上恢复垂直布局 */
@media (max-width: 768px) {
  .selection-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .selection-controls>div,
  .data-list-container {
    min-width: auto;
  }

  .selection-controls>button {
    align-self: stretch;
    margin-bottom: 0;
  }
}

#dataSelect option {
  padding: 3px;
}

/* Create a flex container for the forms */
.forms-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
  /* Center the forms horizontally */
  align-items: flex-start;
  /* Align items to the top */
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
   width: 100%;
    box-sizing: border-box;
}



/* Ensure data selection section is visible when in horizontal layout */
.data-selection-section.show {
  display: block;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
  .forms-container {
    flex-direction: column;
  }

  .upload-section,
  .file-list-section,
  .data-selection-section {
    min-width: 90%;
    max-width: 100%;
  }
}

/* Add these styles to base.css */
.file-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
  justify-content: center;
   width: 100%;
}

.file-action-buttons .btn {
  flex: 1;
  min-width: 120px;
   width: calc(50% - 5px); /* 让按钮占据大约一半宽度 */
}

/* 在较小屏幕上调整按钮布局 */
@media (max-width: 768px) {
  .file-list2-container {
    flex-direction: column;
  }
  
  #fileList, #fileList2 {
    width: 100%;
  }
  
  .file-action-buttons {
    flex-direction: column;
  }
  
  .file-action-buttons .btn {
    width: 100%;
  }
  
  .file-data-section {
    min-width: 90%;
    max-width: 100%;
  }
}

/* Adjust the data selection section styles */
.data-selection-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background-color: #f9f9f9;
}

/* Update these styles in base.css */
.selection-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.selection-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px; 
  min-width: 200px;
}

.selection-group label {
  margin-bottom: 5px;
  font-weight: bold;
}

.selection-group select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.selection-controls > div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media (max-width: 768px) {
  .file-action-buttons {
    flex-direction: column;
  }
  
  .file-action-buttons .btn {
    width: 100%;
  }
}












/* Add these styles to base.css */

/* 确保 file-data-section 内部元素各占一半宽度 */
.file-data-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
  flex: 1 1 auto; /* 不要过度扩展，根据内容调整 */
  min-width: 300px;
  width: fit-content; /* 根据内容调整宽度 */
  max-width: 100%; /* 但不超过容器宽度 */
  box-sizing: border-box;
}


.file-data-section > div {
  flex: 1;
  width: 100%;
}

.file-list-section,
.data-selection-section {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
    /* 移除可能导致宽度问题的属性 */
  min-width: 0;
}

/* Ensure proper spacing between elements */
.file-list-container,
.selection-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 100%;
  width: 100%;
}

/* Make sure selects take full width */
#fileList,
#fileList2 {
  width: 30%;
}
#dataSelect {
  width: 100%;
  max-width: none;
  padding: 5px;
  flex: 1;
}
/* 响应式处理 - 在小屏幕上恢复垂直布局 */
@media (max-width: 768px) {
  .selection-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .selection-controls > div,
  .data-list-container {
    min-width: auto;
  }

  .selection-controls > button {
    align-self: stretch;
    margin-bottom: 0;
  }
  
  .data-selection-section {
    min-width: 90%;
    max-width: 100%;
  }
}
/* Responsive behavior for smaller screens */
@media (max-width: 768px) {

  .file-data-section {
    flex-direction: column;
  }
  
  .file-data-section > div {
    width: 100%;
  }
}

.file-list-section {
  order: 2;
}

.data-selection-section {
  order: 1;
}
/* 隐藏标记按钮 */
#markBtn {
  display: none;
}
/* 隐藏锁定数字按钮 
#lockBtn {
  display: none;
}
*/
/* 在较小屏幕上调整按钮布局 */
@media (max-width: 768px) {
  .file-action-buttons {
    flex-direction: column;
  }
  
  .file-action-buttons .btn {
    width: 100%;
  }
}


/* 在 base.css 文件末尾添加以下样式 */
.common-first-last {
    color: red !important;
    font-weight: bold !important;
}

.symbol-summary-table {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    margin-right: 20px;
    vertical-align: top;
    min-width: max-content;
    align-self: flex-start;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    flex-shrink: 0; /* 防止收缩 */
}

.symbol-summary-table .time-header {
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.symbol-summary-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.symbol-summary-table h3 {
    margin-top: 0;
    text-align: center;
    color: #333;
}


.symbol-summary-table th,
.symbol-summary-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: center;
}

.symbol-summary-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.symbol-summary-table .summary-number {
    font-weight: bold;
}

.symbol-summary-table .summary-symbols {
    text-align: left;
    white-space: nowrap;
}


.summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.summary-table th,
.summary-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: center;
}

.summary-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.summary-number {
    font-weight: bold;
}

.summary-symbols {
    text-align: left;
    white-space: nowrap;
}