/* Copyright (c) 2026, ECOSIRE (PRIVATE) LIMITED and contributors
 * License: GPL-3.0
 *
 * PMS tenant/landlord/broker portal — mobile-first responsive treatment (H5).
 * Goal: no horizontal PAGE scroll at iPhone width; wide tables scroll inside
 * their own container on tablet+, and reflow to stacked cards at phone width.
 */

.pms-portal {
	max-width: 100%;
	overflow-x: hidden;
}

.pms-portal h2 {
	overflow-wrap: anywhere;
}

/* Key summary figure rendered as a card (outstanding / earned). */
.pms-summary-card {
	display: inline-block;
	background: var(--card-bg, #fff);
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: var(--border-radius-md, 8px);
	padding: 12px 16px;
	margin: 4px 0 16px;
	min-width: 220px;
}
.pms-summary-card .pms-summary-label {
	font-size: 0.8rem;
	color: var(--text-muted, #6c7680);
	margin-bottom: 2px;
}
.pms-summary-card .pms-summary-value {
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Tablet/desktop: keep the table intact but let it scroll inside its wrapper
 * instead of pushing the page. (Bootstrap's .table-responsive also sets this;
 * we scope our own so the fix holds even if the theme drops that class.) */
.pms-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1rem;
}
.pms-table-wrap > table {
	margin-bottom: 0;
}

/* Phone (<=480px): reflow each row into a stacked card. Each cell shows its
 * column label via data-label so no context is lost when the header hides. */
@media (max-width: 480px) {
	.pms-portal .pms-stack {
		border: 0;
	}
	.pms-portal .pms-stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	.pms-portal .pms-stack tr {
		display: block;
		border: 1px solid var(--border-color, #e2e8f0);
		border-radius: var(--border-radius-md, 8px);
		margin-bottom: 10px;
		padding: 4px 10px;
		background: var(--card-bg, #fff);
	}
	.pms-portal .pms-stack td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		text-align: right;
		border: 0;
		border-bottom: 1px solid var(--border-color, #f0f2f5);
		padding: 6px 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}
	.pms-portal .pms-stack tr td:last-child {
		border-bottom: 0;
	}
	.pms-portal .pms-stack td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--text-muted, #6c7680);
		text-align: left;
		padding-right: 8px;
		flex: 0 0 auto;
	}
	/* An empty-state row spanning all columns should read as a single line. */
	.pms-portal .pms-stack td[colspan] {
		justify-content: center;
	}
	.pms-portal .pms-stack td[colspan]::before {
		content: "";
		padding: 0;
	}
	.pms-summary-card {
		display: block;
		min-width: 0;
	}
}