// info box in the test results
#info_box .card-border-warning .card-header {
  background-color: $color-softfailed;
  color: $color-result;
}
.modules-badge {
  font-size: 85%;
  position: absolute;
  top: 8px;
  right: 8px;
}

// test result
.resultok {
  background-color: $color-ok !important;
  color: $color-result !important;
}
.resultpassed {
  background-color: $color-ok !important;
  color: $color-result !important;
}
.resultunknown {
  background-color: $color-result-missing !important;
  color: $color-result !important;
}
.resultrunning {
  background-color: $color-result-testing !important;
  color: $color-result !important;
}
.resultwarning {
  background-color: $color-warning !important;
  color: $color-result !important;
}
.resultsoftfailed {
  background-color: $color-softfailed !important;
  color: $color-result !important;
}
.resultfailed {
  background-color: $color-result-failed !important;
  color: $color-result !important;
}
.resultmissing {
  background-color: $color-result-missing !important;
  color: $color-result !important;
}
[data-bs-theme='dark'] {
  .resultok {
    background-color: darken($color-ok, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultpassed {
    background-color: darken($color-ok, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultunknown {
    background-color: darken($color-result-missing, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultrunning {
    background-color: darken($color-result-testing, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultwarning {
    background-color: darken($color-warning, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultsoftfailed {
    background-color: darken($color-softfailed, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultfailed {
    background-color: darken($color-result-failed, 75%) !important;
    color: $color-result-dark !important;
  }
  .resultmissing {
    background-color: darken($color-result-missing, 75%) !important;
    color: $color-result-dark !important;
  }
}

// Live view
.container_16 .live-sidebar {
  width: 280px;
}
.container_16 .live-content {
  min-width: 820px;
  width: calc(73% + (23% - 280px));
}
#liveterminal, #livelog {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  width: 100%;
  white-space: pre-wrap;
}
#livelog {
  height: 30em;
  overflow: hidden scroll;
}

// needle delete button
span.refpic {
  width: 80px;
  text-decoration: none;
  position: relative;
  display: block;
  margin-right: 5px;
  margin-top: 3px;
  float: left;
}

// font awesome icons
span.status [class*='fa-'] {
  font-size: 120%;
}
.status[class*='fa-'] {
  font-size: 110%;
  padding-left: 1em;
}
.action[class*='fa-'] {
  color: $default-font-color !important;
  opacity: 0.7;
}
[data-bs-theme='dark'] .action[class*='fa-'] {
  color: $default-font-color-dark !important;
}
div.flags {
  min-height: 1em;
}
.flag[class*='fa-'] {
  font-size: 85%;
  color: #999;
  padding: 1px;
}
.state_scheduled[class*='fa-'] {
  color: $color-state-scheduled;
}
.state_blocked[class*='fa-'] {
  color: $color-state-blocked;
}
.state_obsolete[class*='fa-'], .state_cancelled[class*='fa-'] {
  color: $color-state-cancelled;
}
.state_running[class*='fa-'], .state_uploading[class*='fa-'] {
  color: $color-state-running;
}
[class*='fa-'].module_failed {
  color: $color-failed;
}
[class*='fa-'].module_none {
  color: $color-module-none;
}
[class*='fa-'].module_passed {
  color: $color-module-passed !important;
}
[class*='fa-'].module_softfailed {
  color: $color-softfailed;
}
[class*='fa-'].module_skipped {
  color: $color-module-skipped;
}
[class*='fa-'].result_failed, [class*='fa-'].result_fail {
  color: $color-failed;
}
[class*='fa-'].result_incomplete {
  color: $color-incomplete;
}
[class*='fa-'].result_timeout_exceeded {
  color: $color-incomplete;
}
[class*='fa-'].result_none {
  color: $color-module-none;
}
[class*='fa-'].result_obsoleted {
  color: $color-module-none;
}
[class*='fa-'].result_parallel_failed {
  color: $color-module-none;
}
[class*='fa-'].result_parallel_restarted {
  color: $color-module-none;
}
[class*='fa-'].result_passed, [class*='fa-'].result_ok {
  color: $color-module-passed !important;
}
[class*='fa-'].result_skipped {
  color: $color-module-none;
}
[class*='fa-'].result_softfailed, [class*='fa-'].result_softfail {
  color: $color-softfailed;
}
[class*='fa-'].result_unknown {
  color: $color-warning;
}
[class*='fa-'].result_user_cancelled {
  color: $color-module-none;
}
[class*='fa-'].result_user_restarted {
  color: $color-module-none;
}
[class*='fa-'].comment, [class*='fa-'].bookmark, [class*='fa-'].bug, [class*='fa-'].certificate, [class*='fa-'].tag {
  color: $color-labels;
}
.label_bug[class*='fa-bolt'] {
  padding: 0 3px;
  color: $color-bolt;
}
.label_bug.bug_closed {
  color: $color-bug-closed;
  transform: rotate(180deg);
}

// developer mode
#developer-form {
  h3 {
    font-size: $font-size-base;
    font-weight: 500;
    margin-bottom: 0;
  }
  input[type='checkbox'] {
    margin: 12px 0;
  }
}
#developer-flash-messages {
  &:first-child {
    margin-top: 20px;
  }
  .alert {
    cursor: default !important;
    span {
      text-align: left !important;
      font-weight: normal !important;
    }
  }
}

// settings and investigation table
#settings_box td {
  text-align: left;
}
html:not([data-bs-theme='dark']) {
  #settings_box, #investigation_status_entry {
    padding-top: 9px;
  }
}
#investigation_status_entry pre {
  margin: 2px 0;
}

// misc
.component {
  text-align: right;
}
span.thumbnail {
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin: 6px;
}
.ui-oo-content-wrapper .ui-oo-box-shadow > * > .thumbnail:first-child, .content-wrapper .box > * > .thumbnail:first-child {
  margin-top: 6px;
}
span.thumbnail.current {
  box-shadow: 0 0 3px 4px #666;
}
.resborder {
  border: solid 3px;
  padding: 0;
}
.resborder_ok {
  border-color: $color-resborder-ok;
}
.resborder_fail {
  border-color: $color-resborder-fail;
}
.resborder_unk, .resborder_missing {
  border-color: $color-resborder-unk;
}
.resborder_softfailed, .resborder_softfail {
  border-color: $color-softfailed;
}
[data-bs-theme='dark'] {
  .resborder_ok {
    border-color: darken($color-resborder-ok, 15%);
  }
  .resborder_fail {
    border-color: darken($color-resborder-fail, 15%);
  }
  .resborder_unk, .resborder_missing {
    border-color: darken($color-resborder-unk, 15%);
  }
  .resborder_softfailed, .resborder_softfail {
    border-color: darken($color-softfailed, 15%);
  }
}
img.resborder_na {
  padding: 4px;
}
span.resborder {
  width: 60px;
  height: 45px;
  display: inline-block;
  text-align: center;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: hidden;
  vertical-align: middle;
  background: #dfffff;
  font-size: small;
  padding: 1px;
  &.icon_audio {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  [class*='fa-question'], .step_actions {
    padding: 5px;
  }
  .step_actions {
    white-space: normal;
    float: right;
  }
}
[data-bs-theme='dark'] span.resborder {
  background: #200000;
}
span.resborder_na {
  overflow: hidden;
  padding: 4px;
}
.text-result {
  display: block;
  width: 100%;
  .resborder {
    min-width: -moz-available;
    min-width: -webkit-fill-available;
    min-width: fill-available;
    min-width: stretch;
    max-width: 100%;
    height: auto;
  }
}
.text-result, .serial-result-preview {
  .resborder {
    font-family: monospace;
    text-align: left;
    margin: 1px 0;
    border-top: none;
    border-bottom: none;
    border-right: none;
    padding-left: 0.4rem;
    background-color: #e8f1f1;
    max-height: 3.5rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-all;
    font-size: 74%;
    line-height: 1.1;
  }
}
[data-bs-theme='dark'] {
  .text-result, .serial-result-preview {
    .resborder {
      background-color: $default-bg-color-dark;
      color: lighten($link-color-dark, 25%);
    }
  }
}
.external-result-container {
  width: 100%;
}
.current_preview .text-result .resborder {
  max-height: none;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 20 / 100);
}
.embedded-logfile {
  white-space: pre-wrap;
  font-family: var(--bs-font-monospace);
  font-size: 0.875em;
  overflow: auto;
  .line-number {
    background-color: rgba(var(--dt-row-stripe), 0.05);
    border-right: 1px solid rgba(var(--dt-row-stripe), 0.15);
    text-align: right;
    vertical-align: top;
    padding-left: 3px;
    padding-right: 3px;
    user-select: none;
  }
  .line-content {
    padding-left: 10px;
  }
  .line-current {
    background-color: var(--bs-warning-bg-subtle);
  }
}
[data-bs-theme='dark'] .embedded-logfile {
  color: $default-font-color-dark;
}
h2.modcategory {
  margin-top: 0.9em !important;
}
ul.modcategory {
  margin-bottom: 0;
}
.modcategory {
  li.selected {
    a {
      font-weight: bold;
      color: black;
    }
  }
  li {
    a {
      &:focus {
        background: none;
      }
      &:hover {
        background: none;
      }
    }
  }
}
.no_hover:hover {
  text-decoration: none;
}
.candidate_needles {
  margin-right: 1em;
}
.step_actions {
  .step_action {
    color: $color-step-actions;
  }
  .new {
    position: relative;
    top: 8px;
    left: 8px;
    color: green;
  }
}

// filter for test details
.details-filter {
  margin-bottom: 10px;
  &.hidden {
    display: none;
  }
  & > div {
    margin-top: auto;
    margin-bottom: auto;
  }
  .form-control {
    display: inline-block !important;
    width: auto !important;
  }
  label {
    margin-bottom: 0;
  }
  .result-filter-container {
    text-align: right;
  }
}
.details-filter-toggle {
  display: inline-block;
  float: right;
  margin-top: -50px;
}
#result_tabs {
  // ensure filter icon and last .nav-item for tabs don't overlap
  padding-right: 40px;
}

// hide all tabs (actually their nav items) by default; they will be activated via JavaScript as needed
#result_tabs .nav-item {
  display: none;
}

// external results
#external-table {
  td[colspan='4'] {
    border-right: 1px solid $table-border-color;
  }
  td:nth-child(0n + 4) {
    height: auto;
    font-family: monospace;
    text-align: left;
    background-color: #e8f1f1;
    max-height: 3.5rem;
    white-space: pre-wrap;
  }
  td.result {
    text-align: center;
  }
  td.result-ok {
    background-color: $color-ok;
  }
  td.result-fail {
    background-color: $color-failed;
  }
  td.result-softfail {
    background-color: $color-softfailed;
  }
}
.top-right {
  top: 0;
  right: 0;
}
.pt-2-and-half {
  padding-top: 0.75rem !important;
}
#job-archived-badge {
  font-size: 110%;
  padding: 0.5rem 0.6rem;
  margin-top: -1rem;
  margin-bottom: -1rem;
  margin-left: 0.25rem;
}
.resultfile-list {
  li > [class*='fa-'] {
    width: 1.2rem;
    margin-right: 0.3rem;
    text-align: center;
  }
  [class*='fa-download'] {
    opacity: 0.5;
    margin-left: 0.25rem;
  }
  [class*='fa-download']:hover {
    opacity: inherit;
  }
}
.test-result-overview-link {
  position: relative;
  top: -0.1em;
  left: 0.2em;
  font-size: 75%;
  i {
    color: $link-color;
  }
  i:hover {
    color: $link-hover-color;
  }
}
[data-bs-theme='dark'] {
  .test-result-overview-link {
    i {
      color: $link-color-dark;
    }
    i:hover {
      color: $link-hover-color-dark;
    }
  }
  .card#info_box {
    background-color: $default-bg-color-dark;
    .btn-secondary, .btn-secondary:hover {
      color: $default-font-color-dark;
      background-color: lighten($default-bg-color-dark, 25%);
    }
    .btn-warning, .btn-warning:hover {
      color: $default-bg-color-dark;
    }
  }
  #settings td {
    border-top-color: rgba(255, 255, 255, 3 / 100);
  }
}
.info-panel-actions .help_popover {
  margin: 0;
}
@include media-breakpoint-up(xl) {
  .info-panel-actions {
    border-left: 1px solid #ccc;
    margin-left: 10px;
  }
}
@include media-breakpoint-down(lg) {
  .info-panel-actions {
    border-top: 1px solid #ccc;
    margin-top: 10px;
    padding-top: 10px;
  }
}
