/* Annual Report Flipbook — shared styles for the frontend viewer and the
   admin drag-and-drop / preview screen. Written to inherit the host theme's
   fonts/colors rather than impose its own, and to keep contrast/touch-target
   sizes accessible by default. */

.arfb-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Admin dropzone -------------------------------------------------- */

.arfb-dropzone {
	border: 2px dashed #8c8f94;
	border-radius: 6px;
	padding: 48px 24px;
	text-align: center;
	cursor: pointer;
	background: #fff;
	margin: 16px 0;
}

.arfb-dropzone:focus-visible,
.arfb-dropzone--active {
	border-color: #2271b1;
	background: #f0f6fc;
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.arfb-dropzone__text {
	font-size: 1.1em;
	margin: 0;
}

.arfb-upload-status {
	min-height: 1.5em;
	font-weight: 600;
}

/* --- Library table ----------------------------------------------------- */

.arfb-library-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 0.75em;
	font-weight: 600;
	color: #1d4ed8;
	background: #eef2ff;
	border-radius: 999px;
}

/* --- Report Library ---------------------------------------------------- */

.arfb-library-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 3px;
	background: #2271b1;
	color: #fff;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	vertical-align: middle;
}

/* --- Flipbook viewer --------------------------------------------------- */

.arfb-flipbook-container {
	max-width: 100%;
	margin: 0 auto;
	/* Contain the transient page-lift/shadow StPageFlip draws mid-flip so it
	   doesn't briefly grow the document and pop a scrollbar in (which makes the
	   layout jump on each flip). Applied to this outer wrapper — the spread
	   itself sits well inside it, so only the transient overflow is clipped,
	   not the pages. */
	overflow: hidden;
}

.arfb-flipbook {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	/* Theming hooks — override these in your theme to recolor the controls. */
	--arfb-accent: #2563eb;
	--arfb-accent-hover: #1d4ed8;
	--arfb-btn-bg: #eef0f2;
	--arfb-btn-bg-hover: #e1e5e9;
	--arfb-btn-fg: #1f2933;
	--arfb-btn-border: rgba(0, 0, 0, 0.14);
	--arfb-btn-radius: 9px;
}

.arfb-flipbook--loading .arfb-flipbook__status,
.arfb-flipbook--error .arfb-flipbook__status {
	text-align: center;
	padding: 3em 1em;
}

/* Floating control bar
   (zoom only transforms the pages, not this bar). */
.arfb-flipbook__toolbar {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: calc(100% - 24px);
	padding: 7px 12px;
	background: rgba(22, 24, 30, 0.66);
	border-radius: 999px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Controls inside the bar take a glass style so they read over the pages. */
.arfb-flipbook__toolbar .arfb-btn {
	--arfb-btn-bg: transparent;
	--arfb-btn-bg-hover: rgba(255, 255, 255, 0.18);
	--arfb-btn-fg: #fff;
	--arfb-btn-border: transparent;
	position: relative; /* anchor for the hover tooltip */
	width: 46px;
	height: 46px;
	border-radius: 50%; /* circular hover highlight*/
	box-shadow: none;
}

.arfb-flipbook__toolbar .arfb-btn svg {
	width: 24px;
	height: 24px;
}

.arfb-flipbook__toolbar .arfb-btn:hover {
	transform: none;
	box-shadow: none;
}

/* Label shown on hover / keyboard focus (e.g. "Toggle fullscreen"). Pulls the
   button's accessible name so it stays in sync with the aria-label. */
.arfb-flipbook__toolbar .arfb-btn::after {
	content: attr( aria-label );
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba( 22, 24, 30, 0.95 );
	color: #fff;
	font-size: 16px;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.arfb-flipbook__toolbar .arfb-btn:hover::after,
.arfb-flipbook__toolbar .arfb-btn:focus-visible::after {
	opacity: 1;
}

/* Page-number control inside the bar. */
.arfb-flipbook__page-control {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 6px;
	color: #fff;
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Clear, editable-looking field so the page entry is easy to spot. */
.arfb-flipbook__page-input {
	width: 2.8em;
	height: 32px;
	padding: 0 6px;
	text-align: center;
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: text;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
}

.arfb-flipbook__page-input:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.45);
}

.arfb-flipbook__page-input:focus,
.arfb-flipbook__page-input:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.62);
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 1px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Hide the number-spinner arrows so it stays clean. */
.arfb-flipbook__page-input::-webkit-outer-spin-button,
.arfb-flipbook__page-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.arfb-flipbook__page-total {
	opacity: 0.9;
}

/* Clean, square icon buttons (fullscreen, download). */
.arfb-btn {
	width: 44px; /* touch target */
	height: 44px;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	color: var(--arfb-btn-fg);
	border: 1px solid var(--arfb-btn-border);
	border-radius: var(--arfb-btn-radius);
	background: var(--arfb-btn-bg);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition: background-color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.15s ease;
}

.arfb-btn svg {
	width: 20px;
	height: 20px;
	display: block;
}

.arfb-btn:hover {
	background: var(--arfb-btn-bg-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.arfb-btn:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.arfb-btn:focus-visible {
	outline: 2px solid var(--arfb-accent);
	outline-offset: 2px;
}

/* Page-turn controls: arrow buttons overlaid on the book's left/right edges. */
.arfb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 24, 30, 0.55);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* Keep the arrows round and shadowed */
.arfb-flipbook .arfb-nav,
.arfb-flipbook .arfb-nav:hover,
.arfb-flipbook .arfb-nav:focus,
.arfb-flipbook .arfb-nav:active {
	border: 0;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.arfb-flipbook .arfb-nav:focus {
	outline: none;
	background: rgba(22, 24, 30, 0.8);
}

.arfb-nav svg {
	width: 24px;
	height: 24px;
	display: block;
}

.arfb-nav:hover {
	background: rgba(22, 24, 30, 0.8);
}

.arfb-nav:active {
	transform: translateY(-50%) scale(0.93);
}

.arfb-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.arfb-nav--prev { left: 8px; }
.arfb-nav--next { right: 8px; }

@media (max-width: 600px) {
	.arfb-flipbook__stage { padding: 0 46px; }
	.arfb-nav { width: 38px; height: 38px; }
	.arfb-nav svg { width: 20px; height: 20px; }
	.arfb-nav--prev { left: 4px; }
	.arfb-nav--next { right: 4px; }
}

.arfb-flipbook__page-indicator {
	min-width: 8em;
	padding: 0 4px;
	text-align: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.arfb-flipbook__stage {
	position: relative;
	width: 100%;
	box-sizing: border-box;   /* Side gutters box */
	padding: 19px 35px 60px;      /********Update: changes to flipbook background*, used to be 0 64px // 24px 64px all black // 80px 160px not stretched enough *****/
	background-color: #000;       /* black overlay */
	border-radius: 0px;     /*round edges as 12px, nope maybe sharp looks better */
	
	background-image: url('https://dev.ontariocourts.ca/scj/wp-content/uploads/2026/07/scj.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0;
		

}

/* .arfb-flipbook__pages--single{                 /**Update by Sim: Adding a front cover, not a 2 page spread 
	width: 50%;
	margin-left: auto;
	margin-right: auto;
 */ 


arfb-flipbook__pages--single::after {                 /**Update by Sim: hiding spine shading bar on front cover */
	display: none;
}


.arfb-flipbook__pages {
	width: 100%;
	aspect-ratio: 4 / 3;
	position: relative;          /**********Update by Sim: Adding spine, pages separator */
}


.arfb-flipbook__pages::after {             /*****Sim */
	content: "";
	position: absolute;
	top: 2.75%;
	bottom: 2.8%;
	left: 50%;
	width: 45px;              /* 60px too wide */
	transform: translateX(-50%);
	pointer-events: none;    /* never blocks page clicks/drags */
	z-index: 4;              /* above pages, below your nav arrows (z-index 5) */
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.28) 50%,
		rgba(0, 0, 0, 0) 100%
	);
}






/* Zoom (Ctrl/Cmd + wheel or trackpad pinch): drag to pan while zoomed in. */
.arfb-flipbook__pages--zoomed {
	cursor: grab;
	will-change: transform;
}

.arfb-flipbook__pages--grabbing {
	cursor: grabbing;
}

/* --- Fullscreen ------------------------------------------------------- */

/* When the viewer element itself is the fullscreen element, let it fill the
   screen (dropping the 900px cap), stack its chrome above the pages, and
   center the spread in the space that's left so the bottom isn't cut off.
   The pages' width is capped from JS (see _onFullscreenChange) so the derived
   spread height fits the viewport. */
.arfb-flipbook:fullscreen {
	max-width: none;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 16px;
	background: #1a1a1a;
	color: #fff;
}

.arfb-flipbook:fullscreen .arfb-flipbook__stage {
	flex: 1 1 auto;
	min-height: 0;
	align-self: center;
	display: flex;
	flex-direction: column;
}

.arfb-flipbook:fullscreen .arfb-flipbook__pages {
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: auto;
}

.arfb-page {
	position: relative;
	background: #fff;
	overflow: hidden;
}

.arfb-page canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.arfb-page__text-layer {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1;
	opacity: 0.2; /* text stays selectable/screen-reader-visible without visibly double-printing over the canvas */
	transform-origin: 0 0;
	z-index: 1;
}

.arfb-page__text-layer span {
	position: absolute;
	white-space: pre;
	color: transparent;
}

/* --- Link annotations ------------------------------------------------- */

/* Clickable links carried by the PDF itself: a contents page typeset inside
   the report, cross-references, external URLs. PDF.js builds the elements
   inside this layer; their geometry comes from the layer's --scale-factor and
   the scale() transform set in flipbook.js. PDF.js's own pdf_viewer.css isn't
   bundled, so these rules are ours. */
.arfb-page__annotation-layer {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	/* Above the text layer. Both are appended from async callbacks that can
	   finish in either order, and a transparent text span sitting over a link
	   would take the click instead of the anchor. */
	z-index: 2;
	/* The layer covers the whole page, so it must not intercept anything --
	   only the annotation rects inside it opt back in. */
	pointer-events: none;
}

.arfb-page__annotation-layer section {
	position: absolute;
	pointer-events: auto;
}

/* Filling the rect matters for behaviour, not just looks: StPageFlip decides
   whether a mousedown is a page-drag by reading the target's tag name and
   letting <a>/<button> through, so a click landing on the <section> around a
   smaller anchor would start a page turn instead of following the link. */
.arfb-page__annotation-layer .linkAnnotation a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 2px;
	background-color: transparent;
	transition: background-color 0.12s ease;
}

/* Invisible at rest so the report still looks as it was designed; a hint on
   hover and on keyboard focus so the links are discoverable. PDF.js puts a
   tabindex on each annotation, so they join the tab order for free. */
.arfb-page__annotation-layer .linkAnnotation a:hover,
.arfb-page__annotation-layer .linkAnnotation a:focus-visible {
	background-color: color-mix(in srgb, var(--arfb-accent) 18%, transparent);
}

/* Browsers without color-mix() still get a visible hover. */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
	.arfb-page__annotation-layer .linkAnnotation a:hover,
	.arfb-page__annotation-layer .linkAnnotation a:focus-visible {
		background-color: rgba(37, 99, 235, 0.18);
	}
}

.arfb-page__annotation-layer section:focus-visible {
	outline: 2px solid var(--arfb-accent);
	outline-offset: 1px;
}

/* Respect reduced-motion preferences: StPageFlip's own animation duration is
   already shortened to ~0ms via JS (see flipbook.js), this just prevents any
   CSS-driven transitions from adding motion back in. */
@media (prefers-reduced-motion: reduce) {
	.arfb-flipbook * {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

@media (max-width: 600px) {
	.arfb-btn {
		padding: 8px 10px;
		font-size: 0.85em;
	}
}