/* Sidenav section divider. Groups related links under a non-clickable
 * label without nesting markup. */
.sidenav .sidenav-section {
	display: block;
	margin-top: 14px;
	margin-bottom: 4px;
	padding: 4px 12px 4px 12px;
	border-top: 1px solid #d8c8a8;
	font-family: tahoma;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #7e4400;
}

/* Tables: visible grid, tahoma cells matching the legacy <td>/<th> rules */
.sql2html-content table.legacy {
	border-collapse: collapse;
	margin: 8px 4px 12px 4px;
	font-family: tahoma;
	font-size: 12px;
	color: #000000;
	width: auto;
	max-width: 100%;
	text-align: left;
}

.sql2html-content table.legacy th,
.sql2html-content table.legacy td {
	border: 1px solid #c0a880;
	padding: 6px 10px;
	vertical-align: top;
	text-align: left;
}

.sql2html-content table.legacy th {
	background-color: #f2eddc;
	color: #7e4400;
	font-weight: bold;
}

.sql2html-content table.legacy tr:nth-child(even) td {
	background-color: #fbf8ee;
}

/* Code-block wrapper that supports the absolute-positioned icon */
.sql2html-content .code-block { position: relative; margin: 0 0 12px 0; }
.sql2html-content .code-block pre { margin: 0; padding-right: 36px; }

/* 24×24 icon button — base. Selectors use `button.copy-icon-btn` so
 * specificity (0,1,1) ties with sibling `.<region> button` rules and
 * wins on document order. See Control/CODE_ACTIONS.MD §"Specificity note". */
button.copy-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0 0 0 6px;
	border: 1px solid #c0a880;
	border-radius: 4px;
	background: transparent;
	color: #7e4400;
	cursor: pointer;
	vertical-align: middle;
}
button.copy-icon-btn:hover { background: #f2eddc; }
button.copy-icon-btn svg { width: 14px; height: 14px; display: block; }
button.copy-icon-btn .icon-check { display: none; }

/* Copied state — green glyph + green border, swap icon-copy → icon-check */
button.copy-icon-btn.copied { color: #2e7d32; border-color: #2e7d32; }
button.copy-icon-btn.copied .icon-copy  { display: none; }
button.copy-icon-btn.copied .icon-check { display: block; }

/* Inset modifier — single icon, top-right over a code box */
button.copy-icon-btn--inset {
	position: absolute;
	top: 6px;
	right: 6px;
	margin: 0;
	background: #fbf8ee;
}

/* Demo-result page (chrome-routed /sql2html/demo-result.php):
 * the chrome wrapper carries .w3-center which would centre the
 * sql2html-emitted body (H1 / H3 / pre). Override locally so the
 * rendered schema lays out left-justified as in the standalone
 * binary's output.
 *
 * `!important` is required because the chrome's `.w3-center` rule
 * (w3-oninit.css:264) uses `text-align: center !important` and that
 * value would otherwise inherit through the result wrapper to its
 * inline children (links, the `<H1>` title, the `<H3>` Source
 * heading, etc.). Standard cascade specificity cannot beat
 * `!important`; one important on each side wins per source-order
 * but our local sql2html.css is loaded AFTER w3-oninit.css so this
 * is well-defined. */
.sql2html-content .sql2html-result-block { text-align: left !important; }
.sql2html-content .sql2html-result-head  { text-align: left !important; }
.sql2html-content .sql2html-result-body  { text-align: left !important; }
.sql2html-content .sql2html-result-body h1,
.sql2html-content .sql2html-result-body h2,
.sql2html-content .sql2html-result-body h3,
.sql2html-content .sql2html-result-body h4 { text-align: left !important; }
.sql2html-content .sql2html-result-body pre { text-align: left !important; white-space: pre; }

/* Download icon next to the result heading — standalone inline
 * variant per Control/CODE_ACTIONS.MD §"Placement modes" #3. */
button.copy-icon-btn.sql2html-result-download { vertical-align: middle; }