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

@layer base {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  :root {
    --brand-primary: #e30613;
    --brand-primary-light: #ff1a27;
    --brand-primary-dark: #c00510;
  }

  body {
    @apply overflow-x-hidden bg-white text-slate-900;
    overscroll-behavior: none;
  }

  ::-webkit-scrollbar {
    width: 0;
    display: none;
  }
}

@layer components {
  .btn-primary {
    @apply w-full rounded-2xl bg-p4l-red px-6 py-4 text-base font-semibold text-white
           transition-all duration-200 ease-in-out active:scale-[0.97]
           hover:bg-p4l-red-dark focus:outline-none focus:ring-2 focus:ring-red-500/30;
  }

  .btn-secondary {
    @apply w-full rounded-xl border border-slate-200 bg-slate-100 px-5 py-3 text-sm
           font-medium text-slate-700 transition-all duration-200 ease-in-out
           active:scale-[0.97] hover:bg-slate-200 focus:outline-none;
  }

  .lab-card {
    @apply animate-slide-up rounded-[1.75rem] border border-white/80 bg-white/70 p-5
           shadow-[0_4px_24px_rgba(15,23,42,0.07)] backdrop-blur-xl
           transition-all duration-300 ease-in-out;
  }

  .lab-card-header {
    @apply mb-3 flex items-center justify-between;
  }

  .lab-card-title {
    @apply flex items-center gap-2 text-sm font-semibold text-slate-900;
  }

  .status-badge {
    @apply rounded-full px-2.5 py-1 text-xs font-semibold;
  }

  .status-pass {
    @apply status-badge bg-emerald-50 text-emerald-600;
  }

  .status-fail {
    @apply status-badge bg-red-50 text-red-500;
  }

  .status-pending {
    @apply status-badge bg-white/60 text-slate-400;
  }

  .status-running {
    @apply status-badge bg-amber-50 text-amber-600;
  }

  .section-bg {
    @apply rounded-2xl border border-white/70 bg-white/50 p-4 backdrop-blur-sm;
  }
}