/* Custom styles for the application */

/* Tailwind CSS Configuration */
:root {
  --primary: #8c1aff;
  --primary-dark: #6a00ff;
  --primary-light: #c58bff;
  --dark-gray: #6c757d;
  --light-gray: #f8f9fa;
}

/* Background styling */
body {
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* Video background utilities */
.video-bg {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  object-fit: cover;
}

.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

/* Mobile-specific styles */
@media (max-width: 640px) {
  .login-container {
    margin: 10px;
    width: calc(100% - 20px);
  }
  
  .glass-card {
    padding: 1.5rem;
    border-radius: 2rem;
  }
  
  .app-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* Floating animation for logo */
.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Shake animation for form validation */
@keyframes shake {
  0%, 100% { transform: translateX(0) translateY(-2px); }
  25% { transform: translateX(-6px) translateY(-2px); }
  75% { transform: translateX(6px) translateY(-2px); }
}

.error-shake {
  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Custom form validation styles */
.form-control[data-invalid],
input[data-invalid] {
  border-color: #dc3545;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.15);
}

.form-control[data-invalid]:focus,
input[data-invalid]:focus {
  border-color: #dc3545;
  box-shadow: 0 4px 20px rgba(220, 53, 69, 0.25);
}

/* Input with value styling */
.form-control:not(:placeholder-shown),
input:not(:placeholder-shown) {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 12px rgba(140, 26, 255, 0.1);
}

/* Enhanced placeholder styling */
.form-control::placeholder {
  color: #a0a0a0;
  font-style: normal;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.form-control:focus::placeholder {
  opacity: 0.8;
}

/* Focus and value states */
.form-control.has-value,
.form-control:focus,
input.has-value,
input:focus {
  border-width: 2px;
  border-color: #8c1aff;
  box-shadow: 0 4px 20px rgba(140, 26, 255, 0.25);
}

/* Utility classes for disabled inputs */
.input-disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  border-color: #d1d5db;
}

.input-disabled:focus {
  outline: none;
  box-shadow: none;
  border-color: #d1d5db;
}

/* Error message styling */
.error-message {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}