/**
 * plugins/generic/rsynSDG/styles/rsynSdg.css
 *
 * All SDG styling ships with the plugin, never the theme — the theme stays
 * presentation-only and holds no SDG knowledge beyond one hook line.
 *
 * Every colour consumes an --rst-* variable with a neutral fallback so the
 * plugin renders correctly under rsynScienceTheme, under the stock theme, and
 * in the backend Vue shell. Dark mode follows the theme's [data-theme="dark"]
 * convention automatically because only variables are referenced.
 *
 * Swatches are deliberately neutral, not the official UN palette — the UN
 * communications guidelines impose conditions on the official icons and
 * colours that are not yet satisfied (build spec §0.11). The goal number and
 * name are always present as text; colour never carries meaning alone.
 */

/* ---- Article page chips ---- */

.rsyn-sdg-chips__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.rsyn-sdg-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.65rem;
	border: 1px solid var(--rst-primary, #185FA5);
	border-radius: var(--rst-radius, 0.5rem);
	background: var(--rst-surface, transparent);
	font-size: 0.85rem;
	line-height: 1.3;
}

.rsyn-sdg-chips__swatch {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 2px;
	background: var(--rst-primary, #185FA5);
	flex: 0 0 auto;
}

/* ---- Editor review: 17-goal checkbox grid ---- */

.rsyn-sdg-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	border: none;
	margin: 1.5rem 0 1rem;
	padding: 0;
}

@media (min-width: 768px) {
	.rsyn-sdg-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.rsyn-sdg-grid legend {
	font-weight: 600;
	margin-bottom: 0.75rem;
}

.rsyn-sdg-goal {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--rst-primary, #185FA5);
	border-radius: var(--rst-radius, 0.5rem);
	cursor: pointer;
	background: var(--rst-surface, transparent);
}

.rsyn-sdg-goal:focus-within {
	outline: 2px solid var(--rst-primary, #185FA5);
	outline-offset: 2px;
}

.rsyn-sdg-goal__input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.rsyn-sdg-goal__number {
	flex: 0 0 auto;
	min-width: 1.8rem;
	text-align: center;
	font-weight: 700;
	color: var(--rst-primary, #185FA5);
}

.rsyn-sdg-goal__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.rsyn-sdg-goal__short {
	font-weight: 600;
}

.rsyn-sdg-goal__full {
	font-size: 0.8rem;
	opacity: 0.8;
}

/* ---- "No goal applies" + notes + actions ---- */

.rsyn-sdg-none {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0.25rem;
	font-weight: 600;
	cursor: pointer;
}

.rsyn-sdg-note {
	font-size: 0.85rem;
	opacity: 0.85;
	max-width: 60ch;
}

.rsyn-sdg-actions {
	margin: 1.25rem 0;
}

.rsyn-sdg-version {
	font-size: 0.75rem;
	opacity: 0.6;
}

/* ---- Status line (review + manage) ---- */

.rsyn-sdg-status {
	min-height: 1.5rem;
	margin: 0.75rem 0;
	font-weight: 600;
}

.rsyn-sdg-status.is-ok {
	color: var(--rst-primary, #185FA5);
}

.rsyn-sdg-status.is-error {
	color: #a4262c;
}

/* ---- Manager panels ---- */

.rsyn-sdg-panel {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--rst-primary, #185FA5);
	border-radius: var(--rst-radius, 0.5rem);
	background: var(--rst-surface, transparent);
}

.rsyn-sdg-health--ok {
	color: var(--rst-primary, #185FA5);
	font-weight: 600;
}

.rsyn-sdg-health--bad {
	color: #a4262c;
	font-weight: 600;
}

.rsyn-sdg-meta {
	font-size: 0.8rem;
	opacity: 0.75;
}

.rsyn-sdg-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* ---- Backend button (own class — pkpButton is a Vue component class and
   renders unstyled on a plain <button>) ---- */

.rsyn-sdg-btn {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--rst-primary, #185FA5);
	border-radius: var(--rst-radius, 0.25rem);
	background: var(--rst-primary, #185FA5);
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
}

.rsyn-sdg-btn:hover {
	filter: brightness(0.92);
}

.rsyn-sdg-btn:focus {
	outline: 2px solid var(--rst-primary, #185FA5);
	outline-offset: 2px;
}

.rsyn-sdg-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---- Backlog list ---- */
.rsyn-sdg-backlog__bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}
.rsyn-sdg-backlog__bar--bottom { margin-top: 1.25rem; }
.rsyn-sdg-backlog__total { font-size: 0.85rem; opacity: 0.75; margin-left: auto; }

.rsyn-sdg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.rsyn-sdg-table th,
.rsyn-sdg-table td {
	text-align: left;
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--rst-border, #e0e0e0);
	vertical-align: top;
}
.rsyn-sdg-table thead th {
	font-weight: 600;
	border-bottom: 2px solid var(--rst-primary, #185FA5);
}
.rsyn-sdg-table__check { width: 2rem; }

.rsyn-sdg-btn--sm {
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
}
.rsyn-sdg-btn--ghost {
	background: transparent;
	color: var(--rst-primary, #185FA5);
}
.rsyn-sdg-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.rsyn-sdg-pager {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 1rem 0;
	flex-wrap: wrap;
}
.rsyn-sdg-pager__status { font-weight: 600; margin: 0 0.5rem; }
.rsyn-sdg-pager__goto { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; }
.rsyn-sdg-pager__input { width: 4rem; padding: 0.25rem; }

/* ---- Certificate SDG labels (print-oriented, plain text) ---- */
.rsyn-sdg-cert {
	margin: 0.75rem 0;
	font-size: 0.9rem;
	line-height: 1.5;
}
.rsyn-sdg-cert__heading {
	font-weight: 600;
}
.rsyn-sdg-cert__labels {
	color: inherit;
}
@media print {
	.rsyn-sdg-cert { color: #000; }
}

/* ---- Provenance view ---- */
.rsyn-sdg-prov__counts { display: flex; gap: 1rem; margin: 1rem 0; flex-wrap: wrap; }
.rsyn-sdg-prov__count { padding: 0.35rem 0.75rem; border-radius: 0.25rem; font-size: 0.85rem; font-weight: 600; }
.rsyn-sdg-prov__count--auto { background: #e6f0f8; color: #185FA5; }
.rsyn-sdg-prov__count--human { background: #eef2ee; color: #2f6f3e; }
.rsyn-sdg-prov__count--corrected { background: #fbeee6; color: #a8600f; }

.rsyn-sdg-prov__filters { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0; flex-wrap: wrap; }
.rsyn-sdg-prov__total { font-size: 0.85rem; opacity: 0.7; }

.rsyn-sdg-prov__badge { padding: 0.2rem 0.55rem; border-radius: 0.25rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.rsyn-sdg-prov__badge--auto { background: #e6f0f8; color: #185FA5; }
.rsyn-sdg-prov__badge--human { background: #eef2ee; color: #2f6f3e; }
.rsyn-sdg-prov__badge--corrected { background: #fbeee6; color: #a8600f; }

.rsyn-sdg-prov__goals { list-style: none; margin: 0; padding: 0; }
.rsyn-sdg-prov__goals li { padding: 0.15rem 0; font-size: 0.85rem; }
.rsyn-sdg-prov__goal-src { display: inline-block; min-width: 3.2rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; opacity: 0.7; }
.rsyn-sdg-prov__goal-src--auto { color: #185FA5; }
.rsyn-sdg-prov__goal-src--human { color: #2f6f3e; }
.rsyn-sdg-prov__goal-meta { font-size: 0.75rem; opacity: 0.6; }

/* ---- Vocabulary management ---- */
.rsyn-sdg-vocab h3 { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.rsyn-sdg-vocab input[type="file"] { display: block; margin: 0.5rem 0; }
.rsyn-sdg-attribution {
	font-size: 0.82rem;
	padding: 0.5rem 0.75rem;
	background: #fbeee6;
	border-left: 3px solid #a8600f;
	border-radius: 0.2rem;
	margin: 0.5rem 0;
}

/* ---- Per-goal thresholds ---- */
.rsyn-sdg-thr-table td:nth-child(2) { width: 8rem; }
.rsyn-sdg-thr-input {
	width: 5rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid #ccc;
	border-radius: 0.2rem;
}
.rsyn-sdg-thresholds .rsyn-sdg-btn { margin-top: 0.75rem; }

/* ---- Re-evaluation console ---- */
.rsyn-sdg-reeval__controls { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0; flex-wrap: wrap; }
.rsyn-sdg-reeval__total { font-size: 0.85rem; opacity: 0.7; margin-left: auto; }
.rsyn-sdg-reeval__bulkbar { display: flex; gap: 0.5rem; align-items: center; margin: 0.75rem 0; flex-wrap: wrap; }
.rsyn-sdg-reeval__row--changed { background: #fbf7e6; }
.rsyn-sdg-reeval__tag {
	display: inline-block; padding: 0.1rem 0.45rem; margin: 0.1rem;
	border-radius: 0.25rem; font-size: 0.78rem; background: #eef2f6; color: #333;
}
.rsyn-sdg-reeval__tag--new { background: #e6f0f8; color: #185FA5; font-weight: 600; }
.rsyn-sdg-reeval__nomatch { font-size: 0.8rem; opacity: 0.6; font-style: italic; }

/* ---- Load confirmation panel ---- */
.rsyn-sdg-loadconfirm {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	background: #eef6ef;
	border-left: 3px solid #2f6f3e;
	border-radius: 0.25rem;
}
.rsyn-sdg-loadconfirm__head { margin: 0 0 0.25rem; }
.rsyn-sdg-status { white-space: pre-line; }

/* ---- Sentinel re-check ---- */
.rsyn-sdg-warnbox {
	margin: 0.75rem 0 1rem;
	padding: 0.75rem 1rem;
	background: #fdf3e3;
	border-left: 3px solid #b8791a;
	border-radius: 0.25rem;
	font-size: 0.9rem;
}
.rsyn-sdg-reeval__tag--sentinel { background: #f0e6e6; color: #7a4a4a; font-style: italic; }

/* ---- Annual reports ---- */
.rsyn-sdg-rpt__controls { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0; flex-wrap: wrap; }
.rsyn-sdg-rpt__h2 { margin: 1.6rem 0 0.5rem; font-size: 1.2rem; border-bottom: 2px solid #eee; padding-bottom: 0.25rem; }
.rsyn-sdg-rpt__h3 { margin: 1.2rem 0 0.4rem; font-size: 1.05rem; }
.rsyn-sdg-rpt__cards { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.rsyn-sdg-rpt__card { flex: 1; min-width: 120px; background: #f6f8fa; border-radius: 0.4rem; padding: 0.75rem; text-align: center; }
.rsyn-sdg-rpt__cv { font-size: 1.6rem; font-weight: 700; color: #185FA5; }
.rsyn-sdg-rpt__cs { font-size: 0.8rem; color: #2f6f3e; font-weight: 600; }
.rsyn-sdg-rpt__cl { font-size: 0.75rem; color: #666; margin-top: 0.2rem; }
.rsyn-sdg-rpt__top { font-size: 1rem; background: #eef6ef; border-left: 3px solid #2f6f3e; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
.rsyn-sdg-note.pending { background: #f6f6f6; border-left: 3px solid #999; padding: 0.5rem 0.75rem; font-style: italic; }

.rsyn-sdg-health--warn { background: #fdf3e3; border-left: 3px solid #b8791a; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }