/**
 * Styling for Custom Events Manager
 */

/* General table styles */
.events-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}

.events-table th,
.events-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.events-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* Adjust table column widths for event schedule */
.events-table th:nth-child(3), /* Start Time */
.events-table th:nth-child(4), /* End Time */
.events-table th:nth-child(5)  /* Duration */ {
  width: 100px;
}

/* Highlight next event */
.events-table tr.next-event {
  background-color: #f7fcff;
}

.events-table .next-event-label {
  color: #0073aa;
  margin-left: 5px;
  font-weight: bold;
}

/* Event type labels */
.events-table .recurring-label {
  color: #0073aa;
  font-weight: bold;
}

.events-table .onetime-label {
  color: #555;
}

/* Status indicators */
.events-table .in-progress {
  color: green;
  font-weight: bold;
}

.events-table .upcoming {
  color: #333;
}

/* Style for duration column */
.events-table .duration-cell {
  white-space: nowrap;
}

/* Admin styles */
.wp-admin .next-event-highlight {
  background: #f0f0f0;
  border-left: 4px solid #0073aa;
  padding: 15px;
  margin: 20px 0;
}

.wp-admin .next-event-highlight p {
  margin: 0.5em 0;
}

/* Responsive tables */
@media screen and (max-width: 768px) {
  .events-table thead {
    display: none;
  }

  .events-table tr {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #ddd;
  }

  .events-table td {
    display: block;
    text-align: right;
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  .events-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    text-align: left;
    font-weight: bold;
  }

  .events-table tr:last-child td:last-child {
    border-bottom: 0;
  }