/**
 * Tailwind entrypoint — imported once per entrypoint bundle (widget, admin,
 * demo). See assets/lib/ui.ts for canonical `.bl-*` class name exports.
 *
 * Cascade inside Bookline surfaces:
 *   reset.css          — host isolation (!important box model only)
 *   @layer base        — scoped preflight: borders off until a utility asks
 *   @layer components  — .bl-btn, .bl-input, .bl-select, .bl-card
 *   @layer utilities   — Tailwind JIT (important-scoped to .bookline-surface)
 *
 * Preflight is off globally so WordPress chrome is untouched. Inside
 * .bookline-surface we zero border-width and set border-style: solid so
 * `border` / `border-b` utilities paint a 1px hairline — and nothing else does.
 */

@tailwind base;

/*
 * WordPress admin bar inset for fixed overlays (drawers, modals). Zero in
 * Storybook and when the toolbar is hidden; matches #wpadminbar heights.
 */
body.admin-bar {
	--admin-wp-bar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--admin-wp-bar: 46px;
	}
}

@layer base {
	/*
	 * Tailwind preflight's border contract, scoped to our mounts.
	 * Initial CSS border-width is `medium` (~3px) with style `none`. Setting
	 * style to solid WITHOUT width 0 paints a fat border on every node.
	 */
	:where( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root ) *,
	:where( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root ) *::before,
	:where( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root ) *::after {
		border-width: 0;
		border-style: solid;
		border-color: var(--ink-100);
	}

	:where( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root ) :where(
			button,
			input,
			select,
			textarea
		) {
		font: inherit;
		letter-spacing: inherit;
		text-transform: none;
		color: inherit;
		line-height: inherit;
		appearance: none;
		background-color: transparent;
	}

	:where( .bookline-surface, .bookline-widget, .bl-admin, #bookline-admin-root ) :where( fieldset ) {
		min-width: 0;
		padding: 0;
	}

	:where( .bookline-surface, .bookline-widget ) :focus-visible {
		outline: var(--focus-ring);
		outline-offset: var(--sp-5);
	}
}

@tailwind components;

@layer components {
	.bl-focus {
		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	.bl-focus-danger {
		@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	.bl-field {
		@apply flex flex-col gap-sp-5;
	}

	.bl-label {
		@apply text-text-sm font-medium text-ink-900;
	}

	.bl-hint {
		@apply text-text-xs text-ink-500;
	}

	.bl-input {
		@apply px-sp-15 py-sp-10 bg-paper-0 border border-ink-200 rounded-md text-text-sm text-ink-900 outline-none focus:border-accent-500 focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 focus:ring-offset-paper-0;
	}

	.bl-select {
		@apply bl-input shrink-0 min-w-[3.75rem] pr-sp-45 cursor-pointer;
		appearance: none;
		background-image:
			linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
			linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
		background-position:
			calc(100% - var(--sp-15)) calc(50% - 2px),
			calc(100% - var(--sp-10)) calc(50% - 2px);
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
	}

	.bl-select--compact {
		@apply px-sp-10 py-sp-5 min-w-[3.25rem];
	}

	.bl-btn {
		@apply inline-flex items-center justify-center gap-sp-5 border border-transparent px-sp-15 py-sp-10 rounded-md text-text-sm font-medium cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	.bl-btn--compact {
		@apply px-sp-10 py-sp-5 text-text-xs;
	}

	.bl-btn--ghost {
		@apply bl-btn bg-paper-0 text-ink-900 border-ink-200 hover:bg-surface-hover;
	}

	.bl-btn--primary {
		@apply bl-btn px-sp-20 py-sp-10 bg-accent-500 text-on-accent border-ink-900 font-semibold hover:bg-accent-700 hover:border-ink-900;
	}

	.bl-btn--danger {
		@apply bl-btn font-semibold bg-paper-0 text-danger border-danger hover:bg-[var(--danger-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	/* Solid red — cancel runs, disable automations, other stop/abandon actions. */
	.bl-btn--danger-solid {
		@apply bl-btn font-semibold bg-danger text-paper-0 border-danger hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	.bl-btn--plain {
		@apply inline-flex items-center gap-sp-5 -mx-sp-5 rounded-md border-0 bg-transparent px-sp-5 py-sp-5 text-left hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	.bl-card {
		@apply bg-paper-0 border border-ink-100 rounded-lg;
	}

	.bl-card--muted {
		@apply bl-card bg-paper-50;
	}

	.bl-card--interactive {
		@apply bl-card cursor-pointer transition-colors duration-fast ease-out hover:border-accent-300 hover:bg-paper-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500 focus-visible:ring-offset-2 focus-visible:ring-offset-paper-0;
	}

	.bl-flow-canvas {
		@apply bg-paper-50;
		background-image: radial-gradient(
			var(--ink-200) 0.12rem,
			transparent 0.14rem
		);
		background-size: var(--sp-20) var(--sp-20);
	}

	.bl-flow-workspace {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: var(--paper-50);
	}

	.bl-flow-canvas-layer {
		position: absolute;
		inset: 0;
	}

	.bl-flow-canvas-layer .bl-flow-canvas {
		width: 100%;
		height: 100%;
		min-height: 0;
		border-radius: 0;
		border-width: 0;
	}

	.bl-flow-panel {
		position: absolute;
		top: var(--sp-20);
		bottom: var(--sp-20);
		z-index: 4;
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;
		overscroll-behavior: contain;
	}

	.bl-flow-panel > * {
		min-height: 0;
	}

	.bl-flow-panel--left > * {
		flex: 1 1 auto;
	}

	.bl-flow-panel--collapsed {
		bottom: auto;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.bl-flow-panel--collapsed > * {
		flex: 0 0 auto;
	}

	.bl-flow-panel__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bl-flow-chrome {
		position: absolute;
		top: var(--sp-20);
		left: calc(var(--sp-20) + var(--forms-list-w) + var(--sp-15));
		right: calc(var(--sp-20) + var(--drawer-w) + var(--sp-15));
		z-index: 3;
		display: flex;
		flex-direction: column;
		gap: var(--sp-10);
		width: auto;
		max-width: none;
		pointer-events: none;
	}

	.bl-flow-chrome > * {
		pointer-events: auto;
	}

	.bl-flow-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-10);
		padding: var(--sp-10);
		background: var(--paper-0);
		border: 1px solid var(--ink-100);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-pop);
	}

	.bl-flow-toolbar .bl-input {
		flex: 1 1 10rem;
		min-width: 8rem;
	}

	.bl-flow-rail {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bl-flow-canvas__hint {
		position: absolute;
		bottom: var(--sp-10);
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		text-align: center;
		pointer-events: none;
		color: var(--ink-400);
		font-size: var(--text-xs-size);
		line-height: var(--text-xs-line);
	}

	.bl-automation-canvas {
		@apply bg-paper-50 border border-ink-100 rounded-lg;
	}

	.bl-chip {
		@apply inline-flex w-fit shrink-0 items-center rounded-full border px-sp-10 py-sp-5 text-text-xs font-medium whitespace-nowrap;
	}

	.bl-chip--quiet {
		@apply bl-chip border-ink-200 bg-paper-0 text-ink-500;
	}

	.bl-chip--free {
		@apply bl-chip border-free bg-[var(--free-bg)] text-free;
	}
}

@tailwind utilities;

/* Beat scoped utilities (`p-sp-30`, `overflow-auto`, `w-full`) on the canvas. */
.bookline-surface #bl-admin-main.bl-flow-open {
	padding: 0 !important;
	overflow: hidden !important;
}

.bookline-surface .bl-flow-panel--left {
	left: var(--sp-20) !important;
	width: var(--forms-list-w) !important;
	max-width: min(var(--forms-list-w), calc(100% - 2 * var(--sp-20))) !important;
}

.bookline-surface .bl-flow-panel--right {
	right: var(--sp-20) !important;
	width: var(--drawer-w) !important;
	max-width: min(var(--drawer-w), calc(100% - 2 * var(--sp-20))) !important;
}

.bookline-surface .bl-flow-panel--left.bl-flow-panel--collapsed,
.bookline-surface .bl-flow-panel--right.bl-flow-panel--collapsed {
	width: auto !important;
	max-width: none !important;
}

.bl-search-select {
	width: 100%;
}

.bl-search-select__control {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
	cursor: text;
	height: var(--touch-target);
	min-height: var(--touch-target);
	padding: 0 var(--sp-10);
}

/* Inner combobox is not a second field — kill WP-admin input chrome. */
.bookline-surface .bl-search-select__input,
.bookline-surface .bl-search-select__input:focus,
.bookline-surface .bl-search-select__input:focus-visible {
	flex: 1 1 8rem;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent !important;
	font: inherit;
	color: inherit;
	outline: none;
	line-height: inherit;
}

.bl-search-select__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-5);
	max-width: 100%;
	padding: var(--sp-5) var(--sp-10);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-full);
	background: var(--paper-50);
	color: var(--ink-900);
	font-size: var(--text-xs-size);
	line-height: var(--text-xs-line);
}

.bl-search-select__chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-500);
	cursor: pointer;
	border-radius: var(--r-full);
}

.bl-search-select__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: inherit;
}

.bl-search-select__menu {
	position: fixed;
	z-index: 40;
	margin: var(--sp-5) 0 0;
	padding: var(--sp-5);
	list-style: none;
	max-height: var(--forms-scope-list-max);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper-0);
	border: 1px solid var(--ink-100);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-pop);
}

.bl-search-select__option {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
	padding: var(--sp-10) var(--sp-15);
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--ink-900);
	font-size: var(--text-sm-size);
	line-height: var(--text-sm-line);
}

.bl-search-select__option--active,
.bl-search-select__option[aria-selected='true'] {
	background: var(--surface-hover);
}

.bl-search-select__empty {
	padding: var(--sp-10) var(--sp-15);
	color: var(--ink-500);
	font-size: var(--text-sm-size);
}

.bl-filter-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--sp-15);
	padding: var(--sp-20);
	background: var(--paper-0);
	border: 1px solid var(--ink-100);
	border-radius: var(--r-md);
}

.bl-filter-toolbar__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-15);
}

.bl-filter-toolbar__columns > summary {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--touch-target);
	height: var(--touch-target);
	min-height: var(--touch-target);
	padding: 0;
}

.bl-filter-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 11rem;
	flex: 1 1 11rem;
}

.bl-filter-field--search {
	flex: 2 1 16rem;
	min-width: 16rem;
}

.bl-filter-search {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background: var(--paper-0);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-md);
	height: var(--touch-target);
	min-height: var(--touch-target);
}

.bl-filter-search:focus-within {
	border-color: var(--accent-500);
	box-shadow: 0 0 0 2px var(--paper-0), 0 0 0 4px var(--accent-500);
}

.bl-filter-search__icon {
	position: absolute;
	left: var(--sp-15);
	top: 50%;
	width: var(--sp-15);
	height: var(--sp-15);
	transform: translateY(-50%);
	color: var(--ink-400);
	pointer-events: none;
}

.bookline-surface .bl-filter-search__input,
.bookline-surface .bl-filter-search__input:focus,
.bookline-surface .bl-filter-search__input:focus-visible {
	width: 100%;
	min-height: 0;
	height: auto;
	margin: 0;
	border: 0 !important;
	border-radius: var(--r-md);
	box-shadow: none !important;
	background: transparent !important;
	color: var(--ink-900);
	font: inherit;
	font-size: var(--text-sm-size);
	line-height: var(--text-sm-line);
	outline: none;
	padding: var(--sp-10) var(--sp-45) var(--sp-10) var(--sp-45);
}

.bookline-surface .bl-filter-search__input::-webkit-search-decoration,
.bookline-surface .bl-filter-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.bl-filter-search__clear {
	position: absolute;
	right: var(--sp-10);
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-400);
	cursor: pointer;
	transform: translateY(-50%);
	border-radius: var(--r-full);
}

.bl-filter-search__clear:hover,
.bl-filter-search__clear:focus-visible {
	color: var(--ink-900);
}

.bl-filter-toolbar__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-10);
}

.bl-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-5);
	padding: var(--sp-5) var(--sp-10);
	border: 1px solid var(--ink-200);
	border-radius: var(--r-full);
	background: var(--paper-50);
	color: var(--ink-900);
	font-size: var(--text-xs-size);
	line-height: var(--text-xs-line);
}

.bl-filter-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink-500);
	cursor: pointer;
	border-radius: var(--r-full);
}

.bl-filter-toolbar__clear {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--accent-600);
	font: inherit;
	font-size: var(--text-sm-size);
	line-height: var(--text-sm-line);
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
}