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

/* -----------------------------------------------------------------------------
 * Storefront component classes — kept in the CSS file so views stay readable
 * and hot-reload is fast during Phase 2 rebuild.
 * ---------------------------------------------------------------------------*/

@layer components {
  .b2b-container {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  /* Product matrix table (bulkplaintshirt-style bulk-order grid) */
  .b2b-matrix {
    @apply w-full border-collapse text-sm;
  }
  .b2b-matrix th,
  .b2b-matrix td {
    @apply border border-ink-200 px-2 py-2 text-center align-middle;
  }
  .b2b-matrix thead th {
    @apply bg-ink-50 font-semibold text-ink-700;
  }
  .b2b-matrix .color-cell {
    @apply text-left font-medium text-ink-800 whitespace-nowrap;
  }
  .b2b-matrix input[type="number"] {
    @apply w-16 rounded border-ink-200 text-center focus:border-brand-500 focus:ring-brand-500;
    -moz-appearance: textfield;
  }
  .b2b-matrix input[type="number"]::-webkit-outer-spin-button,
  .b2b-matrix input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .b2b-matrix .cell-price {
    @apply block text-[10px] leading-3 text-ink-500 mt-1;
  }
  .b2b-matrix .cell-oos {
    @apply bg-ink-100 text-ink-400 cursor-not-allowed;
  }

  /* Sticky cart drawer button */
  .b2b-cart-fab {
    @apply fixed bottom-6 right-6 z-30 flex items-center gap-2 rounded-full
           bg-brand-600 px-5 py-3 text-white shadow-lg hover:bg-brand-700
           transition-colors;
  }

  /* Promo chip in header */
  .b2b-promo-chip {
    @apply inline-flex items-center gap-2 rounded-full border border-brand-200
           bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700 cursor-pointer;
  }
  .b2b-promo-chip[data-active="1"] {
    @apply bg-brand-600 text-white border-brand-600;
  }

  /* Category filter tabs */
  .b2b-tab {
    @apply px-3 py-1.5 rounded-full text-sm font-medium text-ink-600
           hover:text-brand-700 hover:bg-brand-50 cursor-pointer;
  }
  .b2b-tab[aria-current="page"] {
    @apply bg-brand-600 text-white hover:bg-brand-700;
  }
}