/* 1. The Clean Borders */
.zebra-table, 
.zebra-table td {
  border: 1px solid #ddd;
  border-collapse: collapse;
  padding: 8px; 
}

/* 2. The Nested Table Styling */
.zebra-table table {
  border: 1px solid #bbbbbb;
  border-collapse: collapse;
  margin-top: 8px;
}
.zebra-table table td {
  border: 1px solid #eee; 
  background-color: #ffffff; 
}

/* 3. The Outer-Only Zebra Striping */
.zebra-table > tbody > tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 3. The Outer-Only Zebra Striping */
.zebra-table > tbody > tr:nth-child(odd) {
  background-color: #ecf0f1;
}

/* 4. Fancy Table Header Styles */
.zebra-table thead {
  background-color: #2c3e50; /* Modern dark slate blue */
  color: #ffffff;            /* Crisp white text */
  font-weight: 600;          /* Clean, modern bolding */
  padding: 12px 8px;         /* Taller padding for a premium look */
  text-align: left;          /* Aligns text nicely with the data below */
  font-size: 14px;           /* Clean, readable size */
  letter-spacing: 0.5px;     /* Slight spacing for elegance */
}

/* Style the table layout */
.menu-table {
  border-collapse: separate; 
  border-spacing: 10px; /* Adds space between your buttons */
}

/* Style the links to look like buttons */
.menu-table a {
  display: inline-block;
  text-decoration: none; /* Removes the underline */
  background-color: #2c3e50; /* Button background color */
  color: #ffffff; /* Text color */
  padding: 6px 12px; /* Inside spacing: top/bottom, left/right */
  border-radius: 5px; /* Rounds the corners */
  font-family: sans-serif;
  font-weight: bold;
  font-size: 14px;
}

/* Make the buttons react when hovered over */
.menu-table a:hover {
  background-color: #415b76; /* Darker shade on hover */
}

body {
  background-color: #f8f9fa; /* Changes the plain white background */
  margin: 0;                 /* Removes default browser edge gaps */
  padding: 20px;             /* Adds a nice cushion around your page content */
}