.timetable {
  $width-weeknumber-mobile: 2.4rem;
  $width-hours: 4rem;
  $height-hour: 4rem;
  $padding-day-vertical: -5;
  $padding-day-horizontal: -4;
  $width-event-border: $width-border-utility;
  $width-today-marker: -3;
  $margin-today-marker: -5;
  $padding-event-vertical: -5;
  $padding-event-horizontal: -4;
  $number-of-hours: 8;
  $steps-per-hour: 12;
  $day-min-width-in-medium-breakpoint: math.div(64rem, 5);
  $timing-quick-action-transistion: 150ms;

  .timetable-list-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

  @mixin single-line-layout {
    & button {
      flex-direction: row;
      & > * {
        white-space: nowrap;
        margin-right: spacing(-5);
      }
    }

    &:hover .event__quick-action,
    & button:focus + .event__quick-action {
      display: none;
    }

    .event__title,
    .event__details .event__details__item {
      margin-bottom: 0;
      margin-top: 0;
    }

    .event__title {
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      flex-shrink: 1 !important;
    }

    // the location name is hidden only when there is a location id shown
    .event__details__item,
    .event__details__item__location-id + .event__details__item__location-name {
      display: none;
    }

    // show some of the details, overwrites above statement
    .event__details__item--location,
    .event__details__item__location-name,
    .event__details__item--form-of-instruction,
    .event__details__item--secondary-title {
      display: inline;
    }

    .event__details__item--location {
      margin-left: spacing(-4, $subtract: spacing(-5));
      margin-right: spacing(-4);
    }
  }

  @mixin constrain-height($lines) {
    @if $lines == 1 {
      max-height: line-height("single");
    }
    @else {
      max-height: calc((#{line-height("single", $include-calc: "false")}) * #{$lines});
    }
    overflow: hidden;
  }


  //timetable style
  position: relative;
  width: spacing($page-padding-side, $times: -1, $add: 100vw);
  margin-right: 0;
  --number-of-hours: #{$number-of-hours}; //css var can be overwritten inline, if more hours are needed

   &--list-view {
    // Improve toolbar styling
    .toolbar {
      &__items {
        button[data-icon] {
          &::before {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
    }
    
    // Override the default width calculation and provide proper containment
    width: auto !important; 
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    .timetable__hours {
      display: none;
    }

    .timetable__week {
      display: block;
      min-width: 0;
      width: auto;
      max-width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .timetable__week-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      height: 32px;
    }

    .timetable__week-number {
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(254, 254, 254);
      font-size: 13px;
      font-weight: 300;
      padding: 5px;
      height: 100%;
      position: static;
      border: none;
      width: auto;
    }

    .timetable__week-divider {
      border-left: 2px solid rgb(254, 254, 254);
      height: 100%;
    }

    .timetable__week-spacer {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 12px;
    }

    .timetable__week-daterange {
      color: rgb(254, 254, 254);
      font-size: 13px;
      font-weight: 300;
      white-space: nowrap;
    }

    .timetable__singleday-events {
      padding: 0;
      margin-top: 12px;
      background: none;
      display: block;
      background-image: none;
      width: auto;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;

      .list-day-container {
        display: flex;
        align-items: flex-start;
        gap: 0;
        width: auto;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
      }
    }
    .day-events-container--empty {
      margin-left: 10px !important;
      color: #9E9E9E;

      p {
        margin: 0;
        color: inherit;
      }

      hr {
        margin: 0;
        border: none;
        border-top: 1px solid #9E9E9E;
        background: none;
        height: 2px;
      }
    }

    .timetable__day-header {
      margin-top: 0;
      padding-left: 0 !important;
      padding-right: 0px !important;
      display: flex !important; 
      flex-direction: column !important; // Stack vertically
      align-items: center !important; // Center horizontally
      align-self: flex-start;
      flex: 0 0 auto;
      text-align: center !important; // Center text
      margin-bottom: 0;
      line-height: 1;
      min-width: 0;
      max-width: none;
      width: auto;
      
      br {
        display: none;
      }
      
      &:first-of-type, 
      &:not(:first-of-type) {
        padding: 0 4px 0 0 !important; 
      }
      
      .day-string {
        color: #6e6e6e;
        font-size: 13px;
        font-weight: 400;
        display: block;
        margin-bottom: 0; // Remove margin since we're using gap
      }
      
      .date-number {
        color: #6e6e6e;
        font-size: 13px;
        font-weight: 900;
        display: inline-block;
        width: 30px;
        line-height: 26px;
        text-align: center;
        border-radius: 50%;
        background-color: transparent;
        position: relative;
      }
      
      &.timetable__day-header--is-today {
        &::before {
          display: none;
        }
        .date-number {
          color: rgb(254, 254, 254);
          background: none;
          position: relative;
          z-index: 1;
          &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 26px;
            height: 26px;
            background: rgb(20, 55, 25);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
          }
        }
      }
    }
    
    .timetable__singleday-events > div > div:nth-child(2) {
      display: none; 
    }

    .timetable__singleday-events > div > div:nth-child(3) {
      flex: 1;
      background: none;

      > div {
        margin-bottom: 6px;
      }
    }

    .timetable__singleday-events > div > div:nth-child(3) {
      flex: 1;
      background: none;
      margin-left: 0px; 
      width: auto;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;
      
      > div {
        margin-bottom: 6px;
        width: auto;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
      }
    }

    .day-header-container {
      padding: 0;
      margin: 0;
      display: flex;
      align-items: flex-start;
      flex: 0 0 auto; 
    }

    .event {
      grid-row: auto !important;
      grid-column: auto !important;
      margin-bottom: 6px;
      width: auto;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;
      
      &__title::after {
        display: none;
      }
      
      button::after {
        display: none;
      }

      &--past {
        opacity: 0.6;
      }

      &.event--multiday {
        .event__time {
          position: relative;

          &::after {
            content: attr(data-day-info);
            display: inline-block;
            font-size: 14px;
            margin-left: 5px;
            font-style: italic;
          }
        }
      }
    }
    
    &.timetable--hide-empty-days {
      .timetable__singleday-events:empty {
        display: none;
      }
    }
  }

  .horizontal-scroll {
    .horizontal-scroll__scrollable-content {
      &::before {
        content: none;
      }

      @include breakpoint("wide") {
        &::after {
          content: none;
        }
      }
    }

    @include breakpoint("max-width") {
      &::before,
      &::after {
        content: none;
      }
    }
  }


  @include breakpoint("wide"){
    width: auto;
    margin-right: spacing($page-padding-side);
    padding-left: calc(#{$width-hours} + #{$width-border});
  }

  &__week-number {
    position: absolute;
    @include set-font(-1, "single", $weight: "normal", $transform: "uppercase");
    margin: 0; //overwrite default h2 margins
    max-width: none; //overwrite default for text
    padding: spacing($padding-day-vertical) 0;
    border-right: $width-border solid color("foreground");
    width: $width-weeknumber-mobile;
    left: 0;
    top: 0;
    z-index: $z-index-just-above-static;
    border-bottom: $width-border solid color("foreground");
    text-align: center;

    & span {
      display: none;
    }

    @include breakpoint("wide") {
      left: calc((#{$width-hours} + #{$width-border}) * -1);
      border-right: none;
      font-weight: $font-weight-bold;
      width: $width-hours;

      & span {
        display: inline;
      }
    }
  }

  &__hours {
    position: absolute;
    display: grid;
    grid-row-gap: $height-hour;
    align-content: end;
    justify-content: center;
    bottom: $width-border * -1;
    left: spacing($page-padding-side, $times: -1);
    top: 0;
    width: spacing($page-padding-side);
    color: color("foreground");
    @include set-font(-1, "single");
    text-align: right;

    @include breakpoint("wide") {
      left: 0;
      bottom: 0;
      background-color: color("background-secondary");
      width: $width-hours;
      padding-right: 0;

      & > * {
        position: relative;
        top: $width-border;
      }
    }

    & > * {
      line-height: 0;
      height: 0;

      @include breakpoint("wide") {
        &::after {
          content: ":00";
        }

        //if an event starts after 23:30, but finishes on the same day, we need to add an extra hour-row to the timetable, but we don't want to clock to say 25:00, so we're hidding that hour from the view.
        &.hours__midnight-overflow {
          visibility: hidden;
        }

        &:first-child {
          position: relative;
          top: calc(#{font-size(-1)} * 0.5 + #{$width-border * 2});
        }

        .timetable--has-multiday-events &:first-child {
          position: static;
        }

        &:last-child {
          position: relative;
          top: calc(#{font-size(-1)} * -0.5 - #{$width-border});
        }
      }
    }
  }

  &__week {
    display: grid;
    position: relative;
    grid-column-gap: $width-border;
    grid-template-rows: [header] auto repeat(10, auto [multidayevent]) [singledayevents] auto; //overlapping all day events must be placed in independent rows, so we're creating 10 rows for allday events allowing up to 10 overlapping allday events
    grid-auto-flow: column; //causes each child to be placed on the horizontal axis, like flex-direction: column;
    grid-auto-columns: 1fr; //makes every added column 1fr wide
    min-width: 222vw;

    @include breakpoint("medium") {
      min-width: $day-min-width-in-medium-breakpoint * 5;
    }

    @include breakpoint("wide") {
      min-width: 0;
    }

    &::before {
      //background for multidayevent-rows - only visible when .timetable--has-multidayevents modifier is used
      grid-row-start: multidayevent 1;
      grid-row-end: multidayevent 10;
      grid-column-start: 1;
      grid-column-end: 6;
      background-color: color("background-secondary");
      border-bottom: $width-border solid color("background");
    }

    &::after {
      //invisible element for ensure that the timetable can scroll horizontally beyond the timetable edge in narow viewports
      content: "";
      position: absolute;
      width: spacing($page-padding-side);
      height: 1px;
      background-color: transparent;
      top: 0;
      left: 100%;
    }

    .timetable--has-multiday-events & {
      //the background for multiday events row
      &::before {
        content: "";
      }
    }

    .timetable--with-weekend & {
      min-width: 310vw;

      @include breakpoint("medium") {
        min-width: $day-min-width-in-medium-breakpoint * 7;
      }

      @include breakpoint("wide") {
        min-width: 0;
      }

      &::before {
        grid-column-end: 8;
      }
    }
  }

  &__day-header {
    grid-row-start: header;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    margin: 0; //overwrite default h3 margins
    max-width: none; //overwrite default for text
    margin-bottom: $width-border;
    text-align: center;
    padding: spacing($padding-day-vertical) spacing($padding-day-horizontal);
    white-space: nowrap;

    &:first-of-type {
      padding-left: spacing($padding-day-vertical, $add: $width-weeknumber-mobile);

      @include breakpoint("wide") {
        padding-left: spacing($padding-day-horizontal);
      }
    }

    &--is-today {
      display: flex;
      justify-content: center;
      align-items: center;
      //padding-right: calc(#{spacing($width-today-marker)} + #{spacing($margin-today-marker)} + #{spacing($padding-day-horizontal)});

      &::before {
        content: "";
        display: inline-block;
        flex: 0 0 auto;
        width: spacing($width-today-marker);
        height: spacing($width-today-marker);
        border-radius: 50%;
        background-color: color("theme");
        margin-right: spacing($margin-today-marker);
      }
    }
  }

  &__singleday-events {
    grid-row-start: singledayevents;
    display: grid;
    grid-template-rows: repeat(calc(var(--number-of-hours) * #{$steps-per-hour}), calc(#{math.div($height-hour, $steps-per-hour)} - #{$width-border}));
    grid-column-gap: $width-border;
    grid-row-gap: $width-border;
    overflow: hidden; //must be overflow hidden else firefox won't allow events with flex-direction:row (short events) to overflow
    background-color: color("background-secondary");
    background-image: linear-gradient(color("background") 0%, color("background") $width-border, transparent $width-border);
    background-size: 100% calc((#{math.div($height-hour, $steps-per-hour)} - #{$width-border}) * #{$steps-per-hour} + (#{$width-border} * #{$steps-per-hour}));
    background-position: center bottom;
  }

  & .event {
    display: flex;
    position: relative;
    overflow: hidden;

    //show quick-action when hovering over an event tile on devices that support hover (mouse-based input). And for keyboard users also when the button in the event, that opens the modal has focus or when the quickaction link itself has focus
    &:hover .event__quick-action,
    & button:focus + .event__quick-action,
    & .event__quick-action:focus {
      @include none-touch {
        transform: translateY(0);
        opacity: 1;
        transition: transform $timing-quick-action-transistion $easing-out 0ms, opacity #{math.div($timing-quick-action-transistion, 2)} $easing-out #{math.div($timing-quick-action-transistion, 2)}; //the move in-transistion: move and fade-in over half the time of the move. Fade-in staring half way through the move
      }
    }

    //when the event tile has a theming class applied, remove the background
    &[class*="theme--"] {
      background-color: transparent;
    }

    //right and bottom edges of the event tile have a fading from transperant to the background-color (theme-secondary). Because safari is a duche and don't understand keyword "transperant" to mean a black with 0% opacity safari will to create a liniear gradient from transperant to the background color, instead it's creates a gradient from transperant black over slightly black to the background color. Hence in safari we, have to fade from the background color with 0 opacity to the background color with full opacity. On other browser we just use the "transperant" keyword for the gradients. We need to colors for each theme one for default and one for hover
    //NOTE: This will not work if the timetable is used in theme--dark mode in Safari. For this to work the below must be expanded to also include theme-secondary and theme-secondary-hover in the dark themes
    --transparent: transparent;
    --transparent-hover: transparent;
    //this @media + @support only affects safari browsers: https://www.codegrepper.com/code-examples/css/Safari+only+CSS+hack
    @media not all and (min-resolution:.001dpcm) {
      @supports (-webkit-appearance:none) {
        @each $theme-name, $color in $color-brands {
          $color: get-hexcode($theme-name, "theme-secondary");
          $red: red($color);
          $green: green($color);
          $blue: blue($color);

          //set for default theme
          @if $theme-name == $color-default-brand {
            --transparent: rgba(#{$red}, #{$green}, #{$blue}, 0);
          }

          //set for each theme
          &.theme--#{$theme-name}{
            --transparent: rgba(#{$red}, #{$green}, #{$blue}, 0);
          }

          //hover version of the above
          $color: get-hexcode($theme-name, "theme-secondary-hover");
          $red: red($color);
          $green: green($color);
          $blue: blue($color);

          //set for default theme
          @if $theme-name == $color-default-brand {
            --transparent-hover: rgba(#{$red}, #{$green}, #{$blue}, 0);
          }

          //set for each theme
          &.theme--#{$theme-name}{
            --transparent-hover: rgba(#{$red}, #{$green}, #{$blue}, 0);
          }
        }
      }
    }

    & button {
      width: 100%;
      padding: spacing($padding-event-vertical) spacing($padding-event-horizontal) spacing($padding-event-vertical) calc(#{$width-event-border} + #{spacing($padding-event-horizontal)});
      //@include set-colors("theme-secondary");
      color: color("theme-secondary-foreground");
      background-color: transparent; //remove the backgorund color set by mixin set-colors-background-foreground
      background-image: linear-gradient(to right, transparent 0%, transparent #{$width-event-border}, color("theme-secondary") #{$width-event-border});
      background-size: 100% 100%;
      text-align: left; //overwrite default button style;

      display: inline-flex;
      flex-direction: column;
      align-items: start;

      & > * {
        flex: 0 0 auto;
      }

      &:hover {
        background-image: linear-gradient(to right, var(--transparent-hover) 0%, transparent #{$width-event-border}, color("theme-secondary-hover") #{$width-event-border});
        outline: none;

        &::after {
          background-image: linear-gradient(var(--transparent-hover), color("theme-secondary-hover"));
        }

        & .event__title::after {
          background-image: linear-gradient(to right, var(--transparent-hover), color("theme-secondary-hover"));
        }
      }

      &:active {
        background-image: linear-gradient(to right, var(--transparent) 0%, transparent #{$width-event-border}, color("theme-secondary") #{$width-event-border});
        outline: none;

        &::after {
          background-image: linear-gradient(var(--transparent), color("theme-secondary"));
        }

        & .event__title::after {
          background-image: linear-gradient(to right, var(--transparent), color("theme-secondary"));
        }
      }

      &::before {
        content: "";
        display: block;
        position: absolute;
        background-color: color("theme");
        width: $width-event-border;
        top: 0;
        bottom: 0;
        left: 0;
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        height: spacing($padding-event-vertical);
        bottom: 0;
        left: $width-event-border;
        right: 0;
        background-image: linear-gradient(var(--transparent), color("theme-secondary"));
      }
    }

    &__time {
      @include set-font(-1, "single");
      @include constrain-height(1);
      order: -1; //move the time above the title/header of the event

      &__end {
        white-space: nowrap;
      }
    }

    &__title {
      @include set-font(-1, "single", $weight: "bold", $transform: "none");
      margin-top: 0; //overwrite default margin of h4
      margin-bottom: $width-border-slim;

      //since .event__title is position static, this element spreads accross the full height of the event tile (first parent with position relative). Placed here because before and after elements on event tile already used for other puposes
      &::after {
        content: "";
        position: absolute;
        display: block;
        width: spacing($padding-event-horizontal);
        top: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(to right, var(--transparent) , color("theme-secondary"));
      }
    }

    &__details {
      @include set-font(-1, "single");
      color: color("theme-secondary-foreground-secondary");
      margin: 0;

      & dt {
        @include screenreader-only;
      }


      &__item {
        margin: 0 0 spacing(-5) 0;

        @include icon-style {
          margin-right: spacing(-5);
        }

        &--location {
          color: color("theme-secondary-foreground");
          // @include constrain-height(1);

          & > *:first-child {
            // white-space: nowrap;

            @include icon-style {
              @include set-icon("location");
              margin-right: $width-border;
              padding-left: 1px; //fix clipping issue on icon in chrome
            }
          }

          //for quantum physics events with more than one location
          & + dt + .event__details__item--location {
            margin-top: spacing(-5, $times: -1);
          }
        }

        &__location {
          &-name {
            display: inline-block; //make sure that the entire title wraps onto a new (hidden) line, when space is limited. Must be inline-block instead of white-space nowrap, to allow for long titles to wrap onto several hidden lines, and not add unecesarilly to width of item
          }
        }

        &--secondary-title {
          color: color("theme-secondary-foreground");
        }

        &--form-and-group {
          margin-top: spacing(-4);
        }

        &--instructors {
          @include constrain-height(2);

          @include set-icon("instructor", $include-pseudo: "before");
        }

        &__list {
          display: inline;
          margin: 0;

          li {
            display: inline;
            margin: 0;
            padding: 0;

            &::before {
              content: none;
            }

            &:not(:last-child)::after {
              content: ", ";
              white-space: pre;
            }

            &:nth-last-child(2)::after {
              content: " og ";

              html[lang|="en"] & {
                content: " and ";
              }
            }
          }
        }

        &--note {
          @include constrain-height(2);

          &::before {
            @include set-icon("note");
            padding-left: 1px; //fix clipping issue on icon in chrome
          }
        }
      }
    }

    &__quick-action {
      position: absolute;
      @include set-colors("utility-interactive");
      @include set-icon("link-external", $include-pseudo: "before");
      top: spacing($padding-event-vertical);
      right: spacing($padding-event-horizontal);
      transform: translateY(#{spacing(1, $times: -1)});
      opacity: 0;
      transition: transform $timing-quick-action-transistion $easing-in 0ms, opacity #{math.div(60, $steps-per-hour)} $easing-in 0ms; //the move-out transistion: move and fade-out over half the time of the move. Fade-out staring at the same time of move

      &:hover {
        background-color: color("utility-interactive-hover");
      }
    }

    &--multiday {
      @include single-line-layout();
      margin-bottom: $width-border;
    }

    &--short-duration {
      @include single-line-layout();

      & .event__time__end {
        display: none;
      }

      @for $i from 1 through 5 {
        $minutes: $i * math.div(60, $steps-per-hour);
        &--#{$minutes}min {
          & button::before {
            bottom: auto;
            height: calc((#{math.div($height-hour, $steps-per-hour)} - #{$width-border}) * #{$i} + #{$width-border * $i});
          }
        }
      }
    }
  }

  // Custom day views (1-day, 3-day)
  &--custom-days {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;

    @include breakpoint("wide") {
      display: grid;
      grid-template-columns: $width-hours 1fr; 
      grid-template-rows: auto;
      grid-column-gap: $width-border;
      padding-left: 0; 
    }
    .timetable__hours {
      // Override the display: none from list view, but don't force display: block
      display: grid !important; // Use grid for proper hour positioning
      grid-row-gap: $height-hour;
      align-content: end;
      justify-content: center;
      
      & > * {
        line-height: 0;
        height: 0;
        text-align: center;
        font-size: font-size(-1);
        color: color("foreground-secondary");
        
        @include breakpoint("wide") {
          &::after {
            content: ":00";
          }
        }
      }
      
      @include breakpoint("wide") {
        position: static !important; // Use grid positioning instead of absolute
        grid-column: 1;
        grid-row: 1;
        left: auto !important;
        width: $width-hours !important;
        background-color: color("background-secondary");
        padding-right: 0;
        margin-top: 20px; // Match the margin-top of .timetable__singleday-events
        
        & > * {
          position: relative;
          top: $width-border;
        }
      }
    }

    // Week container grid layout - works for both 1-day and 3-day
    .timetable__week {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      grid-auto-flow: row !important;
      display: grid;
      position: relative;
      grid-template-rows: auto auto 1fr; // Header row + multi-day + single-day rows
      grid-column-gap: $width-border;
      grid-row-gap: 0;
      
      @include breakpoint("wide") {
        grid-column: 2; // Place in second column after hours
        grid-row: 1;
      }
      
      // Day headers in first row
      .timetable__day-header {
        grid-row: 1;
      }
      
      // Multi-day events in second row - span all columns
      .event--multiday {
        grid-row: 2 !important; // Force multi-day events to row 2
        grid-row-start: auto !important; // Override the multidayevent system
        grid-column: 1 / -1;
        margin-bottom: $width-border;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }
      
      // Single-day events containers in third row
      .timetable__singleday-events {
        grid-row: 3;
        max-width: 100% !important;
        overflow: hidden !important;
      }
    }

    // High specificity override for nested structure
    .horizontal-scroll__scrollable-content .timetable__week {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      grid-auto-flow: row !important;
      position: relative !important;
    }

    // Constrain scroll containers
    .horizontal-scroll,
    .horizontal-scroll__scrollable-content {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }

    // Hide problematic pseudo-elements
    .timetable__week::before {
      display: none !important;
    }

    // Week number positioning - common for both views
    .timetable__week-number {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      width: $width-weeknumber-mobile !important;
      border-right: $width-border solid color("foreground") !important;
      border-bottom: $width-border solid color("foreground") !important;
      text-align: center !important;
      z-index: 10 !important; // Higher z-index to ensure it's above hours column
      grid-row: auto !important;
      grid-column: auto !important;
      
      @include breakpoint("wide") {
        left: calc((#{$width-hours} + #{$width-border}) * -1) !important;
        width: $width-hours !important;
        border-right: none !important;
      }
    }

    // Multi-day event styling
    &.timetable--has-multiday-events {
      .timetable__week {
        position: relative;
        
        &::before {
          content: "";
          position: absolute !important;
          display: block !important;
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 32px;
          background-color: var(--event-multiday-bg, #f5f5f5);
          z-index: 0;
          grid-column-end: var(--grid-column-end, 3);
        }
      }

      .timetable__day-header {
        position: relative;
        z-index: 1;
      }
    }
  }

  // Specific 1-day view overrides
  &--1day {
    // Force block layout for week container on narrow screens
    .timetable__week {
      display: block !important;
    }
    
    // Override grid display for horizontal scroll container in 1-day view  
    .horizontal-scroll__scrollable-content .timetable__week {
      display: block !important;
    }
  }

  &--3days {
    &.timetable--has-multiday-events {
      .timetable__week {
        // Override the generic ::before background to span exactly 3 columns for 3-day view
        &::before {
          display: block !important;
          grid-row: 2 !important; // Position in the multi-day event row (second row)
          grid-column: 1 / 4 !important; // Span columns 1, 2, 3 for 3-day view
          background-color: color("background-secondary") !important;
          border-bottom: $width-border solid color("background");
        }
      }
    }
  }

  .section-header {
    margin-top: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
    font-weight: normal;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}