/* JavaScript Events Table styles using CSS variables from App.module.css */

.tableContainer {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.tableHeader {
  background: var(--color-bg-light);
}

.tableHeaderCell {
  padding: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: bold;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  position: relative;
  white-space: nowrap;
}

.tableHeaderCell.center {
  text-align: center;
}

.tableHeaderCell.left {
  text-align: left;
}

.tableHeaderCell.right {
  text-align: right;
}

.eventRow {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s ease;
}

.eventRow:hover {
  background: var(--color-bg-hover);
}

.eventRow td {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-base);
  border-right: 1px solid var(--color-border-light);
}

.eventRow td:last-child {
  border-right: none;
}

/* Event icon column */
.eventIcon {
  text-align: center;
  font-size: var(--font-size-lg);
  width: 40px;
  min-width: 40px;
}

.eventIcon.primary { color: var(--color-primary); }
.eventIcon.secondary { color: var(--color-text-muted); }
.eventIcon.success { color: var(--color-success); }
.eventIcon.warning { color: var(--color-warning); }
.eventIcon.danger { color: var(--color-danger); }
.eventIcon.info { color: var(--color-primary); }
.eventIcon.muted { color: var(--color-text-muted); }

/* Event type column */
.eventType {
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  min-width: 120px;
}

/* Duration column with performance indicators */
.duration {
  text-align: right;
  font-family: var(--font-family-mono);
  font-weight: 500;
  min-width: 80px;
  white-space: nowrap;
}

.duration.success {
  color: var(--color-success);
  background-color: transparent;
}

.duration.warning {
  color: var(--color-warning);
  background-color: transparent;
}

.duration.danger {
  color: var(--color-danger);
  background-color: transparent;
}

/* URL column */
.url {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.urlLink {
  color: var(--color-primary);
  text-decoration: none;
}

.urlLink:hover {
  color: var(--color-text-highlight);
  text-decoration: underline;
}

.inlineScript {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Location column */
.location {
  text-align: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-width: 80px;
  white-space: nowrap;
}

/* Script type column */
.scriptType {
  text-align: center;
  font-size: var(--font-size-sm);
  min-width: 80px;
  white-space: nowrap;
}

.scriptType.primary { color: var(--color-primary); }
.scriptType.secondary { color: var(--color-text-muted); }
.scriptType.success { color: var(--color-success); }
.scriptType.warning { color: var(--color-warning); }
.scriptType.info { color: var(--color-primary); }
.scriptType.muted { color: var(--color-text-muted); }

/* Streaming column */
.streaming {
  text-align: center;
  font-size: var(--font-size-lg);
  width: 50px;
  min-width: 50px;
}

/* Start time column */
.startTime {
  text-align: right;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-width: 100px;
  white-space: nowrap;
}

/* No results message */
.noResults {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--spacing-lg);
  font-size: var(--font-size-xl);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}