/* Tailwind CSS base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

/* Custom Component Classes */
@layer components {

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
  }

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

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

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

  /* Modern Cards */
  .card {
    @apply bg-white rounded-xl shadow-sm border border-secondary-200 overflow-hidden transition-all duration-200;
  }

  .card:hover {
    @apply shadow-md;
  }

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

  .card-body {
    @apply p-6;
  }

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

  /* Metric Cards - Modern Stats */
  .metric-card {
    @apply bg-gradient-to-br from-white to-secondary-50 rounded-xl p-6 shadow-sm border border-secondary-200 hover:shadow-md transition-all duration-200;
  }

  .metric-label {
    @apply text-sm font-medium text-secondary-600 mb-2;
  }

  .metric-value {
    @apply text-3xl font-bold text-secondary-900 mb-1;
  }

  /* Buttons - Modern & Clean */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg 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 shadow-sm hover:shadow;
  }

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

  .btn-outline-primary {
    @apply border-2 border-primary-600 text-primary-600 hover:bg-primary-50;
  }

  .btn-outline-secondary {
    @apply border border-secondary-300 text-secondary-700 hover:bg-secondary-50 hover:border-secondary-400;
  }

  .btn-soft-primary {
    @apply bg-primary-50 text-primary-700 hover:bg-primary-100;
  }

  .btn-outline-danger {
    @apply border border-red-300 text-red-700 hover:bg-red-50;
  }

  .btn-sm,
  .btn-group-sm .btn {
    @apply px-3 py-1.5 text-xs;
  }

  .btn-group {
    @apply inline-flex rounded-lg shadow-sm;
  }

  .btn-group .btn {
    @apply rounded-none first:rounded-l-lg last:rounded-r-lg;
  }

  /* Form Elements - Clean & Modern */
  .form-label {
    @apply block text-sm font-medium text-secondary-700 mb-1.5;
  }

  .form-control,
  .form-select,
  .form-input {
    @apply w-full px-4 py-2.5 text-sm border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors;
  }

  .form-control:disabled {
    @apply bg-secondary-100 cursor-not-allowed;
  }

  /* Tables - Beautiful & Functional */
  .table-responsive {
    @apply overflow-x-auto rounded-lg;
  }

  .table {
    @apply w-full text-sm text-left;
  }

  .table thead {
    @apply bg-secondary-100 border-b-2 border-secondary-200;
  }

  .table th {
    @apply px-6 py-3 text-xs font-semibold text-secondary-700 uppercase tracking-wider;
  }

  .table td {
    @apply px-6 py-4 text-secondary-900;
  }

  .table tbody tr {
    @apply border-b border-secondary-100 hover:bg-secondary-50 transition-colors;
  }

  .table-modern {
    @apply table;
  }

  .table-modern thead {
    @apply bg-gradient-to-r from-secondary-50 to-secondary-100;
  }

  .table-hover tbody tr:hover {
    @apply bg-primary-50/30;
  }

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

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

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

  .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-soft-warning {
    @apply bg-yellow-50 text-yellow-700 border border-yellow-200;
  }

  .badge-soft-success {
    @apply bg-green-50 text-green-700 border border-green-200;
  }

  /* Alerts - Eye-catching */
  .alert {
    @apply px-4 py-3 rounded-lg border flex items-start gap-3;
  }

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

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

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

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

  /* Sidebar Navigation */
  .sidebar {
    @apply fixed inset-y-0 left-0 z-50 w-64 bg-secondary-900 text-white transform transition-transform duration-300 ease-in-out md:translate-x-0;
  }

  .sidebar-link {
    @apply flex items-center px-4 py-3 text-secondary-300 hover:bg-secondary-800 hover:text-white rounded-lg transition-all duration-200 cursor-pointer;
  }

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

  /* Page Heading */
  .page-heading {
    @apply flex items-center justify-between mb-6 pb-4 border-b border-secondary-200;
  }

  /* Breadcrumb */
  .breadcrumb {
    @apply flex flex-wrap items-center space-x-2 text-sm text-secondary-600;
  }

  .breadcrumb-item {
    @apply flex items-center;
  }

  .breadcrumb-item:not(:last-child)::after {
    content: '/';
    @apply mx-2 text-secondary-400;
  }

  .breadcrumb-item.active {
    @apply text-secondary-900 font-medium;
  }

  .breadcrumb a {
    @apply text-primary-600 hover:text-primary-800 hover:underline;
  }

  /* Pagination */
  .pagination {
    @apply flex items-center gap-1;
  }

  .page-item {
    @apply inline-block;
  }

  .page-link {
    @apply px-3 py-2 text-sm border border-secondary-300 rounded-lg hover:bg-secondary-50 transition-colors;
  }

  .page-item.active .page-link {
    @apply bg-primary-600 text-white border-primary-600;
  }

  /* Utilities */
  .text-muted {
    @apply text-secondary-500;
  }

  .fw-semibold {
    @apply font-semibold;
  }

  .small {
    @apply text-xs;
  }
}

@layer utilities {
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}