@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  html {
    @apply scroll-smooth;
  }

  body {
    @apply bg-slate-50 text-slate-900;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-slate-900;
  }

  a {
    @apply transition-colors duration-200;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }

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

  .btn-secondary {
    @apply bg-slate-200 text-slate-900 hover:bg-slate-300 focus:ring-slate-500;
  }

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

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

  .btn-sm {
    @apply px-3 py-1 text-sm;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  .btn-ghost {
    @apply bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500;
  }

  .card {
    @apply bg-white rounded-xl shadow-card overflow-hidden;
  }

  .card-header {
    @apply px-6 py-4 border-b border-slate-200 bg-slate-50;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-slate-200 bg-slate-50;
  }

  .stat-card {
    @apply bg-white rounded-xl shadow-card p-6 border-l-4 border-primary-600;
  }

  .form-group {
    @apply mb-6;
  }

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

  .form-input {
    @apply w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
  }

  .form-textarea {
    @apply w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200 resize-none;
  }

  .form-select {
    @apply w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200;
  }

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

  .table-header {
    @apply bg-slate-100 border-b border-slate-200;
  }

  .table-header-cell {
    @apply px-6 py-3 text-left text-sm font-semibold text-slate-700;
  }

  .table-row {
    @apply border-b border-slate-200 hover:bg-slate-50 transition-colors duration-150;
  }

  .table-cell {
    @apply px-6 py-3 text-sm text-slate-700;
  }

  .badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
  }

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

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

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

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

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

  .sidebar-link {
    @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-700 hover:bg-slate-100 transition-colors duration-200;
  }

  .sidebar-link.active {
    @apply bg-primary-600 text-white;
  }

  .sidebar-link svg {
    @apply w-5 h-5 flex-shrink-0;
  }

  .breadcrumb {
    @apply flex items-center space-x-2 text-sm text-slate-600;
  }

  .breadcrumb-link {
    @apply text-primary-600 hover:text-primary-700;
  }

  .breadcrumb-separator {
    @apply text-slate-400;
  }

  .alert {
    @apply rounded-lg p-4 flex items-start space-x-3;
  }

  .alert-success {
    @apply bg-green-50 border border-green-200 text-green-800;
  }

  .alert-error {
    @apply bg-red-50 border border-red-200 text-red-800;
  }

  .alert-warning {
    @apply bg-accent-50 border border-accent-200 text-accent-800;
  }

  .alert-info {
    @apply bg-primary-50 border border-primary-200 text-primary-800;
  }

  .alert-icon {
    @apply w-5 h-5 flex-shrink-0 mt-0.5;
  }

  .alert-content {
    @apply flex-1;
  }

  .alert-title {
    @apply font-semibold;
  }

  .alert-message {
    @apply text-sm mt-1;
  }

  .modal-overlay {
    @apply fixed inset-0 bg-black/50 z-40;
  }

  .modal-content {
    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl z-50 max-w-md w-full mx-4;
  }

  .modal-header {
    @apply px-6 py-4 border-b border-slate-200 flex items-center justify-between;
  }

  .modal-title {
    @apply text-lg font-semibold text-slate-900;
  }

  .modal-body {
    @apply px-6 py-4;
  }

  .modal-footer {
    @apply px-6 py-4 border-t border-slate-200 flex items-center justify-end space-x-3;
  }

  .progress-bar {
    @apply h-2 bg-slate-200 rounded-full overflow-hidden;
  }

  .progress-fill {
    @apply h-full bg-gradient-to-r from-primary-500 to-accent-500 transition-all duration-300;
  }

  .input-group {
    @apply relative flex items-center;
  }

  .input-group-icon {
    @apply absolute left-4 w-5 h-5 text-slate-400 pointer-events-none;
  }

  .input-group-input {
    @apply pl-12;
  }
}

@layer utilities {
  .text-truncate {
    @apply truncate;
  }

  .text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    @apply overflow-hidden;
  }

  .text-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    @apply overflow-hidden;
  }

  .glass {
    @apply bg-white/80 backdrop-blur-md border border-white/20;
  }

  .glass-dark {
    @apply bg-slate-900/80 backdrop-blur-md border border-white/10;
  }

  .scroll-smooth-none {
    scroll-behavior: auto;
  }

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

  .safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Print styles */
@media print {
  .no-print {
    @apply hidden;
  }

  body {
    @apply bg-white;
  }

  .card {
    @apply shadow-none border border-slate-200;
  }
}