@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

:root {
  --primary: #f59e0b;
  --primary-dark: #d97706;
  --accent: #e53e3e;
}

body { font-family: 'Inter', sans-serif; }

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 50;
  transition: width 0.3s ease;
}
.sidebar .nav-label { letter-spacing: 0.05em; }
.sidebar.collapsed .sidebar-text { display: none; }
.sidebar.collapsed .nav-label { display: none; }

/* Buttons */
.btn-primary {
  @apply bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md;
}
.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-success {
  @apply bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-colors;
}

/* Inputs */
.input-field {
  @apply w-full px-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 outline-none transition-all bg-white;
}
select.input-field {
  @apply appearance-none bg-no-repeat bg-right;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Tables */
.table-header {
  @apply bg-gray-50 border-b border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider;
}
.table-row {
  @apply border-b border-gray-100 hover:bg-amber-50/50 transition-colors;
}

/* Badges */
.badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; }
.badge-green { @apply bg-green-100 text-green-700; }
.badge-yellow { @apply bg-yellow-100 text-yellow-700; }
.badge-blue { @apply bg-blue-100 text-blue-700; }
.badge-red { @apply bg-red-100 text-red-700; }
.badge-gray { @apply bg-gray-100 text-gray-700; }
.badge-purple { @apply bg-purple-100 text-purple-700; }
.badge-orange { @apply bg-orange-100 text-orange-700; }
.badge-pink { @apply bg-pink-100 text-pink-700; }

/* Status Badges */
.status-badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}
.status-pending { @apply bg-yellow-100 text-yellow-800; }
.status-confirmed { @apply bg-blue-100 text-blue-800; }
.status-in_progress { @apply bg-indigo-100 text-indigo-800; }
.status-completed { @apply bg-green-100 text-green-800; }
.status-completed_taken { @apply bg-green-100 text-green-800; }
.status-completed_not_taken { @apply bg-green-100 text-green-800; }
.status-cancelled { @apply bg-red-100 text-red-800; }
.priority-low { @apply bg-gray-100 text-gray-800; }
.priority-medium { @apply bg-yellow-100 text-yellow-800; }
.priority-high { @apply bg-orange-100 text-orange-800; }
.priority-urgent { @apply bg-red-100 text-red-800; }
.priority-critical { @apply bg-red-200 text-red-900; }

/* Cards */
.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition-shadow;
}

/* Loading */
.loading {
  @apply flex items-center justify-center py-12;
}
.spinner {
  @apply w-8 h-8 border-4 border-amber-500 border-t-transparent rounded-full animate-spin;
}

/* Toast */
.toast {
  @apply fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 text-white text-sm font-medium;
  animation: slideIn 0.3s ease;
}
.toast-success { @apply bg-green-500; }
.toast-error { @apply bg-red-500; }
.toast-info { @apply bg-blue-500; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Modal */
.modal-backdrop {
  @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center;
}
.modal-content {
  @apply bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto;
  animation: modalIn 0.2s ease;
}

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

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }