/* Custom CSS for Westlab Pharmacy */

/* Form Components */
.form-input {
  @apply w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-vertical;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors bg-white;
}

.form-checkbox {
  @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded;
}

.form-radio {
  @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300;
}

/* Button Components */
.btn-primary {
  @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}

.btn-secondary {
  @apply inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}

.btn-loading {
  @apply cursor-not-allowed opacity-75;
}

/* Alert Components */
.alert {
  @apply p-4 rounded-md mb-4;
}

.alert-success {
  @apply bg-green-50 border border-green-200 text-green-800;
}

.alert-error {
  @apply bg-red-50 border border-red-200 text-red-800;
}

.alert-warning {
  @apply bg-yellow-50 border border-yellow-200 text-yellow-800;
}

.alert-info {
  @apply bg-blue-50 border border-blue-200 text-blue-800;
}

/* Card Components */
.card {
  @apply bg-white rounded-lg shadow-md border border-gray-200;
}

.card-header {
  @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Navigation Dropdown */
.dropdown-menu {
  @apply transform transition-all duration-200 ease-out;
}

.nav-dropdown-btn:hover + .dropdown-menu,
.dropdown-menu:hover {
  @apply opacity-100 visible;
}

/* Loading Skeleton */
.skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-text {
  @apply h-4 bg-gray-200 rounded;
}

.skeleton-title {
  @apply h-6 bg-gray-200 rounded;
}

/* Utility Classes */
.prose-content {
  @apply prose prose-blue max-w-none;
}

.prose-content h1 {
  @apply text-3xl font-bold text-gray-900 mb-6;
}

.prose-content h2 {
  @apply text-2xl font-bold text-gray-900 mb-4;
}

.prose-content h3 {
  @apply text-xl font-semibold text-gray-900 mb-3;
}

.prose-content p {
  @apply text-gray-600 mb-4 leading-relaxed;
}

.prose-content ul {
  @apply list-disc list-inside text-gray-600 mb-4 space-y-2;
}

.prose-content ol {
  @apply list-decimal list-inside text-gray-600 mb-4 space-y-2;
}

.prose-content a {
  @apply text-blue-600 hover:text-blue-700 underline;
}

/* Error States */
.border-red-500 {
  @apply border-red-500 focus:border-red-500 focus:ring-red-500;
}

.error-message {
  @apply text-red-600 text-sm mt-1;
}

/* File Upload */
.file-info {
  @apply text-sm text-gray-600 mt-1;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

/* Custom Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }

  .print-break {
    page-break-before: always;
  }
}

/* Focus Styles for Accessibility */
.focus-visible:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .form-input,
  .form-textarea,
  .form-select {
    @apply border-2 border-gray-900;
  }

  .btn-primary {
    @apply bg-blue-800 border-2 border-blue-900;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}