/*
 * //// Neoffice — added file (no upstream equivalent).
 *
 * Reader styling for the Neoffice manual: wider articles, image size and
 * alignment classes, figure captions.
 *
 * These rules used to live in `wiki/public/scss/wiki_custom.scss`, imported by
 * `wiki/public/scss/wiki.bundle.scss`. Upstream deleted that bundle in
 * `2068826 feat: Frappe UI Starter`, which reached us through an earlier sync:
 * the SCSS file survived, its only import point did not, and the rules stopped
 * being compiled or served without a single merge conflict. They were dead for
 * months before anyone noticed. Plain CSS in `public/css` now, cache-busted by
 * `get_asset_hash()` in layout.html — nothing to compile, nothing to import,
 * so there is no build step left for an upstream commit to remove.
 *
 * Selectors target the v3 reader: `#wiki-content` is the rendered markdown
 * container (see templates/wiki/document.html) and `.neo-wiki-article` is the
 * article wrapper we tag there.
 */

/* ============================================================
 * 1. Wider article content
 *    Documentation here is screenshot-heavy; upstream's 100ch column cuts
 *    every capture in half.
 * ============================================================ */

@media (min-width: 1280px) {
	.neo-wiki-article {
		max-width: 1100px !important;
	}
}

@media (min-width: 1400px) {
	.neo-wiki-article {
		max-width: 1280px !important;
	}
}

/* //// Neoffice — on a Full HD screen the article is no wider than the text plus a margin for the tables of six columns or more
 * (1100px: the text itself stops at --neo-text-width, 1000px), and it is CENTRED between the menu and the right-hand column. At the
 * old 1440px maximum the text ran to the left and a 330px empty band sat between it and the "On this page" column (Daniel, 03.10). */
@media (min-width: 1700px) {
	.neo-wiki-article {
		max-width: 1100px !important;
		margin-left: auto;
		margin-right: auto;
	}
}

/* //// Neoffice — the REAL cap on the column was never the article.
 * document.html gives #wiki-content `!max-w-none` to cancel typography's
 * `.prose { max-width: 65ch }`, but that utility is not in the committed
 * tailwind.css (built before the class was added to the template), so the cap
 * stayed: 613px of text and screenshots inside a 1117px article, whatever the
 * window. Cancelled here in plain CSS, which has no build step to forget.
 * Drop it if upstream's tailwind.css ever carries `!max-w-none`. */
/* //// Neoffice — the text width is declared as a typed length: a font-relative value (100ch) is then resolved ONCE, where it is set
 * (the article's own font size), and every consumer inherits the same pixels. As a plain custom property it was re-resolved at each
 * use, in the consumer's own font, and a table (smaller type than the paragraphs) stopped at 809px while the text ran to 944px. */
/* //// Neoffice — the width of the text, declared on the article so that its title (and the line under it), the previous / next
 * buttons and the footer line up with the text, not with the whole article. */
.neo-wiki-article {
	--neo-text-width: 1000px;
}

.neo-wiki-article > header,
.neo-wiki-article > #wiki-nav-buttons,
.neo-wiki-article > div:not(#wiki-content) {
	max-width: var(--neo-text-width);
}

@property --neo-text-width {
	syntax: "<length>";
	inherits: true;
	initial-value: 940px;
}

#wiki-content.prose {
	max-width: none;
	/* //// Neoffice — one name for "how wide the text is allowed to be": paragraphs and images read it, so they stop at the same line. */
	--neo-text-width: 1000px;
}

/* //// Neoffice — keep a readable line length now that the column is wide.
 * Prose stops at 100ch (about 940px, the upper end of what a line can be and
 * still read well); screenshots, tables, videos and embeds use the whole
 * article width, which is the point: the manual is screenshot-heavy and the
 * text inside a capture has to be legible. A paragraph, list or quote that
 * holds one of those blocks is left alone. 80ch was tried first and left a text
 * page (the manual's home, a list of links) jammed in the left corner of a wide
 * screen, with a third of the article empty. */
#wiki-content > :where(p, ul, ol, dl, blockquote):not(:has(img, video, iframe, table, figure)) {
	max-width: var(--neo-text-width, 100ch);
}

/* //// Neoffice — the right-hand "On this page" column (300px + padding) took a
 * quarter of a laptop screen from the text and the captures. From 1500px it is
 * a 260px column. Between 1024 and 1499px (laptops, and any screen with the
 * browser zoomed) it would cost a capture a third of its width, so it is not
 * drawn: a button at the top right (includes/toc.html) opens the same list as a
 * panel over the page. Nothing is lost, only folded away. Under 1024px the
 * aside is `hidden` by Tailwind and the mobile menu carries the list. */
@media (min-width: 1024px) {
	#wiki-toc:not(.w-0) {
		width: 260px;
	}
}

/* //// Neoffice — the "On this page" column is wider on a Full HD screen: its entries ("Cas 2. Le client ne rapporte qu'une partie…")
 * wrapped on three lines at 260px. */
@media (min-width: 1800px) {
	#wiki-toc:not(.w-0) {
		width: 320px;
	}
}

#wiki-toc-toggle {
	display: none;
}

@media (min-width: 1024px) and (max-width: 1499px) {
	#wiki-toc {
		display: none;
	}

	#wiki-toc.neo-toc-open {
		display: block;
		position: fixed;
		top: calc(var(--wiki-chrome-h) + 56px);
		right: 16px;
		width: 300px;
		max-height: calc(100vh - var(--wiki-chrome-h) - 80px);
		overflow-y: auto;
		padding: 12px 8px 12px 0;
		background: var(--surface-base);
		border: 1px solid var(--outline-gray-2);
		border-radius: 10px;
		box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
		z-index: 45;
	}

	/* the list sticks and scrolls by itself in the column; in the panel the panel scrolls */
	#wiki-toc.neo-toc-open nav {
		position: static;
		max-height: none;
	}

	/* only when the page has headings: an empty aside has no nav */
	#wiki-toc:has(nav) + #wiki-toc-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		top: calc(var(--wiki-chrome-h) + 12px);
		right: 16px;
		height: 32px;
		padding: 0 10px;
		z-index: 45;
		cursor: pointer;
		font-size: 14px;
		font-weight: 500;
		color: var(--ink-gray-8);
		background: var(--surface-base);
		border: 1px solid var(--outline-gray-2);
		border-radius: 8px;
	}

	#wiki-toc:has(nav) + #wiki-toc-toggle:hover {
		border-color: var(--outline-gray-3);
		background: var(--surface-gray-2);
	}
}

/* //// Neoffice — the image viewer capped a capture at 60vw: a click on a
 * screenshot to read it opened it smaller than the page it came from. */
#image-viewer-img {
	max-width: 94vw;
	max-height: 92vh;
}

/* ============================================================
 * 2. Image defaults — responsive, never wider than the column
 * ============================================================ */

/* //// Neoffice — a capture never goes wider than the text above it (about 940px). On a large screen the column is 1280-1440px and a
 * full-page capture filled all of it, 400px wider than the paragraph over it: it looked like a different page. The image viewer
 * (a click on the capture) shows it large. Narrower captures keep their own width. Aligned on the text's left edge, not centred in the
 * column: a centred capture under left-aligned text is offset by half the spare width. `img-center` still centres, and an `img-*`
 * size class (below, more specific) still wins. */
#wiki-content img {
	max-width: min(100%, var(--neo-text-width, 100ch));
	height: auto;
	border-radius: 8px;
	margin: 1.5rem auto 1.5rem 0;
	display: block;
}

/* //// Neoffice — a table written in markdown has no <colgroup>, and the theme's `.prose table { table-layout: fixed }` (made for the
 * editor, whose tables carry column widths) gave all its columns the SAME width: a "Repère" column holding one digit took a third of the
 * page and the long text was squeezed into the last third. Content decides the widths again (the typography plugin's own default,
 * `auto`) for every table that does not carry its own column widths. */
#wiki-content table:not(:has(colgroup)) {
	table-layout: auto;
}

/* //// Neoffice — a table of up to five columns stops at the width of the text, like a capture or a clip: at the full width of the
 * article (up to 1440px) its text column ran 140 characters long, far wider than the paragraphs above and below it, and the eye lost
 * the line. A table of six columns or more keeps the whole article: it needs the room. Left-aligned on the text's edge. */
#wiki-content table:not(:has(th:nth-child(6), td:nth-child(6))) {
	max-width: min(100%, var(--neo-text-width, 100ch));
}

/* //// Neoffice — on a phone a table of six or eight columns was squeezed to 40px per column (no sideways scroll, so nothing was
 * cut, but nothing could be read). It now scrolls sideways inside its own box, each cell keeps a readable minimum width, and the page
 * itself never scrolls sideways. */
@media (max-width: 767px) {
	#wiki-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#wiki-content table th,
	#wiki-content table td {
		min-width: 6.5rem;
	}
}

/* ============================================================
 * 3. Size classes — authors set these on the <img> in the page source
 * ============================================================ */

#wiki-content img.img-xs {
	max-width: 240px;
}

#wiki-content img.img-sm {
	max-width: 400px;
}

#wiki-content img.img-md {
	max-width: 640px;
}

#wiki-content img.img-lg {
	max-width: 900px;
}

#wiki-content img.img-full {
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* ============================================================
 * 4. Alignment helpers
 * ============================================================ */

#wiki-content img.img-center {
	margin-left: auto;
	margin-right: auto;
	display: block;
	float: none;
}

#wiki-content img.img-left {
	float: left;
	margin: 0.5rem 1.5rem 1rem 0;
}

#wiki-content img.img-right {
	float: right;
	margin: 0.5rem 0 1rem 1.5rem;
}

/* ============================================================
 * 5. Border / shadow variants
 *    The shadow is opt-in: the v3 reader already frames images, and stacking
 *    two frames on a dark theme reads as a rendering fault.
 * ============================================================ */

#wiki-content img.img-shadow {
	box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

#wiki-content img.img-bordered {
	border: 1px solid var(--outline-gray-2, #e5e7eb);
}

#wiki-content img.img-no-shadow {
	box-shadow: none;
}

/* ============================================================
 * 6. Figures with captions
 * ============================================================ */

#wiki-content figure {
	margin: 2rem auto 2rem 0;
	text-align: center;
	max-width: min(100%, var(--neo-text-width, 100ch));
}

#wiki-content figure img {
	margin: 0 auto 0.5rem;
}

#wiki-content figcaption {
	font-size: 0.85rem;
	color: var(--ink-gray-5, #6b7280);
	font-style: italic;
	margin-top: 0.5rem;
	line-height: 1.4;
}

/* Clear floats left by img-left / img-right so the next block starts below. */
#wiki-content p::after {
	content: "";
	display: table;
	clear: both;
}

/* ============================================================
 * 7. Sidebar tree: titles wrap, the width can be dragged, the fold is visible
 *    (//// Neoffice — upstream cuts every title to one line with an ellipsis and
 *    fixes the sidebar at 18rem. The manual's titles are sentences ("Valider,
 *    imprimer (QR) et envoyer une facture"), and a reader had no way to see the
 *    end of one. Wrapping reads all of them at any width; the drag handle
 *    (includes/sidebar.html) and the fold are for people who want the width back.)
 * ============================================================ */

.wiki-tree .wiki-item-content {
	height: auto;
	min-height: 1.75rem;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	align-items: flex-start;
}

/* the mobile sheet's rows are touch targets: keep their height and centring */
.wiki-tree .wiki-item-content.h-11 {
	min-height: 2.75rem;
	align-items: center;
}

.wiki-tree .wiki-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Inset by 4px from the edge: the fold button's hover zone (.wiki-sidebar-toggle, fixed, z-40)
 * starts 4px inside the sidebar and would cover a handle sitting right on the edge. */
#wiki-sidebar-resize {
	position: absolute;
	top: 0;
	right: 4px;
	bottom: 0;
	width: 8px;
	cursor: col-resize;
	touch-action: none;
	z-index: 5;
}

#wiki-sidebar-resize:hover,
#wiki-sidebar-resize:focus-visible,
.neo-resizing-sidebar #wiki-sidebar-resize {
	background: var(--outline-gray-3);
	outline: none;
}

/* no width animation while the handle is being dragged, and no text selection under the pointer */
.neo-resizing-sidebar .wiki-sidebar,
.neo-resizing-sidebar .wiki-sidebar-toggle {
	transition: none !important;
}

.neo-resizing-sidebar,
.neo-resizing-sidebar * {
	user-select: none;
	cursor: col-resize;
}

/* the fold button only showed on hover, and nobody knew it was there: always faintly visible */
.wiki-sidebar-toggle:not(:hover) button {
	opacity: 0.5;
	transform: none;
}

/* ============================================================
 * 8. Clips: as wide as the text, and a large window on click
 *    (//// Neoffice — the clips of the manual carry `width="720"` in their markup: CSS beats the attribute. They are recorded at 1920px
 *    and are scaled DOWN to the width of the text above them (`--neo-text-width`, 100ch, about 940px), never up, and sit on its left
 *    edge, like the captures. Daniel, 03.10: a clip wider than the paragraph read as a different page. neoffice-video.js opens a large
 *    window on a click, so nothing is lost by the smaller size.)
 * ============================================================ */

#wiki-content video {
	display: block;
	width: 100%;
	max-width: min(100%, var(--neo-text-width, 100ch));
	height: auto;
	margin: 1.5rem auto 1.5rem 0;
	border-radius: 8px;
	cursor: zoom-in;
}

#video-viewer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgb(0 0 0 / 78%);
	cursor: zoom-out;
}

#video-viewer.active {
	display: flex;
}

/* The window, not the clip, sets the size: as wide as 92vw allows without the height passing 88vh (--neo-ratio is the clip's
 * width / height, set by neoffice-video.js); it enlarges a clip on a small screen as well as a big one. */
#video-viewer-video {
	width: min(92vw, calc(88vh * var(--neo-ratio, 1.7778)));
	height: auto;
	background: #000;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgb(0 0 0 / 50%);
	cursor: default;
}

#video-viewer-close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 40px;
	height: 40px;
	font-size: 28px;
	line-height: 1;
	color: #fff;
	background: rgb(255 255 255 / 14%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

#video-viewer-close:hover {
	background: rgb(255 255 255 / 28%);
}

body.video-viewer-open {
	overflow: hidden;
}