/* General table styling */
#tlms_courses_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* Allow columns to size based on content */
  word-wrap: break-word;
}

/* Column cells */
#tlms_courses_table th,
#tlms_courses_table td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  white-space: normal; /* Allow multi-line text */
}

/* Description column specifically */
#tlms_courses_table td:nth-child(3),
#tlms_courses_table th:nth-child(3) {
  min-width: 200px;
  max-width: 600px;
}

/* Make images responsive */
#tlms_courses_table img {
  max-width: 100%;
  height: auto;
}

/* Responsive design */
@media (max-width: 768px) {
  #tlms_courses_table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  #tlms_courses_table th,
  #tlms_courses_table td {
    white-space: normal;
    min-width: 120px;
  }

  /* Optional: Stack rows into cards on very narrow screens */
  @media (max-width: 500px) {
    #tlms_courses_table,
    #tlms_courses_table thead,
    #tlms_courses_table tbody,
    #tlms_courses_table th,
    #tlms_courses_table td,
    #tlms_courses_table tr {
      display: block;
    }

    #tlms_courses_table tr {
      margin-bottom: 1rem;
      border-bottom: 1px solid #ccc;
    }

    #tlms_courses_table td {
      padding: 10px;
      text-align: left;
    }

    #tlms_courses_table td:before {
      content: attr(data-label);
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

    /* Add data-labels to td via JS or manually for better mobile UX */
  }
}