/* Table color variables */
:root {
  --table-border-color: #e0e0e0;
  --table-header-bg: #00979d;
  --table-header-text: #fff;
  --table-code-bg: rgba(0, 0, 0, 0.05);
  --table-row-alt-bg: #f8f8f8;
  --table-hover-bg: rgba(0, 151, 157, 0.05);
}
[data-theme="dark"] {
  --table-border-color: #333b3d;
  --table-header-bg: #1abfc6;
  --table-header-text: #111;
  --table-code-bg: rgba(255,255,255,0.08);
  --table-row-alt-bg: #232728;
  --table-hover-bg: rgba(26, 191, 198, 0.08);
}

/* Table styling for ESPHome documentation */
table {
  max-width: 100%;
  width: auto;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9em;
  border: 1px solid var(--table-border-color);
  table-layout: auto;
}


/* Basic cell styling */
table td, 
table th {
  padding: 10px 15px;
  border: 1px solid var(--table-border-color);
  vertical-align: top;
}

/* All table headers should have this styling */
table th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: bold;
}

/* For Markdown tables where the first row contains th elements */
table tr:first-child th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: bold;
}

/* Override code styling within table headers */
table th code,
table tr:first-child th code {
  background-color: transparent;
  color: var(--table-header-text);
  padding: 0;
  font-weight: bold;
  border-radius: 0;
}

/* Style for code in table cells */
table td code {
  background-color: var(--table-code-bg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Alternating row colors for better readability */
table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

/* But header rows should always have the header background */
table tr:nth-child(even) th {
  background-color: var(--table-header-bg);
}

/* Hover effect */
table tr:hover td {
  background-color: var(--table-hover-bg);
}

/* Style for centered tables */
table th[align="center"],
table td[align="center"] {
  text-align: center;
}

/* Style for right-aligned tables */
table th[align="right"],
table td[align="right"] {
  text-align: right;
}

/* Responsive tables for smaller screens */
@media (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}
