/* style.css - Minimal custom styles, Tailwind CSS is primary */
body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 100%;
  align-items: center;
  /* Center content horizontally */
  justify-content: center;
  /* Center content vertically */
}

/* Custom scrollbar for better aesthetics (optional) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgb(236, 72, 153);
  border-radius: 10px;
}

/* Pink */
::-webkit-scrollbar-thumb:hover {
  background: rgb(219, 39, 119);
}

/* Darker pink */

/* Feedback item styling - now handled by feedback-card and grid */
.feedback-item {
  /* These styles are now applied to the inner divs within feedback-card */
}

.feature-name {
  font-weight: 600;
  color: #4B5563;
}

.feature-value {
  color: #1F2937;
}

/* Modal Animations */
.modal {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

#idolDataList option {
  padding: 8px;
  font-size: 16px;
}

/* MODIFICATION: Desktop table styles */
@media (min-width: 768px) {

  /* 外层容器：承载圆角边框 + 裁剪内部直角 */
  .table-container {
    border: 1px solid #8d939a;
    /* 外层边框，与单元格颜色一致 */
    border-radius: 8px;
    /* 圆角大小，按需调整 */
    overflow: hidden;
    /* 隐藏内部直角，让圆角生效 */
  }

  /* 表格：取消合并边框，改用间距0模拟合并 */
  #resultsTable {
    border-spacing: 0;
    /* 单元格间距为0，避免间隙 */
    width: 100%;
    /* 撑满外层容器 */
  }

  /* 单元格：仅绘制右边框和下边框（内部分隔线） */
  #resultsTable th,
  #resultsTable td {
    padding: 10px 12px;
    border-right: 1px solid #8d939a;
    /* 列分隔线（中间列保留，最后列移除） */
    border-bottom: 1px solid #8d939a;
    /* 行分隔线（中间行保留，最后行移除） */
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* 最后一列：去掉右边框，由外层容器的右边框覆盖 */
  #resultsTable th:last-child,
  #resultsTable td:last-child {
    border-right: none;
  }

  /* 最后一行：去掉下边框，由外层容器的下边框覆盖 */
  #resultsTable tbody tr:last-child td {
    border-bottom: none;
  }

  /* 表头：去掉上边框，由外层容器的上边框覆盖 */
  #resultsTable thead th {
    border-top: none;
    font-weight: 600;
    position: sticky;
    top: 0;
    background-color: #f9fafb;
    z-index: 10;
  }

  /* 原有交互样式保留 */
  #resultsTable tbody tr:hover {
    background-color: #f3f4f6;
  }

  .feedback-cell {
    font-weight: 500;
  }

  /* 第一行背景色为白色（表头或首行数据） */
  #resultsTable th {
    background-color: #ffffff !important;
  }

  #resultsTable td:nth-child(2),
  #resultsTable td:last-child {
    background-color: #ffffff !important;
  }
}