:root {
  --timetable-axis-width: 58px;
  --timetable-hour-height: 88px;
}

.weekly-timetable-scroll {
  margin-top: 1rem;
  width: min(1840px, calc(100vw - 48px));
  box-sizing: border-box;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  border: 1px solid #c8d8e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(16, 42, 67, .08);
}

body:has(#calendar.view.active) {
  overflow-x: clip;
}

.weekly-timetable {
  display: grid;
  grid-template-columns: var(--timetable-axis-width) repeat(7, minmax(0, 1fr));
  grid-template-rows: 92px calc(var(--timetable-hours) * var(--timetable-hour-height));
  width: 100%;
  min-width: 0;
  position: relative;
}

.weekly-timetable-corner,
.weekly-timetable-day-head {
  position: relative;
  z-index: 20;
  background: #f7fafc;
  border-bottom: 1px solid #c8d8e8;
}

.weekly-timetable-corner {
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .55rem;
  border-right: 1px solid #c8d8e8;
  color: #486581;
}

.weekly-timetable-corner strong {
  color: #102a43;
}

.weekly-timetable-corner span {
  font-size: .75rem;
}

.weekly-timetable-day-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: .1rem .55rem;
  padding: .7rem clamp(.35rem, .7vw, .8rem);
  border-right: 1px solid #d9e2ec;
}

.weekly-timetable-day-head span {
  align-self: center;
  font-weight: 800;
  color: #486581;
}

.weekly-timetable-day-head strong {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: #eaf2f8;
  color: #102a43;
  font-size: 1.15rem;
}

.weekly-timetable-day-head small {
  grid-column: 1 / -1;
  color: #627d98;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekly-timetable-day-head.is-today {
  background: #fff7df;
}

.weekly-timetable-day-head.is-today strong {
  background: #ffc857;
}

.weekly-timetable-axis {
  position: relative;
  z-index: 12;
  grid-column: 1;
  grid-row: 2;
  background: #f7fafc;
  border-right: 1px solid #c8d8e8;
}

.weekly-timetable-axis span {
  position: absolute;
  top: calc(var(--hour-offset) * var(--timetable-hour-height));
  right: .5rem;
  transform: translateY(-50%);
  color: #627d98;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
}

/* The timetable is already the final item in this view. Avoid leaving the
   app's normal card-page bottom gutter underneath a full-height week. */
#app main:has(#calendar.view.active) {
  padding-bottom: 8px;
}

#app:has(#calendar.view.active) > footer {
  padding-top: 8px;
  padding-bottom: 10px;
}

.weekly-timetable-axis span:first-child {
  transform: none;
  top: .45rem;
}

.weekly-timetable-day {
  grid-row: 2;
  position: relative;
  min-height: calc(var(--timetable-hours) * var(--timetable-hour-height));
  background: #fff;
  border-right: 1px solid #c8d8e8;
}

.weekly-timetable-day::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(247, 250, 252, .42) 0,
    rgba(247, 250, 252, .42) calc(var(--timetable-hour-height) - 1px),
    #c8d8e8 calc(var(--timetable-hour-height) - 1px),
    #c8d8e8 var(--timetable-hour-height)
  );
}

.weekly-timetable-day.is-today {
  background: linear-gradient(180deg, rgba(255, 200, 87, .09), rgba(255, 255, 255, 0) 40%);
}

.weekly-timetable-hour-line {
  position: absolute;
  top: calc(var(--hour-offset) * var(--timetable-hour-height));
  left: 0;
  right: 0;
  border-top: 1px solid #c8d8e8;
  pointer-events: none;
}

.weekly-timetable {
  border-bottom: 1px solid #c8d8e8;
}

#calendar .weekly-timetable-session.calendar-task {
  position: absolute;
  z-index: 3;
  top: calc(var(--session-offset) * var(--timetable-hour-height) + 4px);
  left: 6px;
  right: 6px;
  height: max(50px, calc(var(--session-duration) * var(--timetable-hour-height) - 8px));
  min-height: 0;
  margin: 0;
  padding: .55rem .55rem .45rem 2rem;
  display: block;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--subject) 45%, #fff);
  border-left: 5px solid var(--subject);
  border-radius: 12px;
  background: color-mix(in srgb, var(--subject) 12%, #fff);
  box-shadow: 0 6px 18px rgba(16, 42, 67, .08);
}

#calendar .weekly-timetable-session.calendar-task:hover,
#calendar .weekly-timetable-session.calendar-task.controls-open {
  z-index: 10;
  box-shadow: 0 12px 30px rgba(16, 42, 67, .2);
}

#calendar .weekly-timetable-session > input[type="checkbox"] {
  position: absolute;
  top: .62rem;
  left: .55rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
}

#calendar .weekly-timetable-session > strong {
  display: block;
  min-width: 0;
  color: #102a43;
  font-size: .82rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .weekly-timetable-session .session-time {
  color: #008659;
}

#calendar .weekly-timetable-session .task-meta {
  display: block;
  margin-top: .24rem;
  color: #486581;
  font-size: .7rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendar .weekly-timetable-session .calendar-time-controls {
  position: absolute;
  display: none;
  flex-wrap: wrap;
  gap: .35rem;
  top: calc(100% + 5px);
  right: -5px;
  left: auto;
  width: min(292px, calc(100vw - 24px));
  max-width: none;
  padding: .5rem;
  border: 1px solid #c8d8e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 42, 67, .22);
}

#calendar .weekly-timetable-day.controls-align-left .calendar-time-controls {
  right: auto;
  left: -5px;
}

#calendar .weekly-timetable-session.controls-open .calendar-time-controls {
  display: flex;
}

#calendar .weekly-timetable-session .timetable-session-full-title {
  flex: 0 0 100%;
  display: block;
  color: #102a43;
  font-size: .88rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

#calendar .weekly-timetable-session:not(.controls-open) {
  cursor: pointer;
}

#calendar .weekly-timetable-session.controls-open {
  cursor: default;
}

#calendar .weekly-timetable-session .calendar-time-controls label {
  font-size: .7rem;
}

#calendar .weekly-timetable-session .calendar-time-controls input[type="time"] {
  width: 92px;
  min-height: 38px;
  padding: .3rem;
}

#calendar .weekly-timetable-session .calendar-time-controls button {
  min-height: 38px;
  padding: .35rem .55rem;
}

.weekly-timetable-empty {
  margin: 1rem;
  padding: .8rem;
  border: 1px dashed #bcccdc;
  border-radius: 12px;
  color: #829ab1;
  text-align: center;
  font-size: .8rem;
}

@media (max-width: 760px) {
  :root {
    --timetable-day-width: 170px;
    --timetable-axis-width: 62px;
    --timetable-hour-height: 82px;
  }

  .weekly-timetable-scroll {
    width: calc(100vw - 16px);
    overflow-x: auto;
    border-radius: 14px;
  }

  .weekly-timetable {
    grid-template-columns: var(--timetable-axis-width) repeat(7, minmax(var(--timetable-day-width), 1fr));
    min-width: calc(var(--timetable-axis-width) + 7 * var(--timetable-day-width));
  }
}