body {
  overflow: hidden
}

/* Layout Container */
.list-detail-container {
  display: flex;
  height: 95vh; /* Fills full viewport height */
  overflow: hidden; /* Prevents double scrollbars */
  font-family: sans-serif;
  padding-bottom: 24px;
}

/* Sidebar List */
.list-sidebar {
  width: 320px; /* Fixed sidebar width */
  min-width: 280px;
  background-color: #f7f9fa;
  border-right: 1px solid #e1e4e6;
  overflow-y: auto; /* Makes only the list scrollable */
  margin-bottom: 24px;
}

.list-item {
  padding: 15px;
  border-bottom: 1px solid #e1e4e6;
  cursor: pointer;
  transition: background-color 0.2s;
}

.list-item:hover {
  background-color: #edf0f2;
}

.list-item.active {
  background-color: #B6D7FD;
  /* background-color: #B6D7FD; */
  border-left: 4px solid #0066cc;
}

/* Detail Panel */
.detail-view {
  flex: 1; /* Takes up all remaining horizontal space */
  padding: 30px;
  overflow-y: auto; /* Makes only the details scrollable */
  background-color: #ffffff;
  justify-items: center;
}

@media (max-width: 768px) {
  .list-detail-container {
    flex-direction: column; /* Stacks layout on small screens */
    height: auto;
  }

  .list-sidebar {
    width: 100%; /* Sidebar scales to full width */
    height: 40vh; /* Optional constraint so details don't drop off-screen */
    border-right: none;
    border-bottom: 1px solid #e1e4e6;
  }
  
  .detail-view {
    height: 60vh;
  }

  /* Nav Bar 
  .nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}
  */
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* Style the table header */
th {
  background-color: #B6D7FD;
  color: #004A79;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.wonMatch {
  font-weight: bold;
}