/* GadiSewa - Garage Management System Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* Smooth transitions */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.slide-in {
  animation: slideIn 0.3s ease-out;
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button styles */
.btn-primary {
  @apply bg-primary-500 hover:bg-primary-600 text-white font-medium px-4 py-2 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md;
}

.btn-secondary {
  @apply bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-900 dark:text-slate-100 font-medium px-4 py-2 rounded-lg transition-all duration-200;
}

.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white font-medium px-4 py-2 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md;
}

/* Input styles */
.input-field {
  @apply w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
}

/* Table styles */
.table-container {
  @apply overflow-x-auto rounded-lg border border-slate-200 dark:border-slate-700;
}

.table {
  @apply min-w-full divide-y divide-slate-200 dark:divide-slate-700;
}

.table thead {
  @apply bg-slate-50 dark:bg-slate-800;
}

.table th {
  @apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider;
}

.table td {
  @apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-slate-100;
}

.table tbody tr {
  @apply hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-150;
}

/* Badge styles */
.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 dark:bg-green-900 dark:text-green-200;
}

.badge-warning {
  @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.badge-danger {
  @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

.badge-info {
  @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

/* Modal overlay */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 flex items-center justify-center p-4;
  animation: fadeIn 0.2s ease-out;
}

.modal-content {
  @apply bg-white dark:bg-slate-800 rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
  animation: slideIn 0.3s ease-out;
}

/* Toast notifications */
.toast {
  @apply fixed top-4 right-4 z-50 max-w-md;
  animation: slideIn 0.3s ease-out;
}

.toast-success {
  @apply bg-green-500 text-white px-6 py-4 rounded-lg shadow-lg;
}

.toast-error {
  @apply bg-red-500 text-white px-6 py-4 rounded-lg shadow-lg;
}

.toast-info {
  @apply bg-blue-500 text-white px-6 py-4 rounded-lg shadow-lg;
}

/* Loading spinner */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  @apply inline-block w-6 h-6 border-4 border-slate-200 border-t-primary-500 rounded-full;
  animation: spin 0.8s linear infinite;
}

/* Chart containers */
.chart-container {
  @apply w-full h-64 md:h-80;
}

/* Stat cards */
.stat-card {
  @apply bg-white dark:bg-slate-800 rounded-xl p-6 shadow-sm border border-slate-200 dark:border-slate-700 card-hover;
}

.stat-value {
  @apply text-3xl font-bold text-slate-900 dark:text-slate-100;
}

.stat-label {
  @apply text-sm font-medium text-slate-500 dark:text-slate-400 mt-1;
}

.stat-change {
  @apply text-sm font-medium mt-2;
}

.stat-change.positive {
  @apply text-green-600 dark:text-green-400;
}

.stat-change.negative {
  @apply text-red-600 dark:text-red-400;
}

/* Sidebar */
.sidebar {
  @apply fixed left-0 top-0 h-full w-64 bg-white dark:bg-slate-850 border-r border-slate-200 dark:border-slate-700 overflow-y-auto z-30;
}

.sidebar-link {
  @apply flex items-center gap-3 px-4 py-3 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-150;
}

.sidebar-link.active {
  @apply bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 font-medium;
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

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