/**
 * WP-ImmoMakler — Project Units Table.
 *
 * Self-contained, modern dashboard-style table. No Bootstrap or framework
 * dependency: width / spacing / borders are owned here so the markup can be
 * embedded inside Elementor / Divi / WPBakery / Bricks / Gutenberg builder
 * modules without inheriting other library styles.
 *
 * Layout:
 *  - >= 768px: classic table with horizontal-scroll fallback for narrow
 *              tablet widths.
 *  - <  768px: stacked card layout — each row becomes a card, each cell
 *              renders its column header inline via a data-label attribute.
 *
 * Specificity: the WP-ImmoMakler bootstrap3 skin loads alongside this on
 * Property single pages and may target generic descendants of `.immomakler`
 * with selectors like `.immomakler table` (0,1,1) or `.immomakler .table
 * > tbody > tr > td` (0,2,3). Most of our rules below chain
 * `.immomakler.immomakler-project-units` on the wrapper to land at (0,3,3)
 * or higher, so the table looks identical in the legacy single-project
 * page and in a clean builder context where no skin is loaded.
 */

/* ------------------------------------------------------------------ *
 * Wrapper + table reset.
 * ------------------------------------------------------------------ */

.immomakler-project-units {
	margin-bottom: 1.5em;
	overflow-x: auto;          /* horizontal scroll on narrow viewports */
	-webkit-overflow-scrolling: touch;
}

.immomakler.immomakler-project-units .immomakler-project-units-table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	background-color: transparent;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	color: inherit;
}

/* Strip any per-cell border the skin or theme paints by default. We add
 * subtle horizontal row dividers below; never any vertical lines. */
.immomakler.immomakler-project-units .immomakler-project-units-table > thead > tr > th,
.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > th,
.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td {
	border: 0;
	background-color: transparent;
}

/* Some themes paint zebra striping directly on `<tr>` (e.g. Enfold's
 * `.main_color tr:nth-child(odd)` at specificity 0,2,1). Transparent
 * cells then let that row colour bleed through. Anchor a higher-
 * specificity reset (0,3,3) on the wrapper + table to keep rows neutral.
 * The mobile card layout below re-asserts its own row background with
 * matching specificity. */
.immomakler.immomakler-project-units .immomakler-project-units-table > thead > tr,
.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr {
	background: transparent;
}

/* ------------------------------------------------------------------ *
 * Header row.
 * ------------------------------------------------------------------ */

.immomakler.immomakler-project-units .immomakler-project-units-table > thead > tr > th {
	padding: 0.5em 1em 0.65em;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.55);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.immomakler.immomakler-project-units .immomakler-project-units-table > thead > tr > th[data-sort-type="number"],
.immomakler.immomakler-project-units .immomakler-project-units-table > thead > tr > th.immomakler-project-units-col-status {
	text-align: right;
}

/* Sortable header affordance. */
.immomakler-project-units-th-sortable {
	cursor: pointer;
	user-select: none;
}

.immomakler-project-units-th-sortable:hover,
.immomakler-project-units-th-sortable:focus {
	color: rgba(0, 0, 0, 0.85);
	outline: none;
}

/* The caret lives on the span wrapping the label's last word, not on the
 * <th> itself — so multi-word labels can wrap at word boundaries while the
 * caret stays glued to the last word (no orphaned triangle on a new line). */
.immomakler-project-units-th-label-end {
	white-space: nowrap;
}

.immomakler-project-units-th-sortable .immomakler-project-units-th-label-end::after {
	content: "";
	display: inline-block;
	margin-left: 0.4em;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.3;
	vertical-align: middle;
}

.immomakler-project-units-th-sortable.is-sorted .immomakler-project-units-th-label-end::after {
	opacity: 1;
}

.immomakler-project-units-th-sortable.is-sorted-asc .immomakler-project-units-th-label-end::after {
	border-top: none;
	border-bottom: 5px solid currentColor;
}

/* ------------------------------------------------------------------ *
 * Body cells.
 * ------------------------------------------------------------------ */

.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td {
	padding: 0.85em 1em;
	vertical-align: middle;
	white-space: nowrap;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr:last-child > td {
	border-bottom: 0;
}

/* Numeric / area / price cells: right-aligned with tabular-nums for clean
 * digit stacking even with proportional theme fonts. Generalized via
 * data-sort-type so any meta key registered as `number` in column_registry()
 * (or that resolves to text but happens to be numeric) picks up the same
 * alignment without per-key CSS. */
.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td[data-sort-type="number"] {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Status column: right-aligned (no tabular-nums — it's a pill, not a number).
 * The matching header rule sits with the other thead overrides below. */
.immomakler-project-units-cell-status {
	text-align: right;
}

/* Objekt-ID + its link are the visual anchor of the row. */
.immomakler-project-units-cell-objektnr_extern {
	font-weight: 500;
}

.immomakler-project-units-cell-objektnr_extern a {
	color: inherit;
	text-decoration: none;
}

.immomakler-project-units-cell-objektnr_extern a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Row interaction.
 * ------------------------------------------------------------------ */

.immomakler-project-units-row-clickable {
	cursor: pointer;
}

.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr.immomakler-project-units-row-clickable:hover > td {
	background-color: rgba(0, 0, 0, 0.03);
}

/* ------------------------------------------------------------------ *
 * Status pills.
 * ------------------------------------------------------------------ */

.immomakler-project-units-status-pill {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	font-size: 0.8125em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
	background-color: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.65);
}

.immomakler-project-units-status--offen .immomakler-project-units-status-pill {
	background-color: #dcfce7;
	color: #15803d;
}

.immomakler-project-units-status--reserviert .immomakler-project-units-status-pill {
	background-color: #fef3c7;
	color: #92400e;
}

.immomakler-project-units-status--verkauft .immomakler-project-units-status-pill,
.immomakler-project-units-status--vermietet .immomakler-project-units-status-pill {
	background-color: #e5e7eb;
	color: #4b5563;
}

/* Sold/rented rows get dimmed text — but the pill keeps full contrast so
 * the status remains immediately readable. */
.immomakler-project-units-row:has(.immomakler-project-units-status--verkauft),
.immomakler-project-units-row:has(.immomakler-project-units-status--vermietet) {
	color: rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------------ *
 * Details column (info-icon link, opens in a new tab).
 * ------------------------------------------------------------------ */

.immomakler-project-units-cell-details {
	width: 1%;                 /* shrink to icon width — table reflows around it */
	text-align: center;
	white-space: nowrap;
}

.immomakler-project-units-details-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 999px;
	color: rgba(0, 0, 0, 0.45);
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.immomakler-project-units-details-link:hover,
.immomakler-project-units-details-link:focus {
	background-color: rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
	outline: none;
}

.immomakler-project-units-details-link svg {
	width: 1.25em;
	height: 1.25em;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Mobile: stacked-card layout below 768px.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.immomakler-project-units {
		overflow-x: visible;
	}

	.immomakler.immomakler-project-units .immomakler-project-units-table {
		display: block;
	}

	.immomakler-project-units-table thead {
		/* Visually hidden but accessible to screen readers; the header text
		 * is still surfaced via each cell's data-label pseudo. */
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.immomakler-project-units-table tbody {
		display: block;
	}

	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr.immomakler-project-units-row {
		display: block;
		margin-bottom: 1em;
		padding: 0.25em 1em;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 8px;
		background-color: #fff;
	}

	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1em;
		padding: 0.6em 0;
		white-space: normal;
		text-align: right;
		border: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td:last-child {
		border-bottom: 0;
	}

	/* Render the column header (from data-label) before each value. */
	.immomakler-project-units-table td::before {
		content: attr(data-label);
		font-size: 0.78em;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: rgba(0, 0, 0, 0.55);
		text-align: left;
		flex: 0 0 45%;
	}

	/* Empty cells: keep the layout from jumping. */
	.immomakler-project-units-table td:empty::after {
		content: "—";
		color: rgba(0, 0, 0, 0.3);
	}

	/* Objekt-ID is the card title — bigger, with a divider below. */
	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td.immomakler-project-units-cell-objektnr_extern {
		font-size: 1.1em;
		font-weight: 600;
		padding: 0.6em 0 0.75em;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	/* Hide the data-label pseudo on the title row — the value is already
	 * prominent and an "Objekt-ID:" prefix would feel redundant. */
	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td.immomakler-project-units-cell-objektnr_extern::before {
		content: "";
		display: none;
	}

	/* Details cell on mobile: show as a labelled icon at the bottom of
	 * the card, aligned right like the other cells. */
	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr > td.immomakler-project-units-cell-details {
		width: auto;
		text-align: right;
	}

	.immomakler.immomakler-project-units .immomakler-project-units-table > tbody > tr.immomakler-project-units-row-clickable:hover {
		background-color: rgba(0, 0, 0, 0.025);
	}
}