/* --- DESKTOP STYLES (min-width: 801px) --- */

/* NEW: Added root variables for day column background colors */
:root {
  --col-mon-bg: #ffffff; /* Monday is the default white */
  --col-tue-bg: #f7f9fc; /* Very light blue */
  --col-wed-bg: #fcfbf7; /* Very light yellow */
  --col-thu-bg: #f9f7fc; /* Very light purple */
  --col-fri-bg: #fcf8f7; /* Very light red */
}

#timetable-container {
  padding: 24px;
}

#timetable-wrapper {
  max-width: 1200px; 
  width: 100%;     
  margin: 0 auto;  
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--table-bg);
  table-layout: fixed; 
}

th, td {
  padding: 8px 4px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  word-break: break-word; 
}

thead tr:first-child th {
  font-size: 15px;
}

/* --- NEW: Day Column Tinting --- */
tbody td:nth-child(3), tbody td:nth-child(4) { background-color: var(--col-mon-bg); }
tbody td:nth-child(5), tbody td:nth-child(6) { background-color: var(--col-tue-bg); }
tbody td:nth-child(7), tbody td:nth-child(8) { background-color: var(--col-wed-bg); }
tbody td:nth-child(9), tbody td:nth-child(10) { background-color: var(--col-thu-bg); }
tbody td:nth-child(11), tbody td:nth-child(12) { background-color: var(--col-fri-bg); }

/* --- NEW: Darker Zebra Striping --- */
/* This clever trick adds a semi-transparent dark layer,
   which preserves the column tints underneath! */
tbody tr:nth-child(even) td {
  background-image: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
}


/* --- Border logic (remains the same) --- */
tbody tr:last-child td {
  border-bottom: none;
}

thead th {
  background-color: #f1f3f5;
  color: var(--text-secondary);
  font-weight: 600;
  vertical-align: middle;
}

thead tr:first-child th {
  color: var(--text-primary);
  font-weight: 700;
}

.hour-col {
  font-weight: 700;
  color: var(--text-secondary);
  border-right: 2px solid var(--border-color);
  width: 6%; 
}
.hour-col:first-of-type {
  width: 4%;
}

thead th:nth-child(2n+4),
tbody td:nth-child(2n+4) {
    border-right: 2px solid var(--border-color);
}

thead th:last-child,
tbody td:last-child {
    border-right: none;
}