/* app.css */

[v-cloak] {
  visibility: hidden;
}

html {
  scroll-behavior: auto !important;
}

html,
body {
  font-size: 14px !important;
}

body {
  overflow-y: scroll;
}

body:has(#splashscreen:not(.d-none)) {
  overflow: hidden;
  cursor: wait !important;
  user-select: none !important;
  pointer-events: none !important;
}

#splashscreen-logo {
  width: 300px;
}

#splashscreen-logo {
  width: 300px;
}

[data-bs-theme="dark"] #splashscreen-logo path {
  fill: #fff !important;
}

#splashscreen .loading-bar {
  width: 280px;
}

header .nav-link.active {
  font-weight: 600 !important;
}

header nav.nav-pills a.nav-link.active {
  color: rgb(33, 37, 41) !important;
  background: #fff !important;
}

header nav.nav-pills a.nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
}

main {
  width: 100%;
  grid-area: main;
}

/* tables */

table.dataTable {
  width: 100% !important;
  max-width: 100% !important;
}

tr.selected {
  --bs-table-color: #000;
  --bs-table-bg: #cfe2ff !important;
}

/* search */
.dataTables_wrapper > .row:first-child input[type="search"] {
  min-width: 240px;
}

/* sticky header */
.dataTables_wrapper > .row:first-child {
  /*
  position: sticky !important;
  top: 0;
  z-index: 9998;
  background: #fff;
  */
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* payments special striped */
#payments table tbody tr[role="row"].odd:not(.selected),
#payments table tbody tr[role="row"].odd:not(.selected) + tr.child,
#archive table tbody tr[role="row"].odd,
#archive table tbody tr[role="row"].odd + tr.child {
  background: #f9f9f9;
}
#payments table tbody tr[role="row"].even:not(.selected),
#payments table tbody tr[role="row"].even:not(.selected) + tr.child,
#archive table tbody tr[role="row"].even,
#archive table tbody tr[role="row"].even + tr.child {
  background: #fff;
}

.no-stretch {
  width: 1%;
  white-space: nowrap;
}

#open-docs-modal table td:empty {
  background: #fefefe !important;
}

#payments table td.child > * {
  margin-bottom: 1rem;
}

#payments table td.child > *:last-child {
  margin-bottom: 0;
}

/* modal */

.modal {
  z-index: 5040;
  overflow: hidden !important;
}

.modal-backdrop {
  z-index: 5030;
}

.modal-body {
  overflow-x: hidden;
}

/* modal animation */
.modal.fade {
  transition-duration: 0.1s !important;
}

.modal.fade .modal-dialog {
  transition: transform 0.1s !important;
  transform: scale(0.95);
}

.modal.fade.show .modal-dialog {
  transform: none !important;
}

/* misc */

#payments table .child .card:last-child {
  margin-bottom: 0 !important;
}

/* incopay note */
.incopay-note {
  color: #212529;
}

/* custom date input */
input[name="valuta-date"]::-webkit-inner-spin-button,
input[name="valuta-date"]::-webkit-calendar-picker-indicator {
  display: none;
}

/* more button icon */
table .dropdown .dropdown-toggle:after,
table .btn-group .dropdown-toggle:after {
  display: none;
}

/* payment morale */
select.payment-morale {
  -webkit-appearance: none;
  appearance: none;
  text-align-last: center;
  width: 33.5px;
}

select.payment-morale option {
  color: #000;
  background: #fff;
}

/* status badge */
select.status-badge {
  width: auto !important;
  -webkit-appearance: none;
  appearance: none;
  text-align-last: center;
  background: transparent;
  font-size: 14px;
}

select.status-badge:focus {
  color: #fff;
}

select.status-badge option {
  color: #000;
  background: #fff;
}

/* booking report button */
.booking-report-toggle .btn {
  width: 33.5px;
  height: 33.5px;
}

.booking-report-toggle label.focus:not(.active),
.booking-report-modal-toggle label.focus:not(.active) {
  background: #fff !important;
  color: #007bff !important;
}

.booking-report-toggle i,
.booking-report-modal-toggle i {
  pointer-events: none;
}

/* order status */
select.open-doc-status {
  border: 0;
  line-height: 1.2;
}

/* loading */
.loading {
  position: relative;
  pointer-events: none;
}

.loading .card-body::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(static/img/loading-32x32.gif);
  background-position: center;
  background-size: 32px;
  background-repeat: no-repeat;
  border-radius: inherit;
  z-index: 9997;
}

/* tooltip */

.tooltip {
  white-space: nowrap;
}

/* Hide the popper when the reference is hidden */
.tooltip[x-out-of-boundaries] {
  visibility: hidden;
  pointer-events: none;
}

/* cursors */
[data-action="paste-into-payment-sum"] {
  cursor: copy;
}

/* new */

td.child {
  padding: 1.5rem 0rem 2rem 2rem;
}

.tree-element,
.open-item-card {
  position: relative;
}

.tree-element::before,
.open-item-card::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  border-left: 1px solid #ddd;
  height: calc(100% + 22px);
  left: -20px;
  top: -22px;
}

.tree-element:last-of-type:before,
.open-item-card:last-of-type:before {
  height: calc(50% + 22px);
}

.tree-element::after,
.open-item-card::after {
  content: "";
  display: block;
  position: absolute;
  border-bottom: 1px solid #ddd;
  width: 20px;
  height: 1px;
  left: -20px;
  top: 50%;
}

.tree-element > .btn:last-child {
  position: relative;
}

.tree-element > .btn:last-child::before {
  content: "";
  display: block;
  position: absolute;
  border-bottom: 1px solid #ddd;
  width: 16px;
  height: 1px;
  left: -16px;
  top: 50%;
}

.open-item-card .card-header::before {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  left: -24px;
  top: calc(50% - 4px);
  border-radius: 50%;
  z-index: 2;
}

.open-item-card.open-inv-card .card-header::before {
  background: #007bff;
}

.open-item-card.open-oc-card .card-header::before {
  background: #ffc107;
}

/* input groups */

.input-group-success .input-group-text,
.input-group-success input {
  color: rgb(25, 135, 84) !important;
  border-color: rgb(25, 135, 84) !important;
}

.input-group-warning .input-group-text,
.input-group-warning input {
  color: rgb(255, 193, 7) !important;
  border-color: rgb(255, 193, 7) !important;
}

.input-group-danger .input-group-text,
.input-group-danger input {
  color: rgb(220, 53, 69) !important;
  border-color: rgb(220, 53, 69) !important;
}

.input-group-success:has(.tooltip) .form-control + .input-group-text,
.input-group-warning:has(.tooltip) .form-control + .input-group-text,
.input-group-danger:has(.tooltip) .form-control + .input-group-text {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

input.form-control[name="valuta-date"] {
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

/* loading bar */

.loading-bar {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.1);
}

.loading-bar .indeterminate {
  border-radius: 0px;
}

.loading-bar .indeterminate:before,
.loading-bar .determinate:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  border-radius: 0px;
}

.loading-bar .indeterminate:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
  border-radius: 0px;
}

.loading-bar .determinate {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  transition: all 400ms linear;
  border-radius: 0px;
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}

.slideFadeOut {
  animation: slideFadeOut 250ms both;
}

@keyframes slideFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* modal */

body:has(.modal.d-block) {
  overflow: hidden;
}

.modal,
.modal-content {
  transition: all 0.1s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-content,
.modal-leave-to .modal-content {
  transform: scale(1.02);
}

.btn-info {
  color: rgba(248, 249, 250, 1) !important;
}