/**
 * Shared Tailwind class strings for admin (no @apply in SCSS).
 * Scope: tailwind.config.js `important` = `.ultimate-store-kit-admin-root` → utilities compile as
 * `.ultimate-store-kit-admin-root .w-full { … }`. Never put `w-*` / `min-w-*` / `max-w-*` (or other
 * Tailwind utilities) on the same element as `ultimate-store-kit-admin-root`; use a child or
 * `display: contents` wrapper (see OfferEditor portal).
 */

export const appShell =
	'flex min-h-[calc(100vh-100px)] flex-col m-5 ml-0 mb-0 font-sans';

/** Row under header: stretch columns to same height so sidebar bg fills to content bottom. */
export const bodyRow = 'flex flex-1 items-stretch p-5 gap-5';

/** Main column grows with page; min-w-0 avoids flex overflow quirks. */
export const mainContent = 'min-w-0 flex-1';

/* Buttons */
const btnBase =
	'inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-transparent px-[18px] py-2 text-[13px] font-semibold leading-snug no-underline transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-60';

export const btnPrimary = `${btnBase} border-uks-brand bg-uks-brand text-white hover:bg-uks-brand-dark`;

export const btnSecondary = `${btnBase} bg-gray-100 border-gray-200 text-gray-700 hover:bg-gray-200 hover:text-gray-800`;

export const btnLg = `${btnBase} px-6 py-2.5 text-sm`;

export const btnSm = `${btnBase} px-3 py-2.5 text-xs`;

export const btnOutlineGreen = `${btnBase} border-uks-brand bg-transparent text-uks-brand hover:bg-uks-brand hover:text-white`;

export const btnOutlineRed = `${btnBase} border-red-500 bg-transparent text-red-500 hover:bg-red-500 hover:text-white`;

export const btnEp = `${btnBase} border-indigo-500 bg-indigo-500 text-white hover:opacity-90`;
export const btnPs = `${btnBase} border-pink-500 bg-pink-500 text-white hover:opacity-90`;
export const btnUpk = `${btnBase} border-orange-500 bg-orange-500 text-white hover:opacity-90`;
export const btnPg = `${btnBase} border-violet-500 bg-violet-500 text-white hover:opacity-90`;
export const btnZb = `${btnBase} border-teal-500 bg-teal-500 text-white hover:opacity-90`;

/* Form */
export const selectLabel = 'whitespace-nowrap text-xs font-semibold text-slate-600';

export const selectInput =
	'min-w-[140px] cursor-pointer rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[13px] text-slate-700 transition-all duration-200 hover:border-slate-300 focus:border-uks-brand focus:outline-none focus:ring-2 focus:ring-uks-brand';

export const fieldRow =
	'flex items-center justify-between border-b border-slate-100 py-2.5 last:border-b-0';

export const fieldLabel = 'flex items-center gap-2 text-[13px] font-medium text-slate-700';

export const fieldControl =
	'min-w-[120px] w-full block max-w-full rounded-md border border-slate-200 bg-white px-3 py-1.5 text-[13px] text-slate-700 focus:border-uks-brand focus:outline-none focus:ring-2 focus:ring-uks-brand disabled:cursor-not-allowed disabled:opacity-50';

export const licenseInput =
	'w-full rounded-md border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-700 transition-all duration-200 placeholder:text-slate-400 focus:border-uks-brand focus:outline-none focus:ring-2 focus:ring-uks-brand';

/* Toggle — self-contained React component; avoids WP admin CSS overrides on peer/transform */
export { default as Toggle } from './components/Toggle';

// Keep these for any legacy usage; new code should use <Toggle /> component
export const toggleLabel = 'relative inline-block h-[22px] w-10 cursor-pointer';
export const toggleInput = 'peer sr-only';
export const toggleTrack =
	'pointer-events-none absolute inset-0 rounded-full bg-slate-300 transition-colors duration-200 peer-checked:bg-uks-brand peer-disabled:opacity-50';
export const toggleKnob =
	'pointer-events-none absolute bottom-[3px] left-[3px] z-[1] h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-[18px]';

/* Pro badge on cards */
export const proBadge =
	'shrink-0 whitespace-nowrap rounded-md border border-solid border-gray-100 text-uks-brand px-2 py-0.5 text-[10px] font-bold shadow-sm bg-white';