/* UNOSSC Fund Data — front-end styles.
   Scoped under .uf so nothing leaks into the surrounding theme. */

.uf {
	--uf-navy: #0A2E6E;
	--uf-blue: #2E7CF6;
	--uf-lblue: #DDEEF9;
	--uf-line: #e3e8ef;
	--uf-mut: #5b6b80;
	--uf-cols: 3;
	font-variant-numeric: tabular-nums;
}

.uf * { box-sizing: border-box; }

/* ---------- KPI cards ---------- */

.uf-kpis {
	display: grid;
	grid-template-columns: repeat(var(--uf-cols), minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 18px;
}
.uf-kpi {
	background: #fff;
	border: 1px solid var(--uf-line);
	border-radius: 10px;
	padding: 16px 18px;
	box-shadow: 0 1px 3px rgba(10, 46, 110, .06);
}
.uf-kpi-lab {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--uf-mut);
	font-weight: 600;
	line-height: 1.3;
}
.uf-kpi-val {
	font-size: 26px;
	font-weight: 700;
	color: var(--uf-navy);
	margin-top: 6px;
	line-height: 1.15;
}
.uf-kpi-sub { font-size: 12px; color: var(--uf-mut); margin-top: 3px; }

.uf-asat {
	font-size: 12.5px;
	color: var(--uf-mut);
	margin: -8px 0 22px;
}

/* ---------- headings & grid ---------- */

.uf-h2 {
	font-size: 19px;
	margin: 28px 0 14px;
	color: var(--uf-navy);
	border-bottom: 2px solid var(--uf-lblue);
	padding-bottom: 8px;
}
.uf-grid {
	display: grid;
	grid-template-columns: repeat(var(--uf-cols), minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 22px;
}

/* ---------- cards & charts ---------- */

.uf-card {
	background: #fff;
	border: 1px solid var(--uf-line);
	border-radius: 10px;
	padding: 16px;
	margin: 0;
}
.uf-card-h { margin: 0 0 3px; font-size: 14.5px; color: var(--uf-navy); line-height: 1.3; }
.uf-note   { margin: 0 0 10px; font-size: 11.5px; color: var(--uf-mut); }
.uf-cbox   { position: relative; width: 100%; }
.uf-cbox canvas { max-width: 100%; }

.uf-details { margin-top: 10px; font-size: 12.5px; }
.uf-details summary { cursor: pointer; color: var(--uf-mut); }
.uf-details summary:hover { color: var(--uf-navy); }
.uf-mini { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.uf-mini th, .uf-mini td { border-bottom: 1px solid var(--uf-line); padding: 5px 7px; text-align: left; }
.uf-mini thead th { color: var(--uf-navy); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }

/* ---------- filters ---------- */

.uf .uf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	align-items: center;
}

/* Themes commonly set `input, select { width: 100%; display: block }`, which
   pushes each control onto its own line. These rules win that fight without
   affecting any other field on the site. */
.uf .uf-filters > * { margin: 0; flex: 0 1 auto; }
.uf .uf-filters .uf-q,
.uf .uf-filters .uf-filter,
.uf .uf-filters .uf-btn {
	width: auto !important;
	max-width: 100%;
	display: inline-block !important;
	vertical-align: middle;
	height: auto;
	float: none;
	box-shadow: none;
}
.uf .uf-filters .uf-q,
.uf .uf-filters .uf-filter {
	padding: 8px 11px;
	border: 1px solid var(--uf-line);
	border-radius: 7px;
	font-size: 13.5px;
	line-height: 1.35;
	background: #fff;
	color: inherit;
}
.uf .uf-filters .uf-q      { flex: 1 1 200px; min-width: 160px; }
.uf .uf-filters .uf-filter { flex: 0 1 auto;  min-width: 140px; padding-right: 28px; }
.uf .uf-filters .uf-btn    { flex: 0 0 auto; }

.uf .uf-btn {
	background: var(--uf-navy);
	color: #fff;
	border: 0;
	padding: 9px 15px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}
.uf .uf-btn:hover,
.uf .uf-btn:focus { background: #08245a; color: #fff; }

/* ---------- project table ---------- */

.uf-table-wrap { margin-bottom: 30px; }
table.uf-table { width: 100% !important; font-size: 13px; border-collapse: collapse; }
table.uf-table thead th {
	background: var(--uf-lblue);
	color: var(--uf-navy);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .4px;
	border-bottom: 2px solid var(--uf-blue);
	padding: 9px 10px;
	text-align: left;
}
table.uf-table tbody td { vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--uf-line); }
table.uf-table tbody tr:hover { background: #f7f9fc; }
.uf-num { text-align: right !important; white-space: nowrap; }

.uf-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 11px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.uf-pill-Completed { background: #e6f4ea; color: #1a6b33; }
.uf-pill-Ongoing   { background: #e7f0fe; color: #1a4fa0; }
.uf-pill-Proposal  { background: #fff4e5; color: #92400e; }

.uf-empty {
	background: #fff8e1;
	border: 1px solid #ffe08a;
	border-radius: 8px;
	padding: 12px 15px;
	font-size: 13.5px;
}

/* Visually hidden but available to screen readers. */
.uf-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.uf-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uf-kpis  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.uf-grid  { grid-template-columns: 1fr; }
	.uf-kpis  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uf-kpi-val { font-size: 21px; }
	.uf .uf-filters .uf-q      { flex: 1 1 100%; min-width: 0; }
	.uf .uf-filters .uf-filter { flex: 1 1 calc(50% - 5px); min-width: 0; }
	.uf-table-wrap { overflow-x: auto; }
}