/* =============================================================
   Confluence Synced Content — Frontend Styles
   Scoped to body .confluence-content so nothing leaks into the theme
   ============================================================= */

/* ── Tables ──────────────────────────────────────────────────── */
body .confluence-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.25rem 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-x: auto;
	display: block;
}

body .confluence-content thead {
	background-color: #f1f5f9;
}

body .confluence-content th {
	padding: 0.65rem 1rem;
	text-align: left;
	font-weight: 600;
	color: #1e293b;
	border: 1px solid #cbd5e1;
	white-space: nowrap;
}

body .confluence-content td {
	padding: 0.6rem 1rem;
	border: 1px solid #cbd5e1;
	color: #1e293b;
	vertical-align: top;
}

body .confluence-content tbody tr:nth-child(even) {
	background-color: #f8fafc;
}

body .confluence-content tbody tr:hover {
	background-color: #f0f7ff;
}

/* ── Code blocks ─────────────────────────────────────────────── */
body .confluence-content pre,
body .confluence-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
}

body .confluence-content pre {
	background-color: #1e293b;
	color: #e2e8f0;
	padding: 1rem 1.25rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin: 1rem 0;
	line-height: 1.6;
}

body .confluence-content :not(pre) > code {
	background-color: #f1f5f9;
	color: #0f172a;
	padding: 0.15em 0.4em;
	border-radius: 0.25rem;
	font-size: 0.875em;
}

/* ── Headings ────────────────────────────────────────────────── */
body .confluence-content h1,
body .confluence-content h2,
body .confluence-content h3,
body .confluence-content h4,
body .confluence-content h5,
body .confluence-content h6 {
	color: #0f172a;
	line-height: 1.3;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

body .confluence-content h1 { font-size: 1.875rem; }
body .confluence-content h2 { font-size: 1.375rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.35rem; }
body .confluence-content h3 { font-size: 1.125rem; }
body .confluence-content h4 { font-size: 1rem; }
body .confluence-content h5 { font-size: 0.9375rem; }
body .confluence-content h6 { font-size: 0.875rem; color: #475569; }

/* ── Paragraphs & lists ──────────────────────────────────────── */
body .confluence-content p {
	margin: 0.75rem 0;
	font-size: 0.9375rem;
	color: #1e293b;
	line-height: 1.7;
}

body .confluence-content ul,
body .confluence-content ol {
	margin: 0.75rem 0 0.75rem 1.5rem;
	font-size: 0.9375rem;
	color: #1e293b;
	line-height: 1.7;
}

body .confluence-content li {
	font-size: 0.9375rem;
	margin-bottom: 0.25rem;
}

/* ── Confluence info / warning / note panels ─────────────────── */
body .confluence-content .confluence-information-macro,
body .confluence-content .panel {
	border-radius: 0.3rem;
	padding: 0.875rem 1rem;
	margin: 1rem 0;
	border-left: 4px solid #94a3b8;
	background-color: #f8fafc;
}

body .confluence-content .confluence-information-macro-information {
	border-left-color: #3b82f6;
	background-color: #eff6ff;
}

body .confluence-content .confluence-information-macro-warning {
	border-left-color: #f59e0b;
	background-color: #fffbeb;
}

body .confluence-content .confluence-information-macro-note {
	border-left-color: #10b981;
	background-color: #f0fdf4;
}

body .confluence-content .confluence-information-macro-danger {
	border-left-color: #ef4444;
	background-color: #fef2f2;
}

/* ── Panel macro with title (panelHeader + panelContent) ────────
 * Confluence renders titled panels as:
 *   div.panel > div.panelHeader + div.panelContent
 * The outer .panel padding would indent the header; zero it so
 * children span the full width edge-to-edge.
 */
body .confluence-content .panel:has(.panelHeader) {
	padding: 0;
	overflow: hidden; /* clip children to border-radius */
}

body .confluence-content .panelHeader {
	padding: 0.55rem 0.875rem;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
}

body .confluence-content .panelContent {
	padding: 0.75rem 0.875rem;
}

/* ── Confluence code macro panel (div.code.panel) ───────────────
 * Confluence renders code macros as:
 *   div.code.panel[style="border-width:1px"] > div.codeHeader.panelHeader + div.codeContent.panelContent > pre
 * Override the inline border and panel chrome to keep it subtle.
 */
body .confluence-content .code.panel,
.code.panel {
	border: 1px solid #e2e8f0 !important;
	border-left: 1px solid #e2e8f0 !important;
	border-radius: 0.5rem;
	background: transparent;
	padding: 0;
	overflow: hidden;
	margin: 1rem 0;
}

body .confluence-content .codeHeader.panelHeader,
.codeHeader.panelHeader {
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
	padding: 0.45rem 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #475569;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body .confluence-content .codeContent.panelContent,
.codeContent.panelContent {
	padding: 0;
	margin: 0;
}

body .confluence-content .codeContent.panelContent pre,
.codeContent.panelContent pre {
	margin: 0;
	border-radius: 0;
}

/* ── Code block copy button ──────────────────────────────────────
 * .dpfcrs-code-wrap wraps every <pre> so the button can be
 * positioned in the top-right corner without affecting layout.
 */
.dpfcrs-code-wrap {
	position: relative;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.dpfcrs-copy-code-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.2rem 0.6rem;
	font-size: 0.7rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-weight: 500;
	line-height: 1.5;
	color: #94a3b8;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 0.3rem;
	cursor: pointer;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
	z-index: 2;
	user-select: none;
}

.dpfcrs-copy-code-btn:hover {
	color: #e2e8f0;
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.3);
}

.dpfcrs-copy-code-btn--copied {
	color: #4ade80 !important;
	border-color: rgba(74,222,128,0.4) !important;
	background: rgba(74,222,128,0.1) !important;
}

/* ── Noformat macro ──────────────────────────────────────────────
 * Renders as div.preformatted.panel > div.preformattedContent > pre.
 * Reset panel chrome so the pre's own dark code-block styling
 * renders cleanly and can scroll horizontally without clipping.
 */
body .confluence-content .preformatted.panel {
	border: none;
	border-left: none;
	background: none;
	padding: 0;
}

body .confluence-content .preformatted .preformattedContent {
	padding: 0;
}

body .confluence-content .preformatted .preformattedContent pre {
	margin: 0;
}

/* ── Blockquotes ─────────────────────────────────────────────── */
body .confluence-content blockquote {
	border-left: 4px solid #cbd5e1;
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	color: #475569;
	font-style: italic;
}

/* ── Images ──────────────────────────────────────────────────── */
body .confluence-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.375rem;
	margin: 0.5rem 0;
}

/* Emoticons are tiny inline icons — override the block-image defaults */
body .confluence-content img.emoticon {
	display: inline;
	width: 1.125em;
	height: 1.125em;
	vertical-align: middle;
	margin: 0 0.1em;
	border-radius: 0;
}

/* ── Confluence Attachments macro ───────────────────────────────
 * The attachments macro renders an interactive filter input + table
 * that has no function outside of Confluence. The <input> element is
 * stripped by wp_kses anyway, leaving a broken empty box. Hide the
 * whole container so nothing visually broken appears.
 */
body .confluence-content .plugin_attachments_container {
	display: none;
}

/* ── Expand / Collapse (Gutenberg: <details> output) ─────────── */
body .confluence-content details.confluence-expand {
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	margin: 0.75rem 0;
	overflow: hidden;
}

body .confluence-content details.confluence-expand summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #1e293b;
	background-color: #f8fafc;
	cursor: pointer;
	list-style: none;
	user-select: none;
	border-bottom: 1px solid transparent;
	transition: background-color 0.15s;
}

body .confluence-content details.confluence-expand summary::-webkit-details-marker {
	display: none;
}

body .confluence-content details.confluence-expand summary::before {
	content: '▶';
	font-size: 0.625rem;
	color: #64748b;
	transition: transform 0.2s;
	flex-shrink: 0;
}

body .confluence-content details.confluence-expand[open] summary {
	background-color: #f1f5f9;
	border-bottom-color: #e2e8f0;
}

body .confluence-content details.confluence-expand[open] summary::before {
	transform: rotate(90deg);
}

body .confluence-content details.confluence-expand summary:hover {
	background-color: #f1f5f9;
}

body .confluence-content .confluence-expand-content {
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
}

body .confluence-content .confluence-expand-content p,
body .confluence-content .confluence-expand-content li,
body .confluence-content .confluence-expand-content td {
	font-size: 0.875rem;
}

body .confluence-content .confluence-expand-content > *:first-child {
	margin-top: 0;
}

body .confluence-content .confluence-expand-content h1 { font-size: 1.25rem; margin-top: 1rem; }
body .confluence-content .confluence-expand-content h2 { font-size: 1.0625rem; border-bottom: none; padding-bottom: 0; margin-top: 1rem; }
body .confluence-content .confluence-expand-content h3 { font-size: 0.9375rem; margin-top: 0.75rem; }
body .confluence-content .confluence-expand-content h4,
body .confluence-content .confluence-expand-content h5,
body .confluence-content .confluence-expand-content h6 { font-size: 0.875rem; margin-top: 0.625rem; }

/* ── Expand / Collapse (Classic: Confluence export HTML) ──────── */
body .confluence-content .expand-container {
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	margin: 0.75rem 0;
	overflow: hidden;
}

body .confluence-content .expand-control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: #1e293b;
	background-color: #f8fafc;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s;
}

body .confluence-content .expand-control::before {
	content: '▶';
	font-size: 0.625rem;
	color: #64748b;
	transition: transform 0.2s;
	flex-shrink: 0;
}

body .confluence-content .expand-container.dpfcrs-open .expand-control {
	background-color: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
}

body .confluence-content .expand-container.dpfcrs-open .expand-control::before {
	transform: rotate(90deg);
}

body .confluence-content .expand-control:hover {
	background-color: #f1f5f9;
}

/* Hide control icons Confluence injects (chevron images, etc.) */
body .confluence-content .expand-control-icon,
body .confluence-content .expand-icon-wrapper {
	display: none;
}

/* Content area */
body .confluence-content .expand-content,
body .confluence-content .expand-hidden {
	display: none;
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
}

body .confluence-content .expand-content p,
body .confluence-content .expand-content li,
body .confluence-content .expand-content td,
body .confluence-content .expand-hidden p,
body .confluence-content .expand-hidden li,
body .confluence-content .expand-hidden td {
	font-size: 0.875rem;
}

body .confluence-content .expand-content > *:first-child,
body .confluence-content .expand-hidden > *:first-child {
	margin-top: 0;
}

body .confluence-content .expand-content h1,
body .confluence-content .expand-hidden h1 { font-size: 1.25rem; margin-top: 1rem; }

body .confluence-content .expand-content h2,
body .confluence-content .expand-hidden h2 { font-size: 1.0625rem; border-bottom: none; padding-bottom: 0; margin-top: 1rem; }

body .confluence-content .expand-content h3,
body .confluence-content .expand-hidden h3 { font-size: 0.9375rem; margin-top: 0.75rem; }

body .confluence-content .expand-content h4,
body .confluence-content .expand-content h5,
body .confluence-content .expand-content h6,
body .confluence-content .expand-hidden h4,
body .confluence-content .expand-hidden h5,
body .confluence-content .expand-hidden h6 { font-size: 0.875rem; margin-top: 0.625rem; }

body .confluence-content .expand-container.dpfcrs-open .expand-content,
body .confluence-content .expand-container.dpfcrs-open .expand-hidden {
	display: block;
}

/* ── Links ───────────────────────────────────────────────────── */
body .confluence-content a {
	color: #2563eb;
	text-decoration: underline;
	text-decoration-color: #bfdbfe;
	text-underline-offset: 2px;
}

body .confluence-content a:hover {
	color: #1d4ed8;
	text-decoration-color: #2563eb;
}

/* ── Column Layouts (Confluence export_view native classes) ──────── */
/*
 * Confluence renders:
 *   ac:layout          → div.contentLayout2
 *   ac:layout-section  → div.columnLayout.{type}   (the flex row)
 *   ac:layout-cell     → div.cell.{normal|aside} > div.innerCell
 */

/* Remove extra spacing the contentLayout2 wrapper might carry */
body .confluence-content .contentLayout2 {
	margin: 0;
	padding: 0;
}

/* The row — flex container */
body .confluence-content .columnLayout {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin: 1.25rem 0;
}

/* Every cell grows equally by default (two-equal, three-equal) */
body .confluence-content .columnLayout .cell {
	flex: 1;
	min-width: 0; /* prevent flex children from overflowing */
}

/* Sidebar cells are narrower (~28%) */
body .confluence-content .columnLayout .cell.aside {
	flex: 0 0 28%;
}

/* ── Typography inside column cells ───────────────────────────
 *
 * Columns are narrower than the full content width, so heading
 * sizes and spacing must scale down to maintain visual hierarchy.
 * The innerCell div holds the actual content.
 */

/* Remove the top gap on the very first element in a cell */
body .confluence-content .columnLayout .innerCell > *:first-child,
body .confluence-content .columnLayout .cell > *:first-child {
	margin-top: 0;
}

/* Scale headings down inside columns */
body .confluence-content .columnLayout .cell h1 {
	font-size: 1.375rem;   /* full-width h2 size */
	margin-top: 1.25rem;
}

body .confluence-content .columnLayout .cell h2 {
	font-size: 1.125rem;   /* full-width h3 size */
	border-bottom: none;   /* no separator line in narrow columns */
	padding-bottom: 0;
	margin-top: 1.25rem;
}

body .confluence-content .columnLayout .cell h3 {
	font-size: 1rem;
	margin-top: 1rem;
}

body .confluence-content .columnLayout .cell h4,
body .confluence-content .columnLayout .cell h5,
body .confluence-content .columnLayout .cell h6 {
	font-size: 0.9375rem;
	margin-top: 0.875rem;
}

/* Tighten paragraph and list spacing inside columns */
body .confluence-content .columnLayout .cell p {
	margin: 0.5rem 0;
}

body .confluence-content .columnLayout .cell ul,
body .confluence-content .columnLayout .cell ol {
	margin: 0.5rem 0 0.5rem 1.25rem;
}

/* Tables inside narrow columns must not exceed the column width */
body .confluence-content .columnLayout .cell table {
	font-size: 0.875rem;
}

body .confluence-content .columnLayout .cell th,
body .confluence-content .columnLayout .cell td {
	padding: 0.4rem 0.65rem;
}

/* Panels inside columns — tighten padding */
body .confluence-content .columnLayout .cell .confluence-information-macro,
body .confluence-content .columnLayout .cell .panel {
	padding: 0.625rem 0.875rem;
	margin: 0.625rem 0;
}

/* Code blocks inside columns */
body .confluence-content .columnLayout .cell pre {
	font-size: 0.8125rem;
	padding: 0.75rem 1rem;
}

/* ── Gutenberg-mode column classes (converter output) ───────── */
body .confluence-content .confluence-columns {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	margin: 1.25rem 0;
}

body .confluence-content .confluence-column {
	flex: 1;
	min-width: 0;
}

body .confluence-content .confluence-column--aside {
	flex: 0 0 28%;
}

/* Mirror the same typography rules for Gutenberg column output */
body .confluence-content .confluence-column > *:first-child {
	margin-top: 0;
}

body .confluence-content .confluence-column h1 { font-size: 1.375rem; margin-top: 1.25rem; }
body .confluence-content .confluence-column h2 { font-size: 1.125rem; border-bottom: none; padding-bottom: 0; margin-top: 1.25rem; }
body .confluence-content .confluence-column h3 { font-size: 1rem; margin-top: 1rem; }
body .confluence-content .confluence-column h4,
body .confluence-content .confluence-column h5,
body .confluence-content .confluence-column h6 { font-size: 0.9375rem; margin-top: 0.875rem; }
body .confluence-content .confluence-column p   { margin: 0.5rem 0; }

/* ── Responsive: stack on small screens ──────────────────────── */
@media (max-width: 640px) {
	body .confluence-content .columnLayout,
	body .confluence-content .confluence-columns {
		flex-direction: column;
		gap: 1rem;
	}

	body .confluence-content .columnLayout .cell,
	body .confluence-content .columnLayout .cell.aside,
	body .confluence-content .confluence-column,
	body .confluence-content .confluence-column--aside {
		flex: 1 1 100%;
	}

	/* Restore full-width heading sizes when stacked */
	body .confluence-content .columnLayout .cell h1,
	body .confluence-content .confluence-column h1 { font-size: 1.875rem; }

	body .confluence-content .columnLayout .cell h2,
	body .confluence-content .confluence-column h2 {
		font-size: 1.375rem;
		border-bottom: 1px solid #e2e8f0;
		padding-bottom: 0.35rem;
	}

	body .confluence-content .columnLayout .cell h3,
	body .confluence-content .confluence-column h3 { font-size: 1.125rem; }
}

/* ── Synced post panels (no .confluence-content wrapper) ────────
 * The panel converter outputs .confluence-panel + .confluence-panel-{type}
 * on Gutenberg-synced content. Classic-editor sync keeps the original
 * .confluence-information-macro-* classes. Both need unscoped rules.
 */

/* Base panel */
.confluence-panel,
.confluence-information-macro,
.panel {
	border-radius: 0.375rem;
	padding: 0.875rem 1rem 0.875rem 1.125rem;
	margin: 1rem 0;
	border-left: 4px solid #94a3b8;
	background-color: #f8fafc;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Info */
.confluence-panel-info,
.confluence-information-macro-information {
	border-left-color: #3b82f6;
	background-color: #eff6ff;
}

/* Note / success / tip */
.confluence-panel-note,
.confluence-panel-tip,
.confluence-panel-success,
.confluence-information-macro-note,
.confluence-information-macro-tip {
	border-left-color: #10b981;
	background-color: #f0fdf4;
}

/* Warning */
.confluence-panel-warning,
.confluence-information-macro-warning {
	border-left-color: #f59e0b;
	background-color: #fffbeb;
}

/* Error / danger */
.confluence-panel-error,
.confluence-information-macro-danger {
	border-left-color: #ef4444;
	background-color: #fef2f2;
}

/* Icon column Confluence puts inside macros */
.confluence-panel .confluence-information-macro-icon,
.confluence-information-macro .confluence-information-macro-icon {
	display: none;
}

/* Body text inside macro */
.confluence-panel .confluence-information-macro-body > p:first-child,
.confluence-information-macro .confluence-information-macro-body > p:first-child {
	margin-top: 0;
}
.confluence-panel .confluence-information-macro-body > p:last-child,
.confluence-information-macro .confluence-information-macro-body > p:last-child {
	margin-bottom: 0;
}

/* Titled panels (panelHeader + panelContent) */
.panel:has(.panelHeader) {
	padding: 0;
	overflow: hidden;
}
.panelHeader {
	padding: 0.55rem 0.875rem;
	font-weight: 600;
	font-size: 0.9375rem;
	background: rgba(0,0,0,0.04);
	border-bottom: 1px solid rgba(0,0,0,0.07);
}
.panelContent {
	padding: 0.75rem 0.875rem;
}
.panelContent > p:first-child { margin-top: 0; }
.panelContent > p:last-child  { margin-bottom: 0; }