/* The unit card on a land plan or a project: the summary line above the table,
   and the search, page size and pagination around it. Uses the page's own pdp
   tokens so it belongs to the design rather than sitting on top of it. */

/* Was an inline style on the land plan, now shared with the project card */
.pdp-lp-start-from {
	margin-bottom: 14px;
	font-size: .85rem;
	font-weight: 700;
	color: #475569;
}

.pdp-table-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.pdp-table-count {
	flex: 1 1 auto;
	font-size: .82rem;
	color: #64748b;
}

.pdp-table-size {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	color: #475569;
}

.pdp-table-size select,
.pdp-table-search input {
	height: 34px;
	padding: 0 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	font-size: .85rem;
	color: #0f172a;
}

.pdp-table-size select {
	padding-inline-end: 24px;
}

.pdp-table-search {
	margin: 0;
}

.pdp-table-search input {
	width: 220px;
	max-width: 100%;
}

.pdp-table-size select:focus,
.pdp-table-search input:focus {
	border-color: var(--pdp-primary, #0ea5e9);
	outline: none;
}

/* Sorting affordance on the headers the script took over */
.pdp-lp-table th.pdp-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.pdp-lp-table th.pdp-sortable::after {
	content: "\f0dc";
	display: inline-block;
	margin-inline-start: 6px;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
	font-weight: 900;
	font-size: .7em;
	opacity: .35;
}

.pdp-lp-table th.pdp-sortable.sort-asc::after {
	content: "\f0de";
	opacity: 1;
	vertical-align: -.15em;
}

.pdp-lp-table th.pdp-sortable.sort-desc::after {
	content: "\f0dd";
	opacity: 1;
	vertical-align: .15em;
}

.pdp-table-none td {
	padding: 22px 10px;
	text-align: center;
	color: #94a3b8;
}

/* Pager */
.pdp-table-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 14px;
}

.pdp-page {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	font-size: .82rem;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
}

.pdp-page:hover:not(:disabled):not(.is-current) {
	border-color: var(--pdp-primary, #0ea5e9);
	color: var(--pdp-primary, #0ea5e9);
}

.pdp-page.is-current {
	border-color: var(--pdp-primary, #0ea5e9);
	background: var(--pdp-primary, #0ea5e9);
	color: #fff;
	cursor: default;
}

.pdp-page:disabled {
	opacity: .45;
	cursor: not-allowed;
}

.pdp-page-gap {
	padding: 0 2px;
	color: #94a3b8;
}

/* The step buttons are the first thing to go when there is no room for them */
@media (max-width: 575px) {
	.pdp-page-step {
		display: none;
	}

	.pdp-table-search input {
		width: 100%;
	}

	.pdp-table-search {
		flex: 1 1 100%;
	}
}