/* General layout */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

.likert-tests-page {
  height: 100%;
}

.likert-test-container {
  display: flex;
  flex-direction: row;
  /* gap: 30px; */
  height: 100%;
  margin: 0 auto;
  background-color: var(--theme-var-colors-dark-shades-ultra-light);
}

.likert-test-sidebar {
  width: 450px;
  max-width: 40%;
  flex-shrink: 0;
  background-color: hsl(var(--theme-var-colors-light-hsl));
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.likert-test-main {
  flex: 1;
  min-width: 0;
  padding: 5rem;
}

.likert-test-page {
  .likert-test-main {
    display: flex;
    flex-direction: column;
    .likert-test-form {
      flex-grow: 1;
      .likert-question {
        height: 100%;
        display: flex;
        flex-direction: column;
        .likert-options {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          gap: 15px;
          margin-bottom: 30px;
        }
      }
    }
  }
}

/* Test introduction */
.likert-test-description {
  margin-bottom: 20px;
}

/* Previous attempts list */
.likert-test-attempts {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}

.likert-test-attempts li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 5px;
  &:last-child {
    border-bottom: 0px;
  }
}

.likert-test-attempts .attempt-date {
  font-weight: 500;
}

.likert-test-attempts .attempt-status {
  font-size: 0.9em;
  color: #666;
}

.likert-test-attempts .attempt-view,
.likert-test-attempts .attempt-resume {
  margin-top: 5px;
  text-align: center;
}

.likert-test-attempts .attempt-view {
  background: #f0f0f0;
  color: #333;
}

/* Questions */
.likert-test-progress {
  margin-bottom: 0px;
  font-size: 1em;
  color: #666;
}

.likert-question {
  margin-bottom: 30px;
}

.likert-question-text {
  margin-bottom: 20px;
}

.likert-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: hsla(var(--theme-var-colors-muted-hsl), 1);
  color: var(--colors-dark-shades-dark);
  transition: background-color 0.2s;
}

.likert-option:hover {
  background-color: #f5f5f5;
}

.likert-option input {
  margin-right: 12px;
}

.likert-option span {
  flex: 1;
}

/* Navigation */
.likert-navigation {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* .likert-navigation .next-question:hover, */
.likert-navigation .submit-test:hover {
  background-color: var(--colors-primary-shades-light);
  color: var(--colors-bg-primary-text);
}

.likert-test-details {
  padding: 0.5rem;
  p {
    font-size: var(--theme-var-text-s);
    line-height: var(--theme-var-text-s-line-height);
  }
}

/* Question Navigator */
/* Question Navigator - Vertical Layout */
.question-navigator-wrapper {
  scrollbar-gutter: stable;
  flex-grow: 1;
  height: 1px;
  min-height: 200px;
  overflow-y: auto;
}
.question-navigator {
  --questions-gap: 0.7em;
  /* flex-grow: 1; */
  list-style: none;
  padding: 0 5px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--questions-gap, 10px);
  font-size: var(--theme-var-text-s);
  line-height: var(--theme-var-text-s-line-height);

  li {
    width: 100%;
    position: relative;
    transition: all 0.1s ease-in 0s;

    &:before {
      content: "";
      width: 2px;
      height: var(--questions-gap, 0);
      background: hsla(var(--theme-var-colors-muted-hsl), 1);
      position: absolute;
      left: 1em;
      bottom: calc(-1 * (var(--questions-gap, 0)));
    }

    a {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      gap: 1rem;
      overflow: hidden;
      color: hsl(var(--theme-var-colors-dark-hsl));
      text-decoration: none;
      transition: background-color 0.2s;

      .question-decoration {
        flex-shrink: 0;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        height: 2em;
        padding: 1em;
        border-radius: 2em;
        background-color: hsl(var(--theme-var-colors-light-hsl));
        border: 1px solid hsla(var(--theme-var-colors-dark-hsl), 0.2);
        transition: all 0.1s ease-out 0s;

        .question-checkmark svg {
          width: 1.5em;
          display: none;
        }
      }
      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &.answered {
      .question-decoration {
        background-color: hsl(var(--theme-var-colors-secondary-hsl));
        color: hsl(var(--theme-var-colors-light-hsl));
        border: 1px solid hsla(var(--theme-var-colors-dark-hsl), 0.2);

        .question-index {
          display: none;
        }

        .question-checkmark {
          svg {
            display: block;
            path {
              fill: hsl(var(--theme-var-colors-light-hsl));
            }
          }
        }
      }
    }

    &:hover,
    &.active {
      .question-decoration {
        background-color: hsl(var(--theme-var-colors-primary-hsl));
        color: hsl(var(--theme-var-colors-light-hsl));
        border: 1px solid hsla(var(--theme-var-colors-dark-hsl), 0.2);
      }
    }

    &:last-child {
      &:before {
        bottom: 0;
      }
    }
  }
}

.save-controls {
  margin-top: 20px;
  text-align: center;
}

.save-progress-sidebar {
  /* width: 100%; */
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.result-group {
  margin-bottom: 20px;
}

.result-group-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.result-score {
  margin-bottom: 5px;
  font-size: 1.2em;
}

/*
 * Progress Bars
 */
.test-progress-bar-title {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-bar,
.test-progress-bar {
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.test-progress-bar {
  margin-bottom: 35px;
}

.result-bar-fill,
.test-progress-bar-fill {
  height: 100%;
  background-color: var(--theme-var-colors-success);
  border-radius: 10px;
}

.results-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  .action-icons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .action-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    .likert-test-button {
      margin-top: 0;
    }
  }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  /* .likert-test-container {
    flex-direction: column;
  }

  .likert-test-sidebar {
    width: 100%;
    order: 2;
  } */

  /* .question-navigator li {
      width: calc(16.66% - 5px);
    } */
}

/*
 * Results Page
 */
.likert-test-results-container {
  display: flex;
  flex-direction: row;
  gap: 30px;
  /* max-width: 1200px; */
  height: 100%;
  margin: 0 auto;
  background-color: var(--theme-var-colors-dark-shades-ultra-light);
}

.likert-test-results-sidebar {
  width: 450px;
  flex-shrink: 0;
  /* padding: 2rem 0.5rem; */
  padding: 30px 0 30px 30px;
}
.likert-test-results-sidebar-wrapper {
  background-color: hsl(var(--theme-var-colors-light-hsl));
  padding: 30px 20px;
  border-radius: 20px;
  position: sticky;
  top: 30px;
}

.likert-test-results-main {
  flex: 1;
  min-width: 0;
  padding: 30px 30px 30px 0px;
}

.likert-test-results-main-wrapper {
  background-color: hsl(var(--theme-var-colors-light-hsl));
  padding: 30px;
  border-radius: 20px;
}

.results-summary {
  /* margin: 30px 0; */
  .summary-title {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 50px;
    &:after {
      content: "";
      flex-grow: 1;
      display: block;
      height: 0.2em;
      background-color: hsl(var(--theme-var-colors-accent1-hsl));
    }
  }
}

/*
 * Modal
 */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  /* width: 100%;
  height: 100%; */
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 50px 30px;
  border-radius: 15px;
  width: 80vw;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  &#customModal-top-three {
    height: 80vh;
  }
  .close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 40px;
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    &:hover {
      color: #000;
    }
  }
  .modalTitle {
    margin-bottom: 30px;
  }
}

#customModal-top-three,
#customModal-second-top-three {
  .modal-content {
    margin: auto;
    height: 80vh;
  }
}

.person-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  .user-meta {
    width: 100%;
  }
}

.card {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid #dedede;
  border-radius: 15px;

  &:has(.card-title) {
    padding-top: 0px;
  }

  + .card {
    margin-top: 50px;
  }

  .card-title {
    background-color: hsl(var(--theme-var-colors-light-hsl));
    display: inline-block;
    line-height: 1.2;
    padding: 5px 10px;
    transform: translate(15px, -50%);
    margin-bottom: 0;
  }
}

.likert-test-intro-page {
  .likert-test-sidebar {
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    /* justify-content: center; */
  }
  .likert-test-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}

.likert-guests-tests {
  .likert-test-results-sidebar-wrapper,
  .likert-test-results-main-wrapper {
    height: 100%;
  }
  .likert-test-results-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .test-details {
      display: flex;
      flex-direction: column;
      align-items: center;
      .test-title {
        text-align: center;
      }
    }
  }
  .likert-test-results-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: stretch;
    .statistics-block {
      width: 100%;
    }
  }
}

.login-signup-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 30px;
  border-radius: 15px;
  #likert-loginform {
    width: 100%;
    label {
      color: hsl(
        var(--theme-var-colors-dark-h),
        var(--theme-var-colors-dark-s),
        35%
      );
      text-align: left;
    }
    input {
      text-align: left;
      border-radius: 6px;
    }
    p {
      margin: 0 0 0.8em;
      &:last-child {
        margin: 0;
      }
    }
  }
  .login-error {
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--theme-var-colors-dark-shades-ultra-light);
    border: 1px solid var(--theme-var-colors-dark-shades-light);
  }
}

.likert-signup-wrapper {
  text-align: center;
  a.likert-test-signup-link {
    color: var(--theme-var-colors-primary-shades-medium);
    &:hover {
      color: var(--colors-primary-shades-hover);
    }
  }
}

#likert-loginform .login-submit .button.button-primary {
  margin-top: 0;
}

.likert-test-results-kepa {
  .result-group.card {
    container-type: inline-size;
    .card-content {
      display: flex;
      gap: 20px;
      padding: 30px;
    }
  }
}

@container (max-width: 1180px) {
  .likert-test-results-kepa {
    .result-group.card {
      .card-content {
        flex-direction: column;
      }
    }
  }
}

@container (max-width: 595px) {
  .likert-test-results-kepa {
    .result-group.card {
      .card-content {
        .statistics-group {
          flex-direction: column;
        }
      }
    }
  }
}

.likert-test-results {
  .statistics-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }
}

.error-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-var-colors-dark-shades-ultra-light);
  padding: 20px;
  .error-wrapper {
    background-color: hsl(var(--theme-var-colors-light-hsl));
    width: 700px;
    max-width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 15px;
    .likert-test-error-message {
      font-weight: 600;
      font-size: var(--theme-var-text-l);
      line-height: var(--theme-var-text-l-line-height);
      text-align: center;
      text-wrap: balance;
    }
    .likert-test-error-user-actions {
      .likert-test-button {
        margin-top: 0;
      }
    }
  }
}

.results-summary .error-container {
  background-color: transparent;
  margin-top: 10px;
  margin-bottom: 10px;
  .error-wrapper {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.likert-test-sidebar {
  .likert-test-attempts-wrapper {
    flex-grow: 1;
    height: 1px;
    min-height: 210px;
    overflow-y: scroll;
  }
  .user-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    .likert-test-button {
      margin-top: 10px;
    }
  }
}

.individual-results-header {
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
}

.individual-results-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  container-type: inline-size;
  .individual-result {
    width: calc(50% - 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 1px solid #dedede;
    border-radius: 15px;
  }
}

@container (max-width: 1180px) {
  .individual-results-wrapper {
    .individual-result {
      width: 100%;
    }
  }
}

.likert-test-results-kepen .top-results {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 30px 0;
  .top-results-details-wrapper {
    .first-top-results-details,
    .second-top-results-details {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 10px;
    }
    .color-indicator {
      display: block;
      width: 10px;
      border-radius: 15px;
    }
    .code-details {
      padding: 10px 0;
      .code-label {
        font-size: var(--theme-var-text-m);
      }
      .code-text {
        font-size: var(--theme-var-text-l);
      }
    }
  }
}

@media only screen and (max-width: 1450px) {
  .login-signup-wrapper {
    flex-grow: 0;
  }
  .likert-test-intro-page {
    .likert-test-sidebar {
      justify-content: flex-start;
    }
  }
}

@media only screen and (max-width: 1250px) {
  .likert-test-intro-page .likert-test-main {
    padding: 30px 20px;
  }
}

@media only screen and (max-width: 1155px) {
  .likert-test-results {
    .likert-test-results-container {
      flex-direction: column;
      gap: 0;
      .likert-test-results-sidebar {
        width: 100%;
        padding: 30px 30px 15px 30px;
      }
      .likert-test-results-main {
        padding: 15px 30px 30px 30px;
        .summary-title {
          text-align: center;
        }
      }
    }
  }
}

@media only screen and (max-width: 930px) {
  .top-results {
    flex-direction: column;
    .top-results-details-wrapper {
      display: flex;
      flex-direction: row;
      gap: 20px;
    }
  }
}

@media only screen and (max-width: 700px) {
  .likert-test-intro-page {
    .likert-test-container {
      flex-direction: column;
      gap: 0;
      .likert-test-sidebar {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
        align-items: stretch;
        .login-signup-wrapper {
          width: 600px;
          max-width: 100%;
        }
      }
    }
  }
  .likert-test-page {
    .likert-test-container {
      flex-direction: column;
      .likert-test-sidebar {
        width: 100%;
        max-width: 100%;
        .question-navigator {
          height: 155px;
        }
      }
      .likert-test-main {
        padding: 30px 20px;
      }
    }
  }
  .likert-test-results {
    .likert-test-results-container {
      .likert-test-results-sidebar {
        padding: 30px 20px 15px 20px;
      }
      .likert-test-results-main {
        padding: 15px 20px 30px 20px;
        .top-results-details-wrapper {
          flex-direction: column;
        }
        .individual-result {
          .statistics-group {
            flex-direction: column;
          }
        }
      }
    }
  }
}

.custom-radar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  margin-top: 15px;
}

.chartContainer {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  svg {
    max-width: 100%;
  }
}

#customRadarTooltip {
  position: fixed;
  display: none;
  background-color: #333;
  color: white;
  border: 1px solid #555;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none; /* So it doesn't interfere with mouse events */
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  transform: translate(10px, 10px); /* Initial offset */
  &.visible {
    display: block;
    opacity: 1;
  }
}

/* Buttons */
.likert-test .likert-test-button,
.likert-test a.likert-test-button,
.likert-test button.likert-test-button,
#likert-loginform input[type="submit"] {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 5px -5px rgba(var(--colors-dark-hsl), 0.5);
  font-family: var(--theme-var-button-font-family, "Unageo");
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0px;
  margin-top: 15px;
  background-color: var(--theme-var-colors-light);
  color: var(--theme-var-colors-dark);
  border: 1px solid hsla(var(--colors-dark-hsl), 0.5);
  transition: all 0.2s ease-in-out 0s;
  &:hover {
    box-shadow: 0 4px 4px -4px hsla(var(--colors-dark-hsl), 0.6);
    color: var(--theme-var-colors-dark);
  }
  &.small-button {
    padding-top: 0.6em;
    padding-right: 1.4em;
    padding-bottom: 0.6em 7.584px;
    padding-left: 1.4em;
    font-size: 0.79em;
  }
  &.primary-button,
  &.button-primary {
    background-color: var(--theme-var-colors-primary);
    color: var(--colors-bg-primary-text);
    border: 1px solid var(--colors-primary);
    &:hover {
      background-color: var(--colors-primary-shades-light);
      color: var(--theme-var-colors-dark);
    }
  }
  &.secondary-button {
    background: var(--theme-var-colors-secondary);
    color: white;
    &:hover {
      background: hsla(var(--colors-secondary-hsl), 0.5);
      color: var(--theme-var-colors-dark);
    }
  }
}