:root {
  --grid-rows: 9;
  --grid-cols: 12;
  --dot-size: 4px;
  --grid-gap: 50px;
  --animation-duration: 3s;
  --star: shape(
    evenodd from 50% 24.787%,
    curve by 7.143% 18.016% with 0% 0% / 2.9725% 13.814%,
    curve by 17.882% 7.197% with 4.171% 4.2025% / 17.882% 7.197%,
    curve by -17.882% 8.6765% with 0% 0% / -13.711% 4.474%,
    curve by -7.143% 16.5365% with -4.1705% 4.202% / -7.143% 16.5365%,
    curve by -8.6115% -16.5365% with 0% 0% / -4.441% -12.3345%,
    curve by -16.4135% -8.6765% with -4.171% -4.2025% / -16.4135% -8.6765%,
    curve by 16.4135% -7.197% with 0% 0% / 12.2425% -2.9945%,
    curve by 8.6115% -18.016% with 4.1705% -4.202% / 8.6115% -18.016%,
    close
  );
  --flower: shape(
    evenodd from 17.9665% 82.0335%,
    curve by -12.349% -32.0335% with -13.239% -5.129% / -18.021% -15.402%,
    curve by -0.0275% -22.203% with -3.1825% -9.331% / -3.074% -16.6605%,
    curve by 12.3765% -9.8305% with 2.3835% -4.3365% / 6.565% -7.579%,
    curve by 32.0335% -12.349% with 5.129% -13.239% / 15.402% -18.021%,
    curve by 20.4535% -0.8665% with 8.3805% -2.858% / 15.1465% -3.062%,
    curve by 11.58% 13.2155% with 5.225% 2.161% / 9.0355% 6.6475%,
    curve by 12.349% 32.0335% with 13.239% 5.129% / 18.021% 15.402%,
    curve by 0.5715% 21.1275% with 2.9805% 8.7395% / 3.0745% 15.723%,
    curve by -12.9205% 10.906% with -2.26% 4.88% / -6.638% 8.472%,
    curve by -32.0335% 12.349% with -5.129% 13.239% / -15.402% 18.021%,
    curve by -21.1215% 0.5745% with -8.736% 2.9795% / -15.718% 3.0745%,
    curve by -10.912% -12.9235% with -4.883% -2.2595% / -8.477% -6.6385%,
    close
  );
  --hexagon: shape(
    evenodd from 6.47% 67.001%,
    curve by 0% -34.002% with -1.1735% -7.7% / -1.1735% -26.302%,
    curve by 7.0415% -12.1965% with 0.7075% -4.641% / 3.3765% -9.2635%,
    curve by 29.447% -17.001% with 6.0815% -4.8665% / 22.192% -14.1675%,
    curve by 14.083% 0% with 4.3725% -1.708% / 9.7105% -1.708%,
    curve by 29.447% 17.001% with 7.255% 2.8335% / 23.3655% 12.1345%,
    curve by 7.0415% 12.1965% with 3.665% 2.933% / 6.334% 7.5555%,
    curve by 0% 34.002% with 1.1735% 7.7% / 1.1735% 26.302%,
    curve by -7.0415% 12.1965% with -0.7075% 4.641% / -3.3765% 9.2635%,
    curve by -29.447% 17.001% with -6.0815% 4.8665% / -22.192% 14.1675%,
    curve by -14.083% 0% with -4.3725% 1.708% / -9.7105% 1.708%,
    curve by -29.447% -17.001% with -7.255% -2.8335% / -23.3655% -12.1345%,
    curve by -7.0415% -12.1965% with -3.665% -2.933% / -6.334% -7.5555%,
    close
  );
  --cylinder: shape(
    evenodd from 10.5845% 59.7305%,
    curve by 0% -19.461% with -0.113% -1.7525% / -0.11% -18.14%,
    curve by 10.098% -26.213% with 0.837% -10.0375% / 3.821% -19.2625%,
    curve by 29.3175% -13.0215% with 7.2175% -7.992% / 17.682% -13.0215%,
    curve by 19.5845% 5.185% with 7.1265% 0% / 13.8135% 1.887%,
    curve by 9.8595% 7.9775% with 3.7065% 2.1185% / 7.035% 4.8195%,
    curve by 9.9715% 26.072% with 6.2015% 6.933% / 9.4345% 16.082%,
    curve by 0% 19.461% with 0.074% 1.384% / 0.0745% 17.7715%,
    curve by -13.0065% 29.1155% with -0.511% 11.5345% / -5.021% 21.933%,
    curve by -26.409% 10.119% with -6.991% 6.288% / -16.254% 10.119%,
    curve by -20.945% -5.9995% with -7.6935% 0% / -14.8755% -2.199%,
    curve by -8.713% -7.404% with -3.255% -2.0385% / -6.1905% -4.537%,
    curve by -9.7575% -25.831% with -6.074% -6.9035% / -9.1205% -15.963%,
    close
  );
  --circle: shape(
    evenodd from 13.482% 79.505%,
    curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%,
    curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%,
    curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%,
    curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%,
    curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%,
    curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%,
    curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%,
    curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%,
    curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%,
    curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%,
    curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%,
    curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%,
    close
  );
}

#geminianimation {
  width: 200px;
  aspect-ratio: 1/1;
  margin: 50px auto;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    clip-path: var(--star);
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #494949;
    z-index: 1;
    transition: 1s ease-in-out;
  }
  div {
    width: 100%;
    height: 100%;
    scale: 0;
    transition: 1s ease-in-out;
    clip-path: var(--circle);

    &::after {
      content: "";
      background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
      width: 400%;
      height: 400%;
      position: absolute;
    }
  }
  &.active {
    &::before {
      background-color: #fafbfe;
      animation: rotasi 5s ease-in-out infinite alternate;
    }

    div {
      scale: 1;
      animation: shapeshift 5s ease-in-out infinite forwards;

      &::after {
        animation: gradientMove 3.5s ease-in-out infinite alternate;
      }
    }
  }
}

@keyframes shapeshift {
  0% {
    clip-path: var(--circle);
    rotate: 0turn;
  }

  25% {
    clip-path: var(--flower);
  }

  50% {
    clip-path: var(--cylinder);
  }

  75% {
    clip-path: var(--hexagon);
  }

  100% {
    clip-path: var(--circle);
    rotate: 1turn;
  }
}

@keyframes gradientMove {
  0% {
    translate: 0 0;
  }

  100% {
    translate: -75% -75%;
  }
}

@keyframes rotasi {
  0% {
    rotate: 0turn;
  }

  100% {
    rotate: 1turn;
  }
}

.glow-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  /* Buat Grid berdasarkan variabel */
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
  padding: 15px;
  box-sizing: border-box;
}

/* Gaya untuk setiap Dot */
.dot {
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: grey;
  border-radius: 50%;
  place-self: center; /* Memastikan dot berada di tengah setiap sel grid */

  /* Animasi dan Glow */
  animation: fade-and-glow var(--animation-duration) infinite alternate,
    slight-move 10s infinite ease-in-out alternate; /* Gerakan kecil agar lebih hidup */

  /* Menggunakan variabel --random-delay yang diisi oleh JavaScript */
  animation-delay: var(--random-delay, 0s);
  filter: drop-shadow(0 0 2px #121313);
  opacity: 0.2; /* Opasitas awal yang rendah */
}

/* Animasi Fade and Glow */
@keyframes fade-and-glow {
  0% {
    opacity: 0.1;
    filter: drop-shadow(0 0 1px #121313);
  }
  50% {
    opacity: 0.8;
    filter: drop-shadow(0 0 8px #121313) drop-shadow(0 0 16px #84858550);
  }
  100% {
    opacity: 0.1;
    filter: drop-shadow(0 0 1px #121313);
  }
}

div:where(.swal2-container) .swal2-html-container:has(#geminianimation) {
  text-align: inherit;
}

#step-tabs .is-completed {
  color: rgb(74, 222, 128) !important;
}

#step-tabs .is-draft {
  color: rgb(252 165 165) !important;
}

.ui-autocomplete-input,
select {
  padding-right: 2.8rem !important;
}

.btn:focus {
  background-color: #47699b;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-primary {
  background-color: #0d6efd !important;
}

.btn-primary:hover {
  background-color: #0b5ed7 !important;
}

input:read-only,
input:read-only:focus {
  background-color: #f1f1f1;
  cursor: default;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border: 1px solid rgb(219, 39, 119);
  color: rgb(219, 39, 119);
}

input.is-invalid ~ label.invalid-feedback,
textarea.is-invalid ~ label.invalid-feedback,
select.is-invalid ~ label.invalid-feedback {
  display: block !important;
}

.navbar {
  background: linear-gradient(-45deg, #c6487e, #0b3659, #940643, #7e22cea6);
  background-size: 400% 400%;
  animation: bg-animation 15s ease infinite;
}

.fixed-background {
  background: url(../img/isometric_factory.png) no-repeat center 15vh fixed;
  background-size: contain;
  width: 100%;
  height: 100%;
  background-attachment: scroll;
}

.sidebar {
  background: linear-gradient(32deg, #363636, #2f2f2f, #1a1a1a, #373737);
  background-size: 100% 400%;
  animation: bg-animation2 10s ease infinite;
}

.exim-table thead tr > th,
.exim-table tbody tr:nth-child(odd) > th,
.exim-table tbody tr:nth-child(odd) > td {
  background-color: #f3f4f6;
}

.exim-table tbody tr:nth-child(even) > th,
.exim-table tbody tr:nth-child(even) > td {
  background-color: rgb(255, 253, 253);
}

.exim-table tbody tr:hover > th,
.exim-table tbody tr:hover > td {
  background-color: rgb(235, 235, 235);
}

.burger-wrapper {
  width: max-content;
  height: max-content;
  height: 30px;
}

.burger-wrapper .hamburger {
  background: #fff;
  width: 30px;
  height: 2px;
  position: relative;
  transition: background 10ms 100ms ease;
  display: block;
}

.burger-wrapper .hamburger:before,
.burger-wrapper .hamburger:after {
  transition: top 100ms 350ms ease, transform 100ms 50ms ease;
  position: absolute;
  background: #fff;
  width: 30px;
  height: 2px;
  content: "";
  left: 0;
}

.burger-wrapper .hamburger:before {
  top: -8px;
}

.burger-wrapper .hamburger:after {
  top: 8px;
}

.burger-wrapper.active .hamburger {
  background: transparent;
}

.burger-wrapper.active .hamburger:after,
.burger-wrapper.active .hamburger:before {
  transition: top 100ms 50ms ease, transform 100ms 350ms ease;
  top: 0;
}

.burger-wrapper.active .hamburger:before {
  transform: rotate(45deg);
}

.burger-wrapper.active .hamburger:after {
  transform: rotate(-45deg);
}

#sidebar a:hover,
#sidebar button:hover,
#sidebar .menu-parent__active {
  color: rgb(96 165 250) !important;
}

#sidebar button:hover svg,
#sidebar .menu-parent__active svg {
  fill: rgb(96 165 250);
}

.custom-scroll-hover > div::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll-hover > div::-webkit-scrollbar-thumb {
  background: transparent;
}

.custom-scroll-hover > div::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

.custom-scroll-hover > div {
  overflow: hidden !important;
}

.custom-scroll-hover:hover > div {
  overflow: auto !important;
}

.custom-scroll-hover > div,
.custom-scroll > div,
.custom-scroll-ui-menu,
.sidebar {
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.custom-scroll-hover > div::-webkit-scrollbar,
.custom-scroll > div::-webkit-scrollbar,
.custom-scroll-ui-menu::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

.custom-scroll > div::-webkit-scrollbar-track,
.custom-scroll-hover:hover > div::-webkit-scrollbar-track,
.custom-scroll-ui-menu::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scroll > div::-webkit-scrollbar-thumb,
.custom-scroll-hover:hover > div::-webkit-scrollbar-thumb,
.custom-scroll-ui-menu::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: #888;
}

.custom-scroll > div::-webkit-scrollbar-thumb:hover,
.custom-scroll-hover:hover > div::-webkit-scrollbar-thumb:hover,
.custom-scroll-ui-menu::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.my-modal.active {
  display: grid !important;
  transition: opacity 300ms ease;
  opacity: 1;
}

.ui-front {
  z-index: 1000;
}

input.ui-autocomplete-input.is-invalid ~ i.fa {
  display: none;
}

.ui-autocomplete-input ~ i.fa {
  position: absolute;
  right: 0.8rem;
  transition: transform 300ms ease-out;
}

.position-relative > label ~ .ui-autocomplete-input ~ i.fa {
  top: 43px;
}

.position-relative > .ui-autocomplete-input ~ i.fa {
  top: 13px;
}

.ui-autocomplete-input:focus ~ i.fa {
  transform: rotate(180deg);
}

.ui-autocomplete-input ~ button.reset-input {
  position: absolute;
  right: 1.8rem;
  display: flex;
  color: rgb(156 163 175);
}

.ui-autocomplete-input ~ button.reset-input:hover {
  color: rgb(239 68 68);
}

.position-relative > label ~ .ui-autocomplete-input ~ button.reset-input {
  top: 43px;
}

.position-relative > .ui-autocomplete-input ~ button.reset-input {
  top: 13px;
}

.loading-container .loading,
.position-relative .loading {
  position: absolute;
  right: 0.75rem;
  width: 1rem;
  height: 1rem;
  top: 60px;
  border-width: 2px;
}

.position-relative .loading {
  position: absolute;
  right: 1.75rem;
  width: 1rem;
  height: 1rem;
  top: 44px;
  border-width: 2px;
}

.percentage {
  position: relative;
}

.percentage::after {
  content: "%";
  position: absolute;
  right: 0.8rem;
  top: 6px;
}

.percentage input {
  padding-right: 1.8rem !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: contents;
  font-size: 12px;
}

.slide-up-anim > div {
  position: relative;
  top: 25px;
}

.slide-up-anim > div.active {
  animation: slide-up ease 0.4s forwards;
  top: 0;
  position: absolute;
}

#slide-content > div.active {
  position: relative;
  left: 0%;
  opacity: 1;
}

#slide-content > div {
  position: absolute;
  left: 110%;
  top: 0;
  padding: 1px;
  background: #fff;
  opacity: 0;
  width: 100%;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#status-history ul {
  border-color: rgb(60 12 112/1);
  border-left-width: 2px;
  padding: 1rem 1rem 1rem 1.75rem;
}

#status-history ul {
  margin-left: 8rem;
  position: relative;
}

.custom-loading,
.scan-custom-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-loading::before {
  content: attr(data-text);
  background: #fff;
  border-radius: 6px;
  padding: 10% 7% 5% 7%;
  font-size: 1.5rem;
}

.custom-loading::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  left: 50%;
  top: 42%;
  margin-left: -25px;
}

.scan-custom-loading > div {
  background: #fff;
  border-radius: 6px;
  padding: 5% 7%;
  font-size: 1.5rem;
  position: relative;

  h2 {
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
  }

  h3 {
    padding: 1em 1em 0;
    font-size: 1em;
    text-align: center;
  }

  #geminianimation {
    z-index: 1;
  }

  .glow-bg-grid {
    z-index: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes slide-up {
  0% {
    top: 25px;
  }
  100% {
    top: 0;
  }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes bg-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bg-animation2 {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

@media screen and (max-width: 1024px) {
  .fixed-background {
    background-size: cover;
  }
}

@media screen and (max-height: 470px) {
  #sidebar {
    overflow: hidden;
    position: fixed;
    height: 100%;
  }

  #sidebar > div {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 3rem;
    padding-top: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  #sidebar {
    overflow: hidden;
    position: fixed;
    height: 100%;
  }

  #sidebar > div {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding-bottom: 3rem;
    padding-top: 0 !important;
  }
}