/*@import "tailwindcss";*/

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

/* You can add your custom CSS below this line if needed in the future */

@layer components {
  /* Cards / auth shell */
  .icon-badge {
    @apply bg-blue-600 text-white rounded-xl p-3;
  }
  .auth-card {
    @apply bg-white rounded-2xl shadow-lg p-8 w-full max-w-sm;
  }
  .auth-title {
    @apply text-2xl font-bold text-gray-900;
  }
  .auth-subtitle {
    @apply text-sm text-gray-500;
  }

  /* Alerts */
  .alert-error {
    @apply rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700;
  }
  .alert-notice-pill {
    @apply py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block;
  }

  /* Form fields */
  .field-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  .field-label-compact {
    @apply text-sm font-medium text-gray-700;
  }
  .field-label-bold {
    @apply block text-sm font-semibold text-slate-900;
  }
  .field-input {
    @apply mt-2 block w-full rounded-md border px-3 py-2 shadow-sm;
  }
  .auth-input {
    @apply border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
  .field-checkbox {
    @apply w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500;
  }

  /* Buttons */
  .btn-primary-block {
    @apply w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition cursor-pointer;
  }
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2;
  }
  .pill-toggle {
    @apply rounded-xl px-4 py-2 font-medium;
  }

  /* Report show page */
  .section-heading {
    @apply text-lg font-semibold text-slate-900 mb-5 flex items-center gap-2;
  }
  .detail-label {
    @apply text-xs font-medium text-gray-500 uppercase tracking-wide mb-1;
  }
  .detail-label-block {
    @apply text-xs font-medium text-gray-500 uppercase tracking-wide mb-2;
  }
  .detail-value {
    @apply text-slate-900;
  }
  .detail-value-wrap {
    @apply text-slate-900 whitespace-pre-wrap;
  }
  .detail-image {
    @apply rounded-lg border border-slate-200 max-w-full object-cover;
  }
  .detail-image-full {
    @apply rounded-lg border border-slate-200 w-full object-cover;
  }
  .detail-empty {
    @apply text-slate-400 italic text-sm;
  }
  .detail-divider {
    @apply border-slate-200 mb-10;
  }
  .subcard {
    @apply my-5 border border-slate-300 rounded-lg p-5 bg-slate-50;
  }
  .step-circle {
    @apply w-8 h-8 shrink-0 rounded-full flex items-center justify-center text-sm font-semibold;
  }
}