@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.autoservice-timeline {
  box-sizing: border-box;
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.5em;

  --one-hour-height: 26px;

  --color-border: #E0E0E0;
  --color-header: #f8f8f8;
  --color-muted: #828282;

  .modal-header-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  .week-selection-toolbar {
    flex: 1;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  .week-selection-button {
    display: flex;
    padding: 8px 10px;
    align-items: center;
    gap: 10px;
    border: none;
    align-self: stretch;
    border-radius: 6px;
    background: #F4F4F4;
    color: #000;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    transition: .2s;

    &:not(:disabled):hover {
      background-color: #e8e8e8;
    }

    &.previous {
      background-image: url('./assets/arrow-left.svg');
      background-size: 16px;
      background-position: 8px center;
      background-repeat: no-repeat;
      padding-left: 26px;
    }

    &.next {
      background-image: url('./assets/arrow-right.svg');
      background-size: 16px;
      background-position: right 8px center;
      background-repeat: no-repeat;
      padding-right: 26px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  .autoservice-availability-table-wrapper {
    display: flex;
    height: auto;
  }

  .autoservice-availability-table {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 'corner header' 'times content';
    width: 100%;
    height: 100%;

    .corner {
      grid-area: corner;
      background-color: var(--color-header);
      border: 1px solid var(--color-border);
      border-bottom: none;
      border-right : none;
      border-top-left-radius: 6px;
    }

    .header {
      grid-area: header;

      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: auto;
      overflow: hidden;

      background-color: var(--color-header);

      border: 1px solid var(--color-border);
      border-bottom: none;
      border-left: none;
      border-top-right-radius: 6px;

      .header-item {
        padding: 8px 10px;
      }

      .day {
        font-weight: bold;
      }

      .muted {
        color: var(--color-muted);
      }
    }

    .times-container {
      height: auto;
      grid-area: times;
      overflow: hidden;
    }

    .times {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      border: 1px solid var(--color-border);

      .time-sidebar-slot {
        padding: 0 10px;
        grid-row: span 1;
        grid-column: 1;
        &:not(:last-child) {
          border-bottom: 1px solid var(--color-border);
        }

        .time {
          height: var(--slot-height);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .timelines-container {
      height: auto;
      grid-area: content;
      overflow: auto;

      border: 1px solid var(--color-border);
      border-left: none;

      .simplebar-content-wrapper {
        height: 100% !important;
      }
    }

    ::-webkit-scrollbar {
      width: 0;
    }

    .timelines {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-areas: 'monday tuesday wednesday thursday friday saturday sunday';
      grid-template-rows: 1fr;
      height: 100%;

      .monday {
        grid-area: monday;
      }

      .tuesday {
          grid-area: tuesday;
      }

      .wednesday {
          grid-area: wednesday;
      }

      .thursday {
          grid-area: thursday;
      }

      .friday {
          grid-area: friday;
      }

      .saturday {
          grid-area: saturday;
      }

      .sunday {
        grid-area: sunday;
      }
    }

    .timeline {
      position: absolute;
      width: 100%;
      border-top: 1px solid var(--color-border);
      top: calc(var(--one-hour-height)*var(--position) - 1px);

      &.dashed {
        border-top: 1px dashed var(--color-border);
      }
    }
  }

  .day-timeline {
    position: relative;
    height: 100%;

    &:not(:last-of-type) {
      border-right: 1px solid var(--color-border);
    }
  }

  .time-slot {
    position: absolute;
    width: 100%;
    top: calc(var(--one-hour-height) * var(--start));
    height: calc(var(--one-hour-height) * (var(--end) - var(--start)));
  }

  .blocked-time {
    background-color: #00000017;

    &.manual {
      background-color: #E9211C17;
    }
  }

  .reserved-time {
    padding: 4px 6px;
    background-color: #ffba82;
    border: 1px solid #c68e47;
    border-radius: 4px;
    color: black;
    overflow: hidden;
  }

  .read-only-time {
    padding: 4px 6px;
    background-color: #ffffff;
    border: 1px solid #a6a6a6;
    border-radius: 4px;
    color: black;
    overflow: hidden;
    font-size: 10px;
    line-height: 1em;
  }

  .js-selectable-time, .js-manageable-time {
    cursor: pointer;
    display: flex;
    gap: 4px;
    box-shadow: inset 0 0 0 2px transparent;
    transition: .2s;

    &.selected {
      background: linear-gradient(90deg, #E9211C 27.93%, #840000 100%);
    }

    &.selected::before {
      content: ' ';
      height: 26px;
      aspect-ratio: 1;
      background: url('./assets/check-mark.svg');
      background-size: 20px;
      background-position: center;
      background-repeat: no-repeat;
    }

    &:not(.selected):hover, &:not(.selected)[aria-expanded=true] {
      box-shadow: inset 0 0 0 2px #E9211C;
    }

    & .selected-text {
      display: none;
    }

    &.selected .selected-text {
      display: flex;
      height: 26px;
      align-items: center;
      font-weight: bold;
      color: white;
    }
  }
}

.js-dropdown-content {
  padding: 4px 0;
}

.js-dropdown-header {
  padding-bottom: 4px;
}

.js-dropdown-body {
  padding-top: 16px;
  padding-bottom: 16px;
}

.js-dropdown-footer {
  padding-top: 4px;
}

.dropdown-button-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5em;
}

.dropdown-button {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: .2s;
  border-radius: 2px;
  text-decoration: none;
}

.dropdown-button-default {
  color: white !important;
  border: 1px solid white;
  &:hover {
    color: black !important;
    background-color: #f4f4f4;
  }
}

.dropdown-button-warning {
  border: 1px solid yellow;
  color: yellow !important;
  &:hover {
    color: black !important;
    background-color: yellow;
  }
}

.dropdown-button-danger {
  border: 1px solid red;
  color: red !important;

  &:hover {
    color: white !important;
    background-color: red;
  }
}

table.dropdown-table {
  td {
    padding: 4px 2px;
  }

  tr {
    background-color: #ffffff1c;
  }

  tr:nth-child(odd) {
    background-color: #ffffff0d;
  }
}

.js-modal-close {
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
  position: relative;
  top: 3px;
  transition: 0.2s;

  &:hover {
    opacity: 0.5;
  }
}

.reserved-text-header {
  display: inline;
  text-decoration: underline;
  font-weight: bold;
}