/**
 * Mpangaji application styles — beige design system.
 */

:root {
	--mp-primary: #8a6f47;
	--mp-accent: #b99a63;
	--mp-sand: #f6f1e7;
	--mp-cream: #fbf8f2;
	--mp-ink: #33291d;
	--mp-muted: #8b7d6b;
	--mp-line: #e6dcc9;
	--mp-white: #fffdf9;
	--mp-good: #4d7c58;
	--mp-warn: #b58023;
	--mp-bad: #a8443a;
	--mp-radius: 14px;
	--mp-shadow: 0 10px 30px rgba(92, 72, 42, 0.08);
}

*,
*::before,
*::after { box-sizing: border-box; }

body.mp-body {
	margin: 0;
	background: var(--mp-cream);
	color: var(--mp-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

a { color: var(--mp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.mp-container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.mp-narrow { width: min(560px, 100% - 2.5rem); margin: 3rem auto; }
.mp-center { text-align: center; }
.mp-muted { color: var(--mp-muted); }
.mp-eyebrow { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-muted); }
.mp-title { margin: .2rem 0 0; font-size: 1.6rem; }
.mp-section { padding: 3.5rem 0; }
.mp-section--sand { background: var(--mp-sand); }
.mp-section-title { font-size: 1.7rem; margin: 0 0 1.6rem; }
.mp-page { padding: 2.5rem 0; }
.mp-page-article { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Header / footer ---------- */
.mp-site-header { background: var(--mp-white); border-bottom: 1px solid var(--mp-line); position: sticky; top: 0; z-index: 20; }
.mp-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.mp-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--mp-ink); font-size: 1.1rem; }
.mp-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--mp-primary); color: #fff; font-weight: 700; }
.mp-site-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.mp-site-nav a { color: var(--mp-ink); font-weight: 500; }
.mp-site-footer { background: var(--mp-sand); border-top: 1px solid var(--mp-line); padding: 2.5rem 0 1.2rem; margin-top: 3rem; }
.mp-site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; }
.mp-site-footer a { display: block; color: var(--mp-ink); font-size: .95rem; }
.mp-footer-title { font-weight: 700; margin: 0 0 .4rem; }
.mp-copyright { text-align: center; color: var(--mp-muted); font-size: .85rem; margin: 1.6rem 0 0; }

/* ---------- Landing ---------- */
.mp-hero { background: linear-gradient(160deg, var(--mp-sand), var(--mp-cream)); padding: 4.5rem 0; }
.mp-hero__title { font-size: clamp(2rem, 4vw, 3rem); margin: .6rem 0 1rem; max-width: 20ch; }
.mp-hero__lead { max-width: 60ch; font-size: 1.05rem; color: var(--mp-muted); }
.mp-hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.mp-feature-grid,
.mp-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.mp-step-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mp-accent); color: #fff; font-weight: 700; margin-bottom: .6rem; }
.mp-cta { text-align: center; }

/* ---------- Cards / layout ---------- */
.mp-card { background: var(--mp-white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); box-shadow: var(--mp-shadow); padding: 1.25rem; }
.mp-card + .mp-card { margin-top: 1.1rem; }
.mp-card-title { margin: 0 0 .8rem; font-size: 1.05rem; }
.mp-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.mp-empty { padding: 1.5rem; text-align: center; color: var(--mp-muted); }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list li { padding: .45rem 0; border-bottom: 1px dashed var(--mp-line); }
.mp-list li:last-child { border-bottom: 0; }

/* ---------- Buttons / forms ---------- */
.mp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid var(--mp-line);
	background: var(--mp-sand); color: var(--mp-ink); font-weight: 600; font-size: .93rem;
	cursor: pointer; text-decoration: none; transition: transform .12s ease, background .12s ease;
}
.mp-btn:hover { text-decoration: none; transform: translateY(-1px); }
.mp-btn--primary { background: var(--mp-primary); border-color: var(--mp-primary); color: #fff; }
.mp-btn--ghost { background: transparent; }
.mp-btn--block { width: 100%; }

label { display: block; font-size: .88rem; font-weight: 600; color: var(--mp-ink); margin-bottom: .7rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], input[type="url"],
input:not([type]), select, textarea {
	width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit;
	border: 1px solid var(--mp-line); border-radius: 10px; background: var(--mp-white); color: var(--mp-ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mp-accent); outline-offset: 1px; }
input[type="color"] { height: 42px; padding: 2px; }
.mp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.mp-span-2 { grid-column: 1 / -1; }
.mp-inline-form { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.mp-inline-form select, .mp-inline-form input { width: auto; }
.mp-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.mp-check input { width: auto; margin: 0; }
.mp-filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.mp-filters input, .mp-filters select { width: auto; min-width: 150px; margin-top: 0; }

/* ---------- Flash / pills ---------- */
.mp-flash { border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem; border: 1px solid var(--mp-line); background: var(--mp-sand); }
.mp-flash--success { border-color: #bcd6c2; background: #eef6f0; color: var(--mp-good); }
.mp-flash--error { border-color: #e5c1bc; background: #fbeeec; color: var(--mp-bad); }
.mp-flash--info { color: var(--mp-primary); }
.mp-pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--mp-sand); color: var(--mp-muted); }
.mp-pill--good { background: #eef6f0; color: var(--mp-good); }
.mp-pill--warn { background: #fbf3e2; color: var(--mp-warn); }
.mp-pill--bad { background: #fbeeec; color: var(--mp-bad); }

/* ---------- Tables ---------- */
.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mp-table th, .mp-table td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--mp-line); vertical-align: middle; }
.mp-table th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mp-muted); }
.mp-table tbody tr:hover { background: var(--mp-sand); }

/* ---------- Stats / charts ---------- */
.mp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.mp-stat { padding: 1rem 1.1rem; }
.mp-stat-label { margin: 0; font-size: .8rem; color: var(--mp-muted); }
.mp-stat-value { margin: .25rem 0 0; font-size: 1.5rem; font-weight: 700; }
.mp-stat-value--sm { font-size: 1.1rem; }
.mp-chart { display: flex; align-items: flex-end; gap: .8rem; height: 190px; padding-top: .5rem; }
.mp-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mp-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; }
.mp-bar { width: 14px; border-radius: 6px 6px 0 0; min-height: 3px; }
.mp-bar--expected { background: var(--mp-sand); border: 1px solid var(--mp-accent); }
.mp-bar--collected { background: var(--mp-primary); }
.mp-chart-label { font-size: .74rem; color: var(--mp-muted); margin-top: .4rem; }
.mp-legend { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--mp-muted); margin-top: .8rem; }
.mp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mp-dot--expected { background: var(--mp-accent); }
.mp-dot--collected { background: var(--mp-primary); }
.mp-meter-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: .7rem; margin-bottom: .6rem; font-size: .9rem; }
.mp-meter { height: 9px; border-radius: 999px; background: var(--mp-sand); overflow: hidden; }
.mp-meter span { display: block; height: 100%; background: var(--mp-primary); }

/* ---------- Pricing / plans ---------- */
.mp-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.mp-plan { display: flex; flex-direction: column; }
.mp-plan .mp-btn { margin-top: auto; }
.mp-price { font-size: 1.9rem; font-weight: 700; margin: .3rem 0 1rem; }
.mp-price span { font-size: .85rem; font-weight: 500; color: var(--mp-muted); }
.mp-price--sm { font-size: 1.2rem; margin: .2rem 0 .4rem; }
.mp-features { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.mp-features li { padding: .3rem 0 .3rem 1.3rem; position: relative; font-size: .92rem; }
.mp-features li::before { content: "✓"; position: absolute; left: 0; color: var(--mp-primary); font-weight: 700; }
.mp-plan-picker { display: grid; gap: .6rem; margin-bottom: 1rem; }
.mp-plan-option { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--mp-line); border-radius: 12px; padding: .7rem .9rem; font-weight: 500; }
.mp-plan-option input { width: auto; margin: 0; }

/* ---------- Property listings ---------- */
.mp-property-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.mp-property img { border-radius: 10px; margin-bottom: .8rem; aspect-ratio: 16 / 10; object-fit: cover; }
.mp-property details summary { list-style: none; margin-top: .6rem; }
.mp-property details summary::-webkit-details-marker { display: none; }

/* ---------- Auth / wizard ---------- */
.mp-auth h2 { margin-top: 0; }
.mp-step { display: none; }
.mp-step.is-active { display: block; }
.mp-step h3 { margin-top: 0; font-size: 1rem; }

/* ---------- App shell ---------- */
.mp-app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; background: var(--mp-cream); }
.mp-sidebar { background: var(--mp-white); border-right: 1px solid var(--mp-line); padding: 1.3rem 1rem; display: flex; flex-direction: column; gap: .3rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.mp-sidebar .mp-brand { margin-bottom: 1.2rem; }
.mp-nav { display: flex; flex-direction: column; gap: .15rem; }
.mp-nav-link { padding: .55rem .75rem; border-radius: 10px; color: var(--mp-ink); font-weight: 500; font-size: .95rem; }
.mp-nav-link:hover { background: var(--mp-sand); text-decoration: none; }
.mp-nav-link.is-active { background: var(--mp-primary); color: #fff; }
.mp-nav-link--muted { margin-top: auto; color: var(--mp-muted); }
.mp-main { padding: 1.4rem 1.8rem 3rem; min-width: 0; }
.mp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.mp-topbar-actions { display: flex; align-items: center; gap: .6rem; }
.mp-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mp-accent); color: #fff; font-weight: 700; }
.mp-screen { display: block; }
.mp-sidebar-toggle { display: none; position: fixed; top: .8rem; left: .8rem; z-index: 40; border: 1px solid var(--mp-line); background: var(--mp-white); border-radius: 10px; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; }

/* ---------- Tenant portal ---------- */
.mp-portal { padding: 2rem 0 3rem; }
.mp-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.mp-app { grid-template-columns: 1fr; }
	.mp-sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; transform: translateX(-100%); transition: transform .2s ease; z-index: 35; }
	.mp-sidebar.is-open { transform: translateX(0); }
	.mp-sidebar-toggle { display: block; }
	.mp-main { padding: 3.4rem 1rem 2.5rem; }
	.mp-form-grid { grid-template-columns: 1fr; }
	.mp-site-footer__inner { grid-template-columns: 1fr; }
	.mp-meter-row { grid-template-columns: 100px 1fr auto; }
}