body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tabs button {
  flex: 1;
  padding: 12px;
  border: none;
  background: #f5f5f5;
  font-size: 16px;
  cursor: pointer;
}

.tabs button.active {
  background: #ffffff;
  border-bottom: 3px solid #0078d4;
  font-weight: 600;
}

#events-view {
  padding: 8px;
}

iframe {
  width: 100%;
  height: calc(100vh - 48px);
  border: none;
}

/* Desktop table grid lines */
@media (min-width: 768px) {
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #d0d0d0;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }

  th {
    background: #f3f3f3;
    font-weight: 600;
  }

  tr:nth-child(even) td {
    background: #fafafa;
  }
}

/* Past (completed) events */
.past-event {
  background-color: #65e088 !important;
  color: #000000;
}

.past-event textarea {
  background-color: #f3faf5;
}

/* Optional: slightly dim text */
.past-event td {
  opacity: 0.85;
}

tr.past-event > td,
tr.past-event > th {
  background: #65e088 !important;
  color: #000000 !important;
}

tr.past-event textarea {
  background: #f3faf5 !important;
}

/* ---------- Mobile card layout ---------- */
@media (max-width: 767px) {
  table {
    display: none;
  }

  .event-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    background: #fff;
  }

  .event-card.past-event {
    background: #65e088;
    color: #000000;
  }

  .event-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
  }

  .event-card .meta {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .event-card .label {
    font-weight: 600;
  }

  .event-card textarea {
    width: 100%;
    margin-top: 8px;
  }
}

/* Hide mobile cards on desktop */
@media (min-width: 768px) {
  .event-card {
    display: none;
  }
}