/*
 * Project:     DMsHelper
 * File:        bookpages.css
 * Description: Shared ".book-page-list" component styles for the Lore Book
 *              feature — used by both the reading view's Table of Contents
 *              sidebar (Views/Home/Index.cshtml, #BookTocList) and the DM's
 *              drag-to-reorder management tool (Views/Shared/_BookPages.cshtml,
 *              #BookPageList, loaded into the Campaign page's
 *              #DivAreaInformation panel). Previously duplicated near-
 *              identically in campaign.css and Home.css; consolidated here
 *              so both pages share one definition instead of two copies
 *              drifting apart. Loaded via @@section Styles in both
 *              Campaign/Index.cshtml and Home/Index.cshtml.
 *
 *              The two contexts still differ slightly in available width/
 *              height, so #BookPageList keeps a small set of size overrides
 *              in campaign.css, and #BookTocList keeps its max-height in
 *              Home.css — only the truly-identical rules live here.
 * File Location: \wwwroot\css\bookpages.css
 * Created:     GRK 07/29/2026
 * History:     GRK 07/29/2026 Initial Release — merged from campaign.css's
 *                   and Home.css's separate .book-page-list* rule sets.
 *              GRK 08/02/2026 Added .book-page-group-select and
 *                   .book-page-list__reveal* — the DM group selector and
 *                   per-page reveal toggle in _BookPages.cshtml's
 *                   group-reveal view.
 *              GRK 08/02/2026 Added, then removed the same day,
 *                   .book-page-group-select__preview-btn — the "View as
 *                   Player" trigger moved to Home.css's .dh-preview-select
 *                   on the Home page's own sidebar instead.
 */

.book-page-hint {
	color: var(--dh-ink-light);
	font-family: var(--dh-serif-body);
	font-size: 0.85rem;
	font-style: italic;
	margin: 0.35rem 0 0.6rem;
}

.book-page-list {
	list-style: none;
	margin: 0;
	padding: 0 0.4rem 0 0;
	overflow-y: auto;
	overflow-x: hidden;
}

	/* Edit mode affordance — dashed border cues that pages can be dragged */
	.book-page-list--editing {
		border: 1px dashed var(--dh-gold);
		border-radius: 4px;
		padding: 0.35rem;
	}

		.book-page-list--editing .book-page-list__item {
			cursor: grab;
		}

			.book-page-list--editing .book-page-list__item:active {
				cursor: grabbing;
			}

	.book-page-list--dropready {
		border-color: var(--dh-gold);
	}

.book-page-list__item {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid transparent;
	border-radius: 4px;
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.25rem;
	padding: 0.3rem 0.4rem;
}

	.book-page-list__item--active {
		background-color: rgba(161, 14, 14, 0.12);
		border-color: var(--dh-gold);
	}

	.book-page-list__item[draggable="true"] {
		cursor: grab;
	}

		.book-page-list__item[draggable="true"]:active {
			cursor: grabbing;
		}

	.book-page-list__item--dragover {
		border-color: var(--dh-gold);
		box-shadow: 0 0 0 1px var(--dh-gold);
	}

.book-page-list__num {
	background: var(--dh-red);
	border-radius: 999px;
	color: white;
	flex: 0 0 auto;
	font-family: var(--dh-serif-title);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
	min-width: 1.3rem;
	padding: 0.2rem 0.35rem;
	text-align: center;
}

.book-page-list__name {
	color: var(--dh-ink);
	flex: 1 1 auto;
	font-family: var(--dh-serif-body);
	font-size: 0.9rem;
	min-width: 0;
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

	.book-page-list__item--active .book-page-list__name {
		color: var(--dh-red);
		font-weight: 700;
	}

	.book-page-list__name:hover {
		text-decoration: underline;
	}

.book-page-list__remove {
	background: none;
	border: none;
	color: var(--dh-red);
	flex: 0 0 auto;
	font-size: 0.8rem;
	opacity: 0.5;
	padding: 0.1rem 0.25rem;
}

	.book-page-list__remove:hover {
		opacity: 1;
	}

.book-page-list__empty {
	color: rgba(74, 53, 32, 0.55);
	font-family: var(--dh-serif-body);
	font-size: 0.85rem;
	font-style: italic;
	padding: 0.5rem;
	text-align: center;
}

.book-page-group-select {
	align-items: center;
	display: flex;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
}

	.book-page-group-select label {
		color: var(--dh-ink-light);
		font-family: var(--dh-serif-body);
		font-size: 0.8rem;
		flex: 0 0 auto;
	}

	.book-page-group-select select {
		align-items: center;
		flex: 1 1 auto;
		font-family: var(--dh-serif-body);
		font-size: 0.85rem;
		min-width: 0;
	}

.book-page-list__reveal {
	align-items: center;
	color: var(--dh-ink-light);
	display: flex;
	flex: 0 0 auto;
	font-family: var(--dh-serif-body);
	font-size: 0.75rem;
	gap: 0.2rem;
	white-space: nowrap;
}

	.book-page-list__reveal-checkbox {
		margin: 0;
	}