/* 3D Transition Styles */
.page-transition {
  width: 100%;
  height: auto;
  min-height: 100%;
  perspective: 1200px;
  transform-style: preserve-3d;
  position: relative;
  animation: fadeIn 0.3s ease-in;
}

.page-content {
  position: relative;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Animation Classes */
.slide-out-left {
  transform: translateX(-100%) rotateY(-30deg);
}

.slide-out-right {
  transform: translateX(100%) rotateY(30deg);
}

.slide-in-left {
  transform: translateX(-100%) rotateY(-30deg);
}

.slide-in-right {
  transform: translateX(100%) rotateY(30deg);
}

.slide-in-active {
  transform: translateX(0) rotateY(0);
}

/* Loading Indicator */
.transition-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: none;
}

/* Transition effects */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Dark mode transitions */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode styles */
body.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.dark-mode .form-control,
body.dark-mode .input-group-text {
  background-color: #2d2d2d;
  border-color: #404040;
  color: #ffffff;
}

body.dark-mode .form-control:focus {
  background-color: #363636;
  border-color: #0d6efd;
  color: #ffffff;
}

body.dark-mode .text-muted {
  color: #a0a0a0 !important;
}

body.dark-mode .btn-outline-danger,
body.dark-mode .btn-outline-primary {
  border-color: #404040;
  color: #ffffff;
}

body.dark-mode .btn-outline-danger:hover,
body.dark-mode .btn-outline-primary:hover {
  background-color: #2d2d2d;
}