/**
 * OpenStation — Recycle Bin window styles.
 *
 * Scoped to `.desktop-mode-recycle-bin` so the rules can't leak into other
 * windows. Layout: a sticky toolbar across the top, then a flex-1
 * body that hosts a `<os-table>`. The table is told to size to the
 * body via `--os-ui-table-max-height: 100%` so its sticky header
 * engages.
 */

.desktop-mode-recycle-bin {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: var( --os-ui-surface, #fff );
	color: var( --os-ui-fg, #1d2327 );
}

.os-recycle-bin__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	background: var( --os-ui-surface-elevated, #f6f7f7 );
}

.os-recycle-bin__toolbar-left,
.os-recycle-bin__toolbar-right,
.os-recycle-bin__toolbar-trailing {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * Honour the `hidden` attribute. The browser's UA stylesheet
 * sets `[hidden] { display: none }`, but our explicit
 * `display: flex` above wins on specificity. These rules restore
 * the expected behaviour for the two groups the JS hides: the bulk
 * actions (nothing selected) and the whole toolbar (nothing in the
 * bin). `<os-empty-state>` handles its own.
 */
.os-recycle-bin__toolbar[hidden],
.os-recycle-bin__toolbar-right[hidden] {
	display: none;
}

.os-recycle-bin__toolbar-trailing {
	margin-inline-start: auto;
}

.os-recycle-bin__count {
	font-size: 12px;
	font-weight: 600;
	color: var( --os-ui-fg-muted, #50575e );
	font-variant-numeric: tabular-nums;
	padding-inline-end: 4px;
}

.os-recycle-bin__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	padding: 8px 12px 12px;
}

.os-recycle-bin__body os-table {
	flex: 1 1 auto;
	/*
	 * A flex item's minimum size is its content's, and this content
	 * is a table whose columns refuse to wrap: without the 0 the
	 * table grows past the body, the body (which does not scroll)
	 * clips it, and the table's own scroller — the one thing that can
	 * scroll sideways — never overflows. This is what made a long
	 * title unreachable in a narrow window.
	 */
	min-inline-size: 0;
	--os-ui-table-max-height: 100%;
}

/*
 * A narrow window — a phone, or a desktop window pulled in. The
 * toolbar's three groups each take a whole row instead of sharing
 * one: the type filter scrolls sideways under the search, the
 * selection actions share their row, and Empty Trash keeps the last
 * row's end. Nothing overflows the window's edge. The container is
 * the app root (`.os-app`, `app-runtime.css`).
 */
@container ( max-width: 560px ) {
	.os-recycle-bin__toolbar {
		gap: 8px;
		padding: 8px 10px;
	}

	.os-recycle-bin__toolbar-left,
	.os-recycle-bin__toolbar-right,
	.os-recycle-bin__toolbar-trailing {
		flex: 1 1 100%;
		min-inline-size: 0;
	}

	.os-recycle-bin__toolbar-left {
		flex-wrap: wrap;
	}

	.os-recycle-bin__toolbar-left os-segmented {
		flex: 1 1 100%;
		max-inline-size: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.os-recycle-bin__toolbar-left os-text-field {
		flex: 1 1 100%;
	}

	.os-recycle-bin__toolbar-right {
		flex-wrap: wrap;
	}

	.os-recycle-bin__toolbar-right os-button {
		flex: 1 1 auto;
	}

	.os-recycle-bin__count {
		flex: 1 1 100%;
	}

	.os-recycle-bin__toolbar-trailing {
		margin-inline-start: 0;
		justify-content: flex-end;
	}

	.os-recycle-bin__body {
		padding: 6px 8px 8px;
	}
}

/*
 * The phone (the shell's mode stamp, at any width). The list is a
 * card per row (`<os-table stacked>`, set by the app) running edge to
 * edge; the search leads the toolbar, with the type chips scrolling
 * under it; and the selection's actions are a bar along the bottom
 * of the window, under the thumb, instead of a row in the toolbar
 * the list has scrolled away from. The bar is a flex sibling of the
 * body, so the cards end where it begins.
 */
html[data-os-mode="mobile"] .os-recycle-bin__toolbar {
	gap: 8px;
	padding: 8px 10px;
}

html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left,
html[data-os-mode="mobile"] .os-recycle-bin__toolbar-trailing {
	flex: 1 1 100%;
	min-inline-size: 0;
}

html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left {
	flex-wrap: wrap;
}

html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left os-text-field {
	order: -1;
	flex: 1 1 100%;
}

html[data-os-mode="mobile"] .os-recycle-bin__toolbar-left os-segmented {
	flex: 1 1 100%;
	max-inline-size: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

html[data-os-mode="mobile"] .os-recycle-bin__toolbar-trailing {
	margin-inline-start: 0;
	justify-content: flex-end;
}

html[data-os-mode="mobile"] .os-recycle-bin__body {
	padding: 0;
}

.os-recycle-bin__bulk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px calc( 10px + env( safe-area-inset-bottom, 0px ) );
	border-block-start: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	background: var( --os-ui-surface-elevated, #f6f7f7 );
	box-shadow: 0 -6px 18px rgba( 0, 0, 0, 0.06 );
}

.os-recycle-bin__bulk[hidden] {
	display: none;
}

.os-recycle-bin__bulk .os-recycle-bin__count {
	flex: 1 1 100%;
	padding-inline-end: 0;
}

.os-recycle-bin__bulk os-button {
	flex: 1 1 auto;
}

/*
 * NOTE — cell-content styles are now inlined in `src/recycle-bin/
 * index.ts`. `<os-table>` renders into its own shadow DOM, which
 * blocks document-level stylesheets (and Dashicons) from reaching
 * any node we return from a `column.render` callback. The empty-
 * state, toolbar, and body styles below remain CSS because they
 * live in the bin window's light-DOM template.
 */

/* `<os-empty-state>` centres its own contents; this makes it fill
 * the body once the table beside it is hidden. */
.os-recycle-bin__body os-empty-state {
	flex: 1 1 auto;
}

/*
 * Drop-target highlight for cross-window drag-to-trash. Set when
 * the desktop drag handler hit-tests the cursor over the bin's
 * root via `data-os-trash-drop-active`. Returns to
 * normal on pointer-up or when the cursor leaves the window.
 */
.desktop-mode-recycle-bin[ data-os-trash-drop-active ] {
	position: relative;
	box-shadow: inset 0 0 0 2px var( --wp-admin-theme-color, #2271b1 );
	transition: box-shadow 80ms ease;
}

/* Dock-icon variant: when the recycle-bin window is closed, the
 * desktop drag handler highlights the dock tile instead. Same
 * affordance — outline + faint tint — so the user reads the icon
 * as a valid drop target without needing to open the window
 * first. The selector matches the dock tile's `data-system-id`
 * so this CSS applies wherever the recycle-bin dock entry
 * renders (left rail, bottom rail, future placements). */
.os-dock__item[ data-system-id="desktop-mode-recycle-bin" ][ data-os-trash-drop-active ] {
	outline: 2px solid var( --wp-admin-theme-color, #2271b1 );
	outline-offset: 2px;
	border-radius: 12px;
	background: color-mix(
		in srgb,
		var( --wp-admin-theme-color, #2271b1 ) 14%,
		transparent
	);
	transition:
		outline-color 80ms ease,
		background 80ms ease;
}

.desktop-mode-recycle-bin[ data-os-trash-drop-active ]::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: color-mix(
		in srgb,
		var( --wp-admin-theme-color, #2271b1 ) 8%,
		transparent
	);
	z-index: 1;
}

.desktop-mode-recycle-bin[ data-os-trash-drop-active ]::after {
	content: '🗑  Drop to move to Trash';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	padding: 10px 18px;
	border-radius: 999px;
	background: var( --wp-admin-theme-color, #2271b1 );
	color: var( --os-ui-fg-on-accent, #fff );
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.2px;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
	pointer-events: none;
	z-index: 2;
}