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

/* -----------------------------------------------------------------------------
 * Admin-side classes for the variation matrix editor inside UltimatePOS.
 * Scoped so it does not clash with AdminLTE globals.
 * ---------------------------------------------------------------------------*/

@layer components {
  .b2b-admin {
    @apply text-sm text-ink-800;
  }

  .b2b-editor-grid {
    @apply w-full border-collapse;
  }
  .b2b-editor-grid th,
  .b2b-editor-grid td {
    @apply border border-ink-200 p-1 align-middle;
  }
  .b2b-editor-grid thead th {
    @apply bg-ink-50 text-xs uppercase tracking-wide text-ink-600;
  }
  .b2b-editor-grid td.color-header,
  .b2b-editor-grid th.color-header {
    @apply text-left bg-ink-50 font-medium text-ink-800 min-w-[8rem];
  }
  .b2b-editor-grid .combo-cell {
    @apply relative;
  }
  .b2b-editor-grid input.combo-price {
    @apply w-24 rounded border-ink-200 text-right focus:border-brand-500 focus:ring-brand-500;
  }
  .b2b-editor-grid input.combo-stock {
    @apply w-16 rounded border-ink-200 text-center focus:border-brand-500 focus:ring-brand-500;
  }
  .b2b-editor-grid input.combo-sku {
    @apply w-28 rounded border-ink-200 text-xs focus:border-brand-500 focus:ring-brand-500;
  }
  .b2b-editor-grid .combo-cell[data-dirty="1"] {
    @apply bg-yellow-50;
  }
  .b2b-editor-grid .combo-cell[data-inactive="1"] {
    @apply bg-ink-100 opacity-60;
  }

  .b2b-bulk-fill {
    @apply flex flex-wrap items-center gap-2 rounded border border-ink-200
           bg-ink-50 p-3;
  }
  .b2b-btn {
    @apply inline-flex items-center gap-2 rounded bg-brand-600 px-3 py-1.5
           text-sm font-medium text-white hover:bg-brand-700;
  }
  .b2b-btn-outline {
    @apply inline-flex items-center gap-2 rounded border border-ink-300 bg-white
           px-3 py-1.5 text-sm font-medium text-ink-700 hover:bg-ink-50;
  }
}