/* ================================================================
 *  bulk-delete.css  —  Bulk asset deletion styles
 *
 *  Light mode — uses the same --ii-* variables as the rest of the
 *  design system (white backgrounds, #111827 text, etc.)
 *  Animation: translateY(100%) → translateY(0), 220ms cubic-bezier(0.16, 1, 0.3, 1)
 * ================================================================ */

/* ──────────────────────────────────────────────────────────────────
 *  Section ⋯ Options Button
 *  Single icon button in the section title row, replaces
 *  the old separate "+ Add" and "Select" buttons.
 * ────────────────────────────────────────────────────────────────── */

.ii-section-options-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: var(--ii-radius-sm);
	border: 1px solid transparent;
	background: transparent;
	color: var(--ii-text-primary);
	cursor: pointer;
	outline: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;

	/* Push to far right of the flex title row */
	margin-left: auto;
}

.ii-section-options-btn:hover {
	border-color: var(--ii-border, rgba(0, 0, 0, 0.08));
	color: var(--ii-text-secondary, #6b7280);
}

/* Open state (matches .is-popper-open set by AiDesignPopper) */
.ii-section-options-btn.is-popper-open {
	background: var(--ii-bg-active, #f3f4f6);
	border-color: var(--ii-border, rgba(0, 0, 0, 0.08));
	color: var(--ii-text-primary, #111827);
}

.ii-section-options-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* ──────────────────────────────────────────────────────────────────
 *  Header Bulk Toggle Button
 *  Sits in .ii-assets-sidebar-header, injected by JS.
 *  Icon-only button that enters / exits global bulk select mode.
 * ────────────────────────────────────────────────────────────────── */

.ii-bulk-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--ii-radius-md);
	border: 1px solid transparent;
	background: transparent;
	color: var(--ii-text-tertiary, #9ca3af);
	cursor: pointer;
	outline: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.ii-bulk-toggle-btn:hover {
	background: rgba(239, 68, 68, 0.06);
	color: var(--ii-danger-text, #dc2626);
}

.ii-bulk-toggle-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
	outline: none;
}

/* Active = bulk select mode is on */
.ii-bulk-toggle-btn.is-active {
	background: rgba(239, 68, 68, 0.09);
	border-color: rgba(239, 68, 68, 0.28);
	color: var(--ii-danger-text, #dc2626);
}

.ii-bulk-toggle-btn.is-active:hover {
	background: rgba(239, 68, 68, 0.14);
}

[data-theme='dark'] .ii-bulk-toggle-btn:hover {
	background: rgba(239, 68, 68, 0.1);
	color: var(--ii-danger-text, #f87171);
}

[data-theme='dark'] .ii-bulk-toggle-btn.is-active {
	background: rgba(239, 68, 68, 0.13);
	border-color: rgba(239, 68, 68, 0.34);
	color: var(--ii-danger-text, #f87171);
}

[data-theme='dark'] .ii-bulk-toggle-btn.is-active:hover {
	background: rgba(239, 68, 68, 0.18);
}

/* Cards become individually clickable (cursor + hover feedback) */
.is-delete-mode .ii-collection-image {
	cursor: pointer;
	transition:
		border-color 0.14s ease,
		box-shadow 0.14s ease,
		transform 0.12s ease;
}

.is-delete-mode .ii-collection-image:hover {
	border-color: rgba(239, 68, 68, 0.35) !important;
	box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) inset !important;
}

/* Show checkbox in delete mode — make it always visible */
.is-delete-mode .ii-collection-image .ii-ci-checkbox input[type='checkbox'] {
	opacity: 1 !important;
	pointer-events: none;
}

/* ── Block per-card options button while in delete mode ─────────── */
.is-delete-mode .ii-asset-options-btn {
	pointer-events: none !important;
	opacity: 0 !important;
	cursor: default;
}

/* ──────────────────────────────────────────────────────────────────
 *  Delete-selected card state
 * ────────────────────────────────────────────────────────────────── */

.ii-collection-image.ii-del-selected {
	border-color: rgba(239, 68, 68, 0.6) !important;
	box-shadow:
		0 0 0 1px rgba(239, 68, 68, 0.35) inset,
		0 2px 8px rgba(239, 68, 68, 0.1) !important;
	transform: scale(0.97);
}

/* Tint the checkbox accent red */
.ii-collection-image.ii-del-selected .ii-ci-checkbox input[type='checkbox'] {
	background-color: #ef4444 !important;
	border-color: transparent !important;
}

/* ──────────────────────────────────────────────────────────────────
 *  Bulk Action Bar
 *
 *  position:fixed — independent of sidebar overflow.
 *  left + width set by JS (_positionBulkBar) to align with sidebar.
 *  z-index: 300 — above sidebar (typically ~100), below modals/poppers.
 *
 *  Animation: translateY(100%) → translateY(0), 220ms
 *  Origin is bottom so it slides up naturally from the footer.
 * ────────────────────────────────────────────────────────────────── */

.ii-bulk-action-bar {
	position: fixed;
	bottom: 0;
	/* left + width injected by JS */
	z-index: 300;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;

	padding: 10px 12px;

	/* Light mode surface */
	background: var(--ii-bulk-bar-bg);
	border-top: 1px solid var(--ii-danger-border, rgba(239, 68, 68, 0.28));
	box-shadow:
		0 -2px 12px rgba(0, 0, 0, 0.05),
		0 -1px 3px rgba(0, 0, 0, 0.03);

	/* Slide-up animation — hidden by default */
	opacity: 0;
	transform: translateY(100%);
	transform-origin: center bottom;
	pointer-events: none;
	transition:
		opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 220ms cubic-bezier(0.16, 1, 0.3, 1);

	backface-visibility: hidden;
	will-change: transform, opacity;
}

.ii-bulk-action-bar.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── Left side: count badge + "selected" label ── */
.ii-bulk-bar-left {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.ii-bulk-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--ii-danger-text);
	background: var(--ii-danger-badge-bg);
	border: 1px solid var(--ii-danger-badge-border);
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.ii-bulk-count-badge.is-bumped {
	animation: iiBulkCountBump 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iiBulkCountBump {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.ii-bulk-bar-label {
	font-size: 0.73rem;
	font-weight: 400;
	color: var(--ii-text-secondary, #6b7280);
	white-space: nowrap;
}

/* ── Right side: Select All + Delete ── */
.ii-bulk-bar-right {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* "Select All" / "Deselect All" */
.ii-bulk-select-all-btn {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 0.71rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	background: transparent;
	border: 1px solid var(--ii-border, rgba(0, 0, 0, 0.1));
	color: var(--ii-text-secondary, #6b7280);
	transition:
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease;
}

.ii-bulk-select-all-btn:hover {
	background: var(--ii-bg-hover, #f3f4f6);
	border-color: rgba(0, 0, 0, 0.15);
	color: var(--ii-text-primary, #111827);
}

.ii-bulk-select-all-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Delete button */
.ii-bulk-delete-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 11px;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	border: 1px solid var(--ii-danger-border);
	color: var(--ii-danger-text);
	background: var(--ii-danger-bg);
	transition:
		color 0.15s ease,
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.1s ease;
}

.ii-bulk-delete-btn:hover:not(:disabled) {
	color: var(--ii-danger-solid-text);
	background: var(--ii-danger-solid);
	border-color: var(--ii-danger-solid-border);
	box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
}

.ii-bulk-delete-btn:active:not(:disabled) {
	transform: scale(0.96);
}

.ii-bulk-delete-btn:focus-visible {
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35);
}

.ii-bulk-delete-btn:disabled {
	opacity: 0.38;
	cursor: not-allowed;
}

.ii-bulk-delete-btn svg {
	flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────
 *  Reduced-motion overrides
 * ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ii-bulk-action-bar {
		transition: opacity 100ms ease;
		transform: none !important;
	}

	.ii-bulk-count-badge.is-bumped {
		animation: none;
	}

	.ii-collection-image.ii-del-selected {
		transform: none;
	}

	.ii-section-options-btn,
	.ii-bulk-toggle-btn,
	.ii-bulk-select-all-btn,
	.ii-bulk-delete-btn {
		transition: none;
	}
}