.comment-item {
  border-left: 3px solid #0d6efd;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  background: #f8f9fa;
  border-radius: 0 0.25rem 0.25rem 0;
}
.comment-item.closing {
  border-left-color: #dc3545;
  background: #fff5f5;
}
.status-badge-open { background-color: #198754; }
.status-badge-closed { background-color: #6c757d; }

/* Force the Overview table to always fit the viewport width (no
   horizontal scrollbar) by giving every column a fixed share of 100% and
   letting long values (Area, Room, Created By, etc) wrap onto extra lines
   within their column instead of pushing the table wider than the page. */
.overview-table {
  table-layout: fixed;
  width: 100%;
}
.overview-table th, .overview-table td {
  overflow-wrap: break-word;
  word-break: break-word;
}
.overview-table .col-check   { width: 2%; }
.overview-table .col-code    { width: 9%; }
.overview-table .col-dct     { width: 5%; }
.overview-table .col-dcr     { width: 7%; }
.overview-table .col-progress { width: 7%; }
.overview-table .col-area    { width: 11%; }
.overview-table .col-room    { width: 10%; }
.overview-table .col-level   { width: 6%; }
.overview-table .col-activity{ width: 8%; }
.overview-table .col-ein     { width: 6%; }
.overview-table .col-instructed { width: 7%; }
.overview-table .col-owner   { width: 9%; }
.overview-table .col-created { width: 6%; }
.overview-table .col-status  { width: 5%; }
.overview-table .col-asite-status { width: 6%; }
.overview-table .col-actions { width: 10%; }

/* Progress bars: mid dark gray track, with the percentage label centered
   in the middle of the bar (not just the filled portion), so it stays
   readable at low percentages too. */
.progress-track {
  background-color: #6c757d;
  position: relative;
}
.progress-track .progress-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.85);
  font-weight: 600;
  pointer-events: none;
}

/* Sticky header: the column headings stay visible while the page scrolls
   down through a long Overview table. */
.overview-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #dee2e6;
}