/* Zihnio - Custom Styles */

/* Form Styles */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2;
}

.form-input {
  @apply w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-white/10 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors;
}

.form-input:focus {
  @apply border-indigo-500 ring-2 ring-indigo-500/20;
}

.form-error {
  @apply text-sm text-red-600 dark:text-red-400 mt-1;
}

.form-success {
  @apply text-sm text-green-600 dark:text-green-400 mt-1;
}

/* Button Styles */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2 rounded-xl font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-indigo-600 text-white hover:bg-indigo-500 focus:ring-indigo-500 shadow-lg shadow-indigo-500/30;
}

.btn-secondary {
  @apply border border-slate-300 dark:border-white/10 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/5 focus:ring-slate-500;
}

.btn-large {
  @apply px-6 py-3 text-base;
}

.btn-small {
  @apply px-3 py-1.5 text-sm;
}

.btn-block {
  @apply w-full;
}

.btn:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Card Styles */
.card {
  @apply rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/5 p-6 shadow-sm;
}

.card-header {
  @apply border-b border-slate-200 dark:border-white/10 pb-4 mb-4;
}

.card-title {
  @apply text-lg font-semibold text-slate-900 dark:text-slate-100;
}

.card-description {
  @apply text-sm text-slate-600 dark:text-slate-400 mt-1;
}

/* Auth Pages Specific */
.auth-container {
  @apply min-h-screen flex items-center justify-center px-4 py-12;
}

.auth-card {
  @apply w-full max-w-md;
}

.auth-header {
  @apply text-center mb-8;
}

.auth-title {
  @apply text-2xl font-bold text-slate-900 dark:text-slate-100;
}

.auth-subtitle {
  @apply mt-2 text-sm text-slate-600 dark:text-slate-400;
}

.auth-form {
  @apply space-y-6;
}

.auth-footer {
  @apply mt-8 text-center text-sm text-slate-600 dark:text-slate-400;
}

.auth-link {
  @apply text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 font-medium;
}

/* Social Login Buttons */
.social-btn {
  @apply w-full flex items-center justify-center gap-3 px-4 py-3 rounded-xl border border-slate-300 dark:border-white/10 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors;
}

/* Divider */
.divider {
  @apply relative my-6;
}

.divider::before {
  content: '';
  @apply absolute inset-0 flex items-center;
}

.divider::before {
  @apply border-t border-slate-300 dark:border-white/10;
}

.divider-text {
  @apply relative flex justify-center text-sm font-medium text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-950 px-4;
}

/* Loading States */
.loading {
  @apply opacity-75 pointer-events-none;
}

.spinner {
  @apply animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full;
}

/* Toast Notifications */
.toast {
  @apply fixed top-4 right-4 z-50 max-w-sm p-4 rounded-xl border shadow-lg transition-all duration-300;
}

.toast-success {
  @apply border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-900/20 dark:text-green-200;
}

.toast-error {
  @apply border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-200;
}

.toast-warning {
  @apply border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-200;
}

.toast-info {
  @apply border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-200;
}

/* Password Strength Indicator */
.password-strength {
  @apply mt-2 h-1 w-full rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden;
}

.password-strength-bar {
  @apply h-full transition-all duration-300;
}

.password-strength-weak {
  @apply bg-red-500 w-1/4;
}

.password-strength-medium {
  @apply bg-yellow-500 w-2/4;
}

.password-strength-strong {
  @apply bg-green-500 w-3/4;
}

.password-strength-very-strong {
  @apply bg-green-600 w-full;
}

/* Checkbox and Radio Styles */
.checkbox, .radio {
  @apply h-4 w-4 text-indigo-600 border-slate-300 dark:border-white/10 rounded focus:ring-indigo-500 dark:bg-slate-900;
}

/* Select Styles */
.form-select {
  @apply w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-white/10 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors;
}

/* File Upload */
.file-upload {
  @apply relative overflow-hidden inline-block;
}

.file-upload input[type=file] {
  @apply absolute left-0 top-0 opacity-0 cursor-pointer w-full h-full;
}

/* Responsive Images */
.responsive-img {
  @apply w-full h-auto;
}

/* Test Interface Styles */
.test-container {
  @apply min-h-screen flex flex-col items-center justify-center bg-slate-50 dark:bg-slate-900;
}

.test-stimulus {
  @apply text-4xl font-bold p-8 rounded-2xl bg-white dark:bg-slate-800 shadow-lg;
}

.test-buttons {
  @apply flex gap-4 mt-8;
}

.test-button {
  @apply px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-4;
}

/* Progress Bar */
.progress-bar {
  @apply w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 overflow-hidden;
}

.progress-fill {
  @apply h-full bg-indigo-600 transition-all duration-300 ease-out;
}

/* Mobile Responsive Utilities */
@media (max-width: 640px) {
  .mobile-hide {
    @apply hidden;
  }
  
  .mobile-full {
    @apply w-full;
  }
  
  .mobile-center {
    @apply text-center;
  }
}

/* Print Styles */
@media print {
  .no-print {
    @apply hidden;
  }
  
  .print-only {
    @apply block;
  }
}

/* High Contrast Mode */
.hc {
  filter: contrast(150%) brightness(150%);
}

.hc .card {
  @apply border-2 border-white;
}

.hc .btn-primary {
  @apply bg-yellow-400 text-black border-2 border-black;
}

/* Focus Visible Enhancement */
*:focus-visible {
  @apply outline-2 outline-offset-2 outline-indigo-500;
}

.hc *:focus-visible {
  @apply outline-white;
}

/* Animation Utilities */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduce Motion */
.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}