/* Container for the entire week */
.week {
    display: flex; /* Use flexbox for alignment */
    flex-wrap: wrap; /* Allow `.day` elements to break into rows */
    justify-content: center; /* Center-align the days in rows */
    gap: 15px; /* Add even spacing between rows and columns */
    box-sizing: border-box; /* Ensure consistent sizing */
    padding: 0 15px; /* Optional: Add padding to keep alignment consistent */
    font-family: Verdana, Geneva, sans-serif;
  }
  
  /* Each day */
  .day {
    flex: 0 0 calc(70px + 130px); /* Fixed width for time + info */
    max-width: calc(70px + 130px); /* Respect max width */
    box-sizing: border-box; /* Include padding and border in size */
    margin-bottom: 10px; /* Add spacing between rows */
  }
.day p {text-align:center; opacity: 0.3;}  
  /* Day name styling */
  .day-name {
    font-size: 18px; /* Larger font for emphasis */
    font-weight: bold; /* Bold to stand out */
    text-align: center; /* Center-align the name */
    margin-bottom: 10px; /* Spacing below the name */
  }
  
  /* Wrapper for `time` and `info` */
  .inline-box {
    display: flex; /* Align `time` and `info` side by side */
    justify-content: space-evenly; /* Use even spacing, tighter than `space-between` */
    border: 1px solid #ccc; /* Keep the border */
    padding: 5px; /* Internal padding stays the same */
    border-radius: 5px; /* Optional rounded edges */
    box-sizing: border-box; /* Consistent box model */
    word-wrap: break-word; /* Ensure text wraps neatly */
  }
  
  
  /* Styling for `time` and `info` */
  .time {
    flex: 0 0 70px; /* Fixed width for time */
    text-align: left; /* Align text left */
    font-size:14px;
  }
  
  .info {
    flex: 0 0 100px; /* Fixed width for info */
    text-align: center; /* Align text left */
    word-wrap: break-word; /* Wrap long text */
  }
  .info2 {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center elements */
    justify-content: space-between; /* Add spacing between the text and button */
    gap: 10px; /* Optional: Control the spacing between elements */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    text-align: left; /* Align text properly */
  }
  
  /* Dimmed effect for specific `.day` items */
  .dim {
    opacity: 0.3; /* Dim the text and background */
    border-color: #000; /* Ensure border remains solid black */
  }
  
  /* Define light and dark mode colors */
:root {
    --border-color-light: #000; /* Default dark border for light mode */
    --border-color-dark: #fff; /* Light border for dark mode */
  }
  
  /* Apply the correct border color based on mode */
  .inline-box {
    border: 1px solid var(--border-color-light); /* Default for light mode */
  }
  
  /* Adjust for dark mode */
  @media (prefers-color-scheme: dark) {
    .inline-box {
      border-color: var(--border-color-dark); /* Use lighter border for dark mode */
    }
  }
  
  body.dark-mode .inline-box {
    border-color: var(--border-color-dark);
  }