/* ================================
   COMPONENTS CSS - Buttons, Forms, Cards, etc.
   ================================ */

/* ================================
   BUTTONS
   ================================ */

/* Base Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants */
.btn-primary,
.bg-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover,
.bg-primary:hover,
.hover\:bg-primary-dark:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
}

.btn-secondary:hover {
  background-color: var(--color-gray-300);
}

.bg-secondary {
  background-color: var(--color-secondary);
  color: white;
}

.bg-secondary:hover,
.hover\:bg-secondary-dark:hover {
  background-color: var(--color-secondary-dark);
}

.btn-success,
.bg-success {
  background-color: var(--color-success);
  color: white;
}

.btn-success:hover,
.bg-success:hover,
.hover\:bg-success-dark:hover {
  background-color: var(--color-success-dark);
}

.btn-danger,
.bg-danger {
  background-color: var(--color-danger);
  color: white;
}

.btn-danger:hover,
.bg-danger:hover,
.hover\:bg-danger-dark:hover {
  background-color: var(--color-danger-dark);
}

.btn-warning,
.bg-warning {
  background-color: var(--color-warning);
  color: white;
}

.btn-warning:hover,
.bg-warning:hover,
.hover\:bg-warning-dark:hover {
  background-color: var(--color-warning-dark);
}

.btn-info,
.bg-info {
  background-color: var(--color-info);
  color: white;
}

.btn-info:hover,
.bg-info:hover {
  background-color: var(--color-info-dark);
}

/* Common hover utilities */
.hover\:bg-gray-50:hover { background-color: var(--color-gray-50); }
.hover\:bg-gray-100:hover { background-color: var(--color-gray-100); }
.hover\:bg-gray-200:hover { background-color: var(--color-gray-200); }
.hover\:bg-gray-300:hover { background-color: var(--color-gray-300); }
.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
.hover\:underline:hover { text-decoration: underline; }

.hover\:text-blue-700:hover { color: #1d4ed8; }
.hover\:text-red-700:hover { color: #b91c1c; }
.hover\:text-gray-700:hover { color: var(--color-gray-700); }
.hover\:text-primary:hover { color: var(--color-primary); }

.hover\:bg-blue-600:hover { background-color: #2563eb; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:bg-danger-dark:hover { background-color: var(--color-danger-dark); }

/* Dark mode hover */
.dark .dark\:hover\:bg-gray-50:hover { background-color: var(--color-gray-700); }
.dark .dark\:hover\:bg-gray-800:hover { background-color: var(--color-gray-800); }

.btn-green-600 {
  background-color: #16a34a;
  color: white;
}

.btn-green-600:hover,
.hover\:bg-green-700:hover {
  background-color: #15803d;
}

/* Button Sizes */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* Outline Buttons */
.btn-outline {
  background-color: transparent;
  border: 1px solid var(--border-color);
}

.bg-gray-200 {
  background-color: var(--color-gray-200);
}

.hover\:bg-gray-300:hover {
  background-color: var(--color-gray-300);
}

.dark .bg-gray-600 {
  background-color: var(--color-gray-600);
}

.dark .hover\:bg-gray-500:hover {
  background-color: var(--color-gray-500);
}

.dark .bg-gray-700 {
  background-color: var(--color-gray-700);
}

.dark .hover\:bg-gray-600:hover {
  background-color: var(--color-gray-600);
}

/* ================================
   FORM CONTROLS
   ================================ */

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 0.375rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.25);
}

.form-control::placeholder {
  color: var(--color-gray-400);
}

.form-control:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
}

/* Dark Mode Form Control */
.dark .form-control {
  background-color: var(--color-gray-700);
  border-color: var(--color-gray-600);
  color: var(--color-gray-200);
}

.dark .form-control:focus {
  border-color: var(--color-primary);
}

/* Input Variants */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.25);
}

.dark input,
.dark select,
.dark textarea {
  background-color: var(--color-gray-700);
  border-color: var(--color-gray-600);
  color: var(--color-gray-200);
}

/* Focus Ring Utilities */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.5); }
.focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.3); }
.focus\:border-transparent:focus { border-color: transparent; }

/* ================================
   CARDS
   ================================ */

.card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dark .card {
  background-color: var(--color-gray-800);
}

.card-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--border-color);
}

.dark .card-header {
  border-bottom-color: var(--color-gray-700);
}

.card-body {
  padding: var(--spacing-4);
}

.card-footer {
  padding: var(--spacing-4);
  border-top: 1px solid var(--border-color);
  background-color: var(--color-gray-50);
}

.dark .card-footer {
  border-top-color: var(--color-gray-700);
  background-color: var(--color-gray-700);
}

/* Card hover effect */
.card-hover {
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Ensure card flex layout works properly */
.card > .flex,
.bg-white > .flex,
[class*="rounded"] > .flex {
  display: flex;
}

/* ================================
   TABLES
   ================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background-color: var(--color-gray-50);
}

.dark .data-table thead {
  background-color: var(--color-gray-700);
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.dark .data-table th,
.dark .data-table td {
  border-bottom-color: var(--color-gray-700);
}

.data-table th {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-600);
}

.dark .data-table th {
  color: var(--color-gray-300);
}

.data-table tbody tr:hover {
  background-color: var(--color-gray-50);
}

.dark .data-table tbody tr:hover {
  background-color: var(--color-gray-700);
}

.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ================================
   MODALS
   ================================ */

.modal,
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 28rem;
  width: 100%;
  margin: var(--spacing-4);
  max-height: 90vh;
  overflow-y: auto;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content.max-w-lg {
  max-width: 32rem;
}

.modal-content.max-w-xl {
  max-width: 36rem;
}

.modal-content.max-w-2xl {
  max-width: 42rem;
}

.modal-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: var(--spacing-6);
}

.modal-footer {
  padding: var(--spacing-4);
  border-top: 1px solid var(--border-color);
  background-color: var(--color-gray-50);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-gray-600);
}

/* ================================
   BADGES
   ================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.badge-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.badge-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

/* ================================
   ALERTS / TOASTS
   ================================ */

.toast {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-4);
  max-width: 20rem;
  width: 100%;
  transform: translateX(100%);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.dark .toast {
  background-color: var(--color-gray-800);
}

/* ================================
   LOADING STATES
   ================================ */

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Skeleton loaders */
.skeleton {
  background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.dark .skeleton {
  background: linear-gradient(90deg, var(--color-gray-700) 25%, var(--color-gray-600) 50%, var(--color-gray-700) 75%);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================
   NAVIGATION
   ================================ */

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--color-gray-600);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
  text-decoration: none;
}

.nav-item:hover {
  background-color: var(--color-primary-light);
  text-decoration: none;
}

.nav-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.dark .nav-item {
  color: var(--color-gray-300);
}

.dark .nav-item:hover {
  background-color: var(--color-gray-700);
}

.dark .nav-item.active {
  background-color: var(--color-gray-700);
  color: var(--color-primary);
}

.nav-btn.active {
  color: var(--color-primary) !important;
}

/* ================================
   SIDEBAR
   ================================ */

#sidebar {
  width: 280px;
  background-color: #ffffff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal);
}

.dark #sidebar {
  background-color: var(--color-gray-800);
}

/* Sidebar hidden state */
.-translate-x-full {
  transform: translateX(-100%);
}

/* ================================
   POINTER & CURSOR
   ================================ */

.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ================================
   HOVER STATES
   ================================ */

.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-gray-800:hover { color: var(--color-gray-800); }
.hover\:text-gray-700:hover { color: var(--color-gray-700); }
.hover\:text-red-700:hover { color: #b91c1c; }
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light); }
.hover\:bg-danger-light:hover { background-color: var(--color-danger-light); }

/* ================================
   TRANSITIONS
   ================================ */

.transition { transition: all var(--transition-normal); }
.transition-all { transition: all var(--transition-normal); }
.transition-transform { transition: transform var(--transition-normal); }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.ease-in-out { transition-timing-function: ease-in-out; }

/* ================================
   TRANSFORMS
   ================================ */

.transform { transform: translateZ(0); }
.scale-98:active { transform: scale(0.98); }