/*
 * Custom themes: load an extra stylesheet after this one that redefines
 * the same --pgw-* (and optional --d2h-*) variables on :root.
 * Example: <link rel="stylesheet" href="static/themes/solarized.css">
 */

:root {
	color-scheme: light;
	/* Surfaces */
	--pgw-bg: #fafafa;
	--pgw-bg-raised: #ffffff;
	--pgw-bg-muted: #f4f4f5;
	--pgw-border: #e4e4e7;
	--pgw-border-muted: #d4d4d8;

	--pgw-text: #18181b;
	--pgw-text-muted: #52525b;
	--pgw-text-dim: #71717a;

	--pgw-link: #2563eb;
	--pgw-link-visited: #7c3aed;
	--pgw-link-hover: #dc2626;

	--pgw-accent-bg: #e4e4e7;
	--pgw-accent-text: #18181b;
	--pgw-title-bg: #f4f4f5;
	--pgw-title-hover-bg: #e4e4e7;

	--pgw-code-bg: #f4f4f5;
	--pgw-code-border: #e4e4e7;

	--pgw-table-stripe: #fafafa;
	--pgw-table-hover: #f4f4f5;

	--pgw-add-fg: #166534;
	--pgw-add-bg: #dcfce7;
	--pgw-rem-fg: #991b1b;
	--pgw-rem-bg: #fee2e2;
	--pgw-info-fg: #52525b;

	--pgw-blob-selection-bg: rgba(193, 173, 0, 0.35);

	--pgw-navbar-bg: #e2e8f0;
	--pgw-navbar-text: #1e293b;
	--pgw-navbar-text-muted: #64748b;
	--pgw-navbar-link-hover-bg: #cbd5e1;
	--pgw-navbar-active-bg: #94a3b8;
	--pgw-navbar-active-text: #ffffff;
	--pgw-navbar-border: #cbd5e1;
	--pgw-navbar-toggler-border: #94a3b8;
	--pgw-navbar-toggler-icon: #475569;

	/* diff2html (optional overrides) */
	--d2h-info-bg-color: #f0f0f0;
	--d2h-file-header-bg-color: rgb(220, 220, 255);
	--d2h-empty-placeholder-bg-color: #f5f5f5;
	--d2h-del-bg-color: rgb(255, 220, 220);
	--d2h-ins-bg-color: rgb(220, 255, 220);
	--d2h-dim-color: #666;
	--d2h-bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--pgw-bg: #1a1a1e;
		--pgw-bg-raised: #25252c;
		--pgw-bg-muted: #2d2d36;
		--pgw-border: #3d3d48;
		--pgw-border-muted: #35353d;

		--pgw-text: #e4e4e7;
		--pgw-text-muted: #a1a1aa;
		--pgw-text-dim: #71717a;

		--pgw-link: #7dd3fc;
		--pgw-link-visited: #c4b5fd;
		--pgw-link-hover: #fda4af;

		--pgw-accent-bg: #27272a;
		--pgw-accent-text: #fafafa;
		--pgw-title-bg: #2d2d36;
		--pgw-title-hover-bg: #3d3d48;

		--pgw-code-bg: #18181b;
		--pgw-code-border: #27272a;

		--pgw-table-stripe: #222226;
		--pgw-table-hover: #2d2d36;

		--pgw-add-fg: #86efac;
		--pgw-add-bg: #14532d;
		--pgw-rem-fg: #fca5a5;
		--pgw-rem-bg: #7f1d1d;
		--pgw-info-fg: #a1a1aa;

		--pgw-blob-selection-bg: rgba(193, 173, 0, 0.4);

		--pgw-navbar-bg: #2d2d4a;
		--pgw-navbar-text: #e2e8f0;
		--pgw-navbar-text-muted: #94a3b8;
		--pgw-navbar-link-hover-bg: #3d3d5c;
		--pgw-navbar-active-bg: #4f4f7a;
		--pgw-navbar-active-text: #f1f5f9;
		--pgw-navbar-border: #3d3d48;
		--pgw-navbar-toggler-border: #64748b;
		--pgw-navbar-toggler-icon: #94a3b8;

		--d2h-info-bg-color: #222;
		--d2h-file-header-bg-color: rgb(38, 38, 98);
		--d2h-empty-placeholder-bg-color: #222;
		--d2h-del-bg-color: rgb(98, 38, 38);
		--d2h-ins-bg-color: rgb(38, 98, 38);
		--d2h-dim-color: #b0b0b0;
		--d2h-bg-color: #222;
	}
}

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

body {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	padding: 0.75rem 1rem;
	background-color: var(--pgw-bg);
	color: var(--pgw-text);
	border: 1px solid var(--pgw-border);
	height: auto;

	&:has(.page) {
		padding: 0;
	}
}

/* Card: override Tabler so cards use color-scheme variables */
.card {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	.card-header {
		background-color: var(--pgw-accent-bg);
		border-bottom-color: var(--pgw-border);
		color: var(--pgw-accent-text);
	}

	.card-title {
		color: var(--pgw-accent-text);
	}

	.card-body {
		background-color: var(--pgw-bg-raised);
		color: var(--pgw-text);
	}
}

/* Table: override Tabler .table / .card-table so tables use color-scheme variables */
.table,
.table.card-table {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	thead th,
	th {
		background-color: var(--pgw-accent-bg);
		border-bottom-color: var(--pgw-border-muted);
		color: var(--pgw-accent-text);
	}

	td {
		border-top-color: var(--pgw-border-muted);
		border-bottom-color: var(--pgw-border-muted);
		color: var(--pgw-text);
	}

	tbody tr {
		&:nth-child(even) {
			background-color: var(--pgw-table-stripe);
		}

		&:hover {
			background-color: var(--pgw-table-hover);

			td {
				background-color: var(--pgw-table-hover);
			}
		}
	}
}

/* Form: override Tabler form controls so they use color-scheme variables */
.form-label,
.form-check-label {
	color: var(--pgw-text);
}

.form-label.required::after {
	color: var(--pgw-text-muted);
}

.form-hint {
	color: var(--pgw-text-muted);

	code {
		background-color: var(--pgw-code-bg);
		border-color: var(--pgw-code-border);
		color: var(--pgw-text);
	}
}

.form-control,
.form-select {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	&::placeholder {
		color: var(--pgw-text-muted);
	}

	&:focus {
		background-color: var(--pgw-bg-raised);
		border-color: var(--pgw-link);
		color: var(--pgw-text);
	}

	&:disabled {
		background-color: var(--pgw-bg-muted);
		color: var(--pgw-text-muted);
	}
}

.form-check-input {
	background-color: var(--pgw-bg-raised);
	border-color: var(--pgw-border);

	&:checked {
		background-color: var(--pgw-link);
		border-color: var(--pgw-link);
	}

	&:focus {
		border-color: var(--pgw-link);
	}
}

.form-footer {
	border-top-color: var(--pgw-border);
}

/* Buttons: primary and ghost variants */
.btn-primary {
	background-color: var(--pgw-link);
	border-color: var(--pgw-link);
	color: var(--pgw-accent-text);

	&:hover {
		background-color: var(--pgw-link-hover);
		border-color: var(--pgw-link-hover);
		color: var(--pgw-accent-text);
	}
}

.btn-ghost-secondary {
	background-color: transparent;
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	&:hover {
		background-color: var(--pgw-bg-muted);
		border-color: var(--pgw-border);
		color: var(--pgw-text);
	}
}

/* Dropzone (file upload area) */
.dropzone {
	background-color: var(--pgw-bg-muted);
	border-color: var(--pgw-border);
	color: var(--pgw-text);

	.dropzone-placeholder,
	.text-muted {
		color: var(--pgw-text-muted);
	}

	&.border-primary {
		border-color: var(--pgw-link);
	}
}

radio-picker {
	display: flex;

	label {
		box-shadow: inset 0 0 1.2px 0 #000;
		padding: 0.5rem;
		cursor: pointer;
		background: #0002;

		&:has(input:checked) {
			box-shadow: inset 0 0 0.2rem 0 #888;
		}

		&:has(input:focus-visible) {
			outline: 2px solid #000;
		}

		&:hover {
			background: #0004;
		}

		&:active {
			background: #0006;
		}
	}

	input {
		opacity: 0;
		position: absolute;
		pointer-events: none;
	}
}

/* Fluid vertical layout: fixed sidebar + main content offset */
.page {
	.navbar-vertical.position-fixed {
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1030;
		background-color: var(--pgw-navbar-bg);
	}

	.navbar-vertical.position-fixed ~ .page-wrapper {
		margin-left: var(--tblr-navbar-vertical-width, 15rem);
	}
}

a {
	color: var(--pgw-link);
	text-decoration: none;

	&:hover {
		color: var(--pgw-link-hover);
	}

	&:visited {
		color: var(--pgw-link-visited);
	}
}

h1, h2, h3 {
	margin: 0 0 0.5em;
	color: var(--pgw-accent-text);
	font-weight: 600;
}

/* Tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
	background-color: var(--pgw-bg-raised);
	border: 1px solid var(--pgw-border);
}

th, td {
	padding: 0.1rem 0.2rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--pgw-border-muted);
}

p {
	color: var(--pgw-text);
}

th {
	background-color: var(--pgw-accent-bg);
	color: var(--pgw-accent-text);
	font-weight: 600;
}

#environment {
	background-color: var(--pgw-bg-raised);
	color: var(--pgw-text);
}

#environment tr:nth-child(2n+1) {
	background-color: var(--pgw-table-stripe);
}

tbody tr {
	&:nth-child(even) {
		background-color: var(--pgw-table-stripe);
	}

	&:hover {
		background-color: var(--pgw-table-hover);
	}
}

/* Optional: page header / footer blocks for future use */
.page_header,
.page_footer {
	padding: 0.5rem 0.75rem;
	background-color: var(--pgw-accent-bg);
	color: var(--pgw-accent-text);
	border: 1px solid var(--pgw-border);
}

.page_footer_text {
	color: var(--pgw-text-muted);
	font-style: italic;
}

.page_body {
	padding: 0.5rem;
	font-family: ui-monospace, monospace;
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);
}

.title, .title_text {
	background-color: var(--pgw-title-bg);
	padding: 0.375rem 0.5rem;
	border-bottom: 1px solid var(--pgw-border);
}

.title:hover, a.title:hover {
	background-color: var(--pgw-title-hover-bg);
}

/* Vertical navbar: variables and link states */
.navbar-vertical {
	.nav-link {
		color: var(--pgw-navbar-text);

		&:hover {
			background-color: var(--pgw-navbar-link-hover-bg);
			color: var(--pgw-navbar-text);

			.nav-link-title,
			.text-reset {
				color: var(--pgw-navbar-text);
			}
		}

		&.active {
			background-color: var(--pgw-navbar-active-bg);
			color: var(--pgw-navbar-active-text);

			.nav-link-title {
				color: var(--pgw-navbar-active-text);
			}
		}
	}

	.navbar-brand .text-reset,
	.nav-link-title {
		color: var(--pgw-navbar-text);
	}

	.navbar-toggler {
		border-color: var(--pgw-navbar-toggler-border);
	}

	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	.nav-link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;
		height: 1.5rem;

		svg {
			width: 1.25rem;
			height: 1.25rem;
		}
	}
}

[data-bs-theme="dark"] {
	.navbar-vertical .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}
}

.navbar-user {
	border-top-color: var(--pgw-navbar-border) !important;

	.navbar-user-name {
		color: var(--pgw-navbar-text);
	}

	.navbar-user-meta,
	.text-muted {
		color: var(--pgw-navbar-text-muted);
	}

	.avatar svg {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* Diff/status helpers (use var(--pgw-add-*) etc. in markup if needed) */
.diff-add { color: var(--pgw-add-fg); background-color: var(--pgw-add-bg); }
.diff-rem { color: var(--pgw-rem-fg); background-color: var(--pgw-rem-bg); }
.text-muted { color: var(--pgw-text-muted); }

/* Blob view: line numbers + code with syntax highlighting */
.blob-view {
	display: flex;
	margin: 0.5rem 0;
	max-width: 100%;
	overflow: auto;
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);

	.blob-line-nums {
		flex-shrink: 0;
		user-select: none;
		padding: 0.75rem 1rem 0.75rem 0.5rem;
		text-align: right;
		color: var(--pgw-text-muted);
		white-space: pre;
		font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
		font-size: 0.9rem;
		line-height: 1.5;
		border-right: 1px solid var(--pgw-border);
	}

	.blob-content {
		flex: 1;
		margin: 0;
		padding: 0.75rem 1rem;
		overflow: auto;
		font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
		font-size: 0.9rem;
		line-height: 1.5;
		min-width: 0;

		code {
			background: none;
			padding: 0;
			font-size: inherit;
			line-height: inherit;
		}
	}

	.blob-line-selected,
	.blob-selection {
		background-color: var(--pgw-blob-selection-bg);
	}
}

/* README markdown: base and all elements use color-scheme variables */
.markdown-body {
	color: var(--pgw-text);
	background-color: transparent;

	h1, h2, h3, h4, h5, h6 {
		color: var(--pgw-accent-text);
		border-bottom-color: var(--pgw-border-muted);
	}

	a {
		color: var(--pgw-link);

		&:hover {
			color: var(--pgw-link-hover);
		}

		&:visited {
			color: var(--pgw-link-visited);
		}
	}

	code {
		background-color: var(--pgw-code-bg);
		color: var(--pgw-text);
		border: 1px solid var(--pgw-code-border);
	}

	pre {
		background-color: var(--pgw-code-bg);
		border: 1px solid var(--pgw-code-border);
		color: var(--pgw-text);

		code {
			background: none;
			border: none;
		}
	}

	blockquote {
		border-left: 0.25rem solid var(--pgw-border);
		color: var(--pgw-text-muted);
		padding-left: 1rem;
		margin-left: 0;
	}

	hr {
		border-color: var(--pgw-border-muted);
		background-color: var(--pgw-border-muted);
	}

	table {
		background-color: var(--pgw-bg-raised);
		border-color: var(--pgw-border);
	}

	th, td {
		border-color: var(--pgw-border-muted);
	}

	th {
		background-color: var(--pgw-accent-bg);
		color: var(--pgw-accent-text);
	}

	tbody tr {
		&:nth-child(even) {
			background-color: var(--pgw-table-stripe);
		}

		&:hover {
			background-color: var(--pgw-table-hover);
		}
	}

	img {
		background-color: var(--pgw-bg-muted);
	}

	.readme-heading-wrap {
		position: relative;
		display: block;
	}

	.readme-section-anchor {
		position: absolute;
		right: 100%;
		padding-right: 0.35rem;
		opacity: 0;
		color: var(--pgw-text-muted);
		font-size: 1.3rem;
		text-decoration: none;
		transition: opacity 0.15s ease;

		&:focus {
			opacity: 1;
		}
	}

	.readme-heading-wrap:hover .readme-section-anchor,
	.readme-section-anchor:hover {
		opacity: 1;
	}
}

.readme-toc-mount {
	position: fixed;
	left: var(--tblr-navbar-vertical-width, 15rem);
	top: 0;
	bottom: 0;
	width: 12rem;
	z-index: 1040;
	pointer-events: none;
	overflow: hidden;

	.readme-toc {
		pointer-events: auto;
		padding: 1rem 0.5rem 1rem 0;
		max-height: 100%;
		overflow-y: auto;
	}
}

.readme-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
}

.readme-toc-item {
	margin: 0.2rem 0;
}

.readme-toc-link {
	display: block;
	padding: 0.2rem 0.4rem;
	color: var(--pgw-text-muted);
	text-decoration: none;
	border-radius: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&:hover {
		color: var(--pgw-link-hover);
		background-color: var(--pgw-bg-raised);
	}
}

.readme-toc-item.readme-toc-active .readme-toc-link {
	color: var(--pgw-link);
	font-weight: 600;
	background-color: var(--pgw-accent-bg);
}

.readme-toc-level-1 { padding-left: 0; }
.readme-toc-level-2 { padding-left: 0.5rem; }
.readme-toc-level-3 { padding-left: 1rem; }
.readme-toc-level-4 { padding-left: 1.5rem; }
.readme-toc-level-5 { padding-left: 2rem; }
.readme-toc-level-6 { padding-left: 2.5rem; }

/* Board view: lift container max-width so columns can use full width; keep centered */
.container-xl:has(.board-columns) {
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/* Board view: center the column group when there's space; still scroll when many columns */
.board-columns {
	justify-content: center;
}

/* Board view columns: use theme variables so they respect light/dark */
.board-column {
	background-color: var(--pgw-bg-muted);
	color: var(--pgw-text);
	border-color: var(--pgw-border) !important;

	.h6,
	.text-muted {
		color: var(--pgw-text-muted) !important;
	}
}

/* Board: Sync status icons (mask so currentColor is respected when loaded) */
.board-card-icon-wrap {
	opacity: 0.7;
	color: var(--pgw-text-muted);
}

.board-card-icon {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask-image: url(/static/icons/cloud.svg);
	mask-image: url(/static/icons/cloud.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.board-card-icon[data-icon="cloud-up"] {
	-webkit-mask-image: url(/static/icons/cloud-up.svg);
	mask-image: url(/static/icons/cloud-up.svg);
}
.board-card-icon[data-icon="cloud-filled"] {
	-webkit-mask-image: url(/static/icons/cloud-filled.svg);
	mask-image: url(/static/icons/cloud-filled.svg);
}
.board-card-icon[data-icon="cloud-exclamation"] {
	-webkit-mask-image: url(/static/icons/cloud-exclamation.svg);
	mask-image: url(/static/icons/cloud-exclamation.svg);
}
.board-card .board-card-title {
	padding-right: 1.75rem;
}

/* Board card popout: overlay and card on top of the board (above navbar and Bootstrap modals) */
.board-card-popout-overlay {
	position: fixed;
	inset: 0;
	z-index: 1060;
	background-color: rgba(0, 0, 0, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	box-sizing: border-box;

	.board-card-popout {
		position: relative;
		z-index: 1061;
		max-width: 40rem;
		width: 100%;
		pointer-events: auto;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
	}
}

/* Popout card: editable fields (click to edit) */
.board-card-popout {
	.board-card-editable,
	.board-card-title.board-card-editable {
		cursor: pointer;
		border-radius: 0.25rem;
		min-height: 1.5em;

		&:hover {
			background-color: var(--pgw-bg-muted);
		}
	}

	.board-card-title-edit,
	.board-card-description-edit,
	.board-card-due-date-edit,
	.board-card-status-edit,
	.board-card-priority-edit {
		min-width: 10rem;
		width: 100%;
	}

	.board-card-description-edit {
		min-height: 4rem;
		resize: vertical;
	}
}

/* Search page: input, status, and result lines */
.search-status {
	font-style: italic;
}

.search-results {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	&.is-loading {
		opacity: 0.6;
	}
}

.search-result {
	background-color: var(--pgw-bg-raised);
	border: 1px solid var(--pgw-border);
	border-radius: 0.25rem;
	padding: 0.25rem 0.5rem;

	&:hover {
		background-color: var(--pgw-table-hover);
	}
}

.search-result-line {
	margin: 0;
	font-family: ui-monospace, "Fira Code", "Fira Mono", monospace;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--pgw-text);
	white-space: pre-wrap;
	word-break: break-word;
}

.subpage-frame {
	display: block;
	width: 100%;
	height: 82vh;
	min-height: 42rem;
	border: 1px solid var(--pgw-border);
	background-color: var(--pgw-bg-raised);
}