@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Theme Colors */
  --color-background: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #222222;
  --color-border: #E5E5E5;
  --color-muted: #F7F7F7;
  --color-button-primary-bg: #000000;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-bg: #FFFFFF;
  --color-button-secondary-text: #000000;
  --color-button-secondary-border: #000000;
  --color-button-danger-bg: #D0021B;
  --color-button-danger-text: #FFFFFF;
  --color-focus-ring: #000000;
  --color-link: #000000;
  --color-placeholder: #6B7280;
}

/* Base Styles */
body {
  @apply bg-white text-black font-sans;
  font-feature-settings: 'rlig' 1, 'calt' 1;
}

/* Component Styles */
.btn {
  @apply inline-flex items-center justify-center font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
}

.btn-primary {
  @apply bg-black text-white hover:bg-gray-800 focus:ring-black;
}

.btn-secondary {
  @apply bg-white text-black border border-black hover:bg-gray-50 focus:ring-black;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-sm {
  @apply px-3 py-2 text-sm;
  border-radius: 8px;
}

.btn-lg {
  @apply px-6 py-3 text-lg;
  border-radius: 14px;
}

.input {
  @apply w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent;
  height: 42px;
  border-radius: 10px;
}

.input::placeholder {
  color: var(--color-placeholder);
}

.card {
  @apply bg-white border border-gray-200 rounded-2xl p-6 shadow-sm;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

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

.table th {
  @apply text-left font-semibold text-sm text-gray-900 border-b border-gray-200 py-3 px-4;
  height: 48px;
}

.table td {
  @apply border-b border-gray-200 py-3 px-4 text-sm;
  height: 48px;
}

.table tbody tr:hover {
  @apply bg-gray-50;
}

/* Focus styles for accessibility */
.focus-visible {
  @apply focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2;
}

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

/* Layout Components */
.layout-container {
  @apply min-h-screen bg-gray-50;
}

.sidebar {
  @apply w-64 bg-white border-r border-gray-200 fixed left-0 top-0 h-full z-40;
}

.main-content {
  @apply ml-64 flex-1;
}

.topbar {
  @apply bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between;
}

/* Navigation */
.nav-item {
  @apply flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-black rounded-lg transition-colors;
}

.nav-item.active {
  @apply bg-gray-100 text-black;
}

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

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

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

/* Status Badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
  @apply bg-green-100 text-green-800;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
  @apply bg-red-100 text-red-800;
}

.badge-info {
  @apply bg-blue-100 text-blue-800;
}

.badge-gray {
  @apply bg-gray-100 text-gray-800;
}

/* Empty States */
.empty-state {
  @apply text-center py-12;
}

.empty-state-icon {
  @apply mx-auto h-12 w-12 text-gray-400;
}

.empty-state-title {
  @apply mt-2 text-sm font-medium text-gray-900;
}

.empty-state-description {
  @apply mt-1 text-sm text-gray-500;
}

/* Loading States */
.loading-spinner {
  @apply animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-black;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sidebar {
    @apply -translate-x-full;
  }
  
  .main-content {
    @apply ml-0;
  }
  
  .sidebar.open {
    @apply translate-x-0;
  }
}