/**
 * Haznox Component Library
 * Based on DESIGN_SYSTEM.md
 * All reusable components following the design system
 */

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/* Primary Button */
.btn-primary {
  @apply px-6 py-2 bg-primary-500 text-white font-bold rounded-lg;
  @apply transition-all duration-200 ease-in-out;
  @apply hover:bg-primary-600 active:bg-primary-700;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900;
}

/* Secondary Button */
.btn-secondary {
  @apply px-6 py-2 bg-transparent border border-gray-600 text-gray-200;
  @apply font-semibold rounded-lg transition-all duration-200;
  @apply hover:bg-gray-800 hover:border-gray-500;
  @apply active:bg-dark-800;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
  @apply focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-dark-900;
}

/* Destructive Button */
.btn-destructive {
  @apply px-6 py-2 bg-red-600 text-white font-bold rounded-lg;
  @apply transition-all duration-200;
  @apply hover:bg-red-700 active:bg-red-800;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
  @apply focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-dark-900;
}

/* Small Button */
.btn-small {
  @apply px-4 py-1 text-sm font-semibold rounded;
  @apply transition-all duration-200;
}

.btn-small.primary {
  @apply bg-primary-500 text-white hover:bg-primary-600;
}

.btn-small.secondary {
  @apply border border-gray-600 text-gray-200 hover:bg-gray-800;
}

/* ============================================
   FORM COMPONENTS
   ============================================ */

/* Input Field Base */
.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
textarea,
select {
  @apply w-full px-4 py-2 bg-dark-900 border border-gray-600;
  @apply rounded-lg text-gray-200 placeholder-gray-500;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20;
}

/* Input with error state */
.input-field.error,
input.error,
textarea.error {
  @apply border-red-500 focus:border-red-500 focus:ring-red-500/20;
}

/* Input with success state */
.input-field.success,
input.success {
  @apply border-green-500 focus:border-green-500 focus:ring-green-500/20;
}

/* Label */
.label {
  @apply block text-xs font-semibold text-gray-400 mb-2 uppercase tracking-wider;
}

/* Form Group */
.form-group {
  @apply mb-4 space-y-2;
}

/* Error Text */
.error-text {
  @apply text-red-400 text-xs font-medium;
}

/* Helper Text */
.helper-text {
  @apply text-gray-500 text-xs mt-1;
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

.card {
  @apply bg-dark-800 border border-gray-700 rounded-lg p-6;
  @apply transition-all duration-200;
}

.card:hover {
  @apply border-gray-600;
}

.card.interactive {
  @apply cursor-pointer hover:bg-dark-800/80 hover:border-primary-500/50;
}

.card-header {
  @apply mb-4 pb-4 border-b border-gray-700;
}

.card-title {
  @apply text-xl font-bold text-gray-100;
}

.card-subtitle {
  @apply text-xs text-gray-500 mt-1;
}

.card-content {
  @apply space-y-4;
}

.card-footer {
  @apply mt-4 pt-4 border-t border-gray-700;
  @apply flex gap-2 justify-end;
}

/* ============================================
   MODAL / DIALOG COMPONENTS
   ============================================ */

.modal-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
  @apply transition-opacity duration-200;
}

.modal {
  @apply bg-dark-900 border border-gray-700 rounded-xl p-6;
  @apply max-w-md w-full mx-4;
  animation: scaleIn 0.2s ease-out;
}

.modal-header {
  @apply mb-4;
}

.modal-title {
  @apply text-lg font-bold text-gray-100;
}

.modal-body {
  @apply mb-4 text-gray-300 text-sm;
}

.modal-footer {
  @apply flex gap-2 justify-end pt-4 border-t border-gray-700;
}

/* ============================================
   BADGE / CHIP COMPONENTS
   ============================================ */

.badge {
  @apply inline-block px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-primary {
  @apply bg-primary-600/20 text-primary-300 border border-primary-600/40;
}

.badge-success {
  @apply bg-green-600/20 text-green-300 border border-green-600/40;
}

.badge-warning {
  @apply bg-yellow-600/20 text-yellow-300 border border-yellow-600/40;
}

.badge-error {
  @apply bg-red-600/20 text-red-300 border border-red-600/40;
}

.badge-info {
  @apply bg-blue-600/20 text-blue-300 border border-blue-600/40;
}

/* ============================================
   TOAST / NOTIFICATION COMPONENTS
   ============================================ */

.toast {
  @apply rounded-lg px-4 py-3 shadow-lg flex items-center gap-3;
  animation: slideInDown 0.3s ease-out;
}

.toast-success {
  @apply bg-green-600/20 border border-green-600/40 text-green-300;
}

.toast-error {
  @apply bg-red-600/20 border border-red-600/40 text-red-300;
}

.toast-warning {
  @apply bg-yellow-600/20 border border-yellow-600/40 text-yellow-300;
}

.toast-info {
  @apply bg-blue-600/20 border border-blue-600/40 text-blue-300;
}

/* ============================================
   LOADING / SKELETON COMPONENTS
   ============================================ */

.spinner {
  @apply w-4 h-4 border-2 border-gray-600 border-t-primary-500;
  @apply rounded-full animate-spin;
}

.spinner-lg {
  @apply w-8 h-8;
}

.skeleton {
  @apply bg-gradient-to-r from-dark-900 via-dark-800 to-dark-900;
  @apply rounded animate-pulse;
}

.skeleton-text {
  @apply skeleton h-4 w-24;
}

.skeleton-avatar {
  @apply skeleton w-12 h-12 rounded-full;
}

/* ============================================
   TABLE COMPONENTS
   ============================================ */

.table-responsive {
  @apply w-full overflow-x-auto;
}

.table {
  @apply w-full border-collapse;
}

.table thead {
  @apply bg-dark-800 border-b border-gray-700;
}

.table th {
  @apply px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase;
}

.table tbody tr {
  @apply border-b border-gray-700 transition-colors duration-200;
  @apply hover:bg-dark-800/50;
}

.table td {
  @apply px-4 py-3 text-sm text-gray-300;
}

/* ============================================
   DROPDOWN / SELECT COMPONENTS
   ============================================ */

.dropdown {
  @apply relative inline-block;
}

.dropdown-toggle {
  @apply flex items-center gap-2 px-4 py-2 rounded-lg;
  @apply bg-dark-900 border border-gray-600 text-gray-200;
  @apply hover:border-gray-500 transition-colors duration-200;
}

.dropdown-menu {
  @apply absolute top-full left-0 mt-2 min-w-max;
  @apply bg-dark-800 border border-gray-700 rounded-lg shadow-lg;
  animation: scaleIn 0.2s ease-out;
}

.dropdown-item {
  @apply block w-full px-4 py-2 text-left text-sm text-gray-300;
  @apply hover:bg-dark-900 transition-colors duration-200;
}

.dropdown-item.active {
  @apply bg-primary-600/20 text-primary-300;
}

/* ============================================
   PAGINATION COMPONENTS
   ============================================ */

.pagination {
  @apply flex items-center gap-2 justify-center;
}

.pagination-btn {
  @apply px-3 py-2 rounded border border-gray-600 text-sm;
  @apply text-gray-400 hover:bg-dark-800 transition-colors duration-200;
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
}

.pagination-btn.active {
  @apply bg-primary-600 text-white border-primary-600;
}

/* ============================================
   DIVIDER COMPONENTS
   ============================================ */

.divider {
  @apply border-t border-gray-700 my-4;
}

.divider-text {
  @apply relative flex items-center my-6;
}

.divider-text::before,
.divider-text::after {
  @apply flex-1 h-px bg-gray-700;
  @apply content-[''];
}

.divider-text span {
  @apply px-3 text-xs text-gray-500;
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

@keyframes fadeIn {
  from {
    @apply opacity-0;
  }
  to {
    @apply opacity-100;
  }
}

@keyframes slideInUp {
  from {
    @apply translate-y-4 opacity-0;
  }
  to {
    @apply translate-y-0 opacity-100;
  }
}

@keyframes slideInDown {
  from {
    @apply -translate-y-4 opacity-0;
  }
  to {
    @apply translate-y-0 opacity-100;
  }
}

@keyframes slideInLeft {
  from {
    @apply -translate-x-4 opacity-0;
  }
  to {
    @apply translate-x-0 opacity-100;
  }
}

@keyframes slideInRight {
  from {
    @apply translate-x-4 opacity-0;
  }
  to {
    @apply translate-x-0 opacity-100;
  }
}

@keyframes scaleIn {
  from {
    @apply scale-95 opacity-0;
  }
  to {
    @apply scale-100 opacity-100;
  }
}

@keyframes fadeInScale {
  from {
    @apply scale-75 opacity-0;
  }
  to {
    @apply scale-100 opacity-100;
  }
}

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

.animate-slide-in-up {
  animation: slideInUp 0.3s ease-out;
}

.animate-slide-in-down {
  animation: slideInDown 0.3s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Layout */
.flex-center {
  @apply flex items-center justify-center;
}

.flex-between {
  @apply flex items-center justify-between;
}

/* Text */
.text-muted {
  @apply text-gray-500;
}

.text-subtle {
  @apply text-gray-600;
}

/* Transitions */
.transition-fast {
  @apply transition-all duration-100;
}

.transition-normal {
  @apply transition-all duration-200;
}

.transition-slow {
  @apply transition-all duration-300;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile-first: base styles apply to mobile */
/* Tablet (640px and up) */
@media (min-width: 640px) {
  .sm\:hidden {
    @apply hidden;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .lg\:hidden {
    @apply hidden;
  }

  .lg\:grid-cols-2 {
    @apply grid-cols-2;
  }

  .lg\:grid-cols-3 {
    @apply grid-cols-3;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus visible for keyboard navigation */
*:focus-visible {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-dark-900;
}

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

/* Dark mode (already default, but explicit for clarity) */
@media (prefers-color-scheme: dark) {
  body {
    @apply bg-dark-900 text-gray-200;
  }
}