.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filters-row input,
.filters-row select {
  min-width: 160px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.improvements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.improvement-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.improvement-item h4 {
  margin: 0 0 4px;
}

.meta {
  font-size: 12px;
  color: #6b7280;
}

.badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.badge.low { background:#e5e7eb; color:#111; }
.badge.medium { background:#fde68a; color:#92400e; }
.badge.high { background:#fecaca; color:#7f1d1d; }
.badge.critical { background:#dc2626; color:#fff; }

.badge.open { background:#2563eb; color:#fff; }
.badge.in-progress { background:#f59e0b; color:#fff; }
.badge.resolved { background:#16a34a; color:#fff; }

.hidden { display:none; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 10px;
}

.form-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}
/* ------------------------------
   Mobile-first improvements
--------------------------------*/

@media (max-width: 768px) {

  /* Stack filters vertically */
  .filters-row {
    flex-direction: column;
  }

  .filters-row input,
  .filters-row select {
    width: 100%;
    min-width: unset;
  }

  /* Improve card spacing */
  .improvement-item {
    padding: 14px;
  }

  .improvement-item h4 {
    font-size: 16px;
  }

  .meta {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Make badges wrap nicely */
  .meta .badge {
    display: inline-block;
    margin-top: 4px;
    margin-right: 4px;
  }

  /* Add button spacing */
  .list-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .list-header button {
    width: 100%;
  }

  /* Form layout becomes single column */
  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }

  /* Prevent modal-like crowding */
  main.container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ------------------------------
   Topic / Category Modal
--------------------------------*/
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal.hidden { display: none; }

.modal-card {
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.tc-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  max-height: 220px;
  overflow: auto;
}

.tc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid #f3f4f6;
}

.tc-item:last-child { border-bottom: none; }

.tc-item.inactive {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Mobile */
@media (max-width: 768px) {
  .tc-grid {
    grid-template-columns: 1fr;
  }
}

.status-select {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}

.comments-wrap {
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}

.comment-item {
  margin-bottom: 6px;
}

.comment-meta {
  font-size: 11px;
  color: #6b7280;
}

.comment-text {
  font-size: 14px;
}

.comment-input {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.comment-input input {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

/* ======================================
   Admin Improvements – Surface + Text
   Scoped, safe, readable
====================================== */

/* Card surface */
.improvement-item {
  background: var(--card-bg, #0f172a);
  border: 1px solid #1f2937;
  color: #e5e7eb;
}

/* Title */
.improvement-item h4 {
  color: #f9fafb;
}

/* Description */
.improvement-item p {
  color: #e5e7eb;
}

/* Meta text */
.improvement-item .meta {
  color: #9ca3af;
}

/* Comment area */
.comments-wrap {
  border-top: 1px solid #1f2937;
}

.comment-text {
  color: #e5e7eb;
}

.comment-meta {
  color: #9ca3af;
}

/* Inputs */
.comment-input input,
.form-grid input,
.form-grid textarea,
.form-grid select,
.status-select {
  background: #020617;
  color: #f9fafb;
  border: 1px solid #334155;
}

/* Focus states */
.comment-input input:focus,
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus,
.status-select:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,.25);
}

/* Dropdown options */
.status-select option {
  background: #020617;
  color: #f9fafb;
}

/* Badges – keep your colors but readable */
.badge.low { background:#374151; color:#f9fafb; }
.badge.medium { background:#f59e0b; color:#111827; }
.badge.high { background:#dc2626; color:#fff; }
.badge.critical { background:#7f1d1d; color:#fff; }

/* Status select spacing */
.status-select {
  margin-left: 8px;
  cursor: pointer;
}

/* Modal card fix */
.modal-card {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #1f2937;
}

/* Topic / category lists */
.tc-list {
  background: #020617;
  border: 1px solid #1f2937;
}

.tc-item span {
  color: #e5e7eb;
}

/* Buttons inherit app theme */
.improvement-item .btn {
  color: inherit;
}

/* ------------------------------
   Collapsible Improvements
--------------------------------*/

.improvement-item {
  position: relative;
  overflow: hidden;
}

.improvement-header {
  cursor: pointer;
  user-select: none;
}

.improvement-details {
  margin-top: 8px;
  display: none;
}

.improvement-item.expanded .improvement-details {
  display: block;
}

/* subtle indicator */
.improvement-header::after {
  content: '▾';
  float: right;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.improvement-item.expanded .improvement-header::after {
  transform: rotate(180deg);
}

.improvement-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.improvement-item:has(.badge.low)::before { background:#9ca3af; }
.improvement-item:has(.badge.medium)::before { background:#f59e0b; }
.improvement-item:has(.badge.high)::before { background:#ef4444; }
.improvement-item:has(.badge.critical)::before { background:#7c2d12; }

.list-section-header {
  margin: 14px 0 8px;
  font-size: 13px;
  color: #6b7280;
}

#addPanel {
  margin-top: 16px;
  border: 1px solid #1f2937;
  background: #020617;
}

#addPanel h3 {
  margin-bottom: 12px;
  color: #f9fafb;
}

#addPanel .form-grid input,
#addPanel .form-grid textarea,
#addPanel .form-grid select {
  background: #020617;
  color: #f9fafb;
  border: 1px solid #334155;
}

#addPanel .form-actions {
  justify-content: flex-end;
}

#addPanel .form-actions .btn.primary {
  background: #2563eb;
}
.btn.danger {
  background: #7f1d1d;
  color: #fff;
  border: 1px solid #991b1b;
}

.btn.danger:hover {
  background: #991b1b;
}

#tcHelpModal ul {
  padding-left: 18px;
}

#tcHelpModal li {
  margin-bottom: 4px;
}

#tcHelpModal hr {
  border: none;
  border-top: 1px solid #1f2937;
  margin: 8px 0;
}