/* Week Grid - Layout
 * -------------------------------------------------------------------------- */

:root {
  --week-grid-slots: 4;
  --week-grid-rows: calc(var(--week-grid-slots) * 24); /* 4 slots per hour * 24h */
  --week-grid-now-rows: calc(60 / var(--week-grid-slots)); /* 15 individual minutes */
  --week-expanded-slots: 12;
  --week-expanded-grid-rows: calc(var(--week-expanded-slots) * 12);
  --week-expanded-grid-placeholder-rows: calc(var(--week-expanded-slots) * 4);
}

.week {
  height: auto;
}

.week--expanded {
  height: calc(100vh - 64px); /* 100% viewport height - .navbar height - .navbar bottom margin */
}

.week-grid {
  display: grid;
  margin: 0 var(--base-space);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    'titles'
    'headers'
    'events'
    'spanned-events'
    'todos';

  @media (max-width: 76em) {
    margin: 0 var(--quarter-space);
  }

  .week--expanded & {
    height: max(360px, 100%);
    grid-template-rows: auto auto 1fr auto auto;
  }
}

.week-grid__backgrounds {
  display: grid;
  grid-row: headers / events;
  grid-column: 1;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  border: 1px solid var(--color-border--medium);
}

.week-grid__highlighted-date {
  transition: all 0.2s ease;
}

@keyframes dayhighlight {
    0% { background-color: transparent; }
   33% { background-color: var(--color-bg--highlight); }
   66% { background-color: var(--color-bg--highlight); }
  100% { background-color: transparent; }
}

.week-grid__highlighted-date--highlighted {
  background-color: transparent;
  animation: dayhighlight 1.8s ease forwards;
}

.week-grid__highlight {
  display: grid;
  grid-row: headers / todos;
  grid-column: 1;
  border-radius: 0 0 0.8rem 0.8rem;
  outline: 3px solid var(--color-border--solid);
}

.week-grid__background--backgrounded {
  background: var(--background-image) center center;
  background-size: cover;
}

.week-grid__titles,
.week-grid__dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  .week--expanded & {
    margin-left: 2em;
  }
}

.week-grid__titles {
  grid-area: titles;
}

.week-grid__dates {
  grid-area: headers;
  border-bottom: 0;
}

.week-grid__events {
  grid-area: events;
  display: grid;
  padding: var(--main-spacing);

  .week--expanded & {
    padding-left: 2em;
  }
}

.week-grid__spanned-events {
  grid-area: spanned-events;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-left: 2em;
  border-left: 1px solid var(--color-border--medium);
  border-right: 1px solid var(--color-border--medium);

  /* Allow the creation of events by clicking on empty areas of the grid */
  pointer-events: none;

  > .event {
    pointer-events: all;
  }

  .event__label-time--end {
    display: initial;
  }
}

.week-grid__spanned-events--nested {
  grid-column: 1 / 8;
  margin: 0;
  grid-auto-flow: dense;
}

.week-grid__todos {
  grid-area: todos;
  border: 1px solid var(--color-border--medium);
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;

  .week--expanded & {
    margin-left: 2em;
  }
}

/* Week Grid - Headers
 * -------------------------------------------------------------------------- */

.week-grid__title {
  text-align: center;
  font-size: var(--font-size-x-small);
  font-weight: bold;
  padding: 0 var(--quarter-space);
  margin-bottom: var(--half-space);
  overflow: hidden;

  a {
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dashed transparent;
    transition: border 0.33s ease;

    &:hover {
      border-color: var(--color-border--heavy);
    }

    /* Don't show outlines for mouse interactions */
    &:focus:not(:focus-visible) {
      outline: none;
    }
  }

  input {
    text-align: center;
    border: 1px dashed transparent;
    padding: 0;

    &:focus {
      border-top: 1px solid transparent;
      border-bottom: 1px dashed var(--color-border--heavy);
    }
  }
}

.week-grid__title-placeholder {
  text-indent: -999em;
}

.week-grid__date {
  position: relative;
  font-size: var(--font-size-x-small);
  padding: var(--quarter-space);
  text-align: right;

  & + .week-grid__date {
    border-left: 1px solid var(--color-border--medium);
  }
}

.week-grid__date:has(.week-grid__date-month) {
  .week-grid__action-group {
    margin-left: 1.2rem;
  }
}

.week-grid__date-label {
  .week-grid__date--backgrounded & {
    color: var(--color-txt--reversed);
  }
}

.week-grid__date-label-wrapper {
  position: relative;

  .week--current & {
    display: inline-block;
    transform: scale(1.2);
    transform-origin: right;
  }

  .week-grid__date--today & {
    color: var(--color-txt--reversed);

    &::after {
      filter: var(--colorize-orange);
      content: "";
      background-image: url("/assets/calendar/date-circle-highlight-solid-12ddaa23.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      display: inline-block;
      height: 150%;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      width: 145%;
      z-index: -1;
    }
  }

  .week-grid__date--backgrounded & {
    mix-blend-mode: plus-lighter;
  }

  .week-grid__date--today & {
    mix-blend-mode: normal;
  }
}

.week-grid__date-label-weekday {
  text-transform: uppercase;
  opacity: 0.66;

  .week-grid__date--today & {
    opacity: 1;
  }
}

.week-grid__action-group {
  display: flex;
  position: absolute;

  .week-grid__journal,
  .week-grid__set-background {
    opacity: 0;
  }

  &:hover,
  [open] & {
    .week-grid__journal,
    .week-grid__set-background {
    opacity: 0.7;
    transition: opacity 300ms ease 200ms;
    }
  }

  .week-grid__date--backgrounded & {
    opacity: 1.0;
    background: none;

    .btn::before {
      filter: var(--colorize-white);
      .week-grid__journal { mix-blend-mode: plus-lighter; }
    }
  }

  .week-grid__journal--filled {
    opacity: 1;
  }

  .btn--icon-note--yellow {
    &::before { filter: none !important; }
  }

  @media (max-width: 39.95em) {
    margin-top: 1rem;
  }
}

.week-grid__date-month {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 2px;
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  opacity: 0.2;
  font-weight: bold;

  @media (max-width: 39.95em) {
    margin-top: 1rem;
  }
}

.week-grid__date-month--start {
  opacity: 1;
}

.week-grid__date--today {
  scroll-margin: 10em;
}

.week-grid__habits {
  position: absolute;
  top: -0.33em;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-x-small);
  height: 0.9em; /* Half the height of habit buttons to avoid overlap with date headers */

  > form:not(:first-child) {
    margin-left: -0.25em;
  }
}

/* Week Grid - Columns
 * -------------------------------------------------------------------------- */

.week-grid__columns {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  grid-template-columns: repeat(7, 1fr);
}

.week-grid__column {
  border-left: 1px solid var(--color-border--medium);

  &:first-of-type:not(.week-grid__column--today) {
    border: 0;
  }
}

/* Week Grid - Times
 * -------------------------------------------------------------------------- */

.week-grid__times {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  grid-template-rows: repeat(24, 60px);
}

.week-grid__time {
  border-top: 1px solid var(--color-border--light);
}

.week-grid__time-label {
  font-size: var(--font-size-xxx-small);
  color: var(--color-txt--subtle);
  margin-left: -3em;
  width: 4ch;
  display: block;
  margin-top: -1.5ch;
  height: 3ch;
  text-align: right;
}

/* Week Grid - Days
 * -------------------------------------------------------------------------- */

.week-grid__days {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  grid-template-rows: repeat(var(--week-grid-rows), minmax(0.1em, auto));
  grid-template-columns: repeat(7, 1fr);

  .week--expanded & {
    grid-template-rows: repeat(var(--week-expanded-grid-rows), 10px);
  }
}

.week-grid__day {
  display: contents;
}

/* Week Grid - Now Marker
 * -------------------------------------------------------------------------- */

.week-grid__now {
  pointer-events: none;
  z-index: 8;

  /* Week Zoom Only */
  &:not(.week-grid__day &) {
    grid-row: 1;
    grid-column: 1;
    grid-template-rows: repeat(var(--week-expanded-grid-rows), 10px);
    grid-template-columns: 1fr;
    grid-row-end: -1 !important;
  }
}

.week-grid__now-marker {
  border-top: 1px dashed var(--color-orange);
  margin: 0 -8px;

  .time-track__time-elapsed {
    display: none;
  }
}

/* Week Grid - Events
 * -------------------------------------------------------------------------- */

.week-grid__events {
  .event--one-liner {
    @media (max-width: 76em) {
      .event__label {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        max-width: none;
      }

      .event__title {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .event__label-time--end {
        display: none;
      }
    }
  }
}

.week--expanded .week-grid__events {
  overflow: auto;

  .event {
    background-color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 var(--quarter-space) 1px;
    padding: 0;
  }
}

.week-list-grid__placeholders {
  display: grid;
  grid-template-rows: repeat(1, 1fr);

  .time-grid-placeholders__placeholder--dragging {
    background-color: var(--color-bg--surface-light);
  }

  .time-grid-placeholders__placeholder {
    /* Hide draggable elements when dropped inside placeholder during dragging interactions */
    [draggable] {
      display: none;
    }
  }
}

.week-expanded-grid__placeholders {
  display: grid;
  grid-template-rows: repeat(var(--week-expanded-grid-placeholder-rows), 1fr);
}

/* Week Grid - Past/Future Divider
 * -------------------------------------------------------------------------- */

.week-grid__past-divider {
  font-size: var(--font-size-x-small);
  color: var(--color-tertiary);
  text-transform: uppercase;
  line-height: 1.5;
  font-weight: normal;

  &::before {
    filter: var(--colorize-purple);
    content: '';
    height: 1.5em;
    background: url("/assets/wavy-black-b89bbf77.svg") repeat-x center / auto 0.4em;
    background-blend-mode: difference;
    flex-grow: 1;
    top: 0;
  }
}

#week-list-auto-scroll {
  visibility: hidden;

  &[data-auto-scroll-scrolled-value] {
    visibility: visible;
  }
}