:root {
  --forest: #17342f;
  --forest-2: #24473f;
  --terracotta: #da6547;
  --terracotta-dark: #bd5036;
  --cream: #f3efe7;
  --paper: #fffdf8;
  --ink: #24302d;
  --muted: #76807b;
  --line: #deddd5;
  --sage: #d8e3dc;
  --gold: #e1aa55;
  --shadow: 0 14px 34px rgba(35, 48, 45, .08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.auth-screen { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 22px; background: var(--forest); }
.auth-screen.hidden { display: none; }
.auth-screen:before, .auth-screen:after { content: ''; position: absolute; border-radius: 50%; opacity: .13; pointer-events: none; }
.auth-screen:before { width: 480px; height: 480px; left: -180px; bottom: -240px; border: 1px solid white; box-shadow: 0 0 0 70px rgba(255,255,255,.12), 0 0 0 140px rgba(255,255,255,.08); }
.auth-screen:after { width: 340px; height: 340px; right: -170px; top: -170px; background: var(--terracotta); }
.auth-card { position: relative; z-index: 1; width: min(430px, 100%); padding: 32px 36px 35px; border-radius: 21px; background: var(--paper); box-shadow: 0 35px 90px rgba(5,20,16,.35); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; color: var(--forest); }
.auth-brand .brand-mark { width: 29px; height: 31px; }
.auth-brand .brand-mark span { width: 7px; }
.auth-brand .brand-mark span:nth-child(1) { height: 18px; }
.auth-brand .brand-mark span:nth-child(2) { height: 26px; }
.auth-brand .brand-mark span:nth-child(3) { height: 21px; }
.auth-brand b { display: block; font: 600 18px Georgia, serif; }
.auth-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 7px; letter-spacing: 1.4px; }
.auth-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 50%; color: var(--terracotta-dark); background: #f4ddd3; }
.auth-icon svg { width: 22px; }
.auth-copy h1 { margin: 7px 0 7px; font: 500 29px Georgia, serif; }
.auth-copy p { margin: 0 0 24px; color: var(--muted); font-size: 11px; line-height: 1.5; }
#auth-form { display: grid; gap: 14px; }
.auth-setup-field { display: none; }
.auth-screen.setup .auth-setup-field { display: block; }
.auth-error { display: none; margin: -2px 0 0; padding: 9px 11px; border-radius: 8px; color: #9e4435; background: #f8e5df; font-size: 10px; }
.auth-error.show { display: block; }
.auth-submit { width: 100%; margin-top: 3px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 20; display: flex; flex-direction: column; padding: 30px 20px 22px; color: #f8f5ec; background: var(--forest); }
.brand { display: flex; align-items: center; gap: 13px; margin: 0 8px 45px; color: inherit; text-decoration: none; }
.brand-mark { width: 35px; height: 38px; position: relative; display: flex; gap: 3px; align-items: end; }
.brand-mark span { display: block; width: 9px; border-radius: 1px 1px 0 0; background: var(--terracotta); }
.brand-mark span:nth-child(1) { height: 23px; }
.brand-mark span:nth-child(2) { height: 32px; }
.brand-mark span:nth-child(3) { height: 27px; }
.brand b { display: block; font-family: Georgia, serif; font-size: 20px; line-height: 1; letter-spacing: 2.5px; }
.brand small { display: block; margin-top: 5px; opacity: .55; font-size: 8px; letter-spacing: 1.7px; }
.main-nav { display: grid; gap: 7px; }
.nav-item { width: 100%; height: 48px; border: 0; border-radius: 11px; display: flex; align-items: center; gap: 14px; padding: 0 14px; color: rgba(255,255,255,.64); background: transparent; cursor: pointer; text-align: left; transition: .18s ease; }
.nav-item svg { width: 19px; }
.nav-item span { flex: 1; }
.nav-item em { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.09); font-size: 11px; font-style: normal; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { color: white; background: rgba(255,255,255,.11); box-shadow: inset 3px 0 var(--terracotta); }
.nav-item.active svg { color: #f48a6c; }
.admin-only { display: none; }
body.is-admin .admin-only { display: flex; }
.sidebar-note { margin-top: auto; display: flex; gap: 11px; padding: 14px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); }
.note-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: #d5a959; color: var(--forest); font: bold 14px Georgia, serif; }
.sidebar-note strong { font-size: 11px; letter-spacing: .2px; }
.sidebar-note p { margin: 4px 0 0; color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.45; }
.sidebar-footer { margin: 17px 12px 0; color: rgba(255,255,255,.45); font-size: 10px; letter-spacing: .35px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #6fc295; box-shadow: 0 0 0 3px rgba(111,194,149,.12); }

.main-content { grid-column: 2; min-width: 0; padding: 0 42px 48px; }
.topbar { min-height: 122px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid rgba(36,48,45,.12); }
.topbar-copy { min-width: 225px; }
.topbar-copy span, .section-kicker { display: block; color: var(--terracotta); font-size: 10px; font-weight: 750; letter-spacing: 1.8px; }
.topbar-copy h1 { margin: 8px 0 0; font: 500 30px/1.05 Georgia, serif; letter-spacing: -.4px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-menu { height: 43px; display: flex; align-items: center; gap: 8px; padding: 0 7px 0 5px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.55); }
.user-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--forest-2); font: 500 11px Georgia, serif; }
.user-menu-copy { min-width: 74px; }
.user-menu-copy b, .user-menu-copy small { display: block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-copy b { font-size: 9px; }
.user-menu-copy small { margin-top: 2px; color: var(--muted); font-size: 7px; text-transform: capitalize; }
.user-menu button { width: 27px; height: 27px; border: 0; border-left: 1px solid var(--line); display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.user-menu button:hover { color: var(--terracotta-dark); }
.user-menu button svg { width: 14px; }
.global-search, .filter-search { height: 43px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.55); color: #8a918d; }
.global-search { width: 235px; }
.global-search svg, .filter-search svg { width: 17px; }
.global-search input, .filter-search input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 13px; }
.global-search:focus-within, .filter-search:focus-within { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,71,63,.08); }
.primary-btn, .secondary-btn, .ghost-btn, .upload-btn { min-height: 43px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; font-weight: 700; font-size: 12px; cursor: pointer; transition: .18s ease; }
.primary-btn { color: white; background: var(--terracotta); box-shadow: 0 5px 14px rgba(218,101,71,.23); }
.primary-btn:hover { background: var(--terracotta-dark); transform: translateY(-1px); }
.primary-btn svg, .secondary-btn svg { width: 17px; }
.secondary-btn { border: 1px solid var(--line); background: var(--paper); }
.secondary-btn:hover, .ghost-btn:hover { border-color: #bbbdb6; background: white; }
.ghost-btn { border: 1px solid var(--line); background: transparent; }
.mobile-menu { display: none; }

.view { display: none; animation: fade-in .25s ease; }
.view.active { display: block; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; padding: 25px 0 21px; }
.stat-card { position: relative; overflow: hidden; min-height: 131px; padding: 21px 22px; border: 1px solid rgba(36,48,45,.09); border-radius: var(--radius); background: rgba(255,253,248,.7); box-shadow: 0 5px 18px rgba(35,48,45,.03); }
.stat-card:after { content: ''; position: absolute; width: 70px; height: 70px; right: -23px; top: -23px; border-radius: 50%; background: var(--card-tint, var(--sage)); opacity: .45; }
.stat-card > span { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: 1.2px; }
.stat-card strong { display: block; margin-top: 11px; font: 500 31px/1 Georgia, serif; }
.stat-card p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.stat-card p b { color: var(--forest-2); }

.panel { border: 1px solid rgba(36,48,45,.1); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr); gap: 20px; }
.properties-panel, .activity-panel { min-height: 392px; padding: 25px 27px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.panel-heading h2, .view-heading h2, .attention-copy h2 { margin: 6px 0 0; font: 500 21px/1.2 Georgia, serif; }
.text-btn { border: 0; display: inline-flex; align-items: center; gap: 7px; background: none; color: var(--terracotta-dark); font-size: 11px; font-weight: 750; cursor: pointer; }
.text-btn svg { width: 14px; }
.icon-btn { width: 37px; height: 37px; flex: 0 0 37px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; background: transparent; cursor: pointer; }
.icon-btn:hover { background: var(--cream); }
.icon-btn svg { width: 16px; }
.building-list { display: grid; gap: 13px; margin-top: 22px; }
.building-card { display: grid; grid-template-columns: 69px minmax(0,1fr) auto; align-items: center; gap: 17px; padding: 13px; border: 1px solid #e5e3dc; border-radius: 13px; cursor: pointer; transition: .18s ease; }
.building-card:hover { border-color: #c9cbc3; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(35,48,45,.06); }
.building-illustration { height: 67px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-radius: 8px; background: var(--building-bg); }
.building-illustration i { position: relative; width: 25px; height: 47px; background: var(--building-color); box-shadow: inset 0 -5px rgba(0,0,0,.08); }
.building-illustration i:before { content: ''; position: absolute; inset: 7px 5px 11px; background: repeating-linear-gradient(to bottom, rgba(255,247,216,.8) 0 5px, transparent 5px 11px); }
.building-illustration i:after { content: ''; position: absolute; width: 7px; height: 9px; bottom: 0; left: 9px; background: rgba(37,43,40,.7); }
.building-illustration i:nth-child(2) { height: 38px; width: 18px; }
.building-info h3 { margin: 0; font: 600 16px Georgia, serif; }
.building-info p { margin: 5px 0 8px; color: var(--muted); font-size: 10px; }
.occupancy-bar { width: 100%; max-width: 250px; height: 5px; overflow: hidden; border-radius: 4px; background: #e8e9e3; }
.occupancy-bar i { display: block; height: 100%; border-radius: inherit; background: var(--forest-2); }
.building-meta { min-width: 58px; text-align: right; }
.building-meta strong { font: 500 20px Georgia, serif; }
.building-meta span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.repair-timeline { position: relative; display: grid; gap: 0; margin-top: 18px; }
.repair-timeline:before { content: ''; position: absolute; left: 11px; top: 20px; bottom: 30px; width: 1px; background: #e3e1da; }
.timeline-item { position: relative; display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; }
.timeline-dot { z-index: 1; width: 23px; height: 23px; border: 5px solid var(--paper); border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 1px #e4ded8; }
.timeline-item:nth-child(2) .timeline-dot { background: var(--gold); }
.timeline-item:nth-child(3) .timeline-dot { background: var(--forest-2); }
.timeline-copy h4 { margin: 1px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.timeline-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.timeline-cost { font: 500 13px Georgia, serif; }
.empty-mini { padding: 58px 20px; text-align: center; color: var(--muted); font-size: 12px; }
.attention-panel { margin-top: 20px; min-height: 98px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 20px 26px; background: #f7f2e7; }
.attention-copy { display: flex; align-items: center; gap: 15px; }
.attention-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: var(--terracotta-dark); background: #f4ddd3; }
.attention-icon svg { width: 19px; }
.lease-reminders { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.lease-pill { padding: 9px 12px; border: 1px solid #e2ddd1; border-radius: 9px; background: rgba(255,255,255,.65); font-size: 10px; }
.lease-pill b { margin-right: 7px; }
.lease-pill span { color: var(--terracotta-dark); }

.view-heading { min-height: 140px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.view-heading h2 { margin-top: 8px; font-size: 29px; }
.view-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.view-heading-actions { display: flex; align-items: center; gap: 10px; }
.tax-export { height: 43px; display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); }
.tax-export select { width: 82px; border: 0; border-right: 1px solid var(--line); outline: 0; padding: 0 9px; background: transparent; font-size: 11px; }
.tax-export .secondary-btn { min-height: 41px; border: 0; border-radius: 0; }
.filter-bar, .resident-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.filter-bar .filter-search { min-width: 280px; flex: 1; }
.filter-bar select { min-width: 155px; height: 43px; padding: 0 34px 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 12px; }
.repairs-table-wrap { overflow: hidden; box-shadow: 0 8px 25px rgba(35,48,45,.05); }
.repairs-table { width: 100%; border-collapse: collapse; }
.repairs-table th { height: 50px; padding: 0 18px; border-bottom: 1px solid var(--line); color: #858c88; font-size: 9px; letter-spacing: 1.1px; text-align: left; text-transform: uppercase; }
.repairs-table td { padding: 16px 18px; border-bottom: 1px solid #ebe9e2; font-size: 11px; vertical-align: middle; }
.repairs-table tr:last-child td { border-bottom: 0; }
.repairs-table tbody tr { cursor: pointer; transition: .15s; }
.repairs-table tbody tr:hover { background: #faf8f2; }
.repair-cell { display: flex; align-items: center; gap: 11px; }
.category-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; color: var(--forest-2); background: var(--sage); }
.category-icon svg { width: 15px; }
.repair-cell b { display: block; max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.repair-cell small { display: block; margin-top: 4px; color: var(--muted); }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; }
.status-badge:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-complete { color: #3b745c; background: #e1eee6; }
.status-progress { color: #9b651a; background: #f5ead5; }
.status-planned { color: #6c7185; background: #e8e9ef; }
.attachment-count { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.attachment-count svg { width: 13px; }
.right { text-align: right !important; }
.row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.mini-action { width: 28px; height: 28px; border: 0; border-radius: 6px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; }
.mini-action:hover { color: var(--ink); background: var(--cream); }
.mini-action.delete:hover { color: #b34032; background: #f7dfd9; }
.mini-action svg { width: 14px; }
.empty-state { display: none; padding: 70px 20px; text-align: center; }
.empty-state.show { display: block; }
.empty-state > span { color: var(--terracotta); font-size: 25px; }
.empty-state h3 { margin: 12px 0 6px; font: 500 20px Georgia, serif; }
.empty-state p { color: var(--muted); font-size: 11px; }

.resident-toolbar .filter-search { width: 100%; max-width: 420px; }
.residents-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.resident-card { overflow: hidden; border: 1px solid rgba(36,48,45,.1); border-radius: 16px; background: var(--paper); box-shadow: 0 6px 20px rgba(35,48,45,.045); }
.resident-card-top { height: 7px; background: var(--accent); }
.resident-card-body { padding: 21px; }
.resident-identity { display: flex; align-items: center; gap: 13px; }
.avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--forest-2); font: 500 15px Georgia, serif; }
.resident-identity h3 { margin: 0; font: 600 15px Georgia, serif; }
.resident-identity p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.resident-contact { display: grid; gap: 7px; margin: 18px 0; padding: 14px 0; border-block: 1px solid #e9e7e0; }
.resident-contact a { color: var(--ink); text-decoration: none; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.resident-contact a:hover { color: var(--terracotta-dark); }
.resident-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resident-meta span { display: block; color: var(--muted); font-size: 8px; letter-spacing: .9px; text-transform: uppercase; }
.resident-meta b { display: block; margin-top: 4px; font-size: 10px; }
.pet-chip { margin-top: 15px; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; color: #80652e; background: #f5ebd5; font-size: 10px; }
.pet-chip svg { width: 15px; }
.resident-card button { width: 100%; height: 39px; margin-top: 15px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.resident-card button:hover { background: var(--cream); }

.property-section { margin-bottom: 24px; overflow: hidden; border: 1px solid rgba(36,48,45,.1); border-radius: var(--radius); background: var(--paper); box-shadow: 0 7px 25px rgba(35,48,45,.05); }
.property-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 23px; border-bottom: 1px solid var(--line); background: #faf8f1; }
.property-header h3 { margin: 0; font: 600 18px Georgia, serif; }
.property-header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.property-header .property-occupancy { font: 500 14px Georgia, serif; }
.property-header .property-occupancy span { display: block; margin-top: 4px; color: var(--muted); font: 9px Inter, sans-serif; text-align: right; text-transform: uppercase; letter-spacing: .8px; }
.property-header-actions { display: flex; align-items: center; gap: 13px; }
.edit-building-btn { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; background: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.edit-building-btn:hover { border-color: #bcbeb6; background: var(--cream); }
.edit-building-btn svg { width: 14px; }
.units-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.unit-card { min-height: 188px; padding: 18px; border: 0; border-right: 1px solid #e8e6df; background: white; text-align: left; cursor: pointer; transition: .15s; }
.unit-card:last-child { border-right: 0; }
.unit-card:hover { z-index: 1; background: #faf8f1; box-shadow: inset 0 -3px var(--terracotta); }
.unit-card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.unit-number { font: 600 20px Georgia, serif; }
.unit-status { padding: 4px 7px; border-radius: 10px; font-size: 8px; font-weight: 700; }
.unit-status.occupied { color: #3b745c; background: #e1eee6; }
.unit-status.vacant { color: #9e553f; background: #f6e2dc; }
.unit-resident { margin: 26px 0 0; }
.unit-resident strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.unit-resident span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.unit-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; color: var(--muted); font-size: 9px; }
.unit-footer svg { width: 13px; color: #a47c31; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; overflow: auto; display: none; align-items: flex-start; justify-content: center; padding: 35px 18px; background: rgba(19,35,31,.72); backdrop-filter: blur(5px); }
.modal-backdrop.open { display: flex; }
.modal { width: min(680px, 100%); border-radius: 19px; background: var(--paper); box-shadow: 0 28px 80px rgba(12,27,23,.32); animation: modal-in .22s ease; }
.unit-modal-card { width: min(590px, 100%); }
.building-modal-card { width: min(500px, 100%); }
.user-modal-card { width: min(510px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 27px 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 6px 0 0; font: 500 23px Georgia, serif; }
.modal form { padding: 23px 27px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: block; }
.field.span-2 { grid-column: 1 / -1; }
.field > span, .occupancy-switch > span { display: block; margin: 0 0 7px; color: #565f5b; font-size: 9px; font-weight: 750; letter-spacing: .75px; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; outline: none; background: white; color: var(--ink); font-size: 12px; }
.field input, .field select { height: 41px; padding: 0 11px; }
.field textarea { padding: 11px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus, .link-entry:focus-within { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,71,63,.08); }
.money-input { position: relative; }
.money-input > span { position: absolute; left: 12px; top: 12px; color: var(--muted); font-size: 12px; }
.money-input input { padding-left: 25px; }
.attachments-section { margin-top: 20px; padding: 17px; border: 1px dashed #d4d1c8; border-radius: 12px; background: #fbf9f3; }
.attachments-title > div { display: flex; gap: 10px; }
.attachments-title svg { width: 17px; color: var(--terracotta-dark); }
.attachments-title b { display: block; font-size: 11px; }
.attachments-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.attachment-controls { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 13px; }
.upload-btn { min-height: 38px; border: 1px solid var(--line); background: white; }
.upload-btn:hover { border-color: #bcbeb6; }
.upload-btn input { display: none; }
.upload-btn svg { width: 14px; }
.link-entry { height: 38px; display: flex; align-items: center; gap: 7px; padding-left: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.link-entry svg { width: 13px; color: var(--muted); }
.link-entry input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: 10px; }
.link-entry button { height: 100%; padding: 0 11px; border: 0; border-left: 1px solid var(--line); background: transparent; font-size: 9px; font-weight: 750; cursor: pointer; }
.attachment-preview { display: grid; gap: 6px; margin-top: 10px; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; background: white; font-size: 9px; }
.attachment-item svg { width: 13px; color: var(--terracotta-dark); }
.attachment-item a { min-width: 0; flex: 1; overflow: hidden; color: var(--ink); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.attachment-item a:hover { color: var(--terracotta-dark); text-decoration: underline; }
.attachment-item small { color: var(--muted); }
.attachment-item button { width: 22px; height: 22px; border: 0; display: grid; place-items: center; background: none; cursor: pointer; }
.attachment-item button svg { width: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin: 23px -27px 0; padding: 17px 27px; border-top: 1px solid var(--line); background: #faf8f2; border-radius: 0 0 19px 19px; }
.occupancy-switch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding: 10px 12px; border-radius: 10px; background: #f4f1e9; }
.occupancy-switch > span { margin: 0; }
.occupancy-switch > div { display: flex; }
.occupancy-switch label input { display: none; }
.occupancy-switch label span { display: block; padding: 7px 11px; border-radius: 7px; color: var(--muted); font-size: 9px; cursor: pointer; }
.occupancy-switch label input:checked + span { color: white; background: var(--forest-2); }
.pet-toggle > label { height: 41px; display: flex; align-items: center; gap: 9px; }
.pet-toggle input { display: none; }
.toggle-track { width: 37px; height: 21px; position: relative; margin: 0; border-radius: 12px; background: #c8cbc6; transition: .15s; }
.toggle-track i { position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.pet-toggle input:checked + .toggle-track { background: var(--terracotta); }
.pet-toggle input:checked + .toggle-track i { transform: translateX(16px); }
.pet-toggle b { font-size: 10px; }
.account-active > label { height: 41px; display: flex; align-items: center; gap: 9px; }
.account-active input { display: none; }
.account-active input:checked + .toggle-track { background: var(--forest-2); }
.account-active input:checked + .toggle-track i { transform: translateX(16px); }
.account-active b { font-size: 10px; }
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.pet-details.disabled { opacity: .45; pointer-events: none; }
.toast { position: fixed; z-index: 200; right: 28px; bottom: 28px; display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 12px 15px; border-radius: 11px; color: white; background: var(--forest); box-shadow: 0 12px 35px rgba(14,31,27,.3); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #4d806c; }
.toast svg { width: 13px; }
.toast p { margin: 0; font-size: 11px; font-weight: 650; }

.users-panel { overflow: hidden; box-shadow: 0 8px 25px rgba(35,48,45,.05); }
.users-list { display: grid; }
.user-row { min-height: 76px; display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .8fr) 130px 110px auto; align-items: center; gap: 18px; padding: 13px 20px; border-bottom: 1px solid #ebe9e2; }
.user-row:last-child { border-bottom: 0; }
.user-row:hover { background: #faf8f2; }
.user-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-identity .avatar { width: 38px; height: 38px; flex: 0 0 38px; font-size: 12px; }
.user-identity b, .user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-identity b { font-size: 11px; }
.user-identity small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.role-badge { width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 12px; color: #3e6259; background: #e1ebe5; font-size: 9px; font-weight: 700; text-transform: capitalize; }
.role-badge.staff { color: #6a6f7d; background: #eaebef; }
.account-status { display: inline-flex; align-items: center; gap: 6px; color: #3b745c; font-size: 9px; font-weight: 700; }
.account-status:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-status.inactive { color: #a25b48; }
.user-created { color: var(--muted); font-size: 9px; }
.edit-user-button { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; background: white; font-size: 9px; font-weight: 700; cursor: pointer; }
.edit-user-button:hover { background: var(--cream); }
.edit-user-button svg { width: 13px; }

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .activity-panel { min-height: 300px; }
  .residents-grid { grid-template-columns: 1fr 1fr; }
  .units-grid { grid-template-columns: repeat(3, 1fr); }
  .unit-card { border-bottom: 1px solid #e8e6df; }
  .global-search { display: none; }
  .user-menu-copy { display: none; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { width: 250px; transform: translateX(-100%); transition: .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .main-content { padding: 0 17px 30px; }
  .topbar { min-height: 92px; gap: 13px; }
  .topbar-copy { min-width: 0; flex: 1; }
  .topbar-copy h1 { font-size: 23px; }
  .topbar-actions .primary-btn { width: 42px; padding: 0; }
  .topbar-actions .primary-btn span { display: none; }
  .mobile-menu { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-content: center; gap: 4px; background: var(--paper); }
  .mobile-menu span { width: 16px; height: 1px; background: var(--ink); }
  .summary-grid { gap: 10px; padding-top: 17px; }
  .stat-card { min-height: 113px; padding: 17px; }
  .stat-card strong { font-size: 26px; }
  .properties-panel, .activity-panel { padding: 20px 17px; }
  .building-card { grid-template-columns: 56px 1fr; }
  .building-illustration { height: 57px; }
  .building-meta { display: none; }
  .attention-panel { align-items: flex-start; flex-direction: column; }
  .lease-reminders { justify-content: flex-start; }
  .view-heading { min-height: 130px; }
  .view-heading p { max-width: 330px; }
  .view-heading > button { display: none; }
  .view-heading-actions > .primary-btn { display: none; }
  .tax-export .secondary-btn { width: auto; padding: 0 10px; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .filter-search { min-width: 100%; }
  .filter-bar select { flex: 1; min-width: 135px; }
  .repairs-table-wrap { overflow-x: auto; }
  .repairs-table { min-width: 760px; }
  .residents-grid { grid-template-columns: 1fr; }
  .units-grid { grid-template-columns: 1fr 1fr; }
  .unit-card:nth-child(even) { border-right: 0; }
  .property-header { align-items: flex-start; gap: 12px; }
  .property-header-actions { align-items: flex-end; flex-direction: column; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: auto; }
  .attachment-controls { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 15px 10px; }
  .modal-header { padding: 21px 19px 17px; }
  .modal form { padding: 19px 19px 0; }
  .modal-actions { margin-left: -19px; margin-right: -19px; padding-left: 19px; padding-right: 19px; }
  .user-row { grid-template-columns: 1fr auto; gap: 12px; padding: 17px; }
  .user-row > :nth-child(2), .user-row > :nth-child(3), .user-row > :nth-child(4) { display: none; }
}

@media (max-width: 420px) {
  .auth-card { padding: 27px 22px 30px; }
  .summary-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 105px; }
  .units-grid { grid-template-columns: 1fr; }
  .unit-card { border-right: 0; }
}