/* Responsive Tables for MEL Platform */
/* This CSS ensures tables fit within their containers without horizontal scrolling */

/* Force table to be responsive and fit container */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make table width 100% and collapse borders */
.table {
  width: 100%;
  table-layout: auto; /* Allow flexible column widths */
  border-collapse: collapse;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
  /* Reduce font sizes for smaller screens */
  .table th,
  .table td {
    padding: 0.5rem 0.5rem;
    font-size: 0.875rem;
  }
  
  /* Specific width adjustments for different table columns */
  .table th:nth-child(1),
  .table td:nth-child(1) {
    min-width: 120px;
  }
  
  .table th:nth-child(2),
  .table td:nth-child(2) {
    min-width: 100px;
  }
  
  /* Hide less important columns on small screens */
  .table th.d-none-mobile,
  .table td.d-none-mobile {
    display: none;
  }
  
  /* Stack table cells vertically on very small screens */
  .table tr {
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 10px;
  }
  
  .table td {
    display: block;
    text-align: left;
    border: none;
    padding: 0.25rem 0.5rem;
  }
  
  .table td:before {
    content: attr(data-label) ": ";
    font-weight: bold;
    float: left;
    display: block;
  }
}

@media (max-width: 576px) {
  /* Further adjustments for mobile devices */
  .table th,
  .table td {
    padding: 0.25rem 0.25rem;
    font-size: 0.8rem;
  }
}

/* Specific table adjustments for user table */
#userTable th:nth-child(1),
#userTable td:nth-child(1) {
  width: 30%; /* User column - wider for names */
}

#userTable th:nth-child(2),
#userTable td:nth-child(2) {
  width: 15%; /* Role column */
}

#userTable th:nth-child(3),
#userTable td:nth-child(3) {
  width: 20%; /* Created column */
}

#userTable th:nth-child(4),
#userTable td:nth-child(4) {
  width: 25%; /* Action column */
}

/* Specific table adjustments for organizations table */
#organizationsTable th:nth-child(1),
#organizationsTable td:nth-child(1) {
  width: 15%; /* Name column */
}

#organizationsTable th:nth-child(2),
#organizationsTable td:nth-child(2) {
  width: 25%; /* Description column - wider for wrapping */
  min-width: 200px;
}

#organizationsTable th:nth-child(3),
#organizationsTable td:nth-child(3) {
  width: 10%; /* Status column */
}

#organizationsTable th:nth-child(4),
#organizationsTable td:nth-child(4) {
  width: 15%; /* Created By column */
}

#organizationsTable th:nth-child(5),
#organizationsTable td:nth-child(5) {
  width: 15%; /* Primary Admin column */
}

#organizationsTable th:nth-child(6),
#organizationsTable td:nth-child(6) {
  width: 12%; /* Date Created column */
}

#organizationsTable th:nth-child(7),
#organizationsTable td:nth-child(7) {
  width: 8%; /* Actions column */
}

/* Ensure description text wraps properly */
#organizationsTable td:nth-child(2) {
  white-space: normal;
  word-wrap: break-word;
  max-width: 250px;
}

/* Specific table adjustments for events table */
#eventsTable th:nth-child(1),
#eventsTable td:nth-child(1) {
  width: 5%; /* Counter column */
}

#eventsTable th:nth-child(2),
#eventsTable td:nth-child(2) {
  width: 20%; /* Program column */
}

#eventsTable th:nth-child(3),
#eventsTable td:nth-child(3) {
  width: 15%; /* Type column */
}

#eventsTable th:nth-child(4),
#eventsTable td:nth-child(4) {
  width: 15%; /* Venue column */
}

#eventsTable th:nth-child(5),
#eventsTable td:nth-child(5) {
  width: 10%; /* Status column */
}

#eventsTable th:nth-child(6),
#eventsTable td:nth-child(6) {
  width: 15%; /* Dates column */
}

#eventsTable th:nth-child(7),
#eventsTable td:nth-child(7) {
  width: 20%; /* Action column */
}

/* Specific table adjustments for KPI table */
#kpiTable th:nth-child(1),
#kpiTable td:nth-child(1) {
  width: 40%; /* Metric column - wider for descriptions */
  min-width: 250px;
  max-width: 400px;
  white-space: normal; /* allow wrapping on desktop */
}

#kpiTable td:nth-child(1) p {
  white-space: normal;
  word-wrap: break-word;
  overflow: visible;
}

#kpiTable th:nth-child(2),
#kpiTable td:nth-child(2) {
  width: 15%; /* Target column */
}

#kpiTable th:nth-child(3),
#kpiTable td:nth-child(3) {
  width: 15%; /* Progress column */
}

#kpiTable th:nth-child(4),
#kpiTable td:nth-child(4) {
  width: 15%; /* Period column */
}

#kpiTable th:nth-child(5),
#kpiTable td:nth-child(5) {
  width: 15%; /* Actions column */
}

/* Adjust text overflow */
.table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* For smaller screens, allow text wrapping */
@media (max-width: 768px) {
  .table td {
    white-space: normal;
  }
}

/* Adjust avatar sizes in tables for smaller screens */
@media (max-width: 768px) {
  .avatar.avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .avatar.avatar-sm img {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Special handling for participant details in events table */
#eventsTable .collapse ul {
  font-size: 0.75rem;
  padding-left: 1rem;
}

/* Adjust button sizes in action columns */
.btn-link {
  padding: 0.25rem;
  font-size: 0.875rem;
}

/* Make sure action buttons don't take too much space */
.table .text-center:last-child {
  min-width: 120px;
}