/**
 * 5etools - Estilos Modernos para Aventuras e Livros (Adventure & Book Layout)
 * Corrige o layout esmagado, otimiza o sumário lateral e embeleza a leitura do livro.
 */

/* ==========================================================================
   1. DESKTOP LAYOUT (Correção da proporção Sidebar x Livro)
   ========================================================================== */
@media screen and (min-width: 769px) {
	/* Força o container principal a ter espaçamento amplo e alinhamento correto */
	.view-col-wrapper:has(.book-contents),
	.view-col-wrapper:has(.book-view),
	body[class*="page-adventure"] .view-col-wrapper,
	body[class*="page-book"] .view-col-wrapper {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		gap: 20px !important;
		max-width: 1440px !important;
		margin: 0 auto !important;
		padding: 10px 16px 40px !important;
		height: auto !important;
		min-height: calc(100vh - 120px) !important;
	}

	/* O Sumário lateral (TOC) passa de 65% para uma barra lateral elegante de 280-320px */
	.view-col-wrapper > #listcontainer.book-contents,
	#listcontainer.book-contents,
	.view-col--wrp-book-contents {
		flex: 0 0 300px !important;
		width: 300px !important;
		max-width: 320px !important;
		min-width: 260px !important;
		position: sticky !important;
		top: 14px !important;
		max-height: calc(100vh - 40px) !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		background: rgba(20, 22, 28, 0.95) !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-radius: 12px !important;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
		padding: 12px 10px !important;
		box-sizing: border-box !important;
		z-index: 10 !important;
	}

	/* A área de leitura do livro (.book-view) assume o protagonismo total (75-80%) */
	.view-col-wrapper > .book-view,
	.view-col.book-view {
		flex: 1 1 0% !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: calc(100% - 320px) !important;
		background: rgba(18, 20, 25, 0.9) !important;
		border: 1px solid rgba(255, 255, 255, 0.08) !important;
		border-radius: 14px !important;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45) !important;
		padding: 30px 45px 50px !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   2. CORREÇÃO DA TABELA NATIVA (#pagecontent)
   ========================================================================== */
#pagecontent.ve-stats--book,
#pagecontent.ve-stats--book-large {
	display: block !important;
	width: 100% !important;
	border: none !important;
	background: transparent !important;
}

#pagecontent.ve-stats--book > tbody,
#pagecontent.ve-stats--book > tbody > tr,
#pagecontent.ve-stats--book > tbody > tr > td {
	display: block !important;
	width: 100% !important;
	border: none !important;
	padding: 0 !important;
}

/* Ocultar bordas estranhas e mensagem Darth Plagueis */
#pagecontent th.ve-tbl-border,
#pagecontent .initial-message,
#pagecontent .ve-muted {
	display: none !important;
}

/* ==========================================================================
   3. DESIGN DO SUMÁRIO LATERAL (Table of Contents)
   ========================================================================== */
.book-contents {
	scrollbar-width: thin;
	scrollbar-color: rgba(224, 76, 56, 0.5) rgba(0, 0, 0, 0.2);
}

.book-contents::-webkit-scrollbar {
	width: 6px;
}

.book-contents::-webkit-scrollbar-thumb {
	background: rgba(224, 76, 56, 0.4);
	border-radius: 3px;
}

.bk__contents-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 8px 10px 12px !important;
	border-bottom: 2px solid rgba(224, 76, 56, 0.4) !important;
	margin-bottom: 10px !important;
}

.bk__contents_header_link {
	font-family: var(--font-display, "Cinzel", "Times New Roman", serif) !important;
	font-size: 15px !important;
	color: #ff6e54 !important;
	text-decoration: none !important;
	letter-spacing: 0.5px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.bk-contents {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Linhas de Capítulo */
.bk-contents a.ve-lst__row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 6px 10px !important;
	margin: 2px 0 !important;
	border-radius: 6px !important;
	color: #ddd !important;
	text-decoration: none !important;
	font-size: 13px !important;
	transition: all 0.2s ease !important;
	border-left: 3px solid transparent !important;
}

.bk-contents a.ve-lst__row:hover {
	background: rgba(224, 76, 56, 0.12) !important;
	color: #ff8570 !important;
	border-left-color: #ff6e54 !important;
	transform: translateX(3px) !important;
}

/* Subcabeçalhos de seções no sumário */
.bk-contents__sub_spacer--1 {
	display: inline-block !important;
	margin-right: 6px !important;
	color: #777 !important;
}

/* ==========================================================================
   4. TIPOGRAFIA E LEITURA DO LIVRO (.book-view)
   ========================================================================== */
.book-view {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 15.5px !important;
	line-height: 1.72 !important;
	color: #e4e7eb !important;
}

/* Título de Capítulo (H1) */
.book-view h1.ve-rd__h--0,
.book-view .ve-rd__h--0 {
	font-family: var(--font-display, "Cinzel", "Georgia", serif) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: #ff765e !important;
	margin: 32px 0 16px !important;
	padding-bottom: 10px !important;
	border-bottom: 2px solid rgba(224, 76, 56, 0.35) !important;
	letter-spacing: 0.5px !important;
	text-shadow: 0 2px 10px rgba(224, 76, 56, 0.25) !important;
}

/* Título de Seção Maior (H2) */
.book-view h2.ve-rd__h--1,
.book-view .ve-rd__h--1 {
	font-family: var(--font-display, "Cinzel", "Georgia", serif) !important;
	font-size: 23px !important;
	font-weight: 600 !important;
	color: #ffd166 !important;
	margin: 28px 0 14px !important;
	padding-bottom: 6px !important;
	border-bottom: 1px solid rgba(255, 209, 102, 0.25) !important;
}

/* Subseção (H3) */
.book-view h3.ve-rd__h--2,
.book-view .ve-rd__h--2 {
	font-size: 19px !important;
	font-weight: 600 !important;
	color: #f8f9fa !important;
	margin: 22px 0 10px !important;
}

/* Subseção Menor (H4) */
.book-view h4.ve-rd__h--3,
.book-view .ve-rd__h--3 {
	font-size: 16.5px !important;
	font-weight: 600 !important;
	color: #adb5bd !important;
	margin: 18px 0 8px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* Parágrafos de texto */
.book-view p,
.book-view .ve-rd__p {
	margin-bottom: 15px !important;
	color: #d1d5db !important;
	text-align: justify !important;
}

/* Links Interativos no texto (@area, @creature, @item) */
.book-view a {
	color: #ff8570 !important;
	text-decoration: none !important;
	border-bottom: 1px dashed rgba(255, 133, 112, 0.5) !important;
	transition: all 0.2s ease !important;
}

.book-view a:hover {
	color: #ffa594 !important;
	border-bottom-style: solid !important;
	text-shadow: 0 0 8px rgba(255, 133, 112, 0.4) !important;
}

/* ==========================================================================
   5. CAIXAS DE TEXTO INTERPRETADAS (Read-Aloud / Inset Boxes)
   ========================================================================== */
.book-view .ve-rd__b-inset--readaloud {
	background: linear-gradient(135deg, rgba(194, 59, 56, 0.12) 0%, rgba(30, 22, 28, 0.95) 100%) !important;
	border-left: 4px solid #c23b38 !important;
	border-top: 1px solid rgba(194, 59, 56, 0.25) !important;
	border-right: 1px solid rgba(194, 59, 56, 0.15) !important;
	border-bottom: 1px solid rgba(194, 59, 56, 0.25) !important;
	border-radius: 0 10px 10px 0 !important;
	padding: 16px 22px !important;
	margin: 20px 0 !important;
	font-style: italic !important;
	color: #f0e6d6 !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
	position: relative !important;
}

.book-view .ve-rd__b-inset--readaloud::before {
	content: "❝" !important;
	position: absolute !important;
	top: -5px !important;
	left: 8px !important;
	font-size: 26px !important;
	color: rgba(194, 59, 56, 0.4) !important;
	font-family: Georgia, serif !important;
}

/* Insets comuns (Boxes informativos) */
.book-view .ve-rd__b-inset:not(.ve-rd__b-inset--readaloud) {
	background: rgba(25, 28, 35, 0.85) !important;
	border: 1px solid rgba(255, 209, 102, 0.3) !important;
	border-left: 4px solid #ffd166 !important;
	border-radius: 0 8px 8px 0 !important;
	padding: 14px 18px !important;
	margin: 18px 0 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   6. TABELAS DE LIVRO
   ========================================================================== */
.book-view .ve-rd__table {
	width: 100% !important;
	margin: 20px 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.book-view .ve-rd__table thead th,
.book-view .ve-rd__th {
	background: linear-gradient(180deg, #2c1a1d 0%, #1e1315 100%) !important;
	color: #ffd166 !important;
	font-weight: 600 !important;
	padding: 10px 14px !important;
	border-bottom: 2px solid rgba(224, 76, 56, 0.4) !important;
	font-size: 13.5px !important;
}

.book-view .ve-rd__table tbody td {
	padding: 8px 12px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	font-size: 13.5px !important;
}

.book-view .ve-rd__table tbody tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.02) !important;
}

.book-view .ve-rd__table tbody tr:hover td {
	background: rgba(224, 76, 56, 0.08) !important;
}

/* ==========================================================================
   7. IMAGENS E ILUSTRAÇÕES
   ========================================================================== */
.book-view img,
.book-view .ve-rd__image {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 10px !important;
	margin: 20px auto !important;
	display: block !important;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   8. RESPONSIVIDADE MOBILE (Telas <= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
	.view-col-wrapper {
		display: flex !important;
		flex-direction: column !important;
		padding: 8px !important;
		gap: 14px !important;
	}

	#listcontainer.book-contents {
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		max-height: 280px !important;
		margin-bottom: 10px !important;
	}

	.book-view {
		width: 100% !important;
		max-width: 100% !important;
		padding: 16px 14px !important;
	}

	.book-view h1.ve-rd__h--0 {
		font-size: 22px !important;
	}

	.book-view h2.ve-rd__h--1 {
		font-size: 18px !important;
	}
}