/*
 * HVGB Permit Summary
 * All selectors are namespaced so this does not alter the main TablePress table.
 */

.hvgb-permit-summary {
	--hvgb-summary-green: #17633e;
	--hvgb-summary-green-dark: #0f4f31;
	--hvgb-summary-green-soft: #edf6f1;
	--hvgb-summary-gold: #d4a62a;
	--hvgb-summary-ink: #26352e;
	--hvgb-summary-muted: #5d6c64;
	--hvgb-summary-line: #d7e1dc;
	--hvgb-summary-surface: #ffffff;
	width: 100%;
	max-width: 100%;
	margin: 0 0 32px;
	border: 1px solid var(--hvgb-summary-line);
	border-radius: 12px;
	background: var(--hvgb-summary-surface);
	box-shadow: 0 5px 22px rgba(23, 63, 43, 0.1);
	color: var(--hvgb-summary-ink);
	font-family: inherit;
	overflow: hidden;
}

.hvgb-permit-summary *,
.hvgb-permit-summary *::before,
.hvgb-permit-summary *::after {
	box-sizing: border-box;
}

.hvgb-permit-summary__header {
	padding: 19px 24px;
	border-bottom: 4px solid var(--hvgb-summary-gold);
	background: var(--hvgb-summary-green);
	color: #ffffff;
	text-align: center;
}

.hvgb-permit-summary__header h2,
.hvgb-permit-summary__panel h3,
.hvgb-permit-summary__monthly > h3,
.hvgb-permit-summary__chart-card > h3 {
	margin: 0;
	font-family: inherit;
}

.hvgb-permit-summary__header h2 {
	color: #ffffff;
	font-size: clamp(1.18rem, 2vw, 1.5rem);
	font-weight: 750;
	line-height: 1.25;
}

.hvgb-permit-summary__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 22px 24px 0;
}

.hvgb-permit-summary__metric {
	min-width: 0;
	padding: 17px 18px 16px;
	border: 1px solid var(--hvgb-summary-line);
	border-top: 4px solid var(--hvgb-summary-green);
	border-radius: 9px;
	background: #ffffff;
	box-shadow: 0 2px 9px rgba(23, 63, 43, 0.06);
}

.hvgb-permit-summary__metric--value {
	border-top-color: var(--hvgb-summary-gold);
}

.hvgb-permit-summary__metric dt {
	margin: 0 0 6px;
	color: var(--hvgb-summary-muted);
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.045em;
	line-height: 1.35;
	text-transform: uppercase;
}

.hvgb-permit-summary__metric dd {
	margin: 0;
	color: var(--hvgb-summary-green-dark);
	font-size: clamp(1.55rem, 3vw, 2rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.12;
	overflow-wrap: anywhere;
}

.hvgb-permit-summary__details {
	display: grid;
	grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
	gap: 18px;
	padding: 18px 24px 0;
}

.hvgb-permit-summary__panel,
.hvgb-permit-summary__monthly,
.hvgb-permit-summary__chart-card {
	min-width: 0;
	border: 1px solid var(--hvgb-summary-line);
	border-radius: 9px;
	background: #ffffff;
}

.hvgb-permit-summary__panel > h3,
.hvgb-permit-summary__monthly > h3,
.hvgb-permit-summary__chart-card > h3 {
	padding: 12px 16px;
	border-bottom: 1px solid var(--hvgb-summary-line);
	background: var(--hvgb-summary-green-soft);
	color: var(--hvgb-summary-green-dark);
	font-size: 1rem;
	font-weight: 750;
	line-height: 1.35;
}

.hvgb-permit-summary__dates {
	margin: 0;
	padding: 4px 16px;
}

.hvgb-permit-summary__dates > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 13px 0;
	border-bottom: 1px solid var(--hvgb-summary-line);
}

.hvgb-permit-summary__dates > div:last-child {
	border-bottom: 0;
}

.hvgb-permit-summary__dates dt,
.hvgb-permit-summary__dates dd {
	margin: 0;
}

.hvgb-permit-summary__dates dt {
	color: var(--hvgb-summary-muted);
	font-size: 0.9rem;
	font-weight: 650;
}

.hvgb-permit-summary__dates dd {
	color: var(--hvgb-summary-ink);
	font-size: 0.95rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.hvgb-permit-summary__monthly {
	margin: 18px 24px 0;
}

.hvgb-permit-summary__monthly--last {
	margin-bottom: 24px;
}

.hvgb-permit-summary__table-wrap,
.hvgb-permit-summary__chart-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	scrollbar-color: var(--hvgb-summary-green) #e8eeeb;
	scrollbar-width: auto;
}

.hvgb-permit-summary__table-wrap:focus-visible,
.hvgb-permit-summary__chart-wrap:focus-visible {
	outline: 3px solid var(--hvgb-summary-gold);
	outline-offset: -3px;
}

.hvgb-permit-summary__table-wrap::-webkit-scrollbar,
.hvgb-permit-summary__chart-wrap::-webkit-scrollbar {
	height: 11px;
}

.hvgb-permit-summary__table-wrap::-webkit-scrollbar-track,
.hvgb-permit-summary__chart-wrap::-webkit-scrollbar-track {
	border-radius: 12px;
	background: #e8eeeb;
}

.hvgb-permit-summary__table-wrap::-webkit-scrollbar-thumb,
.hvgb-permit-summary__chart-wrap::-webkit-scrollbar-thumb {
	border: 2px solid #e8eeeb;
	border-radius: 12px;
	background: var(--hvgb-summary-green);
}

.hvgb-permit-summary__table {
	width: 100%;
	min-width: 500px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: #ffffff;
	color: var(--hvgb-summary-ink);
	font-size: 0.94rem;
	line-height: 1.4;
}

.hvgb-permit-summary__table--monthly {
	min-width: 610px;
}

.hvgb-permit-summary__table th,
.hvgb-permit-summary__table td {
	padding: 11px 14px;
	border: 0;
	border-right: 1px solid var(--hvgb-summary-line);
	border-bottom: 1px solid var(--hvgb-summary-line);
	font-variant-numeric: tabular-nums;
	text-align: right;
	vertical-align: middle;
}

.hvgb-permit-summary__table th:first-child,
.hvgb-permit-summary__table td:first-child {
	text-align: left;
}

.hvgb-permit-summary__table th:last-child,
.hvgb-permit-summary__table td:last-child {
	border-right: 0;
}

.hvgb-permit-summary__table tbody tr:last-child th,
.hvgb-permit-summary__table tbody tr:last-child td {
	border-bottom: 0;
}

.hvgb-permit-summary__table thead th {
	background: var(--hvgb-summary-green);
	color: #ffffff;
	font-size: 0.84rem;
	font-weight: 750;
	white-space: nowrap;
}

.hvgb-permit-summary__table tbody th {
	background: #ffffff;
	color: var(--hvgb-summary-ink);
	font-weight: 700;
}

.hvgb-permit-summary__table tbody td {
	background: #ffffff;
}

.hvgb-permit-summary__table tbody tr:nth-child(even) th,
.hvgb-permit-summary__table tbody tr:nth-child(even) td {
	background: #f5f8f6;
}

.hvgb-permit-summary__chart-card {
	margin: 18px 24px 24px;
	box-shadow: 0 2px 10px rgba(23, 63, 43, 0.06);
}

.hvgb-permit-summary__chart-wrap {
	padding: 16px 14px 8px;
}

.hvgb-permit-summary__chart {
	display: block;
	width: 100%;
	height: auto;
	background: #ffffff;
}

.hvgb-permit-summary__gridline {
	stroke: #dfe6e2;
	stroke-dasharray: 4 4;
	stroke-width: 1;
}

.hvgb-permit-summary__axis {
	stroke: #718078;
	stroke-width: 1;
}

.hvgb-permit-summary__axis-label,
.hvgb-permit-summary__month-label {
	fill: #4f5e56;
	font-family: inherit;
	font-size: 12px;
}

.hvgb-permit-summary__bar {
	transition: opacity 150ms ease;
}

.hvgb-permit-summary__bar:hover {
	opacity: 0.78;
}

.hvgb-permit-summary__bar--issued,
.hvgb-permit-summary__key--issued {
	fill: #256b8a;
	background: #256b8a;
}

.hvgb-permit-summary__bar--residential,
.hvgb-permit-summary__key--residential {
	fill: #e8732a;
	background: #e8732a;
}

.hvgb-permit-summary__bar--commercial,
.hvgb-permit-summary__key--commercial {
	fill: #2f7d32;
	background: #2f7d32;
}

.hvgb-permit-summary__legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 20px;
	margin: 0;
	padding: 4px 16px 17px;
	list-style: none;
}

.hvgb-permit-summary__legend li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--hvgb-summary-muted);
	font-size: 0.83rem;
	line-height: 1.3;
}

.hvgb-permit-summary__key {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	flex: 0 0 11px;
}

.hvgb-permit-summary__empty {
	margin: 0;
	padding: 24px;
	color: var(--hvgb-summary-muted);
	text-align: center;
}

.hvgb-permit-summary__notice {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid #e2c65c;
	border-left: 5px solid #b58a00;
	border-radius: 6px;
	background: #fff9dc;
	color: #4c4020;
}

.hvgb-permit-summary__notice p {
	margin: 0;
}

.hvgb-permit-summary__notice-details {
	margin-top: 7px !important;
	font-size: 0.88rem;
}

.hvgb-permit-summary__sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media screen and (max-width: 900px) {
	.hvgb-permit-summary__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hvgb-permit-summary__details {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.hvgb-permit-summary {
		border-radius: 9px;
	}

	.hvgb-permit-summary__header {
		padding: 16px 14px;
	}

	.hvgb-permit-summary__metrics {
		gap: 10px;
		padding: 15px 14px 0;
	}

	.hvgb-permit-summary__metric {
		padding: 14px 13px;
	}

	.hvgb-permit-summary__metric dt {
		font-size: 0.71rem;
	}

	.hvgb-permit-summary__details {
		gap: 14px;
		padding: 14px 14px 0;
	}

	.hvgb-permit-summary__monthly {
		margin: 14px 14px 0;
	}

	.hvgb-permit-summary__monthly--last {
		margin-bottom: 14px;
	}

	.hvgb-permit-summary__dates > div {
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.hvgb-permit-summary__dates dd {
		text-align: left;
	}

	.hvgb-permit-summary__chart-card {
		margin: 14px;
	}

	/* Three- and four-column summaries fit the phone width without scrolling. */
	.hvgb-permit-summary__table,
	.hvgb-permit-summary__table--monthly {
		width: 100%;
		min-width: 0;
		table-layout: fixed;
		font-size: 0.78rem;
	}

	.hvgb-permit-summary__table th,
	.hvgb-permit-summary__table td {
		padding: 9px 6px;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.hvgb-permit-summary__table thead th {
		font-size: 0.72rem;
		line-height: 1.25;
		white-space: normal;
	}

	/* Land-use table column proportions. */
	.hvgb-permit-summary__table:not(.hvgb-permit-summary__table--monthly) th:nth-child(1),
	.hvgb-permit-summary__table:not(.hvgb-permit-summary__table--monthly) td:nth-child(1) {
		width: 60%;
	}

	.hvgb-permit-summary__table:not(.hvgb-permit-summary__table--monthly) th:nth-child(2),
	.hvgb-permit-summary__table:not(.hvgb-permit-summary__table--monthly) td:nth-child(2) {
		width: 40%;
	}

	/* Monthly activity table column proportions. */
	.hvgb-permit-summary__table--monthly th:nth-child(1),
	.hvgb-permit-summary__table--monthly td:nth-child(1) {
		width: 25%;
	}

	.hvgb-permit-summary__table--monthly th:nth-child(2),
	.hvgb-permit-summary__table--monthly td:nth-child(2) {
		width: 27%;
	}

	.hvgb-permit-summary__table--monthly th:nth-child(3),
	.hvgb-permit-summary__table--monthly td:nth-child(3),
	.hvgb-permit-summary__table--monthly th:nth-child(4),
	.hvgb-permit-summary__table--monthly td:nth-child(4) {
		width: 24%;
	}

	/* Up to six months scale to the available width; longer histories still scroll. */
	.hvgb-permit-summary__chart--fit {
		min-width: 0 !important;
	}

	.hvgb-permit-summary__legend {
		justify-content: flex-start;
	}
}

@media screen and (max-width: 390px) {
	.hvgb-permit-summary__metrics {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hvgb-permit-summary__bar {
		transition: none;
	}
}

@media print {
	.hvgb-permit-summary {
		box-shadow: none;
		break-inside: avoid;
	}

	.hvgb-permit-summary__table-wrap,
	.hvgb-permit-summary__chart-wrap {
		overflow: visible;
	}

	.hvgb-permit-summary__chart {
		min-width: 0 !important;
	}
}
