/* Main container */
.qna-container {
  border: 1px solid var(--theme-color);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.qna-table-wrapper {
  position: relative;
  overflow: visible;
  max-height: none;
}

.qna-table {
  width: 100%;
  min-width: 900px;
  margin-bottom: 0 !important;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: Arial, sans-serif;
}

/* Apply scroll only when VDR is selected */
.qna-container.has-data .qna-table-wrapper {
  max-height: 65vh;
  overflow: auto;
}

/* Scroll wrapper */
.qna-table-wrapper {
  overflow: auto;
  position: relative;
}

/* Table */
.qna-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 900px;
  font-family: Arial, sans-serif;
}

/* Header */
.qna-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #20bdbe;
  color: #fff;
  padding: 14px 12px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid #20bdbe;
}

/* First column sticky */
.sticky-col {
  position: sticky;
  left: 0;
  z-index: 15;
  background: #fff;
}

/* Header first column */
.qna-table thead .sticky-col {
  background: #20bdbe;
  z-index: 25;
}

/* Column widths */
.qna-table th:first-child,
.qna-table td:first-child {
  width: 30%;
  padding-left: 20px;
  text-align: left;
}

.qna-table th:not(:first-child),
.qna-table td:not(:first-child) {
  width: 17.5%;
  text-align: center;
}

/* Body cells */
.qna-table td {
  padding: 12px 20px !important;
  border-top: 1px solid #e5e5e5 !important;
}

.group-row .sticky-col {
  background: #f4f6f8;
}

/* Group row */
.group-row {
  background: #f4f6f8;
  font-weight: 500;
}

/* Hover effect */
.user-row:hover {
  background: #f9f9f9;
}

/* Toggle icon */
.qna-toggle-icon {
  display: inline-block;
  width: 30px;
  cursor: pointer;
  color: #20bdbe;
}

/* Radio buttons */
.qna-role-radio {
  transform: scale(1.1);
  cursor: pointer;
  text-align: center;
}

.user-row .form-check-input {
  border-color: black;
}

.action-cell {
  width: 220px;
  text-align: center;
  vertical-align: middle;
}

.cleared-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.undo-clear-row {
  font-size: 13px;
  padding: 0;
}

.qna-table-wrapper:has(.border-danger-subtle) {
  max-height: fit-content;
  overflow: visible;
}