/* General */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #111;
  color: white;
}

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background: #d60000;
}

.logo {
  font-weight: bold;
  font-size: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  font-weight: bold;
}

.nav-links a:hover {
  text-decoration: underline;
}

/* Header */
header {
  text-align: center;
  padding: 100px 20px;
}

/* Popup */
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #222;
  padding: 40px;
  text-align: center;
  border: 2px solid red;
  border-radius: 8px;
}

button {
  margin-top: 20px;
  padding: 12px 25px;
  font-size: 16px;
  background: red;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background: darkred;
}

/* Fade Animation */
.fade-in {
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.collapsible {
  background-color: #d60000;
  color: white;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 16px;
  margin-top: 5px;
}

.collapsible:hover {
  background-color: darkred;
}

.content {
  display: none;
  padding: 10px 20px;
  background-color: #222;
}

.results-container {
  width: 90%;
  margin: auto;
  padding-bottom: 60px;
}

iframe {
  border: none;
  margin: 15px 0;
  background: white;
}
/* Triangle indicator for collapsible */
.collapsible::before {
  content: "\25B6"; /* Unicode for right-pointing triangle */
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.2s ease;
}

/* Rotate triangle when active */
.collapsible.active::before {
  transform: rotate(90deg); /* points down */
}
/* ================= Excel Table Styles ================= */
.excel-table {
  width: 100%;
  max-width: 900px;
  margin: auto;
  border-collapse: collapse;
  table-layout: fixed; /* keeps columns aligned */
  font-size: 14px;
  background-color: #fff;
  color: #000;
}

/* All cells: single line, overflow handled except driver names */
.excel-table th,
.excel-table td {
  border: 1px solid #d60000;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;       /* single line for scores and mini cells */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini/numerical cells */
td.mini, th.mini {
  width: 12px;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* Team Total column fixed */
.excel-table th:last-child,
.excel-table td[rowspan] {
  width: 70px;
}

/* Driver names can expand naturally */
.excel-table th:nth-child(2),
.excel-table td:nth-child(2) {
  width: 160px;       /* adjust as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding-left: 6px;
}

/* ================= Headers ================= */
.header-row th {
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* Specific brand header colors (must come after generic rules) */
.ford-header th { background-color: #00274d; }
.mitsubishi-header th { background-color: #d60000; color: #fff; }
.subaru-header th { background-color: #003399; }
.porsche-header th { background-color: #c0c0c0; color: #000; }
.toyota-header th { background-color: #708090; color: #000; }
.bmw-header th { background-color: #0066B1; color: #fff; }
.mazda-header th { background-color: #FFD400; color: #000; }
.pontiac-header th { background-color: #C1121F; color: #fff; }

/* ================= Hover Effects ================= */
.ford tbody tr:hover td:not([rowspan]) { background-color: #3399ff; color: #fff; }
.mitsubishi tbody tr:hover td:not([rowspan]) { background-color: #ff9999; color: #000; }
.subaru tbody tr:hover td:not([rowspan]) { background-color: #66a3ff; color: #fff; }
.porsche tbody tr:hover td:not([rowspan]) { background-color: #e6e6e6; color: #000; }
.toyota tbody tr:hover td:not([rowspan]) { background-color: #979aaa; color: #000; }
.bmw tbody tr:hover td:not([rowspan]) { background-color: #3388CC; color: #fff; }
.mazda tbody tr:hover td:not([rowspan]) { background-color: #FFEA66; color: #000; }
.pontiac tbody tr:hover td:not([rowspan]) { background-color: #E53949; color: #fff; }

/* Team total cells (rowspan) */
td[rowspan] {
  background-color: #fff;
  color: #000;
  font-weight: bold;
}

/* ================= Matchup Titles and Gaps ================= */
.match-title {
  max-width: 900px;
  margin: 40px auto 10px auto;
  background: #5a5a5a;
  color: #fff;
  font-size: 18px;
  padding: 8px 12px;
  font-weight: bold;
  text-align: left;
}

.team-gap { height: 15px; }  /* gap between teams in same matchup */

.race-gap { height: 50px; }  /* gap between matchups */