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

/* Desktop density: scale down base font size for data-dense views */
@media (min-width: 1024px) {
  html {
    font-size: 13px;
  }
}

/* Form loading state: hide content until Stimulus controllers are ready,
   preventing flash of unstyled native dropdowns */
[data-form-loading] {
  position: relative;
}
[data-form-loading] > *:not([data-form-loader]) {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
[data-form-loading="ready"] > *:not([data-form-loader]) {
  opacity: 1;
}
[data-form-loading="ready"] > [data-form-loader] {
  display: none;
}

@layer components {
  .btn-retro     { @apply border-2 border-black px-3 py-1 font-medium shadow-retro-sm text-sm; }
  .btn-primary   { @apply btn-retro bg-teal-500 text-black hover:bg-teal-400; }
  .btn-secondary { @apply btn-retro text-black hover:bg-gray-100; }
  .btn-danger    { @apply btn-retro bg-red-500 text-white hover:bg-red-400; }
  .btn-admin     { @apply btn-retro bg-orange-400 text-black hover:bg-orange-300; }
  .panel         { @apply bg-gray-100 border-4 border-black shadow-retro; }
  .panel-header  { @apply text-black px-4 py-3 font-bold text-sm tracking-widest border-b-4 border-black uppercase; }
  .panel-header-teal  { @apply panel-header bg-teal-400; }
  .panel-header-admin { @apply panel-header bg-orange-400; }
  .input-retro   { @apply w-full border-2 border-black px-2 py-1.5 text-sm; }
  .bg-checkerboard {
    background-image:
      linear-gradient(45deg, #d1d5db 25%, transparent 25%),
      linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #d1d5db 75%),
      linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  }
}