cloud-host/frontend/src/app/globals.css

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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }

  /* Smooth scrollbar */
  ::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
  }
}

@layer components {
  /* ─── Buttons ──────────────────────────────────────────── */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 bg-primary-600 text-white
           px-4 py-2.5 rounded-xl font-semibold text-sm
           hover:bg-primary-700 active:scale-[0.98]
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
           transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed
           shadow-sm hover:shadow-md;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 bg-white text-gray-700
           px-4 py-2.5 rounded-xl font-semibold text-sm border border-gray-300
           hover:bg-gray-50 active:scale-[0.98]
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
           transition-all duration-150 shadow-sm;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center gap-2 bg-red-600 text-white
           px-4 py-2.5 rounded-xl font-semibold text-sm
           hover:bg-red-700 active:scale-[0.98]
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2
           transition-all duration-150 shadow-sm hover:shadow-md
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 text-gray-600
           px-3 py-2 rounded-xl font-medium text-sm
           hover:bg-gray-100 active:scale-[0.98]
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
           transition-all duration-150;
  }

  .btn-icon {
    @apply inline-flex items-center justify-center w-9 h-9 rounded-xl
           text-gray-500 hover:bg-gray-100 hover:text-gray-700
           active:scale-[0.95] transition-all duration-150;
  }

  /* ─── Inputs ──────────────────────────────────────────── */
  .input-field {
    @apply w-full px-3.5 py-2.5 border border-gray-300 rounded-xl shadow-sm text-sm
           placeholder-gray-400 bg-white
           focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500
           transition-all duration-150;
  }

  /* ─── Cards ──────────────────────────────────────────── */
  .card {
    @apply bg-white rounded-2xl shadow-sm border border-gray-200/80 p-6
           transition-shadow duration-200;
  }
  .card-hover {
    @apply card hover:shadow-md hover:border-gray-300;
  }

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

  /* ─── Stat card ──────────────────────────────────────── */
  .stat-card {
    @apply bg-white rounded-2xl border border-gray-200/80 p-5 shadow-sm
           flex flex-col gap-1;
  }
  .stat-value {
    @apply text-3xl font-bold tracking-tight;
  }
  .stat-label {
    @apply text-sm font-medium text-gray-500;
  }

  /* ─── Table ──────────────────────────────────────────── */
  .table-wrapper {
    @apply overflow-hidden rounded-2xl border border-gray-200/80 bg-white shadow-sm;
  }

  /* ─── Loading skeleton ──────────────────────────────── */
  .skeleton {
    @apply animate-pulse bg-gray-200 rounded-xl;
  }

  /* ─── Page header ──────────────────────────────────── */
  .page-header {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4;
  }
  .page-title {
    @apply text-2xl font-bold text-gray-900 tracking-tight;
  }
  .page-subtitle {
    @apply text-sm text-gray-500 mt-0.5;
  }
}

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}
.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}