/* Rentall PMS — Owner Portal
   Modern property-owner dashboard look, intentionally NOT wp-admin
   (PORTAL_MASTER_PROMPT §15). Mobile-first: base styles target phones,
   the desktop layout is added at the 900px breakpoint. */

:root {
	--rp-bg: #f6f7fb;
	--rp-surface: #ffffff;
	--rp-border: #e6e8f0;
	--rp-text: #1f2430;
	--rp-muted: #6b7280;
	--rp-primary: #6c63ff;
	--rp-primary-dark: #564fd8;
	--rp-success-bg: #e6f7ee;
	--rp-success-text: #1a7f4e;
	--rp-warning-bg: #fff6e0;
	--rp-warning-text: #92660b;
	--rp-danger-bg: #fdeaea;
	--rp-danger-text: #b3261e;
	--rp-neutral-bg: #eef0f5;
	--rp-neutral-text: #4b5163;
	--rp-radius: 14px;
	--rp-shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 6px 20px rgba(20, 20, 43, 0.05);
}

* { box-sizing: border-box; }

body.rentall-portal {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--rp-bg);
	color: var(--rp-text);
	font-size: 15px;
	line-height: 1.5;
}

.rp-shell { min-height: 100vh; display: flex; flex-direction: column; }

.rp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--rp-surface);
	border-bottom: 1px solid var(--rp-border);
	position: sticky;
	top: 0;
	z-index: 20;
}
.rp-brand { font-weight: 700; font-size: 17px; }
.rp-nav-toggle {
	display: inline-flex;
	background: none;
	border: 1px solid var(--rp-border);
	border-radius: 10px;
	font-size: 18px;
	padding: 6px 10px;
	cursor: pointer;
}
.rp-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.rp-user-name { display: none; }
.rp-logout { color: var(--rp-muted); text-decoration: none; }

.rp-body { display: flex; flex: 1; min-height: 0; position: relative; }

.rp-sidenav {
	position: fixed;
	inset: 56px 0 0 0;
	background: var(--rp-surface);
	transform: translateX(-100%);
	transition: transform .2s ease;
	padding: 12px;
	z-index: 15;
	overflow-y: auto;
}
.rp-sidenav.is-open { transform: translateX(0); }

.rp-nav-link {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
	color: var(--rp-text);
	text-decoration: none;
	font-weight: 500;
	margin-bottom: 4px;
}
.rp-nav-link.is-active { background: var(--rp-primary); color: var(--rt-pri-t, #fff); }
.rp-nav-link:not(.is-active):hover { background: var(--rp-neutral-bg); }

.rp-main { flex: 1; padding: 16px; width: 100%; }

.rp-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rp-page-header h1 { font-size: 22px; margin: 0 0 4px; }
.rp-subtitle { color: var(--rp-muted); margin: 0; }

.rp-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.rp-date-filter, .rentall-date-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.rentall-date-pill {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--rp-surface);
	border: 1px solid var(--rp-border);
	color: var(--rp-text);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}
.rentall-date-pill.is-active { background: var(--rp-primary); border-color: var(--rp-primary); color: var(--rt-pri-t, #fff); }
.rp-unit-filter select {
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid var(--rp-border);
	background: var(--rp-surface);
}

.rp-kpi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
.rentall-kpi-card {
	background: var(--rp-surface);
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-radius);
	padding: 16px;
	box-shadow: var(--rp-shadow);
}
.rentall-kpi-label { font-size: 12px; color: var(--rp-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.rentall-kpi-value { font-size: 20px; font-weight: 700; }
.rentall-kpi-value.rentall-neg { color: var(--rp-danger-text); }
.rentall-kpi-value.rentall-pos { color: var(--rp-text); }

.rp-balance-banner {
	padding: 14px 16px;
	border-radius: var(--rp-radius);
	font-weight: 600;
	margin-bottom: 20px;
}
.rp-balance-banner.is-positive { background: var(--rp-success-bg); color: var(--rp-success-text); }
.rp-balance-banner.is-negative { background: var(--rp-warning-bg); color: var(--rp-warning-text); }
.rp-balance-banner a { color: inherit; text-decoration: underline; }

.rp-section { margin-bottom: 24px; }
.rp-section h2 { font-size: 16px; margin: 0 0 10px; }

.rp-card-list { display: flex; flex-direction: column; gap: 10px; }
.rp-res-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	background: var(--rp-surface);
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-radius);
	padding: 14px 16px;
	text-decoration: none;
	color: var(--rp-text);
	box-shadow: var(--rp-shadow);
}
.rp-res-guest { font-weight: 600; }
.rp-res-dates { color: var(--rp-muted); font-size: 13px; }

.rp-empty {
	background: var(--rp-surface);
	border: 1px dashed var(--rp-border);
	border-radius: var(--rp-radius);
	padding: 28px 16px;
	text-align: center;
	color: var(--rp-muted);
}

.rp-unit-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rp-unit-card { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 16px; box-shadow: var(--rp-shadow); }
.rp-unit-card-head { display: flex; justify-content: space-between; align-items: center; }
.rp-unit-card-head h3 { margin: 0; font-size: 16px; }
.rp-unit-address { color: var(--rp-muted); font-size: 13px; margin: 4px 0 12px; }
.rp-unit-stats { display: flex; gap: 20px; margin-bottom: 10px; }
.rp-unit-stats span { display: block; font-size: 12px; color: var(--rp-muted); }
.rp-unit-stats strong { font-size: 16px; }
.rp-unit-next { font-size: 13px; margin: 0 0 12px; }

.rp-table-wrap { overflow-x: auto; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); }
.rp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.rp-table th, .rp-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rp-border); font-size: 13px; white-space: nowrap; }
.rp-table th { color: var(--rp-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.rp-clickable-row { cursor: pointer; }
.rp-clickable-row:hover { background: var(--rp-neutral-bg); }

.rp-pagination { display: flex; gap: 6px; margin-top: 12px; }
.rp-page-link { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--rp-border); text-decoration: none; color: var(--rp-text); }
.rp-page-link.is-active { background: var(--rp-primary); color: var(--rt-pri-t, #fff); border-color: var(--rp-primary); }

.rp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.rentall-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.rentall-badge-success { background: var(--rp-success-bg); color: var(--rp-success-text); }
.rentall-badge-warning { background: var(--rp-warning-bg); color: var(--rp-warning-text); }
.rentall-badge-danger { background: var(--rp-danger-bg); color: var(--rp-danger-text); }
.rentall-badge-neutral { background: var(--rp-neutral-bg); color: var(--rp-neutral-text); }

.rp-detail-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rp-detail-card { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 16px; box-shadow: var(--rp-shadow); }
.rp-detail-card h3 { margin: 0 0 10px; font-size: 14px; }
.rp-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.rp-dl dt { color: var(--rp-muted); font-size: 13px; }
.rp-dl dd { margin: 0; font-size: 13px; text-align: right; }

.rp-btn { display: inline-block; padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 13px; border: 1px solid transparent; cursor: pointer; }
.rp-btn-primary { background: var(--rp-primary); color: var(--rt-pri-t, #fff); }
.rp-btn-primary:hover { background: var(--rp-primary-dark); }
.rp-btn-secondary { background: var(--rp-surface); color: var(--rp-text); border-color: var(--rp-border); }

.rp-statement-section { margin-bottom: 18px; }
.rp-statement-section h3 { font-size: 14px; margin: 0 0 8px; }
.rp-kv-table { width: 100%; border-collapse: collapse; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); overflow: hidden; }
.rp-kv-table td { padding: 10px 14px; border-bottom: 1px solid var(--rp-border); font-size: 13px; }
.rp-kv-table td:last-child { text-align: right; font-weight: 600; }
.rp-statement-result .rp-kv-table td { font-size: 15px; }
.rp-statement-period { color: var(--rp-muted); font-size: 13px; }

.rp-report-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rp-report-card { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 16px; text-decoration: none; color: var(--rp-text); box-shadow: var(--rp-shadow); }
.rp-report-card h3 { margin: 0 0 6px; font-size: 15px; }
.rp-report-card p { margin: 0; color: var(--rp-muted); font-size: 13px; }

.rp-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.rp-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--rp-muted); }
.rp-form input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rp-border); font-size: 14px; }
.rp-form-status.is-success { color: var(--rp-success-text); }
.rp-form-status.is-error { color: var(--rp-danger-text); }

.rp-muted { color: var(--rp-muted); font-size: 13px; }

.rp-login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.rp-login-card { background: var(--rp-surface); border-radius: var(--rp-radius); box-shadow: var(--rp-shadow); padding: 28px 24px; width: 100%; max-width: 380px; text-align: center; }
.rp-login-card h1 { font-size: 20px; margin: 0 0 4px; }
.rp-login-card form p { text-align: left; }
.rp-login-card input[type="text"], .rp-login-card input[type="password"] {
	width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rp-border); margin-top: 4px;
}
.rp-login-card input[type="submit"] {
	width: 100%; padding: 12px; border-radius: 10px; border: none; background: var(--rp-primary); color: var(--rt-pri-t, #fff); font-weight: 600; margin-top: 8px; cursor: pointer;
}

@media (max-width: 899px) {
	.rp-page-header .rp-btn { width: 100%; text-align: center; }
}

@media (min-width: 640px) {
	.rp-kpi-grid { grid-template-columns: repeat(3, 1fr); }
	.rp-unit-grid { grid-template-columns: repeat(2, 1fr); }
	.rp-report-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.rp-user-name { display: inline; }
	.rp-nav-toggle { display: none; }
	.rp-sidenav {
		position: sticky;
		transform: none;
		inset: auto;
		top: 57px;
		height: calc(100vh - 57px);
		width: 220px;
		flex-shrink: 0;
		border-right: 1px solid var(--rp-border);
	}
	.rp-main { padding: 28px 32px; max-width: 1100px; }
	.rp-kpi-grid { grid-template-columns: repeat(4, 1fr); }
	.rp-detail-grid { grid-template-columns: repeat(2, 1fr); }
	.rp-unit-grid { grid-template-columns: repeat(3, 1fr); }
}

@media print {
	.rp-topbar, .rp-sidenav, .rp-no-print { display: none !important; }
	.rp-main { padding: 0; max-width: none; }
	body.rentall-portal { background: #fff; }
	@page { size: landscape; margin: 14mm; }
}

/* Front door (/pms/ and [rentall_login]) */
.rp-entry-embed { display: flex; justify-content: center; padding: 20px 0; background: transparent; }
.rp-entry-tabs { display: flex; gap: 6px; background: var(--rp-neutral-bg); border-radius: 10px; padding: 4px; margin: 14px 0 8px; }
.rp-entry-tabs button { flex: 1; border: 0; background: transparent; padding: 9px 6px; border-radius: 8px; font-weight: 600; color: var(--rp-neutral-text); cursor: pointer; }
.rp-entry-tabs button.is-active { background: var(--rp-surface); color: var(--rp-primary-dark); box-shadow: var(--rp-shadow); }
.rp-entry-error { background: var(--rp-danger-bg); color: var(--rp-danger-text); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.rp-entry form label { display: block; text-align: left; font-size: 13px; color: var(--rp-muted); }
.rp-entry .rp-entry-remember { display: flex; align-items: center; gap: 6px; }
.rp-entry .rp-entry-go { display: block; padding: 12px; border-radius: 10px; background: var(--rp-primary); color: var(--rt-pri-t, #fff); text-decoration: none; font-weight: 600; }

/* Theme: form controls follow the palette (dark palette safe) */
body.rentall-portal input, body.rentall-portal select, body.rentall-portal textarea { background: var(--rp-surface); color: var(--rp-text); border-color: var(--rp-border); }
body.rentall-portal a { color: var(--rp-primary); }
.rp-table tr.rp-total td { font-weight: 700; background: var(--rp-bg); border-bottom: 2px solid var(--rp-border); }

/* 0.28 reports */
.rp-report-card.is-active { border-color: var(--rp-primary); box-shadow: 0 0 0 2px rgba(108, 99, 255, .15); }
.rp-section-title { margin: 22px 0 10px; font-size: 16px; }
.rp-report-doc { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.rp-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
@media print { .rp-no-print { display: none !important; } }

.rp-balance-note { font-weight: 400; font-size: 13px; margin-top: 6px; opacity: .85; }
.rp-future-tag { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--rp-neutral-bg, #eef2f3); color: var(--rp-muted, #5b6b70); margin-left: 4px; }

/* 0.65.6 — ukupni zbirovi za cijeli period */
.rp-totals { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.rp-total { flex: 1 1 130px; background: var(--rp-surface, #fff); border: 1px solid var(--rp-border); border-radius: 12px; padding: 10px 14px; }
.rp-total span { display: block; font-size: 12px; color: var(--rp-muted, #5f7a82); }
.rp-total strong { font-size: 18px; }
.rp-pagination { flex-wrap: wrap; }

/* 0.66.0 — objedinjeni filter */
.rp-fb { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.rp-fb select, .rp-fb input[type="date"] { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rp-border); font-size: 14px; min-height: 38px; }
.rp-fb-dates { display: none; gap: 6px; align-items: center; }
.rp-fb-dates.is-on { display: inline-flex; flex-wrap: wrap; }
.rp-fb-apply { min-height: 38px; }
.rp-fb-period { flex-basis: 100%; font-size: 12px; color: var(--rp-muted); margin: 0; }
.rp-fb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-height: 38px; }
.rp-fb-dates:not(.is-on) ~ .rp-fb-apply[data-auto-hide] { display: none; }

/* 0.66.0 — donja navigacija (telefon) */
.rp-bottomnav { display: none; }
@media (max-width: 899px) {
	.rp-bottomnav {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		background: var(--rp-surface); border-top: 1px solid var(--rp-border);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.rp-bn-item {
		flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
		padding: 8px 2px 7px; font-size: 11px; color: var(--rp-muted) !important; text-decoration: none;
		background: none; border: 0; cursor: pointer; font-family: inherit; min-height: 52px;
	}
	body.rentall-portal a.rp-bn-item { color: var(--rp-muted); }
	.rp-bn-item.is-active, body.rentall-portal a.rp-bn-item.is-active { color: var(--rp-primary) !important; font-weight: 600; }
	.rp-main { padding: 12px 12px calc(76px + env(safe-area-inset-bottom)); }
	.rp-topbar { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
	.rp-nav-toggle { display: none; }
	.rp-sidenav { inset: auto 0 calc(56px + env(safe-area-inset-bottom)) 0; transform: translateY(110%); border-top: 1px solid var(--rp-border); border-radius: 16px 16px 0 0; max-height: 70vh; box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
	.rp-sidenav.is-open { transform: translateY(0); }
	.rp-fb > * { flex: 1 1 140px; }
	.rp-fb .rp-fb-apply { flex: 1 1 100%; }
	.rp-fb-dates.is-on > input { flex: 1 1 120px; }

	/* tabele → kartice */
	.rp-table-wrap { overflow: visible; }
	.rp-main { min-width: 0; max-width: 100vw; overflow-x: hidden; }
	table.rp-table { min-width: 0; }
	table.rp-table, table.rp-table tbody, table.rp-table tfoot, table.rp-table tr, table.rp-table td, table.rp-table tfoot th { display: block; width: 100%; box-sizing: border-box; }
	table.rp-table th, table.rp-table td { white-space: normal; overflow-wrap: anywhere; }
	table.rp-table tfoot th { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; text-transform: none; font-size: 13px; color: var(--rp-text); }
	table.rp-table tfoot th::before { content: attr(data-label); color: var(--rp-muted); font-size: 12px; text-align: left; }
	table.rp-table tfoot th:empty { display: none; }
	.rp-kv-table td, .rp-kv-table th { white-space: normal; overflow-wrap: anywhere; }
	table.rp-table thead { display: none; }
	table.rp-table tr { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: 12px; margin: 0 0 10px; padding: 6px 12px; }
	table.rp-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
	table.rp-table td::before { content: attr(data-label); color: var(--rp-muted); font-size: 12px; text-align: left; flex: 0 0 auto; }
	table.rp-table td:empty { display: none; }
	table.rp-table tr.rp-total { display: block; flex: none; background: var(--rp-bg); }
}
.rp-fb-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--rp-muted); }