:root {
  --color0: #e0f7fa;
  --color1: #b2ebf2;
  --color2: #80deea;
  --color3: #4dd0e1;
  --color4: #26c6da;
  --color5: #00bcd4;

  --solid-border: 2px solid black;
  --dashed-border: 2px dashed gray;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f4f4f4;
}

table {
  border-collapse: collapse;
  margin-bottom: 40px;
  width: 100%;
  max-width: 600px;
}

th, td {
  text-align: center;
  padding: 10px;
  width: 100px;
  height: 50px;
  border: 1px solid #ccc;
}

.time {
  background: #ddd;
}

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

/* Color-coded availability */
.available-0 { background-color: var(--color0); }
.available-1 { background-color: var(--color1); }
.available-2 { background-color: var(--color2); }
.available-3 { background-color: var(--color3); }
.available-4 { background-color: var(--color4); }
.available-5 { background-color: var(--color5); }

/* Legend */
#legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: bold;
}

#legend-gradient {
  height: 20px;
  width: 20vw;
  background-image: linear-gradient(
    to right,
    var(--color0) 0% 17%,
    var(--color1) 17% 33%,
    var(--color2) 33% 50%,
    var(--color3) 50% 67%,
    var(--color4) 67% 83%,
    var(--color5) 83% 100%
  );
}