/*
 * Oninit SQLMorph — page-specific CSS overlay.
 *
 * Loaded by /sqlmorph/content.php. Adds rules the shared site stylesheet does
 * not provide (notably tables and the demo form widgets) so the page reads
 * as one cohesive block alongside the legacy site typography.
 */

/* Tables: visible grid, tahoma cells matching the legacy <td>/<th> rules. */
.sqlmorph-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;
}

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

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

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

/* Headings inside content cards. */
.sqlmorph-content h2.legacy,
.sqlmorph-content h3 {
	font-family: tahoma;
	color: #7e4400;
	margin-top: 14px;
	margin-bottom: 6px;
}

/* Pre-formatted output (CLI samples, generated code). */
.sqlmorph-content pre.legacy {
	border: 1px solid #c0a880;
	background-color: #fbf8ee;
	padding: 8px 10px;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	overflow-x: auto;
	white-space: pre;
}

.sqlmorph-content em {
	font-style: italic;
}

/* Body-content links — scoped to the .sqlmorph-content article (the new-UI
 * .legal-doc column) so the underline + warm-brown colour don't bleed into
 * the .legal-nav sidebar, whose links follow the UI_STYLE.MD §3 doc-nav rule. */
.sqlmorph-content a {
	color: #7e4400;
	text-decoration: underline;
}

/* Demo form. */
.sqlmorph-demo-form select,
.sqlmorph-demo-form input[type="file"] {
	font-family: tahoma;
	font-size: 13px;
	margin: 6px 0;
}

.sqlmorph-demo-form .sqlmorph-spl-input {
	width: 100%;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	border: 1px solid #c0a880;
	padding: 6px;
}

.sqlmorph-demo-form button {
	margin-top: 8px;
}

/* Side-by-side example pages: SPL plus generated UDR(s).
   Flexbox-based so the layout is independent of the parent's text-align /
   grid context. Each column gets equal share with min-width:0 so long pre
   blocks scroll inside the column instead of pushing the layout wide. */
.sqlmorph-side-by-side {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 8px 0;
	text-align: left;
	align-items: stretch;
}

.sqlmorph-side-col {
	flex: 1 1 0;
	min-width: 0;
	max-width: 50%;
}

.sqlmorph-side-by-side pre.legacy {
	max-height: 600px;
	overflow: auto;
	width: 100%;
	box-sizing: border-box;
}

/* SPL block above the side-by-side row gets the full content width and a
   taller scroll allowance since it's the canonical source. */
.sqlmorph-content > pre.legacy {
	max-height: none;
	overflow: auto;
}

/* Download register card — replaces the legacy W3.CSS half/card grid
 * with a centred card inside the new-UI .legal-doc column. */
.register-wrap {
	max-width: 460px;
	margin: 16px auto;
}
.register {
	border: 1px solid #c0a880;
	border-radius: 10px;
	padding: 18px 22px;
	background: #fbf8ee;
}
/* Submit-button row of the register card — replaces an inline
 * style="text-align:center" (no-inline-style is a §6.4 hard error, Control T326). */
.register-submit {
	text-align: center;
}

@media (max-width: 600px) {
	.sqlmorph-side-by-side {
		flex-direction: column;
	}
	.sqlmorph-side-col {
		max-width: 100%;
	}
}

/* Code-action icons — copy / download / report, per Control/CODE_ACTIONS.MD.
   The `button.` qualifier (specificity 0,1,1) ties with any `.<region> button`
   sibling rule and wins on document order — see spec §"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; }
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; }

.code-block { position: relative; margin: 0 0 12px 0; }
.code-block pre { margin: 0; padding-right: 36px; }

.code-actions {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	gap: 4px;
}
.code-actions button.copy-icon-btn { margin: 0; background: #fbf8ee; }

/* Bundle scope — four icons (status tick + download + copy + report) need
   wider padding on the <pre> so the action-group doesn't overlap content. */
.sqlmorph-bundle .code-block pre { padding-right: 130px; }

/* Status chip inside .code-actions — same chip shape as copy-icon-btn but
   non-interactive (it's a "this file is clean / failed" indicator, not an
   action). Default = green success palette echoing the spec's `.copied`
   state; `--fail` modifier swaps to red (#a00) for parse/internal errors. */
.code-actions .copy-icon-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid #2e7d32;
	border-radius: 4px;
	background: #fbf8ee;
	color: #2e7d32;
	vertical-align: middle;
}
.code-actions .copy-icon-status svg { width: 14px; height: 14px; display: block; }
.code-actions .copy-icon-status--fail { border-color: #a00; color: #a00; }

/* Alert modifier — used for the "Report incorrect translation" icon.
   Same chip shape, swapped to the established #a00 alert red (matches the
   prior text-link styling for the report action). */
button.copy-icon-btn--alert { color: #a00; border-color: #a00; }
button.copy-icon-btn--alert:hover { background: #fae8e8; }

/* Sidenav section divider — canonical block per Control/SIDENAV.MD §"CSS
 * — canonical rule".  Verbatim across every per-product CSS file in the
 * Oninit docroot family.  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;
}