:root { --teal:#22819A; --teal-dark:#176579; --blue:#90C2E7; --cream:#FEF7F8; --gray:#CDD4DD; --ink:#152b35; --muted:#71808b; --line:#e7edf0; --white:#fff; --shadow:0 10px 30px rgba(32, 69, 80, .06); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f8fbfc; color:var(--ink); font-family:'DM Sans', sans-serif; font-size:14px; }
button,a { font:inherit; } button { cursor:pointer; border:0; } a { text-decoration:none; color:inherit; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { width:256px; flex:0 0 256px; background:#fff; border-right:1px solid #edf2f3; display:flex; flex-direction:column; padding:24px 14px 16px; }
.brand { display:flex; align-items:center; gap:10px; padding:0 10px 25px; }
.brand strong { display:block; font:800 17px 'Manrope', sans-serif; letter-spacing:-.4px; color:#194758; }.brand small { display:block; font-size:9px; color:#91a0a8; margin-top:2px; }
.brand-mark { display:flex; align-items:flex-end; gap:3px; height:28px; }.brand-mark span { width:7px; border-radius:8px 8px 2px 2px; background:var(--teal); display:block; }.brand-mark span:first-child { height:18px; background:var(--blue); }.brand-mark span:nth-child(2) { height:26px; background:#eef1f3; }.brand-mark span:nth-child(3) { height:21px; background:var(--teal); }
.workspace-switcher { background:#f7fafb; border:1px solid #eaf0f2; border-radius:12px; padding:10px; display:flex; align-items:center; gap:9px; margin-bottom:26px; }.workspace-switcher strong,.user-row strong { font-size:12px; display:block; }.workspace-switcher small,.user-row small { display:block; color:#95a2aa; font-size:10px; margin-top:2px; }.workspace-switcher > div:nth-child(2) { overflow:hidden; }.workspace-switcher strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.chevron { margin-left:auto; color:#99a8ad!important; font-size:16px!important; }
.avatar { border-radius:50%; display:grid; place-items:center; background:#d9edf6; color:var(--teal-dark); font-weight:700; }.avatar-small { width:28px; height:28px; font-size:10px; }.avatar-user { width:30px; height:30px; font-size:10px; background:#ffe7dc; color:#ba6a4e; }
.main-nav { flex:1; }.nav-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#a8b3b9; margin:0 10px 8px; }.nav-label.spaced { margin-top:27px; }.nav-item { display:flex; align-items:center; gap:12px; border-radius:9px; padding:10px 11px; color:#77878e; margin:2px 0; font-size:13px; transition:.18s; }.nav-item:hover { color:var(--teal); background:#f3f9fa; }.nav-item.active { background:#e9f5f7; color:var(--teal-dark); font-weight:600; }.nav-icon { display:inline-grid; place-items:center; width:18px; font-size:17px; line-height:1; }.nav-count { margin-left:auto; min-width:19px; height:19px; padding:0 5px; display:grid; place-items:center; background:#edf2f4; color:#8a999e; border-radius:6px; font-size:10px; }.nav-count.alert { color:#bd6e56; background:#fff0ec; }.nav-dot { width:6px; height:6px; border-radius:50%; background:#e19a6e; margin-left:auto; }
.sidebar-bottom { margin-top:auto; }.help-card { margin:0 4px 18px; padding:15px 14px; background:#f5f9fa; border-radius:12px; }.help-icon { width:22px; height:22px; background:var(--teal); color:#fff; display:grid; place-items:center; border-radius:7px; font-weight:700; margin-bottom:11px; }.help-card strong { font-size:12px; }.help-card p { color:#94a0a5; font-size:10px; line-height:1.5; margin:5px 0 11px; }.text-button { padding:0; background:transparent; color:var(--teal); font-size:11px; font-weight:600; }.text-button span,.view-link span { margin-left:5px; }.user-row { border-top:1px solid #eef2f3; padding:15px 6px 0; display:flex; align-items:center; gap:9px; }.user-row .more { margin-left:auto; }
.main-content { flex:1; min-width:0; }.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 38px; background:#fff; border-bottom:1px solid #eef2f3; }.breadcrumb { display:flex; gap:9px; align-items:center; font-size:12px; color:#a2adb2; }.breadcrumb i { font-style:normal; color:#ccd4d8; }.breadcrumb strong { color:#435762; font-weight:600; }.topbar-actions { display:flex; align-items:center; gap:16px; }.icon-button { background:transparent; color:#9aa8ad; padding:2px; }.notification-button { position:relative; font-size:22px; }.notification-button b { width:5px; height:5px; position:absolute; top:1px; right:1px; background:#e38e6e; border:2px solid #fff; border-radius:50%; }.bell { display:block; transform:rotate(-22deg); }.top-divider { height:25px; width:1px; background:#edf0f1; }.top-user { display:flex; align-items:center; gap:8px; font-size:12px; color:#5d7079; }.tiny-chevron { color:#9da9ae; font-size:15px; }.mobile-menu { display:none; font-size:21px; }
.page-body { padding:34px 38px 50px; max-width:1500px; margin:auto; }.welcome-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; }.eyebrow { color:#a4b2b7; letter-spacing:1.3px; font-size:9px; font-weight:700; margin:0 0 8px; }.welcome-row h1 { font:800 27px 'Manrope', sans-serif; letter-spacing:-1px; margin:0; color:#183946; }.welcome-row h1 span { color:#e19c72; font-size:19px; vertical-align:4px; }.muted { color:#8a9aa1; margin:6px 0 0; font-size:12px; }.primary-button { background:var(--teal); color:#fff; border-radius:8px; padding:11px 15px; font-weight:600; font-size:12px; box-shadow:0 6px 14px rgba(34,129,154,.19); transition:.18s; }.primary-button:hover { background:var(--teal-dark); transform:translateY(-1px); }.primary-button span { font-size:17px; vertical-align:-1px; margin-right:6px; }
.metric-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; margin-bottom:18px; }.metric-card { min-height:154px; padding:17px 18px; border-radius:12px; border:1px solid #edf1f2; background:#fff; position:relative; overflow:hidden; }.metric-card:after { content:''; position:absolute; bottom:-32px; right:-22px; width:100px; height:100px; background:currentColor; opacity:.035; border-radius:50%; }.accent-blue { color:#6597ba; }.accent-teal { color:var(--teal); }.accent-peach { color:#cc8165; }.accent-lilac { color:#8171a8; }.metric-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:currentColor; color:#fff; font-size:17px; margin-bottom:17px; }.accent-blue .metric-icon { background:#d8edf8; color:#5b9ec7; }.accent-teal .metric-icon { background:#d8f1f0; color:var(--teal); }.accent-peach .metric-icon { background:#fde5db; color:#ca8267; }.accent-lilac .metric-icon { background:#ece8f7; color:#8978ad; }.metric-card p { color:#71818a; font-size:11px; margin:0 0 6px; }.metric-card strong { color:#183946; font:800 19px 'Manrope',sans-serif; letter-spacing:-.5px; }.metric-card strong small { font:600 10px 'DM Sans'; color:#829198; letter-spacing:0; }.metric-foot { display:block; color:#a1adb2; font-size:10px; margin-top:5px; }.trend { position:absolute; top:19px; right:16px; font-size:10px; font-weight:700; }.trend.up { color:#42a18b; }.trend.down { color:#dc856f; }.trend.neutral { color:#8e9aa0; }
.content-grid { display:grid; grid-template-columns:minmax(0, 1.58fr) minmax(300px, .82fr); gap:18px; margin-bottom:18px; }.panel { background:#fff; border:1px solid #edf1f2; border-radius:12px; padding:20px 21px; box-shadow:var(--shadow); }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; }.panel h2 { font:700 15px 'Manrope',sans-serif; color:#1a3a47; margin:0; letter-spacing:-.3px; }.select-button { background:#f7fafa; border:1px solid #edf1f2; border-radius:6px; padding:7px 9px; color:#74848a; font-size:10px; }.select-button span { margin-left:9px; }.round-more { background:transparent; color:#a5b0b4; letter-spacing:2px; }.legend { display:flex; gap:17px; margin:22px 0 5px 40px; color:#839198; font-size:10px; }.legend span { display:flex; align-items:center; gap:6px; }.legend-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }.legend-dot.teal { background:var(--teal); }.legend-dot.blue { background:#90c2e7; }.legend-dot.pale { background:#cfe6ed; }.legend-dot.gray { background:#dfe7ea; }.chart-wrap { height:222px; position:relative; padding-left:40px; }.y-labels { position:absolute; left:0; top:4px; bottom:22px; display:flex; flex-direction:column; justify-content:space-between; color:#b0bcc0; font-size:9px; }.line-chart { width:100%; height:197px; overflow:visible; }.grid-lines line { stroke:#edf2f3; stroke-width:1; stroke-dasharray:3 4; }.line { fill:none; stroke-width:2.3; stroke-linecap:round; }.line.revenue { stroke:var(--teal); }.line.expenses { stroke:#90c2e7; }.area { fill:url(#revenueFill); }.chart-point circle { fill:#fff; stroke:var(--teal); stroke-width:2; }.x-labels { display:flex; justify-content:space-between; color:#a3afb3; font-size:9px; margin:0 2px; }
.occupancy-panel { min-height:318px; }.donut-row { display:flex; align-items:center; justify-content:space-around; margin:29px 0 25px; }.donut { width:145px; height:145px; border-radius:50%; background:conic-gradient(var(--teal) 0deg 330deg, #dcecf1 330deg 360deg); position:relative; display:grid; place-items:center; }.donut:before { content:''; position:absolute; width:102px; height:102px; background:#fff; border-radius:50%; }.donut-center { position:relative; text-align:center; }.donut-center strong { display:block; font:800 27px 'Manrope',sans-serif; color:#1a3e4c; }.donut-center span { color:#9ba8ad; font-size:10px; }.donut-legend { display:flex; flex-direction:column; gap:16px; }.donut-legend div { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:7px; color:#7f8e94; font-size:10px; }.donut-legend strong { color:#274754; font-size:12px; }.occupancy-note { display:flex; align-items:center; gap:10px; padding:11px 12px; background:#f2faf9; border-radius:8px; }.check { width:19px; height:19px; display:grid; place-items:center; color:#fff; background:#5cba9b; border-radius:50%; font-size:11px; }.occupancy-note p { margin:0; color:#3c6f68; font-size:10px; line-height:1.45; }.occupancy-note p span { color:#88a39f; }
.lower-grid { grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr); }.view-link { color:var(--teal); font-size:10px; font-weight:600; }.due-list,.activity-list { margin-top:18px; }.due-row { display:flex; align-items:center; padding:12px 0; border-bottom:1px solid #f0f3f4; gap:12px; }.due-row:last-child { border-bottom:0; }.date-block { flex:0 0 38px; height:39px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:7px; background:#edf7f8; color:var(--teal); }.date-block b { font:700 16px 'Manrope'; line-height:16px; }.date-block span { font-size:8px; font-weight:700; letter-spacing:.7px; }.due-info { min-width:0; flex:1; }.due-info strong,.due-info span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.due-info strong { font-size:11px; color:#31515c; }.due-info span { font-size:10px; color:#9ba7ab; margin-top:4px; }.due-amount { text-align:right; }.due-amount strong { display:block; color:#2c4b57; font-size:11px; }.status-pill { display:inline-block; margin-top:5px; padding:4px 6px; border-radius:10px; font-size:8px; }.status-pill.pending { background:#fff0e7; color:#c7775c; }.status-pill.upcoming { background:#eef7f8; color:#5f9ca6; }.activity-item { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #f0f3f4; }.activity-item:last-child { border-bottom:0; }.activity-icon { flex:0 0 31px; width:31px; height:31px; display:grid; place-items:center; border-radius:50%; font-size:15px; }.activity-icon.payment { background:#e0f4ef; color:#45a287; }.activity-icon.expense { background:#fbece5; color:#cb866c; }.activity-icon.tenant { background:#e7f1f8; color:#609bc0; }.activity-item > div:nth-child(2) { flex:1; min-width:0; }.activity-item strong,.activity-item span { display:block; }.activity-item strong { color:#36535d; font-size:11px; }.activity-item span { color:#9aa7ac; font-size:10px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.activity-item time { color:#aeb9bd; font-size:9px; white-space:nowrap; }
.modal-backdrop[hidden] { display:none; }.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; background:rgba(20,48,57,.26); z-index:10; padding:20px; }.modal { position:relative; width:min(500px,100%); background:#fff; border-radius:16px; padding:28px; box-shadow:0 25px 70px rgba(11,42,51,.25); }.modal h2 { margin:0; font:800 23px 'Manrope'; color:#183946; }.modal .muted { margin-bottom:21px; }.modal-close { position:absolute; right:18px; top:15px; background:#f4f7f7; width:28px; height:28px; border-radius:50%; color:#819198; font-size:20px; line-height:20px; }.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.quick-actions button { background:#fbfcfc; text-align:left; border:1px solid #edf2f3; border-radius:10px; padding:14px; transition:.18s; }.quick-actions button:hover { border-color:#9ed1dc; background:#f2fafb; }.quick-actions button > span { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#e3f3f5; color:var(--teal); margin-bottom:10px; }.quick-actions strong,.quick-actions small { display:block; }.quick-actions strong { font-size:12px; color:#33525c; }.quick-actions small { font-size:9px; color:#99a6aa; margin-top:4px; }
@media (max-width:1100px) { .sidebar { width:220px; flex-basis:220px; }.page-body { padding:30px 25px 45px; }.topbar { padding:0 25px; }.metric-card { padding:14px; }.metric-card strong { font-size:16px; }.donut-row { gap:10px; }.donut { width:125px; height:125px; }.donut:before { width:88px; height:88px; } }
@media (max-width:820px) { .sidebar { position:fixed; z-index:5; transform:translateX(-102%); transition:transform .22s; height:100vh; box-shadow:12px 0 30px rgba(19,51,60,.12); }.sidebar.open { transform:translateX(0); }.mobile-menu { display:block; }.topbar { gap:14px; }.breadcrumb { flex:1; }.top-user span:not(.tiny-chevron) { display:none; }.metric-grid { grid-template-columns:1fr 1fr; }.content-grid,.lower-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .topbar { height:62px; padding:0 16px; }.page-body { padding:25px 16px 35px; }.welcome-row { align-items:flex-start; gap:18px; flex-direction:column; }.welcome-row h1 { font-size:23px; }.primary-button { width:100%; }.metric-grid { gap:9px; }.metric-card { min-height:145px; padding:12px; }.metric-card strong { font-size:14px; }.metric-card strong small { font-size:9px; }.metric-foot { font-size:9px; }.trend { top:13px; right:11px; font-size:9px; }.panel { padding:17px 14px; }.panel-heading { gap:8px; }.panel h2 { font-size:13px; }.legend { margin-left:0; }.chart-wrap { padding-left:28px; }.donut-row { justify-content:space-between; }.donut { width:120px; height:120px; }.donut:before { width:83px; height:83px; }.due-row { gap:8px; }.due-amount strong { font-size:10px; }.activity-item time { display:none; }.quick-actions { grid-template-columns:1fr; } }