@import url('css/variables.css');

html {
  visibility: hidden;
}

html[data-bs-theme="dark"],
html[data-bs-theme="light"] {
  visibility: visible;
}


[data-bs-theme="dark"] .btn-outline-dark {
  color: var(--bs-body-text);
  background-color: var(--bs-btn-color);
  border-color: var(--bs-border-color);

  &:hover {
    background-color: var(--search-bar-hover-bg);
  }

  &:focus {
    color: var(--bs-gray-600);
  }
}

[data-bs-theme="dark"] .btn-light {
  color: var(--bs-body-text);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .btn-light:hover {
  background-color: var(--btn-hover) !important;
}


[data-bs-theme="dark"] .card {
  background-color: var(--bs-dark-bg-subtle) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--bs-body-text) !important;
}

[data-bs-theme="dark"] .text-success {
  color: #51c17e !important;
}

.navbar-nav {
  flex-direction: row;
}

#top-right-nav .dropdown-item {

  &:focus,
  &:focus-visible,
  &:hover {
    background-color: #4d5154 !important;
  }

  &:focus-visible {
    outline: none !important;
  }
}

#language-toggle {

  text-decoration: none;

  &:focus-visible {
    box-shadow: 0 0 0 4px #373b3e !important;
    background-color: #4d5154 !important;
  }
}


/* Make the footer div centered, small, and bottom of the page */
#footer {
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Height of the footer */
  background: var(--bg-light-gray);
  text-align: center;
  font-size: 12px;
  line-height: 60px;
  /* Height of the footer */
  /* position: absolute; */
}

footer a {
  color: var(--bs-primary-text-emphasis);
}

.dz {
  border: dashed !important;
  background-color: aliceblue !important;
  border-radius: 10px !important;
}

.dz:hover {
  background-color: aliceblue !important;
}

nav#breadcrumbs {
  background: var(--app-primary-bg);
}

nav#breadcrumbs a {
  color: var(--bs-primary-text-emphasis)
}

nav#breadcrumbs a:not(:hover) {
  text-decoration: none;
}

/* Show app list columns at large sizes */
@media (min-width: 768px) {
  div#app-list {
    column-count: 2;
  }
}

@media (min-width: 1260px) {
  /* div#app-list {
    column-count: 3;
  } */

  div#app-list.cols-2 {
    column-count: 2;
  }
}

/* 
@media (min-width: 1600px) {
  div#app-list {
    column-count: 4;
  }
} */

div.app-card {
  cursor: pointer;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  text-decoration: none !important;
}

div.app-category {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}


div.app-card:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Left column */
.app-card-ai_assistant {
  border-left: solid 5px var(--app-color-purple-1);
}

.app-card-title {
  font-size: 1.25rem;
}

div.app-card-ai_assistant:hover {
  box-shadow: 0 0 0 0.25rem var(--app-color-purple-1-hover);
}

.app-card-monitoring {
  border-left: solid 5px var(--app-color-purple-3)
}

div.app-card-monitoring:hover {
  box-shadow: 0 0 0 0.25rem var(--app-color-purple-3-hover);
}

/* Centre column */
.app-card-translation {
  border-left: solid 5px var(--app-color-green-1);
}

div.app-card-translation:hover {
  box-shadow: 0 0 0 0.25rem var(--app-color-green-1-hover);
}

.app-card-reporting {
  border-left: solid 5px var(--app-color-green-2);
}

div.app-card-reporting:hover {
  box-shadow: 0 0 0 0.25rem var(--app-color-green-2-hover);
}


.app-card-other {
  border-left: solid 5px var(--app-color-blue-2);
}

div.app-card-other:hover {
  box-shadow: 0 0 0 0.25rem var(--app-color-blue-2-hover);
}

#top-nav {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: 3rem;
}

#top-nav-search-input input {
  border-width: 2px;
  border-color: var(--search-bar-border);
}

div#top-nav-search {
  left: 50%;
  width: 400px;
  margin-left: -200px;
  zoom: 0.81;
  top: calc(0.25rem + 1px);
}


@media (max-width: 1200px) {
  div#top-nav-search {
    display: none;
  }
}

div#top-nav-search-results {
  display: none;
  z-index: 100;
  position: absolute;
  max-height: 500px;
  overflow-y: auto;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  top: 53px;
  border: solid 1px #333;
  scrollbar-width: none;
  margin-left: -50px;
}

div#top-nav-search-results a {
  width: 500px;
}

[data-bs-theme="light"] [data-bs-theme="dark"] div#top-nav-search-results a:focus {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  outline: none !important;
  background: var(--bs-gray-500) !important;
}

[data-bs-theme="dark"] [data-bs-theme="dark"] div#top-nav-search-results a:focus,
[data-bs-theme="dark"] [data-bs-theme="dark"] div#top-nav-search-results a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  outline: none !important;
  background: var(--search-bar-hover-bg) !important;
}

div#top-nav-search-results div.list-group {
  margin-left: -1px;
  margin-right: -1px;
  margin-top: -1px;
}

div#top-nav-search-results::-webkit-scrollbar {
  display: none;
}

div#manual-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 10;
}

body.search-active div#manual-lightbox-overlay,
body.search-active div#top-nav-search-results {
  display: block;
  opacity: 1;
}

ul.navbar-nav .btn-check:checked+.btn,
ul.navbar-nav .btn.active,
ul.navbar-nav .btn.show,
ul.navbar-nav .btn:first-child:active,
ul.navbar-nav :not(.btn-check)+.btn:active,
ul.navbar-nav .btn:hover {
  background: transparent;
  border-color: transparent;
}

li.notification {
  width: 400px;
}

li.notification:last-of-type {
  padding-bottom: 8px !important;
}

#puller-version {
  font-size: 0.7rem;
}

#bell .badge {
  zoom: 0.7;
}

[data-bs-theme="light"] [data-bs-theme="dark"] .text-bg-light {
  color: var(--black) !important;
  background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;

  &:hover {
    background-color: var(--bs-gray-400) !important;
  }
}

[data-bs-theme="dark"] [data-bs-theme="dark"] .text-bg-light {
  color: var(--puller-primary-text-color) !important;
  background-color: var(--app-primary-bg) !important;

  &:hover {
    background-color: var(--bs-gray-800) !important;
  }
}

[data-bs-theme="dark"] [data-bs-theme="dark"] .text-bg-light:focus {
  background-color: var(--bs-black) !important;
}

[data-bs-theme="dark"] .phac_aspc_form_autocomplete ul.ac_container li.chip a svg {
  fill: var(--puller-primary-text-color);
}

[data-bs-theme="dark"] .phac_aspc_form_autocomplete {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  &::after {
    border-color: var(--bs-border-color);
  }
}

div.phac_aspc_form_autocomplete div.results.show {
  margin-top: calc(.375rem - 1px);
  margin-left: calc(-0.75rem - 1px);
  width: 100%;
}

[data-bs-theme="dark"] .phac_aspc_form_autocomplete .results {
  background-color: var(--app-primary-bg);
}

div.phac_aspc_form_autocomplete_focus_ring {
  padding: 0;
}

[data-bs-theme="dark"] .phac_aspc_form_autocomplete ul.ac_container li.chip {
  background-color: var(--search-bar-hover-bg);
  color: var(--puller-primary-text-color);
  background-image: linear-gradient(#282d32 20%, #282d32 50%, #23272b 52%, #1e2225 100%);
  box-shadow: none;
  border-color: var(--chat-user-choice-button-hover);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  align-items: center;
  flex-wrap: wrap;
  display: inline-flex;
}

div.phac_aspc_form_autocomplete_focus_ring.active {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
  border: 0;
  /* border: 1px solid #86b7fe; */
  border-radius: 0.375rem;
  transition: box-shadow .15s ease-in-out;
  padding: 0;
}

div.phac_aspc_form_autocomplete_focus_ring.active>div {
  color: initial;
  background-color: initial;
}

div.phac_aspc_form_autocomplete .results .item {
  padding: 1px 1rem 1px 1rem;

  [data-bs-theme="dark"] & {
    color: var(--puller-primary-text-color);

    &:hover {
      background-color: var(--search-bar-hover-bg);
    }
  }
}

.spinner {
  display: none;
}

.htmx-request.spinner {
  display: block;
}


.security-label {
  font-weight: normal;
  border: solid 1px #ccc;
  text-align: center;
  color: var(--puller-primary-text-color);

  [data-bs-theme="dark"] & {
    background: var(--puller-tab-body-bg-color);
    color: var(--puller-primary-text-color);
  }
}

.security-label-UC,
.security-label-NC {
  /* bootstrap bg-light colors */
  background: var(--puller-tab-body-bg-color);
  color: var(--puller-primary-text-color);


  [data-bs-theme="dark"] & {
    background: var(--puller-tab-body-bg-color);
    color: var(--puller-primary-text-color);
  }
}

[data-bs-theme="dark"] .btn-outline-success {
  background-color: var(--library-bulk-btn-bg);
  color: var(--terms-of-use-agree-text);
}

[data-bs-theme="dark"] .btn-outline-danger {
  color: var(--chat-delete-text);
  border-color: var(--chat-delete-text);

  &:hover {
    background-color: var(--app-color-red-2-hover);
  }
}

[data-bs-theme="light"] .security-btn:hover {
  background-color: var(--bs-gray-700);
  border-color: var(--bs-gray-700);
  color: var(--puller-tab-body-bg-color);
}

[data-bs-theme="dark"] .security-btn:hover {
  border-color: var(--bs-gray-700);
}

.security-label-PA {
  /* light warning colors */
  background-color: var(--puller-tab-body-bg-color);
  border-color: var(--security-PA-border);

  [data-bs-theme="light"] & {
    background-color: var(--security-PA-bg);
    border-color: var(--security-PA-border);
  }
}

.security-label-PB {
  /* light danger colors */
  background-color: var(--puller-tab-body-bg-color);
  border-color: var(--security-PB-border);

  [data-bs-theme="light"] & {
    background-color: var(--security-PB-bg);
    border-color: var(--security-PB-border);
  }
}

.icn-spinner {
  animation: spin-animation 1.1s infinite;
  display: inline-block;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes bounce-animation {
  0% {
    transform: translatey(0px);
  }

  20% {
    transform: translatey(-10px);
  }

  40% {
    transform: translatey(5px);
  }

  60% {
    transform: translatey(-5px);
  }

  80% {
    transform: translatey(2px);
  }

  99% {
    transform: translatey(0px);
  }
}

ul.errorlist ul:not(:last-child) {
  margin-bottom: 0.75rem;
}

ul.errorlist p {
  margin-bottom: 0.25rem;
}

#step-content {
  background-color: var(--puller-tab-body-bg-color);
}

.btn-preset-save:hover,
.btn-outline-secondary:hover {
  [data-bs-theme="dark"] & {
    color: var(--bg-white);
    background-color: var(--bs-gray-700) !important;
    border-color: transparent;
  }
}

[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] #prompt-form button,
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-preset-save {
  color: var(--bs-secondary-color);
  background-color: var(--prompt-send-btn-bg);
}

.toast-sticky {
  /* increase z-index to show over modals */
  z-index: 1070;
}

/* Driver.js overrides */

.driver-popover * {
  font-family: var(--bs-body-font-family) !important;
}

.driver-popover *:focus {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

svg.driver-overlay {
  /* Match Bootstrap modal overlay */
  opacity: 0.72;
}

[data-bs-theme="dark"] .driver-popover {
  background-color: var(--bs-light-bg-subtle);
  color: white;
  border: solid 3px var(--bs-light-border-subtle);
}

[data-bs-theme="dark"] .driver-popover-progress-text {
  color: var(--puller-primary-text-color);
}

[data-bs-theme="dark"] .driver-popover-arrow {
  border: 5px solid var(--bs-light-border-subtle);
  margin: 3px;
}

[data-bs-theme="dark"] .driver-popover-arrow-side-left {
  left: 100%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent
}

[data-bs-theme="dark"] .driver-popover-arrow-side-right {
  right: 100%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent
}

[data-bs-theme="dark"] .driver-popover-arrow-side-top {
  top: 100%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-bs-theme="dark"] .driver-popover-arrow-side-bottom {
  bottom: 100%;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent
}

[data-bs-theme="dark"] .driver-popover *:focus {
  box-shadow: 0 0 0 .25rem rgb(62 105 169);
}

[data-bs-theme="dark"] .driver-popover-close-btn:hover,
[data-bs-theme="dark"] .driver-popover-close-btn:focus {
  color: #fff;
}