@import url('fonts.css');
:root{--primary:#6958e8;--primary-dark:#5545ca;--primary-soft:#eeebfd;--text:#27263e;--muted:#77768b;--border:#eeedf4;--bg:#f7f8fc;--card:#fff;--green:#278b6b;--radius:17px;--shadow:0 4px 24px #24234403;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);font-size:14px;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8c7cf7;outline-offset:3px}svg{flex-shrink:0;vertical-align:middle}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;top:-60px;left:20px;background:var(--primary);color:#fff;padding:12px;z-index:100}.skip-link:focus{top:8px}.boot{display:grid;place-content:center;min-height:100vh;text-align:center}.boot img{margin:auto}.boot p{color:var(--muted)}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;background:var(--card);border-right:1px solid var(--border);padding:32px 18px 18px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:10px;padding:0 13px;font-size:24px;font-weight:750;letter-spacing:-1.1px}.brand :is(img,.app-logo){width:35px;height:35px}.brand .brand-rent{font-weight:450}.workspace-switch{margin:35px 5px 27px;padding:12px 10px;background:#f8f8fc;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;gap:11px}.workspace-icon{display:grid;place-items:center;background:#f0ecfb;border:1px solid #e4ddf7;color:#6c58ab;border-radius:8px;width:35px;height:35px}.workspace-copy{flex:1}.workspace-copy strong{display:block;font-size:12px;font-weight:650}.workspace-copy small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.nav-label{font-size:9px;letter-spacing:1.8px;color:#9290a4;font-weight:650;padding:0 17px;margin:0 0 10px}.nav-item{height:44px;padding:0 14px;margin:4px 0;border-radius:8px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;color:#777589;transition:.15s}.nav-item:hover{background:var(--bg);color:var(--primary)}.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:650}.nav-item .icon{width:18px;height:18px}.nav-item .count{margin-left:auto;background:#fff;color:var(--primary);min-width:23px;text-align:center;line-height:20px;border-radius:5px;font-size:10px}.nav-divider{height:1px;background:var(--border);margin:20px 14px}.sidebar-bottom{margin-top:auto;padding-top:22px}.plan-card{margin:0 5px 16px;padding:16px 14px;background:linear-gradient(135deg,#f5f2ff,#f1f0fc);border:1px solid #e9e4fc;border-radius:12px}.plan-card .plan-title{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:650}.plan-card p{font-size:10px;line-height:1.7;color:var(--muted);margin:8px 0 12px}.plan-card .btn{width:100%;font-size:10px;min-height:32px;padding:8px}.sidebar-footer{display:flex;align-items:center;padding:12px 10px 0;border-top:1px solid var(--border);gap:9px}.avatar{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#f0e5d8;color:#8e7153;border-radius:50%;font-size:11px;font-weight:650}.avatar.purple{background:#ece7fb;color:#8271ba}.avatar.green{background:#e1f1e9;color:#4f9677}.avatar.blue{background:#e5edf8;color:#6689af}.avatar.rose{background:#f8e7ed;color:#b57788}.user-copy{flex:1}.user-copy strong{font-size:11px;display:block}.user-copy span{font-size:10px;color:var(--muted);display:block;margin-top:4px}.shell{margin-left:236px}.topbar{height:83px;border-bottom:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:20px}.breadcrumb{font-size:12px;display:flex;gap:11px;align-items:center}.breadcrumb .muted{color:#a5a3b4}.topbar-actions{display:flex;align-items:center;gap:20px}.searchbox{display:flex;align-items:center;gap:9px;width:246px;color:#a09dac;font-size:11px}.searchbox input{border:0;background:transparent;outline:none;min-width:0;width:100%;font-size:11px;color:var(--text)}.searchbox kbd{font-size:10px;background:var(--bg);border:1px solid var(--border);padding:3px;border-radius:4px;color:#aaa7b6;white-space:nowrap}.icon-btn{border:0;background:transparent;display:inline-flex;justify-content:center;align-items:center;width:34px;height:34px;border-radius:8px;color:#848093;position:relative}.icon-btn:hover{background:var(--primary-soft);color:var(--primary)}.notification-dot{width:5px;height:5px;border-radius:50%;background:#f1957c;position:absolute;top:5px;right:8px;border:1px solid #fff}.topbar-language{display:flex;align-items:center;gap:7px;border:0;background:transparent;font-size:11px;color:#737082;padding:8px}.topbar-separator{height:26px;width:1px;background:var(--border)}.mobile-toggle{display:none}.main{padding:30px 36px 22px;max-width:1610px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:27px}.page-heading h1{font-size:25px;font-weight:650;letter-spacing:-.7px;margin:0 0 8px;line-height:1.3}.page-heading p{color:var(--muted);font-size:11px;margin:0;line-height:1.6}.heading-actions{display:flex;gap:10px;align-items:center}.btn{border:1px solid var(--border);background:var(--primary-soft);border-radius:8px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;font-size:11px;font-weight:550;line-height:1.4;white-space:nowrap;transition:.15s}.btn:hover{border-color:var(--primary);background:var(--primary-soft)}.btn .icon{width:16px;height:16px}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 6px #6958e815}.btn.primary:hover{background:var(--primary-dark)}.btn.danger{background:#fff0f1;border-color:#fcdde2;color:#b84560}.btn.small{padding:7px 11px;min-height:32px;font-size:10px}.btn.ghost{border-color:transparent;background:transparent;color:var(--primary);padding:7px 0}.hero{border-radius:var(--radius);background:linear-gradient(115deg,#f0ecff 0%,#eae7fd 52%,#e0eafa 100%);min-height:185px;padding:28px 30px;position:relative;overflow:hidden;margin-bottom:24px;display:flex;align-items:center}.hero-copy{position:relative;z-index:2}.eyebrow{display:flex;align-items:center;gap:6px;letter-spacing:1.4px;font-size:9px;font-weight:650;color:#8070b9;margin-bottom:13px}.eyebrow .icon{width:13px;height:13px}.hero h2{font-size:25px;font-weight:620;letter-spacing:-.8px;line-height:1.3;margin:0 0 9px;color:#373051}.hero p{color:#7d748f;font-size:11px;line-height:1.7;margin:0 0 17px}.hero .btn{background:var(--primary-soft);border:0;color:var(--text);min-height:33px;font-size:10px}.hero-art{position:absolute;right:0;bottom:-3px;width:41%;height:100%;opacity:.95}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:24px}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;min-height:139px;box-shadow:var(--shadow);transition:transform .18s}.stat-card:hover{transform:translateY(-2px)}.stat-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#777287;margin-bottom:13px}.stat-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#eeebff;color:#8d78e5}.stat-icon .icon{width:17px;height:17px}.stat-icon.orange{background:#fff1e7;color:#e5a276}.stat-icon.teal{background:#e9f5ef;color:#6cb39a}.stat-icon.blue{background:#eaf0fb;color:#87a0d2}.stat-value{font-size:28px;letter-spacing:-1px;font-weight:600;line-height:1;margin:0 0 12px}.stat-value small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0}.stat-caption{font-size:9px;color:#928b9d;display:flex;gap:6px;align-items:center}.stat-caption .positive{color:#4b9a7d}.stat-caption .highlight{color:#ab834e}.stat-caption .icon{width:12px;height:12px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:22px;align-items:start}.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:21px 22px 0;margin-bottom:17px}.panel-head h2,.section-heading h2{font-size:13px;margin:0;font-weight:650;letter-spacing:-.1px}.panel-head p{font-size:10px;color:var(--muted);margin:5px 0 0}.panel-head .btn.ghost{font-size:10px}.panel-head .btn.ghost .icon{width:13px}.panel-body{padding:0 22px 20px}.chart-card{height:305px}.chart-summary{display:flex;align-items:center;gap:11px;margin:0 22px 0}.chart-summary strong{font-size:23px;font-weight:600;letter-spacing:-.7px}.chart-summary small{font-size:9px;color:#849384;background:#eef8f2;padding:4px 6px;border-radius:5px}.chart-legend{display:flex;gap:15px;margin-left:auto;color:var(--muted);font-size:9px}.legend-dot{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px;background:#8774e9}.legend-dot.pale{background:#e8e1fc}.chart-container{padding:4px 17px 0;height:211px}.chart-container svg{width:100%;height:100%}.task-card{min-height:305px}.task-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid var(--border)}.task-row:last-child{border-bottom:0}.task-icon{width:35px;height:35px;border-radius:9px;display:grid;place-items:center;color:#a993d8;background:#f3eefd}.task-icon .icon{width:17px}.task-icon.amber{background:#fff4e6;color:#d5a166}.task-icon.coral{background:#fff0ec;color:#dba28b}.task-info{flex:1}.task-info strong{font-size:11px;font-weight:550;display:block}.task-info span{font-size:9px;color:var(--muted);display:block;margin-top:5px}.task-row>.icon{width:15px;color:#aca6b6}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:5px 7px;font-size:9px;font-weight:500;white-space:nowrap;color:#858093;background:#f1eff5}.badge:before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}.badge.submitted{color:#6488b3;background:#edf4fc}.badge.under-review,.badge.pending,.badge.issued{color:#b28645;background:#fff5e5}.badge.approved,.badge.paid,.badge.available,.badge.confirmed{color:#3c9373;background:#eaf6ef}.badge.active,.badge.leased,.badge.completed{color:#538e8a;background:#e9f5f3}.badge.rejected,.badge.overdue,.badge.disputed{color:#c0787d;background:#fceff0}.badge.manual,.badge.application-in-progress{color:#8d73bd;background:#f2edfa}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th{background:#fbfbfd;color:#9a94a5;font-size:9px;font-weight:500;padding:12px 20px;border-block:1px solid var(--border);white-space:nowrap}.data-table td{padding:14px 20px;font-size:10px;border-bottom:1px solid var(--border);white-space:nowrap}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:#fcfbff}.person{display:flex;align-items:center;gap:9px}.person strong{display:block;font-size:10px;font-weight:550}.person small{display:block;color:#a19aa9;font-size:8px;margin-top:4px}.person .avatar{width:30px;height:30px;font-size:9px}.table-property{font-size:10px;font-weight:500}.table-property small{display:block;color:#a19aa9;font-size:8px;margin-top:4px}.table-action{border:1px solid var(--border);border-radius:6px;background:var(--primary-soft);color:var(--text);padding:6px 9px;font-size:9px}.messages-preview .message-row{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border)}.messages-preview .message-row:last-child{border-bottom:0}.message-copy{min-width:0;flex:1}.message-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:1px 0 5px}.message-title strong{font-size:10px;font-weight:550}.message-title time{font-size:8px;color:#aba4b2}.message-copy p{font-size:9px;color:#9a93a2;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;line-height:1.6}.unread-dot{width:5px;height:5px;border-radius:50%;background:var(--primary);margin-top:8px}.portfolio-section{margin-top:25px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-heading span{font-size:10px;color:var(--muted);font-weight:400;margin-left:8px}.property-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.property-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;text-align:left;padding:0;display:block;width:100%}.property-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #3429660c}.property-photo{position:relative;height:165px;background:#e9e5ed}.property-photo img{width:100%;height:100%;object-fit:cover}.property-photo .badge{position:absolute;left:13px;top:13px;background:#fffc;backdrop-filter:blur(8px);padding:6px 9px}.property-photo .property-type{position:absolute;right:12px;bottom:12px;background:#27233170;color:#fff;border-radius:5px;padding:5px 8px;font-size:9px;backdrop-filter:blur(6px)}.property-info{padding:16px 17px}.property-info h3{font-size:12px;font-weight:600;margin:0 0 6px}.property-address{font-size:9px;color:#9a94a4;display:flex;gap:4px;align-items:center}.property-address .icon{width:12px;height:12px}.property-features{display:flex;gap:14px;margin:14px 0;padding-bottom:13px;border-bottom:1px solid var(--border);font-size:9px;color:#8d8599}.property-features>span{display:flex;align-items:center;gap:5px}.property-features .icon{width:13px;height:13px}.property-price{display:flex;justify-content:space-between;align-items:center}.property-price strong{color:#6e58b1;font-weight:600;font-size:15px;letter-spacing:-.2px}.property-price small{font-size:9px;color:#a69dac;font-weight:400;letter-spacing:0}.property-price>.icon{width:16px;color:#b5abba}.footer{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#a39daa;border-top:1px solid var(--border);padding:20px 0 0;margin-top:28px}.footer span{display:flex;align-items:center;gap:5px}.footer .icon{width:11px;height:11px}.filters{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}.filter-tabs{display:flex;gap:5px;flex-wrap:wrap}.filter-tab{border:1px solid transparent;background:transparent;color:var(--muted);padding:9px 13px;font-size:11px;border-radius:7px}.filter-tab.active{background:var(--card);color:var(--primary);border-color:#e4dff4;box-shadow:0 2px 4px #00000003}.filter-controls{display:flex;gap:8px}.filter-controls select{font-size:10px;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:7px;color:var(--muted)}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.empty .icon{width:36px;height:36px;color:#b1a4dd;margin-bottom:15px}.empty h3{color:var(--text);font-weight:550;font-size:16px;margin:0 0 8px}.empty p{font-size:12px;line-height:1.7;margin:0 0 20px}.list-footer{font-size:10px;color:var(--muted);padding:17px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:500}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{width:100%;border:1px solid #e4dfed;background:var(--card);color:var(--text);border-radius:7px;padding:11px 12px;font-size:12px;min-height:40px}.field textarea{min-height:85px;resize:vertical}.field small{color:var(--muted);font-size:10px;font-weight:400;line-height:1.5}.form-section{font-size:13px;font-weight:600;border-bottom:1px solid var(--border);padding-bottom:12px;margin:26px 0 18px}.check-field{display:flex;align-items:flex-start;gap:9px;font-size:11px;color:var(--muted);line-height:1.7;margin:12px 0}.check-field input{margin-top:4px;accent-color:var(--primary)}dialog{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:20px;padding:0;width:min(600px,calc(100% - 32px));max-height:88vh;box-shadow:0 30px 100px #1e173d33}dialog::backdrop{background:#24203955;backdrop-filter:blur(4px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:3}.modal-head h2{font-size:18px;font-weight:600;margin:0}.modal-body{padding:24px 26px}.modal-body p{font-size:12px;line-height:1.75;color:var(--muted)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.form-error{color:#ae445b;background:#fff0f2;font-size:12px;border-radius:8px;padding:12px;line-height:1.5;margin:0 0 16px}.form-error:empty{display:none}.notice{background:#f6f3fc;color:#8672a1;border:1px solid #eae2f5;padding:13px 15px;border-radius:9px;font-size:11px;line-height:1.7;margin:15px 0;display:flex;gap:10px;align-items:flex-start}.notice.warning{color:#9a7a45;background:#fff8eb;border-color:#f1e8d2}.notice .icon{width:16px;height:16px;margin-top:1px}.detail-hero{width:100%;height:240px;object-fit:cover;border-radius:10px}.detail-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px}.detail-heading h3{margin:0 0 6px;font-size:20px}.detail-heading strong{color:var(--primary);font-size:22px;white-space:nowrap}.detail-heading strong small{font-size:10px;font-weight:400;color:var(--muted)}.detail-values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--bg);padding:15px;border-radius:10px;margin:20px 0;font-size:11px}.detail-values small{display:block;color:var(--muted);font-size:9px;margin-bottom:6px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:10px;color:var(--muted)}.tabs{display:flex;overflow:auto;gap:24px;border-bottom:1px solid var(--border);margin-bottom:20px}.tab{border:0;background:transparent;padding:13px 0;color:var(--muted);font-size:12px;white-space:nowrap;border-bottom:2px solid transparent}.tab.active{color:var(--primary);border-color:var(--primary)}.application-layout{display:grid;grid-template-columns:1fr 300px;gap:22px}.application-content{padding:24px}.application-sidebar .panel{margin-bottom:18px}.summary-item{display:flex;justify-content:space-between;gap:15px;font-size:11px;margin:15px 0;color:var(--muted)}.summary-item strong{color:var(--text);font-weight:500;text-align:right}.summary-title{font-size:12px;font-weight:600;margin:20px 0 10px}.progress-track{height:5px;border-radius:5px;background:var(--border);overflow:hidden;margin:12px 0}.progress-track>span{display:block;height:100%;background:var(--primary);border-radius:5px}.sticky-actions{position:sticky;bottom:15px;background:var(--card);padding:17px 20px;border:1px solid var(--border);border-radius:12px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 5px 30px #30245c12}.sticky-actions small{color:var(--muted);font-size:10px}.conversation-layout{display:grid;grid-template-columns:320px 1fr;min-height:580px;height:calc(100vh - 260px);overflow:hidden}.conversation-list{border-right:1px solid var(--border);overflow:auto}.conversation-list-header{padding:22px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border)}.conversation-button{display:flex;align-items:flex-start;text-align:left;gap:12px;border:0;border-bottom:1px solid var(--border);padding:21px;background:var(--primary-soft);width:100%}.conversation-button.active{background:#f7f4ff}.conversation-button .message-title{display:block}.conversation-button .message-copy p{max-width:190px}.conversation-button .message-title time{display:block;margin-top:6px}.thread{display:flex;flex-direction:column;min-height:0}.thread-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--border)}.thread-head strong{font-size:12px;display:block}.thread-head small{font-size:10px;color:var(--muted);display:block;margin-top:5px}.thread-messages{padding:26px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:18px}.bubble{max-width:80%;align-self:flex-start}.bubble.mine{align-self:flex-end}.bubble p{padding:13px 17px;border-radius:12px 12px 12px 0;background:var(--bg);font-size:12px;line-height:1.7;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.bubble.mine p{background:var(--primary-soft);color:#635190;border-radius:12px 12px 0 12px}.bubble small{display:block;font-size:9px;color:#a098ac;margin-top:6px}.bubble.mine small{text-align:right}.message-form{padding:18px 24px;border-top:1px solid var(--border);display:flex;gap:12px}.message-form input{border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:12px 14px;min-width:0;flex:1;font-size:12px}.utility-preview{background:#f6f3ff;padding:20px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;margin-top:20px}.utility-preview small{font-size:11px;color:#8d7fa8}.utility-preview strong{font-size:25px;color:var(--primary)}.document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.document-card{padding:22px}.document-icon{width:44px;height:50px;background:#f2ecff;color:#9881c5;border-radius:9px;display:grid;place-items:center;margin-bottom:17px}.document-card h3{font-size:12px;overflow-wrap:anywhere}.document-card p{font-size:10px;color:var(--muted)}.settings-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.settings-panel{padding:25px}.settings-panel h2{font-size:15px;margin:0 0 23px}.settings-panel p{color:var(--muted);font-size:12px;line-height:1.8}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.pricing-card{padding:30px 24px;position:relative}.pricing-card.featured{border:1px solid #b7a8ee;background:linear-gradient(#faf8ff,#fff)}.pricing-card .eyebrow{margin:0 0 20px}.pricing-card h2{font-size:20px;font-weight:550;margin:0 0 10px}.pricing-card .price{font-size:35px;font-weight:600;letter-spacing:-1px;margin:20px 0}.pricing-card .price small{font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}.pricing-card ul{list-style:none;padding:0;margin:24px 0}.pricing-card li{font-size:11px;color:var(--muted);margin:17px 0;display:flex;gap:8px;align-items:center}.pricing-card li .icon{width:15px;color:#8a74c1}.pricing-card .btn{width:100%}.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-art{background:linear-gradient(135deg,#e9e2fe,#e2eef8);padding:50px;display:flex;flex-direction:column;justify-content:center}.login-art .brand{padding:0;position:absolute;top:45px}.login-art h1{font-size:48px;letter-spacing:-2px;line-height:1.2;max-width:500px;font-weight:600}.login-art p{font-size:15px;line-height:1.8;color:#8a7c9f;max-width:390px}.login-art svg.hero-house{width:90%;height:260px}.login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--card)}.login-inner{width:360px}.login-inner h2{font-size:27px;letter-spacing:-.8px;font-weight:600;margin-bottom:10px}.login-inner>p{font-size:12px;color:var(--muted);margin-bottom:28px}.login-inner .field{margin-bottom:18px}.login-inner .btn.primary{width:100%;margin-top:10px}.login-inner .login-switch{font-size:11px;color:var(--muted);text-align:center;margin-top:24px}.login-switch a{color:var(--primary)}.demo-access{border-top:1px solid var(--border);padding-top:22px;margin-top:28px}.demo-access>span{font-size:10px;color:var(--muted);display:block;text-align:center;margin-bottom:12px}.demo-access>div{display:flex;gap:10px}.demo-access .btn{flex:1}.public-header{background:var(--card);padding:25px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.public-header nav{display:flex;gap:28px;align-items:center;font-size:12px}.public-main{padding:50px 6%;max-width:1400px;margin:auto}.public-main h1{font-size:38px;letter-spacing:-1px;font-weight:600}.public-main>p{color:var(--muted)}.public-main .property-grid{margin-top:30px}#toast{position:fixed;bottom:25px;left:auto;right:20px;transform:translateY(20px);padding:14px 20px;background:#373047;color:#fff;border-radius:10px;font-size:12px;box-shadow:0 10px 30px #0002;z-index:100;opacity:0;pointer-events:none;transition:.2s;max-width:90vw}#toast.visible{opacity:1;transform:translateY(0)}.loading{height:250px;display:grid;place-items:center;color:var(--muted)}.loading:before{content:'';width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.notification-item{padding:16px 0;border-bottom:1px solid var(--border)}.notification-item strong{font-size:12px}.notification-item p{font-size:11px;margin:5px 0}.notification-item time{font-size:9px;color:var(--muted)}.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;margin-bottom:20px}.receipt{text-align:center;padding:15px}.receipt .receipt-amount{font-size:36px;font-weight:600;color:var(--primary);margin:20px 0}.receipt .summary-item{padding:12px 0;border-bottom:1px solid var(--border)}.receipt>p{font-size:10px}.full-width{width:100%}.muted{color:var(--muted)}
@media(min-width:1450px){.main{padding-top:35px}.hero{min-height:200px}.property-photo{height:190px}.dashboard-grid{grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr)}.stat-card{padding:23px}.data-table td{padding-block:17px}}
@media(max-width:1180px){.sidebar{width:210px;padding-inline:12px}.shell{margin-left:210px}.main{padding:25px}.topbar{padding:0 25px}.searchbox{width:180px}.topbar-actions{gap:12px}.dashboard-grid{gap:17px;grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr)}.stats-grid{gap:12px}.stat-card{padding:16px}.stat-top{font-size:10px}.data-table th,.data-table td{padding-inline:13px}.hero-art{width:40%;right:-30px}.hero h2{font-size:23px}.chart-legend{gap:8px}.conversation-layout{grid-template-columns:270px 1fr}.application-layout{grid-template-columns:1fr 260px}.property-features{gap:9px}.hero-copy p{max-width:380px}.property-photo{height:145px}}
@media(max-width:980px){.sidebar{width:185px}.shell{margin-left:185px}.brand{font-size:22px;padding-inline:7px}.brand :is(img,.app-logo){width:31px}.nav-item{font-size:11px;padding-inline:12px}.workspace-switch{padding:9px 6px}.workspace-copy strong{font-size:10px}.workspace-copy small{font-size:9px}.topbar-language,.searchbox kbd,.topbar-separator{display:none}.topbar-actions{gap:8px}.searchbox{width:150px}.main{padding:24px 20px}.topbar{padding:0 20px}.page-heading h1{font-size:22px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card{min-height:127px}.dashboard-grid{grid-template-columns:1fr}.task-card{min-height:0}.task-card .panel-body{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 20px 15px}.task-row{align-items:flex-start;border:0}.task-row>.icon{display:none}.task-icon{width:29px;height:29px}.task-info strong{font-size:10px;line-height:1.5}.task-info span{font-size:8px}.messages-preview .panel-body{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.messages-preview .message-row{border:0}.messages-preview .message-title time{display:none}.property-grid{grid-template-columns:repeat(2,1fr)}.portfolio-section .property-card:last-child{display:none}.hero-art{opacity:.5;right:-45px}.hero-copy{max-width:90%}.application-layout,.settings-layout{grid-template-columns:1fr}.application-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:20px}.conversation-layout{grid-template-columns:220px 1fr}.conversation-button{padding:16px 12px;gap:8px}.conversation-button .message-copy p{max-width:120px}.plan-grid{gap:12px}.pricing-card{padding:22px 16px}.document-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.sidebar{transform:translateX(-100%);width:235px;transition:transform .2s;box-shadow:10px 0 60px #27223922}.sidebar.open{transform:translateX(0)}.shell{margin-left:0}.mobile-toggle{display:inline-flex}.topbar{height:66px;padding:0 18px}.breadcrumb{gap:8px;font-size:11px}.topbar-actions{gap:6px}.searchbox{display:none}.topbar-actions .help-button{display:none}.main{padding:24px 18px}.page-heading{align-items:flex-start;margin-bottom:22px;gap:10px}.page-heading h1{font-size:22px;margin-bottom:7px}.page-heading p{font-size:10px;max-width:210px}.heading-actions .date-button{display:none}.heading-actions .btn{font-size:10px;padding:9px 11px}.hero{padding:24px;min-height:205px;margin-bottom:19px}.hero h2{font-size:22px;max-width:230px}.hero p{font-size:10px;max-width:220px}.hero-art{width:63%;right:-58px;opacity:.47}.eyebrow{font-size:8px}.stats-grid{gap:12px;margin-bottom:20px}.stat-card{padding:15px}.stat-top{font-size:10px;gap:6px;margin-bottom:10px}.stat-icon{width:27px;height:27px}.stat-value{font-size:26px;margin-bottom:10px}.stat-caption{font-size:8px}.stat-caption .icon{display:none}.panel-head{padding:19px 18px 0}.panel-head h2{font-size:12px}.panel-body{padding-inline:18px}.chart-summary{margin-inline:18px}.chart-summary strong{font-size:21px}.chart-summary small{font-size:8px}.chart-legend{font-size:8px;gap:6px}.chart-container{padding-inline:8px}.task-card .panel-body{display:block;padding-inline:18px}.task-row{border-bottom:1px solid var(--border);align-items:center;padding-block:12px}.task-row>.icon{display:block}.task-icon{width:33px;height:33px}.task-info strong{font-size:11px}.task-info span{font-size:9px}.messages-preview .panel-body{display:block}.messages-preview .message-row{border-bottom:1px solid var(--border)}.messages-preview .message-title time{display:block}.message-title strong{font-size:11px}.message-copy p{font-size:10px}.property-grid{grid-template-columns:1fr}.portfolio-section .property-card:last-child{display:block}.property-photo{height:190px}.property-info h3{font-size:14px}.property-address,.property-features{font-size:11px}.property-price strong{font-size:18px}.footer{font-size:8px}.footer span:last-child{display:none}.application-sidebar{grid-template-columns:1fr}.application-content{padding:18px}.form-grid{gap:16px;grid-template-columns:1fr}.field.full{grid-column:auto}.form-grid.two{grid-template-columns:1fr 1fr}.sticky-actions{flex-wrap:wrap;padding:13px}.sticky-actions small{width:100%}.conversation-layout{grid-template-columns:1fr;height:auto;min-height:600px}.conversation-list{max-height:190px;border-right:0;border-bottom:1px solid var(--border)}.conversation-list-header{display:none}.conversation-button{padding:13px 18px}.conversation-button .message-copy p{max-width:280px}.conversation-button .message-title time{display:none}.thread{height:480px}.thread-messages{padding:18px}.thread-head{padding:15px 18px}.message-form{padding:14px}.bubble{max-width:90%}.document-grid,.plan-grid{grid-template-columns:1fr}.login-layout{grid-template-columns:1fr}.login-art{display:none}.login-form{padding:35px 25px;min-height:100vh}.login-inner{max-width:360px;width:100%}.public-header{padding:20px}.public-header .brand{font-size:22px}.public-header nav{gap:12px;font-size:11px}.public-header nav a:first-child{display:none}.public-main{padding:30px 20px}.public-main h1{font-size:29px}.modal-head{padding:18px 20px}.modal-body{padding:20px}.detail-hero{height:185px}.detail-heading h3{font-size:17px}.detail-heading strong{font-size:19px}.filters{gap:10px}.filter-tab{font-size:10px;padding:8px 10px}#toast{left:auto;right:12px}.table-wrap .data-table{min-width:550px}.document-card{padding:20px}.plan-card{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-theme=dark]{--text:#e6e0f3;--muted:#a59ab5;--border:#363044;--bg:#1c1924;--card:#25212f;--primary-soft:#383046;--shadow:none}html[data-theme=dark] .workspace-switch,html[data-theme=dark] .data-table th{background:#2c2737}html[data-theme=dark] .data-table tbody tr:hover{background:#302a3d}html[data-theme=dark] .hero{background:linear-gradient(110deg,#39304f,#30374e)}html[data-theme=dark] .hero h2{color:#e5dafa}html[data-theme=dark] .hero p{color:#b7a8cb}html[data-theme=dark] .plan-card,html[data-theme=dark] .notice,html[data-theme=dark] .pricing-card.featured{background:#30283e;border-color:#453652;color:#b9a1d2}html[data-theme=dark] .table-action{background:var(--primary-soft);border-color:var(--text);color:var(--text)}html[data-theme=dark] .conversation-button.active{background:#382f47}html[data-theme=dark] .utility-preview{background:#352945}html[data-theme=dark] .field input,html[data-theme=dark] .field select,html[data-theme=dark] .field textarea{border-color:#514461}
@media print{.sidebar,.topbar,.main,dialog .modal-head,dialog .modal-actions,#toast{display:none!important}dialog{display:block!important;position:static;border:0;box-shadow:none;max-height:none;width:100%;margin:0}dialog::backdrop{background:white}body{background:white;color:#111}.modal-body{padding:0}.receipt{padding:20px}.receipt .summary-item{color:#111}a[href]:after{content:none}}
/* Keep navigation reachable on shorter laptop screens. */
.sidebar{overflow-y:auto;scrollbar-width:thin}.sidebar-bottom{flex-shrink:0}.sidebar nav{flex-shrink:0}
@media(max-width:720px){.sidebar:not(.open){visibility:hidden}.sidebar.open{visibility:visible}}
/* Language labels may be much longer than their English equivalents. */
.nav-item{min-height:44px;height:auto;padding-block:11px;line-height:1.5}
.nav-item>span:not(.count){min-width:0;overflow-wrap:anywhere}
.nav-item .count{flex-shrink:0;margin-left:0;margin-inline-start:auto}
.topbar-language{max-width:190px;min-width:0;flex-shrink:0}
.topbar-language bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-language{display:flex;justify-content:flex-end;margin-bottom:18px}
.field select{max-width:100%;text-overflow:ellipsis}
html[dir=rtl] .sidebar{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--border)}
html[dir=rtl] .shell{margin-left:0;margin-right:236px}
html[dir=rtl] .brand{direction:ltr;justify-content:flex-end}
html[dir=rtl] .hero-art{right:auto;left:0;transform:scaleX(-1)}
html[dir=rtl] .chart-legend{margin-left:0;margin-right:auto}
html[dir=rtl] .chart-container,html[dir=rtl] .receipt-amount{direction:ltr}
html[dir=rtl] .data-table,html[dir=rtl] .property-card,html[dir=rtl] .conversation-button{text-align:right}
html[dir=rtl] .conversation-list{border-right:0;border-left:1px solid var(--border)}
html[dir=rtl] .bubble.mine small{text-align:left}
html[dir=rtl] .icon-btn .notification-dot{right:auto;left:8px}
html[dir=rtl] .legend-dot{margin-right:0;margin-left:5px}
html[dir=rtl] #toast{left:auto;right:20px}
html[dir=rtl] .login-art .brand{align-self:flex-start}
@media(max-width:1180px){html[dir=rtl] .shell{margin-right:210px}}
@media(max-width:980px){html[dir=rtl] .shell{margin-right:185px}.topbar-language{display:flex;max-width:120px}.topbar-language>.icon:last-child{display:none}}
@media(max-width:720px){html[dir=rtl] .shell{margin-right:0}html[dir=rtl] .sidebar{transform:translateX(100%)}html[dir=rtl] .sidebar.open{transform:translateX(0)}html[dir=rtl] #toast{left:auto;right:12px}html[dir=rtl] .hero-art{left:-58px}html[dir=rtl] .conversation-list{border-left:0}.topbar-language{max-width:88px;padding:6px;gap:4px;font-size:10px}.topbar-language>.icon{width:15px}.breadcrumb{min-width:0}.breadcrumb>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumb>.muted{display:none}.public-header nav{gap:6px}.public-header .brand{font-size:18px;gap:6px}.public-header .brand :is(img,.app-logo){width:27px}}
/* English content keeps its punctuation order while the surrounding shell mirrors. */
html[dir=rtl] main[lang=en] :is(h1,h2,h3,p,.stat-top,.stat-caption,.task-info,.summary-item){unicode-bidi:plaintext}
@media(max-width:720px){.public-header{display:grid;grid-template-columns:1fr;gap:12px}.public-header nav{width:100%;justify-content:space-between}.public-header nav a[href="#browse"]{display:none}.public-header nav .topbar-language{max-width:140px}}
/* The language list opens at its trigger without a modal or backdrop. */
.language-picker{position:relative;flex-shrink:0}
.language-menu{position:fixed;z-index:70;overflow-y:auto;overscroll-behavior:contain;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 36px #27213a26;scrollbar-width:thin}
.language-menu[hidden]{display:none}
.language-option{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:48px;border:0;border-radius:7px;padding:9px 12px;text-align:left;direction:ltr;background:transparent;color:var(--text)}
.language-menu{scroll-padding-top:76px}
.language-option[data-value="en"]{position:sticky;top:0;z-index:1;background:var(--primary-soft);box-shadow:0 1px 0 var(--border)}
.language-option:hover,.language-option:focus-visible{background:var(--bg)}
.language-option[aria-checked=true]{background:var(--primary-soft);color:var(--primary)}
.language-option bdi{font-size:13px;line-height:1.6}
.language-option small{display:block;font-size:10px;color:var(--muted);margin-top:2px;text-align:start}
.language-option .icon{width:16px;height:16px}
.language-option:not([aria-checked=true])>.icon{display:none}
.language-option[aria-checked=true]>.icon{margin-inline-start:auto}
.language-menu[aria-busy=true]{opacity:.65;pointer-events:none}
.demo-access>.demo-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.demo-links .btn{min-width:0;white-space:normal;text-align:center;min-height:42px;padding:10px 8px}
.demo-links .btn:last-child:nth-child(odd){grid-column:1/-1}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.account-picker{position:relative;flex-shrink:0}
.account-menu{position:fixed;z-index:70;overflow:auto;padding:7px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 36px #27213a26}
.account-menu[hidden]{display:none}
.account-menu-heading{display:flex;align-items:center;gap:10px;padding:12px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:6px}
.account-menu-heading>div{min-width:0}.account-menu-heading strong{display:block;font-size:12px}.account-menu-heading small{display:block;font-size:10px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}
.account-option{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px;border:0;border-radius:7px;background:transparent;color:var(--text);font-size:12px;text-align:start}
.account-option:hover,.account-option:focus-visible{background:var(--primary-soft);color:var(--primary)}.account-option .icon{width:17px;height:17px}.account-signout{color:#b84560;border-top:1px solid var(--border);margin-top:5px}
.profile-photo-form{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:28px}.profile-photo-display .avatar{width:86px;height:86px;font-size:25px}.profile-photo-controls{flex:1;min-width:200px}.profile-photo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.profile-photo-form .form-error{width:100%;margin:0}.profile-photo-controls input{padding:8px;font-size:11px}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.theme-option{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--primary-soft);color:var(--text);font-size:12px;min-height:90px}.theme-option[aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary)}.theme-swatch{display:block;height:42px;border-radius:5px;margin-bottom:10px;border:1px solid #b7b0c1;background:linear-gradient(90deg,#fff 25%,#f1f0f5 25%)}.theme-swatch.dark{background:linear-gradient(90deg,#2c243a 25%,#191620 25%)}.theme-swatch.system{background:linear-gradient(90deg,#f1f0f5 50%,#25212f 50%)}
@media(max-width:720px){.profile-photo-form{align-items:flex-start}.profile-photo-controls{min-width:0;flex-basis:100%}}
.lease-modal-property{font-size:12px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.lease-modal-head #modal-title{flex:0 0 auto}
/* Consistent decision colors for page actions and popup confirmation buttons. */
html :is([data-action="application-action"][data-value="approve"],#rental-approval-form button[type="submit"],button[form="rental-approval-form"],#approve-application-notes-form button[type="submit"],button[form="approve-application-notes-form"],#decision-form[data-action-name="approve"] button[type="submit"],body:has(#decision-form[data-action-name="approve"]) button[form="decision-form"],#rental-lease-decision-form[data-decision="approve"] button[type="submit"],body:has(#rental-lease-decision-form[data-decision="approve"]) button[form="rental-lease-decision-form"]){background:#21834c;border-color:#21834c;color:#fff}
html :is([data-action="application-action"][data-value="approve"],#rental-approval-form button[type="submit"],button[form="rental-approval-form"],#approve-application-notes-form button[type="submit"],button[form="approve-application-notes-form"],#decision-form[data-action-name="approve"] button[type="submit"],body:has(#decision-form[data-action-name="approve"]) button[form="decision-form"],#rental-lease-decision-form[data-decision="approve"] button[type="submit"],body:has(#rental-lease-decision-form[data-decision="approve"]) button[form="rental-lease-decision-form"]):hover{background:#196b3c;border-color:#196b3c;color:#fff}
html :is(#rental-lease-decision-form[data-decision="reject"] button[type="submit"],body:has(#rental-lease-decision-form[data-decision="reject"]) button[form="rental-lease-decision-form"]){background:#b42332;border-color:#b42332;color:#fff}
html :is(#rental-lease-decision-form[data-decision="reject"] button[type="submit"],body:has(#rental-lease-decision-form[data-decision="reject"]) button[form="rental-lease-decision-form"]):hover{background:#921c29;border-color:#921c29;color:#fff}
/* Grid approve/reject/withdraw icons are unfilled; the agreement popup keeps solid green/red buttons. */
/* Application view: Reject is solid red (the applications grid has no reject control). */
html .btn.danger[data-action="application-action"][data-value="reject"]{background:#b42332;border-color:#b42332;color:#fff}html .btn.danger[data-action="application-action"][data-value="reject"]:is(:hover,:focus-visible){background:#921c29;border-color:#921c29;color:#fff}
html .icon-btn[data-action="rental-lease-row-withdraw"]:is(*,:hover,:focus-visible){background:transparent;color:#b42332}
html :is(.icon-btn,.btn,.btn:not(.danger):not(.ghost):not(.chat-sound-button)):is([data-action="rental-lease-row-approve"]):is(*,:hover,:focus-visible){background:transparent;border-color:#21834c;color:#21834c}
html :is(.btn,.btn:not(.danger):not(.ghost):not(.chat-sound-button))[data-action="rental-lease-approve"]{background:#21834c;border-color:#21834c;color:#fff}html :is(.btn,.btn:not(.danger):not(.ghost):not(.chat-sound-button))[data-action="rental-lease-approve"]:is(:hover,:focus-visible){background:#196b3c;border-color:#196b3c;color:#fff}
html :is(.icon-btn,.btn,.btn:not(.danger):not(.ghost):not(.chat-sound-button)):is([data-action="rental-lease-row-reject"]):is(*,:hover,:focus-visible){background:transparent;border-color:#b42332;color:#b42332}
html :is(.btn,.btn:not(.danger):not(.ghost):not(.chat-sound-button))[data-action="rental-lease-reject"]{background:#b42332;border-color:#b42332;color:#fff}html :is(.btn,.btn:not(.danger):not(.ghost):not(.chat-sound-button))[data-action="rental-lease-reject"]:is(:hover,:focus-visible){background:#921c29;border-color:#921c29;color:#fff}
html body button.btn[data-action="rental-lease-reset"],html body button.btn[data-action="rental-lease-reset"]:hover{color:#e0b400}
.lease-detail-popup{width:min(780px,calc(100% - 32px))}
.lease-detail-popup.lease-signature-popup{width:min(900px,calc(100% - 32px))}
.lease-signature-popup .lease-signer-details{gap:12px}.lease-signature-popup .signature-section{margin-top:0}.lease-signature-popup .signature-heading h3{margin-top:0}
.lease-signature-popup :is(.field>span,.field label,#signature-help,#signature-status,.check-field){font-size:16px;line-height:1.5}
.lease-signature-popup :is(#signature-help,#signature-status,.check-field,.signature-tool-actions .icon-btn){color:var(--text)}.lease-signature-popup .check-field{display:flex;align-items:center;gap:10px}.lease-signature-popup .check-field input[type="checkbox"]{margin:0}
.lease-signature-popup .field input[name="signature"]{font-size:16px}
.lease-signature-popup .modal-head>.popup-error-summary{flex:1 1 240px;min-width:0;margin:0;padding:6px 10px;font-size:14px;line-height:1.4;max-height:64px;overflow:auto;cursor:pointer}.lease-signature-popup form .form-error{display:none}
.lease-signature-popup .modal-head .btn{min-height:40px;padding:10px 15px;font-size:11px;line-height:1.4;width:auto;flex-grow:0}
.lease-detail-popup:has(.lease-contact-status){width:min(1180px,calc(100% - 32px))}
.lease-detail-popup .lease-contact-table{border:1px solid var(--border);border-radius:10px}
.lease-detail-popup .lease-contact-status{min-width:1060px;width:100%;table-layout:auto;font-size:16px;line-height:1.5}
.lease-detail-popup .lease-contact-status th{font-size:15px;padding:12px 14px;white-space:normal}
.lease-detail-popup .lease-contact-status td{font-size:16px;padding:12px 14px;vertical-align:middle}
.lease-detail-popup .lease-contact-status :is(.badge,small){font-size:14px}
.supporting-document-list.lease-document-cards{grid-template-columns:repeat(auto-fill,minmax(112px,132px));gap:6px}
.lease-document-cards .supporting-document{min-height:0;padding:34px 6px 6px;gap:2px;justify-content:flex-start}
.lease-document-cards .supporting-document-name{display:none}
.lease-document-cards .supporting-document-type{position:absolute;top:10px;left:40px;right:8px;width:auto;min-height:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lease-document-cards .supporting-document-actions{position:absolute;inset:4px auto auto 4px;padding:0;opacity:1;pointer-events:auto}
.lease-document-cards .supporting-document-download{min-width:30px;min-height:30px;width:30px;height:30px;padding:5px}
html :is([data-action="application-action"][data-value="withdraw"],[data-action="rental-lease-withdraw"],button[form="rental-lease-withdraw-form"],#rental-lease-withdraw-form button[type="submit"],#decision-form[data-action-name="withdraw"] button[type="submit"],body:has(#decision-form[data-action-name="withdraw"]) button[form="decision-form"]){background:#b42332;border-color:#b42332;color:#fff}
html :is([data-action="application-action"][data-value="withdraw"],[data-action="rental-lease-withdraw"],button[form="rental-lease-withdraw-form"],#rental-lease-withdraw-form button[type="submit"],#decision-form[data-action-name="withdraw"] button[type="submit"],body:has(#decision-form[data-action-name="withdraw"]) button[form="decision-form"]):hover{background:#921c29;border-color:#921c29;color:#fff}
.lease-supporting-documents,.lease-contact-information{margin:24px 0;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.lease-signature-information,.lease-current-signature{margin:24px 0;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.lease-contact-information h3,.lease-signature-information h3,.lease-current-signature h3{margin-top:0;margin-bottom:12px}
.lease-party-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.lease-party-card{display:grid;gap:5px;min-width:0;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.lease-party-card small{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.lease-party-card strong,.lease-party-card span{overflow-wrap:anywhere}.lease-signature-preview{max-width:100%;margin-top:4px}.lease-signature-preview .signature-preview{max-width:100%;height:auto}
@media(max-width:540px){.lease-party-grid{grid-template-columns:1fr}}
.lease-supporting-documents h3,.lease-contact-information h3{margin-top:0;margin-bottom:12px}
.lease-tenant-documents+.lease-tenant-documents{border-top:1px solid var(--border);margin-top:18px;padding-top:18px}
.lease-tenant-documents h4{margin:0 0 12px;font-size:12px}
.lease-document-list{display:flex;flex-wrap:wrap;gap:12px}
.lease-document{display:flex;align-items:center;gap:9px;max-width:240px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--card);text-align:left}
.lease-document:hover{border-color:var(--primary);background:var(--primary-soft)}
.lease-document-icon{position:relative;display:grid;place-items:center;flex:0 0 34px;width:34px;height:38px;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--primary)}
.lease-document-icon small{position:absolute;bottom:-4px;right:-5px;padding:2px 3px;border-radius:3px;background:var(--primary);color:#fff;font-size:7px;line-height:1}
.lease-document-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
/* Bright foregrounds throughout dark mode, including legacy fixed-color labels. */
html[data-theme=dark]{--text:#fff;--muted:#fff}
html[data-theme=dark] :is(.nav-label,.nav-item,.nav-item.active,.breadcrumb .muted,.searchbox,.searchbox kbd,.icon-btn,.topbar-language,.eyebrow,.hero h2,.hero p,.stat-top,.stat-caption,.stat-caption .positive,.stat-caption .highlight,.data-table th,.person small,.table-property small,.message-title time,.message-copy p,.property-address,.property-features,.property-price strong,.property-price small,.footer,.bubble.mine p,.bubble small,.utility-preview small,.utility-preview strong,.detail-heading strong,.receipt .receipt-amount,.btn.ghost,.filter-tab.active,.table-action,.plan-card,.notice,.pricing-card.featured,.language-option[aria-checked=true],.account-option:hover,.account-option:focus-visible,.account-signout,.login-switch a){color:#fff}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#fff;opacity:1}
html[data-theme=dark] .chart-container text{fill:#fff}
html[data-theme=dark] .hero .btn{background:var(--primary-soft);color:var(--text)}
html[data-theme=dark] .chart-summary small{background:#214839;color:#fff}
html[data-theme=dark] .avatar{background:#544436;color:#fff}
html[data-theme=dark] .avatar.purple{background:#493768}
html[data-theme=dark] .avatar.green{background:#244d3c}
html[data-theme=dark] .avatar.blue{background:#2c4264}
html[data-theme=dark] .avatar.rose{background:#643549}
html[data-theme=dark] .nav-item .count{background:#44375d;color:#fff}
html[data-theme=dark] .badge{background:#443b52;color:#fff}
html[data-theme=dark] .badge.submitted{background:#28415e}
html[data-theme=dark] :is(.badge.under-review,.badge.pending,.badge.issued){background:#59431f}
html[data-theme=dark] :is(.badge.approved,.badge.paid,.badge.available,.badge.confirmed){background:#21513d}
html[data-theme=dark] :is(.badge.active,.badge.leased,.badge.completed){background:#23504d}
html[data-theme=dark] :is(.badge.rejected,.badge.overdue,.badge.disputed){background:#642e3a}
html[data-theme=dark] :is(.badge.manual,.badge.application-in-progress){background:#483465}
html[data-theme=dark] .property-photo .badge{background:#30283e;color:#fff}
html[data-theme=dark] :is(.btn.danger,.form-error){background:#642e3a;border-color:#884453;color:#fff}
html[data-theme=dark] .login-art{background:linear-gradient(135deg,#39304f,#30374e)}
html[data-theme=dark] .login-art p{color:#fff}
/* Use one consistent height for single-line form controls. */
:root{--form-control-height:36px}
.field input:not([type=file]):not([type=checkbox]):not([type=radio]),.field select{
 height:var(--form-control-height);
 min-height:var(--form-control-height);
 padding-block:0;
}

.sidebar-logout{width:100%;border:0;background:transparent;text-align:start;margin-top:4px;color:#b84560}
.sidebar-logout:hover{background:#fff0f1;color:#9f2945}
html[data-theme=dark] .sidebar-logout{color:#fff}
html[data-theme=dark] .sidebar-logout:hover{background:#642e3a;color:#fff}
/* Workspace palettes: status colors retain their existing meaning. */
[data-color=violet]{--primary:#6958e8;--primary-dark:#5545ca;--palette-soft:#eeebfd;--palette-dark:#383046;--hero-from:#f0ecff;--hero-to:#e0eafa;--hero-dark-from:#39304f;--hero-dark-to:#30374e}
[data-color=blue]{--primary:#2563eb;--primary-dark:#1d4ed8;--palette-soft:#eaf1ff;--palette-dark:#263951;--hero-from:#e8f0ff;--hero-to:#dff1fa;--hero-dark-from:#24334f;--hero-dark-to:#233e48}
[data-color=emerald]{--primary:#047857;--primary-dark:#065f46;--palette-soft:#e5f6ee;--palette-dark:#243f36;--hero-from:#e2f5eb;--hero-to:#e9f4db;--hero-dark-from:#203c33;--hero-dark-to:#34432c}
[data-color=teal]{--primary:#0f766e;--primary-dark:#115e59;--palette-soft:#e3f5f3;--palette-dark:#243f40;--hero-from:#def4f0;--hero-to:#e2f0fa;--hero-dark-from:#213d3b;--hero-dark-to:#29394c}
[data-color=rose]{--primary:#be185d;--primary-dark:#9d174d;--palette-soft:#fce9f1;--palette-dark:#452b3c;--hero-from:#fce6ee;--hero-to:#f7e8fa;--hero-dark-from:#462b38;--hero-dark-to:#3b2d49}
[data-color=amber]{--primary:#b45309;--primary-dark:#92400e;--palette-soft:#fff2df;--palette-dark:#433725;--hero-from:#fff0d9;--hero-to:#fbe7df;--hero-dark-from:#433522;--hero-dark-to:#483129}
[data-color=indigo]{--primary:#4338ca;--primary-dark:#3730a3;--palette-soft:#e9e9fd;--palette-dark:#2f2f4f;--hero-from:#ebebff;--hero-to:#e3e8fb;--hero-dark-from:#2e2f52;--hero-dark-to:#2a3350}
[data-color=sky]{--primary:#0369a1;--primary-dark:#075985;--palette-soft:#e3f2fb;--palette-dark:#233a4a;--hero-from:#e1f1fb;--hero-to:#e4f4f7;--hero-dark-from:#213a4b;--hero-dark-to:#22383f}
[data-color=cyan]{--primary:#0e7490;--primary-dark:#155e75;--palette-soft:#e1f4f8;--palette-dark:#22404a;--hero-from:#ddf3f7;--hero-to:#e6f6f1;--hero-dark-from:#1f3d47;--hero-dark-to:#213f3c}
[data-color=forest]{--primary:#15803d;--primary-dark:#166534;--palette-soft:#e5f5e9;--palette-dark:#26402d;--hero-from:#e2f4e6;--hero-to:#eef6dc;--hero-dark-from:#213d29;--hero-dark-to:#2c3d22}
[data-color=plum]{--primary:#7e22ce;--primary-dark:#6b21a8;--palette-soft:#f3e8fd;--palette-dark:#3b2c4a;--hero-from:#f2e6fd;--hero-to:#fae8f6;--hero-dark-from:#3a2950;--hero-dark-to:#432b47}
[data-color=crimson]{--primary:#b91c1c;--primary-dark:#991b1b;--palette-soft:#fde8e8;--palette-dark:#452a2a;--hero-from:#fde6e4;--hero-to:#fbeee0;--hero-dark-from:#462828;--hero-dark-to:#44322a}
html[data-color]{--primary-soft:var(--palette-soft);--bg:var(--palette-soft)}
html[data-color][data-theme=dark]{--primary-soft:var(--palette-dark);--bg:var(--palette-dark)}
html[data-color] .hero,html[data-color] .login-art{background:linear-gradient(115deg,var(--hero-from),var(--hero-to))}
html[data-color][data-theme=dark] .hero,html[data-color][data-theme=dark] .login-art{background:linear-gradient(115deg,var(--hero-dark-from),var(--hero-dark-to))}
html[data-color] :is(.plan-card,.utility-preview){background:var(--primary-soft)}
html[data-color] .legend-dot{background:var(--primary)}
html[data-color] .legend-dot.pale{background:var(--primary-soft)}
html[data-color] .theme-option[aria-pressed=true]{background:var(--primary-soft)}
html[data-color][data-theme=light] :is(.eyebrow,.property-price strong,.hero .btn,.table-action){color:var(--primary)}
html[data-color] :is(button,a,input,select,textarea):focus-visible{outline-color:var(--primary)}
.color-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.color-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--border);border-radius:10px;background:var(--primary-soft);color:var(--text);font-size:12px;min-height:87px}
.color-option[aria-pressed=true]{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:var(--palette-soft)}
html[data-theme=dark] .color-option[aria-pressed=true]{background:var(--palette-dark)}
.color-swatch{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff}
.color-swatch .icon{width:18px;height:18px}
.signature-section{margin-top:20px}.signature-section>p{font-size:11px;line-height:1.7}.signature-required{font-size:10px;font-weight:500;margin-inline-start:8px;color:var(--muted)}
.lease-signature-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.lease-signer-details{display:grid;gap:20px}.lease-signature-form-grid .signature-section{margin-top:0}@media(max-width:720px){.lease-signature-form-grid{grid-template-columns:1fr}}
#signature-pad{display:block;width:100%;height:180px;border:1px solid #afa6bd;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
#signature-pad[aria-invalid=true]{border:2px solid #bd3651}
.signature-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.signature-tools small{flex:1;min-width:180px;font-size:11px;line-height:1.6;color:var(--muted)}
.signature-tool-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;margin-inline-start:auto}.signature-tool-actions .icon-btn{flex:0 0 auto;min-width:34px;min-height:34px;padding:0}
.signature-heading .signature-tool-actions :is(#signature-undo,#signature-clear){min-width:34px;min-height:34px;padding:0;font-size:inherit}
.signature-preview{display:block;width:100%;max-height:180px;border-radius:10px;border:1px solid var(--border);background:white}
.application-questions{display:grid;gap:6px;margin:16px 0}.application-questions .field{line-height:1.6}
.application-documents{display:grid;gap:12px;margin:18px 0}.document-help{font-size:11px;line-height:1.8}.document-upload-group{border:1px solid var(--border);border-radius:10px;padding:16px}.document-upload-title{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.document-upload-group p{font-size:11px;line-height:1.7;color:var(--muted)}.document-upload-actions{display:flex;flex-wrap:wrap;gap:8px}.review-answer{font-size:12px;line-height:1.7;margin:16px 0}.review-answer p{color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0}

/* Household members retain individually scrollable, named application tabs. */
.household-add { margin: 16px 0; }
.household-add summary { width: fit-content; cursor: pointer; }
.household-add form { padding: 16px 0; }
.household-form-actions { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.household-add p { font-size: 12px; line-height: 1.7; }
.application-content .tabs { overflow-x: auto; flex-wrap: nowrap; }
.application-content .tab { flex-shrink: 0; }

/* Keep each Yes/No pair beside its question, including on narrow screens. */
.application-question { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; color: var(--text); font-size: 12px; line-height: 1.6; }
.application-question-label { overflow-wrap: anywhere; }
.application-question-options { display: flex; align-items: center; gap: 12px; }
.application-question-options label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; white-space: nowrap; }
.application-question-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }

/* Apply the selected palette to the workspace frame in every appearance mode. */
html[data-color] :is(.topbar,.public-header,.sidebar,.footer,.sidebar-footer) {
 background:var(--frame-bg,var(--primary));
 color:var(--frame-text,#fff);
 border-color:var(--frame-border,#ffffff40);
}
html[data-color] .footer { padding:20px; border-radius:10px; gap:16px; }
html[data-color] .sidebar :is(.nav-label,.nav-item,.user-copy span,.workspace-copy small,.plan-card,.plan-card p),
html[data-color] :is(.topbar,.public-header) :is(.breadcrumb .muted,.searchbox,.searchbox input,.topbar-language,.icon-btn),
html[data-color] .footer .btn.ghost { color:var(--frame-text,#fff); }
html[data-color] .sidebar-footer .icon-btn { color:var(--frame-text,#fff); flex-shrink:0; }
html[data-color] .sidebar-footer .icon-btn:is(:hover,:focus-visible) { background:var(--primary-dark); color:#fff; }
html[data-color] .topbar .searchbox input::placeholder { color:var(--frame-text,#fff); opacity:1; }
html[data-color] .sidebar :is(.workspace-switch,.workspace-icon,.plan-card),
html[data-color] .topbar .searchbox kbd { background:#ffffff14; border-color:var(--frame-border,#ffffff40); color:var(--frame-text,#fff); }
html[data-color] .sidebar :is(.nav-item:hover,.nav-item.active),
html[data-color] :is(.topbar,.public-header) .icon-btn:hover { background:var(--primary-dark); color:#fff; }
html[data-color] .sidebar .nav-item.active { box-shadow:inset 3px 0 #fff; }
html[dir=rtl][data-color] .sidebar .nav-item.active { box-shadow:inset -3px 0 #fff; }
html[data-color] .sidebar .nav-item .count { background:#fff; color:var(--primary-dark); }
html[data-color] .sidebar .nav-divider,
html[data-color] .topbar .topbar-separator { background:var(--frame-border,#ffffff40); }
html[data-color] .sidebar .plan-card .btn,
html[data-color] .public-header .btn.primary { background:var(--primary-dark); border-color:#ffffff66; color:#fff; }
html[data-color] :is(.account-menu,.language-menu) { color:var(--text); }
html[data-color] :is(.topbar,.public-header,.sidebar,.footer) :is(button,a,input):focus-visible { outline-color:var(--frame-text,#fff); }
html[data-color] :is(.account-menu,.language-menu) :is(button,a):focus-visible { outline-color:var(--primary); }

.profile-gallery { margin-top:16px; padding:14px; border:1px solid var(--border); border-radius:12px; }
.profile-gallery[hidden] { display:none; }
.profile-gallery-toolbar { display:flex; justify-content:flex-end; direction:ltr; margin-bottom:8px; }
.profile-picture-categories { display:flex; flex-wrap:nowrap; gap:0; overflow-x:auto; border-bottom:1px solid var(--border); }
.profile-picture-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px; max-height:300px; overflow-y:auto; padding:5px; }
.profile-picture-choice { display:grid; place-items:center; min-width:0; padding:4px; border:2px solid transparent; border-radius:12px; background:var(--bg); }
.profile-picture-choice img { width:100%; max-width:80px; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.profile-picture-choice:hover,.profile-picture-choice[aria-pressed=true] { border-color:var(--primary); background:var(--primary-soft); }

.household-name-link { border:0; padding:4px 0; background:transparent; color:var(--text); font:inherit; text-align:start; text-decoration:underline; text-underline-offset:3px; }
.household-name-link:hover { color:var(--primary); }

.required-mark { color:#b42336; margin-inline-start:4px; font-weight:700; }
html[data-theme=dark] .required-mark { color:#fff; }
.required-help { color:var(--muted); font-size:11px; }

/* Four supporting-document categories share one desktop row. */
.application-documents { grid-template-columns:repeat(4,minmax(0,1fr)); }
.document-upload-group { min-width:0; padding:12px; display:flex; flex-direction:column; }
.document-upload-title { flex-direction:column; align-items:flex-start; }
.document-upload-title strong { overflow-wrap:anywhere; }
.document-upload-actions { margin-top:auto; }
.document-upload-actions .btn { width:100%; white-space:normal; text-align:start; overflow-wrap:anywhere; }
@media(max-width:900px) { .application-documents { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .application-documents { grid-template-columns:1fr; } }

.floating-chat-button { position:fixed; right:22px; bottom:22px; z-index:55; width:56px; height:56px; display:grid; place-items:center; border:2px solid var(--card); border-radius:50%; background:var(--primary); color:#fff; box-shadow:0 4px 20px #0003; }
.floating-chat { position:fixed; right:22px; bottom:90px; z-index:55; width:min(390px,calc(100vw - 24px)); height:min(520px,calc(100dvh - 110px)); display:flex; flex-direction:column; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:16px; box-shadow:0 8px 40px #0003; overflow:hidden; }
.floating-chat[hidden] { display:none; }
.floating-chat-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--primary); color:#fff; }
.floating-chat-heading .icon-btn { color:#fff; }
.floating-chat-contact { margin:12px 16px; }
.floating-chat .thread-messages { padding:16px; min-height:0; }
.floating-chat .message-form { padding:12px; }
.floating-chat .message-form .btn { flex-shrink:0; }
@media(max-width:480px) { .floating-chat { right:12px; } .floating-chat-button { right:16px; bottom:16px; } }

/* Compact forms, with a persistent footer below the workspace. */
:root { --workspace-sidebar-width:236px; --workspace-footer-height:48px; }
.topbar { height:calc(var(--workspace-footer-height) + env(safe-area-inset-bottom, 0px)); }
.form-grid { gap:10px 14px; }
.field { gap:4px; }
.form-section { margin:18px 0 12px; padding-bottom:8px; }
.application-questions { gap:4px; margin:12px 0; }
/* Compact Yes/No rows in Your rental history and Employment & references. */
.application-questions { gap:0; margin:8px 0; }
.application-question { line-height:1.4; font-size:14px; }
.application-question-options label { font-size:14px; }
.application-question-options input { width:18px; height:18px; }
.application-question-options label { min-height:32px; }
.application-questions + .application-questions { margin-top:-8px; }
.application-questions > .field { margin-top:6px; }
.application-documents { gap:10px; margin:12px 0; }
.check-field { margin:8px 0; }
.settings-panel h2 { margin-bottom:16px; }
.profile-photo-form { gap:14px; margin-bottom:18px; }
.household-add form { padding:10px 0; }

.main { padding-bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + 80px); }
html[data-color] .footer {
 position:fixed; inset-inline-start:var(--workspace-sidebar-width); inset-inline-end:0; bottom:0;
 height:calc(var(--active-footer-height,var(--workspace-footer-height)) + env(safe-area-inset-bottom, 0px));
 margin:0; padding:8px 20px calc(8px + env(safe-area-inset-bottom, 0px));
 border-radius:0; gap:12px; z-index:25;
}
.footer > span { min-width:0; }
.sticky-actions { position:static; padding:12px 16px; margin-top:14px; }
.floating-chat-button { bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + env(safe-area-inset-bottom, 0px) + 12px); }
.floating-chat { bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + env(safe-area-inset-bottom, 0px) + 80px); height:min(520px,calc(100dvh - var(--active-footer-height,var(--workspace-footer-height)) - env(safe-area-inset-bottom, 0px) - 100px)); }
#toast { bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + env(safe-area-inset-bottom, 0px) + 14px); }
@media(max-width:980px) { :root { --workspace-sidebar-width:185px; } }
@media(max-width:720px) {
 :root { --workspace-sidebar-width:0px; }
 html[data-color] .footer { padding-inline:12px; gap:8px; }
}
html { scroll-padding-bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + 160px); }
.main :is(input,select,textarea,button,canvas) { scroll-margin-block:20px calc(var(--active-footer-height,var(--workspace-footer-height)) + 160px); }

/* Translated labels can be longer than their English equivalents. */
.page-heading > div,.stat-card,.hero-copy,.settings-panel,.application-content { min-width:0; }
.page-heading h1,.stat-top,.form-section,.summary-title { overflow-wrap:anywhere; }
.heading-actions { flex-wrap:wrap; }

.chat-sound-button { margin-inline-start:auto; margin-inline-end:8px; background:transparent; color:#fff; border-color:#ffffff80; }

/* Keep the account row aligned with the workspace footer while navigation scrolls. */
.sidebar { padding:0; overflow:hidden; }
.sidebar-scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; display:flex; flex-direction:column; padding:32px 18px 0; }
.sidebar-scroll > .brand,.sidebar-scroll > .workspace-switch { flex-shrink:0; }
.sidebar-footer { flex-shrink:0; height:calc(var(--workspace-footer-height) + env(safe-area-inset-bottom, 0px)); padding:0 28px env(safe-area-inset-bottom, 0px); }
.sidebar-footer .user-copy { min-width:0; }
.sidebar-footer .user-copy :is(strong,span) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:1180px) { .sidebar-scroll { padding-inline:12px; } .sidebar-footer { padding-inline:22px; } }

button.profile-photo-display { border:2px solid var(--border); border-radius:50%; padding:3px; background:var(--bg); cursor:pointer; }
button.profile-photo-display:hover { border-color:var(--primary); }
button.profile-photo-display:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

[data-color=black],[data-color=white] { --primary:#171717; --primary-dark:#000; --palette-soft:#eeeeee; --palette-dark:#343434; --hero-from:#f5f5f5; --hero-to:#ddd; --hero-dark-from:#252525; --hero-dark-to:#383838; }
html[data-color=white] { --frame-bg:#fff; --frame-text:#171717; --frame-border:#17171740; }
.color-option[data-color=white] .color-swatch { background:#fff; color:#171717; border:1px solid #777; }


html[data-color] .sidebar .nav-item.active { box-shadow:inset 3px 0 var(--frame-text,#fff); }
html[dir=rtl][data-color] .sidebar .nav-item.active { box-shadow:inset -3px 0 var(--frame-text,#fff); }

.custom-color-option { position:relative; cursor:pointer; margin:0; }
.custom-color-option input[type=color] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.custom-color-option .color-swatch { border:1px solid #777; }
.custom-color-option[data-selected=true] { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); background:var(--primary-soft); }
.custom-color-option:focus-within { outline:3px solid var(--primary); outline-offset:3px; }
.custom-color-option:has(input:disabled) { opacity:.55; cursor:wait; }

/* Carry the chosen palette through the main workspace and its surfaces. */
html[data-color] .main {
 background:var(--bg);
 --card:color-mix(in srgb, var(--palette-soft) 30%, white);
 --border:color-mix(in srgb, var(--primary) 22%, #d0ced8);
}
html[data-color][data-theme=dark] .main {
 --card:color-mix(in srgb, var(--palette-dark) 65%, #25212f);
 --border:color-mix(in srgb, var(--primary) 20%, #81788e);
}

.app-logo { object-fit:contain; flex-shrink:0; }

/* Transparent branding stays legible without a surrounding tile. */
.brand .app-logo { width:46px; height:46px; border-radius:0; }
@media (min-width:721px) and (max-width:980px) {
 .sidebar .brand { gap:7px; padding-inline:0; font-size:20px; }
 .sidebar .brand .app-logo { width:38px; height:38px; }
}
@media (max-width:720px) {
 .public-header .brand .app-logo { width:36px; height:36px; }
}

/* Use the transparent artwork as a mask so the palette colors the complete mark. */
.app-logo {
 display:inline-block;
 width:var(--logo-size,46px);
 height:var(--logo-size,46px);
 background-color:var(--primary-dark);
 -webkit-mask:url('applyrent-transparent.png') center / contain no-repeat;
 mask:url('applyrent-transparent.png') center / contain no-repeat;
}
html[data-theme=dark] .app-logo { background-color:var(--palette-soft); }
html[data-color] :is(.sidebar,.public-header) .app-logo {
 background-color:color-mix(in srgb,var(--frame-text,#fff) 88%,var(--primary) 12%);
}

.chat-unread-badge {
 position:absolute; top:-5px; right:-5px; min-width:22px; height:22px;
 padding:0 5px; display:grid; place-items:center; border:2px solid var(--card);
 border-radius:999px; background:#c62828; color:#fff; font-size:11px; font-weight:700;
}
.chat-unread-badge[hidden] { display:none; }

.chat-composer { flex-wrap:wrap; gap:8px; }
.chat-composer input[name=body] { flex:1; min-width:0; width:0; }
.chat-composer>.icon-btn { flex-shrink:0; }
.chat-composer input[hidden],.chat-file-selection[hidden] { display:none; }
.chat-file-selection { display:flex; align-items:center; gap:6px; width:100%; min-width:0; background:var(--primary-soft); padding:4px 8px; border-radius:8px; }
.chat-file-selection>span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.chat-attachment-help { width:100%; color:var(--muted); font-size:10px; }
.chat-attachment { display:flex; flex-direction:column; gap:6px; margin:4px 0 8px; padding:8px; border:1px solid currentColor; border-radius:8px; overflow-wrap:anywhere; }
.chat-attachment img { display:block; max-width:100%; width:220px; max-height:180px; object-fit:contain; border-radius:5px; }
.chat-attachment>span { min-width:0; font-size:12px; }
.chat-attachment small { display:block; }

.chat-tools { padding:6px 14px; flex-shrink:0; border-bottom:1px solid var(--border); }
.chat-pinned { display:flex; gap:6px; align-items:center; margin-top:6px; background:var(--primary-soft); border-radius:7px; }
.chat-pinned[hidden],.chat-reply-selection[hidden] { display:none; }
.chat-pin-jump { flex:1; min-width:0; text-align:start; border:0; background:transparent; padding:8px; }
.chat-pin-jump strong,.chat-pin-jump span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.chat-message-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; }
.chat-message-actions button { border:0; background:transparent; color:inherit; padding:3px 0; font-size:10px; text-decoration:underline; }
.chat-reply-quote { display:block; width:100%; text-align:start; border:0; border-inline-start:3px solid currentColor; background:#8882; color:inherit; padding:7px; margin-bottom:7px; }
.chat-reply-quote strong,.chat-reply-quote span { display:block; font-size:11px; overflow-wrap:anywhere; }
.chat-reply-selection { display:flex; align-items:center; width:100%; background:var(--primary-soft); border-radius:7px; padding:4px 8px; }
.chat-reply-selection span { flex:1; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.chat-message-focus { outline:3px solid var(--primary); outline-offset:2px; }
.chat-attachment-gallery { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.chat-attachment-gallery article { min-width:0; padding:10px; border:1px solid var(--border); border-radius:10px; }
.floating-chat .thread-messages,.thread>.thread-messages { min-height:0; }

/* Message controls are positioned from the signed-in reader's perspective. */
.thread-messages .bubble {
 position:relative; align-self:flex-start; max-width:min(80%,calc(100% - 42px));
 margin-left:0; margin-right:36px; padding:28px 12px 9px;
 background:var(--bg); border-radius:12px;
}
.thread-messages .bubble.mine {
 align-self:flex-end; margin-left:36px; margin-right:0; background:var(--primary-soft);
}
.thread-messages .bubble p,.thread-messages .bubble.mine p {
 background:transparent; padding:0; border-radius:0; color:var(--text);
}
.chat-side-reply { position:absolute; right:-36px; left:auto; top:calc(50% - 16px); width:32px; height:32px; color:var(--muted); }
.bubble.mine .chat-side-reply { left:-36px; right:auto; }
.chat-menu-toggle { position:absolute; top:0; right:2px; width:28px; height:28px; color:var(--muted); }
.chat-message-menu {
 position:fixed; inset:auto; margin:0; min-width:170px; padding:5px;
 background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px;
 box-shadow:0 8px 30px #0003;
}
.chat-message-menu:popover-open { display:grid; }
.chat-message-menu button { display:flex; align-items:center; gap:10px; border:0; background:transparent; color:inherit; text-align:start; padding:10px; border-radius:6px; font-size:12px; }
.chat-message-menu button:hover,.chat-message-menu button:focus-visible { background:var(--primary-soft); }
.chat-message-menu .icon { width:17px; height:17px; }
.chat-select-toggle { position:absolute; top:4px; left:8px; width:20px; height:20px; display:grid; place-items:center; padding:0; border:1px solid var(--muted); border-radius:50%; background:var(--card); color:transparent; }
.chat-select-toggle[aria-checked=true] { color:#fff; background:var(--primary); border-color:var(--primary); }
.chat-select-toggle .icon { width:14px; height:14px; }
.chat-select-toggle[hidden],.chat-selection-bar[hidden] { display:none; }
.thread-messages .bubble.chat-selected { box-shadow:0 0 0 2px var(--primary); }
.chat-selection-bar { display:flex; align-items:center; gap:6px; margin-top:6px; padding:4px 8px; border-radius:8px; background:var(--primary-soft); }
.chat-selection-count { flex:1; font-size:12px; }

.chat-attachment-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.chat-attachment-toolbar label,.chat-attachment-pick { display:flex; align-items:center; gap:7px; font-size:12px; }
.chat-attachment-count { flex:1; min-width:75px; font-size:12px; }
.chat-attachment-pick { margin-bottom:8px; }
.chat-attachment-selection input[type=checkbox] { width:17px; height:17px; accent-color:var(--primary); }

.floating-chat-heading { padding-left:38px; flex-shrink:0; }
.floating-chat-heading .chat-resize-handle { position:absolute; top:3px; left:3px; width:30px; height:30px; cursor:nwse-resize; touch-action:none; }
.chat-resize-handle .icon { width:16px; height:16px; }
.floating-chat.chat-resizing { user-select:none; }

.chat-attachment { color:inherit; background:transparent; text-align:start; width:100%; }
button.chat-attachment { cursor:pointer; }
.chat-gallery-header-actions { display:flex; align-items:center; gap:3px; margin-inline-start:auto; flex-wrap:wrap; }
.chat-gallery-header-actions .icon-btn { flex-shrink:0; }
.chat-attachment-gallery article.attachment-selected { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); background:var(--primary-soft); }
#modal:has(.chat-attachment-selection) .modal-head { flex-wrap:wrap; gap:8px; }

.chat-attachment-tabs { display:flex; gap:6px; overflow-x:auto; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.chat-attachment-tabs button { flex-shrink:0; padding:9px 12px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.chat-attachment-tabs button[aria-selected="true"] { background:var(--primary-soft); color:var(--primary); font-weight:600; }
.chat-attachment-tabs button:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.chat-attachment-gallery article[hidden],.chat-gallery-empty[hidden] { display:none; }

#modal:has(.chat-attachment-selection) { height:min(640px,88dvh); overflow:hidden; }
#modal:has(.chat-attachment-selection)[open] { display:flex; flex-direction:column; }
#modal:has(.chat-attachment-selection) .modal-head { flex-shrink:0; }
#modal:has(.chat-attachment-selection) .modal-body { flex:1; min-height:0; display:flex; overflow:hidden; }
.chat-attachment-selection { display:flex; flex-direction:column; min-height:0; width:100%; }
.chat-attachment-selection .chat-attachment-tabs,.chat-attachment-selection .chat-attachment-toolbar { flex-shrink:0; }
.chat-attachment-selection .chat-attachment-gallery { flex:1; min-height:0; overflow-y:auto; align-content:start; scrollbar-gutter:stable; }

.chat-video-preview { display:block; width:280px; max-width:100%; height:180px; object-fit:contain; background:#111; border-radius:5px; }
.chat-attachment-gallery .chat-video-preview { width:100%; margin:8px 0; }

.chat-attachment.chat-document-attachment { flex-direction:row; align-items:center; gap:12px; }
.chat-file-type { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; height:52px; color:var(--primary); background:var(--card); border-radius:6px; }
.chat-file-type .icon { width:34px; height:42px; }
.chat-file-type b { position:absolute; bottom:7px; left:2px; right:2px; border-radius:3px; padding:2px; background:var(--primary); color:#fff; font-size:9px; line-height:12px; text-align:center; letter-spacing:.3px; }
.chat-file-type-pdf { color:#b42318; }
.chat-file-type-pdf b { background:#b42318; }
.chat-file-type-word { color:#175cd3; }
.chat-file-type-word b { background:#175cd3; }
.chat-file-type-text { color:#475467; }
.chat-file-type-text b { background:#475467; }

.chat-file-type-excel { color:#157347; }
.chat-file-type-excel b { background:#157347; }

.property-options { margin:18px 0; padding:16px; border:1px solid var(--border); border-radius:12px; min-width:0; }
.property-options legend { font-weight:600; padding:0 6px; }
.property-owner-options{grid-column:1/-1;margin:4px 0 16px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;min-width:0}.property-owner-options legend{padding:0 6px;font-weight:650}.property-owner-options>p{margin:2px 0 10px;font-size:11px}.property-owner-list{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:12px}.property-owner-select{margin:0}.property-owner-select span{display:flex;gap:4px;align-items:baseline}.property-owner-select small{font-weight:400;color:var(--muted)}@media(max-width:540px){.property-owner-list{grid-template-columns:minmax(0,1fr)}}
.property-checks { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:12px 0; }
.property-checks label { display:flex; align-items:center; gap:7px; font-size:12px; }
.property-custom-utilities { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.property-utility-tag { display:flex; align-items:center; gap:4px; background:var(--primary-soft); padding:4px 8px; border-radius:10px; max-width:100%; }
.property-utility-tag input { border:0; background:transparent; color:var(--text); width:150px; min-width:0; }
.property-media-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:12px 0; }
.property-media-gallery img,.property-media-gallery video { display:block; width:100%; height:200px; object-fit:contain; border-radius:10px; background:var(--bg); }
.property-utility-summary { margin:16px 0; }
.property-upload-summary,.property-upload-status { overflow-wrap:anywhere; font-size:12px; }

.property-media-gallery figure { margin:0; min-width:0; }
.property-media-gallery figcaption { overflow-wrap:anywhere; font-size:12px; margin-top:6px; }
.property-media-gallery figcaption small { display:block; color:var(--muted); margin-top:3px; }

button.workspace-switch{width:100%;text-align:start;color:inherit;font:inherit;cursor:pointer}button.workspace-switch:disabled{cursor:default;opacity:1}.workspace-choice{margin-top:8px;justify-content:space-between}

/* Compact settings without hiding controls or trapping overflow. */
.main.settings-page{--form-control-height:34px;padding-top:16px;padding-bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + 14px)}
.settings-page .page-heading{margin-bottom:12px}
.settings-page .page-heading h1{margin-bottom:4px}
.settings-page .settings-layout{gap:14px;align-items:start}
.settings-page .settings-panel{padding:16px}
.settings-page .settings-panel h2{font-size:14px;margin:0 0 10px}
.settings-page .settings-panel p{margin:8px 0;font-size:11px;line-height:1.5}
.settings-page .settings-account{margin-top:14px}
.settings-page .profile-photo-form{gap:10px;margin-bottom:10px}
.settings-page .profile-photo-display .avatar{width:60px;height:60px;font-size:20px}
.settings-page .profile-photo-actions{gap:6px;margin-top:6px}
.profile-photo-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
.settings-panel .profile-photo-heading h2{margin:0;flex-shrink:0}
.profile-photo-heading small{flex:1 1 240px;color:var(--muted);font-size:10px;line-height:1.4}
.settings-page .form-grid{gap:8px 12px}
.settings-page .field{gap:3px}
.settings-page .field input,.settings-page .field select{min-height:34px;padding:7px 9px}
.settings-page .form-section{margin:12px 0 8px;padding-bottom:6px}
.settings-page .modal-actions{margin-top:10px}
.settings-page .btn{min-height:34px;padding:7px 11px}
.settings-page .color-options{gap:6px}
.settings-page .color-option{min-height:48px;padding:8px;gap:7px;flex-direction:row;font-size:11px}
.settings-page .color-swatch{width:24px;height:24px;flex-shrink:0}
.settings-page .summary-item{padding-block:8px}
@media(min-width:901px){.settings-page .settings-layout{grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr)}}
@media(max-width:600px){.main.settings-page{--form-control-height:40px}.settings-page .settings-panel{padding:14px}.settings-page .color-option{min-height:44px}.settings-page .btn{min-height:40px}.settings-page .field input,.settings-page .field select{min-height:40px}}

.workspace-name{display:flex;align-items:center;gap:10px}
.workspace-avatar{width:40px;height:40px;object-fit:cover;border-radius:9px;flex-shrink:0}
.workspace-fallback{display:inline-grid;place-items:center;background:var(--primary-soft);color:var(--primary)}
.workspace-icon .workspace-avatar{width:35px;height:35px}
.workspace-row-actions{display:flex;gap:5px;align-items:center;white-space:nowrap}
.workspace-row-actions .icon-btn{border:1px solid var(--border);color:var(--primary)}
.workspace-row-actions .workspace-danger{color:#b84560}
.workspace-create-members{display:flex;flex-wrap:wrap;gap:8px}
.workspace-image-preview .workspace-avatar{width:72px;height:72px}
#modal[open]:has(form[id^="workspace-"]){display:flex;flex-direction:column;overflow:hidden}
#modal:has(form[id^="workspace-"]) .modal-head{position:static;flex-shrink:0;gap:14px}
#modal:has(form[id^="workspace-"]) .modal-head h2{min-width:0;overflow-wrap:anywhere;line-height:1.35}
#modal:has(form[id^="workspace-"]) .modal-head .icon-btn{flex-shrink:0}
#modal:has(form[id^="workspace-"]) .modal-body{min-height:0;overflow:auto;flex:1}
#modal form[id^="workspace-"]{display:grid;gap:12px}
#modal form[id^="workspace-"] .modal-actions{margin-top:4px;flex-wrap:wrap}
#modal form[id^="workspace-"] p{margin:0}

/* Shared record-grid tools (not form, statistic, or layout grids). */
.grid-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}
.panel>.grid-toolbar{margin:0;padding:12px 16px;background:var(--primary-soft)}
.grid-toolbar label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);min-width:0}
.grid-size{flex:0 1 auto}
.grid-toolbar input,.grid-toolbar select{min-height:36px;border:1px solid var(--border);border-radius:7px;padding:7px 9px;background:var(--card);color:var(--text);min-width:0}
.grid-toolbar select{width:74px}
.data-table.record-table .grid-column-filters th{padding:6px 8px;background:var(--card)}
.grid-column-filters input{box-sizing:border-box;width:100%;min-width:0;min-height:32px;border:1px solid var(--border);border-radius:6px;padding:5px 7px;background:var(--card);color:var(--text);font:inherit;font-size:12px}
.grid-column-filters input:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;font-size:12px;color:var(--muted)}
.panel>.grid-pagination{padding:12px 16px}
.grid-pagination nav{display:flex;align-items:center;gap:10px}
.grid-empty{padding:0}
.managed-grid[hidden],.table-wrap[hidden],.grid-empty[hidden]{display:none!important}
.managed-grid [data-grid-item][hidden]{display:none!important}
.managed-grid [data-grid-item]{transition:background .15s ease,box-shadow .15s ease}
.managed-grid tbody [data-grid-item].grid-row-selected>td{background:var(--primary-soft)}
.managed-grid tbody [data-grid-item].grid-row-selected>td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
.managed-grid:not(.data-table) [data-grid-item].grid-row-selected{box-shadow:inset 0 0 0 2px var(--primary)}
.workspace-grid{width:100%;table-layout:fixed}
.table-wrap .data-table.workspace-grid{min-width:0}
.workspace-grid th,.workspace-grid td{white-space:normal;overflow-wrap:anywhere;padding:12px 8px}
.workspace-grid th:nth-child(1){width:18%}.workspace-grid th:nth-child(2){width:20%}.workspace-grid th:nth-child(3){width:13%}
.workspace-grid th:nth-child(4),.workspace-grid th:nth-child(5){width:8%}.workspace-grid th:nth-child(6){width:12%}.workspace-grid th:nth-child(7){width:21%}
.workspace-grid .workspace-name{align-items:center;gap:7px;min-width:0}.workspace-grid .workspace-name strong{min-width:0}
html .data-table.workspace-grid tbody tr.workspace-selected{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}
.workspace-grid .workspace-row-actions{flex-wrap:wrap;white-space:normal}
@media(max-width:720px){
.dashboard-page > .page-heading .date-button.btn { display:inline-flex; }
 .workspace-grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .workspace-grid thead:has(.grid-column-filters){position:static;width:auto;height:auto;overflow:visible;clip-path:none}
 .workspace-grid thead:has(.grid-column-filters) tr:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .workspace-grid thead tr.grid-column-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .workspace-grid thead tr.grid-column-filters th{display:block;width:auto;min-width:0;padding:4px}
 .workspace-grid,.workspace-grid tbody,.workspace-grid tr{display:block;width:100%}
 .workspace-grid tr{padding:12px;border-bottom:1px solid var(--border)}
 .workspace-grid td{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;padding:6px 0;border:0}
 .workspace-grid td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:11px}
 .workspace-grid td[colspan]{display:block}.workspace-grid td[colspan]::before{display:none}
 .grid-toolbar{gap:10px}.grid-toolbar label{flex-wrap:wrap}.grid-pagination{gap:8px}.grid-pagination nav{gap:6px}
}

/* Page controls and right-aligned record actions. */
.heading-actions>.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.page-heading:has(.heading-actions>.actions){flex-wrap:wrap}
.subscription-grid th:last-child,.subscription-grid td:last-child,.workspace-grid th:last-child,.workspace-grid td:last-child{text-align:right}
.subscription-row-actions,.workspace-grid .workspace-row-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px}
.subscription-row-actions .icon-btn{flex-shrink:0;border:1px solid var(--border);color:var(--primary)}
.subscription-row-actions .subscription-danger{color:#b84560}
@media(max-width:720px){.workspace-grid td:last-child::before{text-align:left}}

/* Neutral action buttons use the same solid palette as primary actions. */
html :is(.btn:not(.danger):not(.ghost):not(.chat-sound-button),.table-action,.theme-option,.color-option){
 background:var(--primary);
 border-color:var(--primary);
 color:#fff;
}
html :is(.btn:not(.danger):not(.ghost):not(.chat-sound-button),.table-action,.theme-option,.color-option):is(:hover,:focus-visible){
 background:var(--primary-dark);
 border-color:var(--primary-dark);
 color:#fff;
}
html[data-theme=dark] :is(.hero .btn,.table-action),
html[data-color] .theme-option[aria-pressed=true],
html[data-theme=dark] .color-option[aria-pressed=true],
html .custom-color-option[data-selected=true]{background:var(--primary);color:#fff}

/* Keep text-button icons compact, including tabs and inline record actions. */
.button-label-icon{width:16px;height:16px;flex-shrink:0;vertical-align:middle}
[data-button-icon]{display:inline-flex;align-items:center;gap:6px}
:is(.table-action,.filter-tab,.tab,.household-name-link)>.button-label-icon{margin-inline-end:4px}
.chat-attachment-tabs button>.button-label-icon{margin-inline-end:5px}

/* Compact record rows consistently across all table grids. */
.data-table th,.data-table.workspace-grid th{padding-block:6px}
.data-table td,.data-table.workspace-grid td{padding-block:6px;vertical-align:middle}
.data-table .icon-btn{width:28px;height:28px}
.data-table .icon-btn .icon{width:16px;height:16px}
.data-table .btn{min-height:28px;padding:5px 9px}
.data-table .table-action{padding:5px 8px}
.data-table .person .avatar{width:28px;height:28px}
.data-table .workspace-avatar{width:30px;height:30px;border-radius:7px}
.data-table .person small,.data-table .table-property small{margin-top:2px}
@media(max-width:720px){
 .workspace-grid tr{padding-block:8px}
 .data-table.workspace-grid td{padding-block:4px}
}
@media(pointer:coarse){
 .data-table .icon-btn{width:36px;height:36px}
 .data-table .btn,.data-table .table-action{min-height:36px}
}

.workspace-member-actions,.workspace-create-members{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.workspace-new-member{display:grid;gap:12px}
.workspace-new-member[hidden],.workspace-existing-member[hidden]{display:none}
.field textarea{padding-block:8px;min-height:72px}
.field input[type=file]{padding-block:6px}

/* Compact themed popup headers; workspace actions remain visible above scrolling content. */
:is(#modal,.lease-detail-popup) .modal-head{padding:10px 16px;gap:10px;background:var(--primary-soft);color:var(--text)}
:is(#modal,.lease-detail-popup) .modal-head h2{margin:0;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
#modal[open].workspace-dialog{display:flex;flex-direction:column;overflow:hidden;width:min(540px,calc(100% - 32px))!important}
#modal.workspace-dialog .modal-head{position:static;flex-shrink:0;flex-wrap:wrap;gap:10px}
#modal.workspace-dialog .modal-body{min-height:0;overflow:auto}
.workspace-modal-title{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.workspace-modal-title .workspace-avatar{width:30px;height:30px}
.workspace-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
#modal .workspace-header-actions .btn{min-height:30px;padding:6px 9px;font-size:10px}
.workspace-image-upload{display:flex;align-items:center;gap:14px;min-width:0}
.workspace-image-upload>.field{flex:1;min-width:0;margin:0}
.workspace-image-upload input{width:100%;min-width:0}
@media(max-width:600px){.workspace-header-actions{width:100%;justify-content:flex-start}#modal.workspace-dialog .modal-head{padding:10px 12px}.workspace-image-preview .workspace-avatar{width:50px;height:50px}}

/* Shared popup actions stay visible while the body scrolls. */
:is(#modal,.lease-detail-popup)[open]{display:flex;flex-direction:column;overflow:hidden}
:is(#modal,.lease-detail-popup) .modal-head{position:static;flex-shrink:0;flex-wrap:wrap;align-items:center}
:is(#modal,.lease-detail-popup) .modal-head h2{flex:1;min-width:0}
:is(#modal,.lease-detail-popup) .modal-body{min-height:0;overflow:auto;flex:1}
#modal .modal-header-actions{flex-wrap:wrap;max-width:100%}
#modal .modal-header-actions .btn{white-space:normal;text-align:center}
@media print{#modal .modal-header-actions{display:none}}

/* The post editor is a complete form, so keep it as one continuous popup instead
   of creating a second scrollbar inside the dialog. */
#modal:has(#post-form){max-height:none;overflow:visible}
#modal:has(#post-form) .modal-body{overflow:visible;flex:none}

.subscription-features{position:relative;margin-top:6px}
.subscription-features summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;min-height:var(--form-control-height);padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:12px}
.subscription-features summary::-webkit-details-marker{display:none}
.subscription-features summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.subscription-features[open] summary{border-color:var(--primary)}
.subscription-feature-options{position:absolute;inset:calc(100% + 4px) 0 auto;z-index:5;max-height:230px;overflow:auto;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 20px #0002}
.subscription-feature-options .check-field{display:flex;align-items:center;gap:9px;margin:0;padding:8px;border-radius:5px;cursor:pointer;font-size:12px}
.subscription-feature-options .check-field:hover{background:var(--primary-soft)}
.subscription-feature-options input{accent-color:var(--primary);flex-shrink:0}

.property-multiselect{position:relative;min-width:0}
.property-multiselect summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;min-height:var(--form-control-height);padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:12px}
.property-multiselect summary::-webkit-details-marker{display:none}
.property-multiselect summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.property-selection-count{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.property-multiselect[open] summary{border-color:var(--primary)}
.property-multiselect .property-checks{display:flex;flex-direction:column;gap:0;position:absolute;inset:calc(100% + 4px) 0 auto;z-index:5;max-height:220px;overflow:auto;margin:0;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 20px #0002}
.property-multiselect .property-checks label{display:flex;align-items:center;gap:9px;padding:8px;border-radius:5px;cursor:pointer;font-size:12px}
.property-multiselect .property-checks label:hover{background:var(--primary-soft)}
.property-multiselect input{accent-color:var(--primary)}

/* Property details use three columns when space permits. */
#modal:has(#property-form){width:min(960px,calc(100% - 32px))}
#property-form .property-editor-details>.form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#property-form .field{min-width:0}
#property-form .field.full{grid-column:1/-1}
@media(max-width:800px){#property-form .property-editor-details>.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#property-form .property-editor-details>.form-grid{grid-template-columns:minmax(0,1fr)}}

/* Match the property form's responsive three-column layout for plan details. */
#modal:has(#subscription-plan-form){width:min(960px,calc(100% - 32px))}
#subscription-plan-form>.form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#subscription-plan-form .field{min-width:0}
@media(max-width:800px){#subscription-plan-form>.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#subscription-plan-form>.form-grid{grid-template-columns:minmax(0,1fr)}}

/* Checkbox options must not inherit full-width text-input dimensions. */
.subscription-feature-options input[type=checkbox]{width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;flex:0 0 16px;margin:0;padding:0;appearance:auto}
.subscription-feature-options .check-field{color:var(--text);min-width:0}
.subscription-feature-options .check-field>span{display:block;min-width:0;flex:1;margin:0;font-size:12px;font-weight:400;line-height:1.5;white-space:normal;overflow-wrap:anywhere;color:var(--text)}

#property-form .property-amenities-field .property-multiselect{margin-top:6px}

.property-utility-share-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,2fr);gap:14px;align-items:end}
.property-utility-share-row>.field{margin:0;min-width:0}
.property-utility-share-row .property-multiselect{margin-top:6px}
@media(max-width:540px){.property-utility-share-row{grid-template-columns:minmax(0,1fr)}}
.property-multiselect .property-checks input[type=checkbox]{width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;flex:0 0 16px;margin:0;padding:0;appearance:auto}

/* Keep navigation and page actions visible as the document scrolls. */
:root{--page-topbar-height:calc(var(--workspace-footer-height) + env(safe-area-inset-bottom, 0px))}
.topbar{position:sticky;top:0;z-index:29;height:var(--page-topbar-height)}
.main>.page-heading{position:sticky;top:var(--page-topbar-height);z-index:24;background:var(--bg);padding-block:12px;border-bottom:1px solid var(--border)}
html{scroll-padding-top:calc(var(--page-topbar-height) + 120px)}
@media(max-width:720px){html{scroll-padding-top:calc(var(--page-topbar-height) + 180px)}}
@media print{.main>.page-heading{position:static}}

/* Compact workspace selection rows instead of large action buttons. */
#modal:has(.workspace-picker-list){width:min(520px,calc(100% - 32px))}
#modal:has(.workspace-picker-list) .modal-body{padding:10px 14px}
.workspace-picker-list{display:flex;flex-direction:column;gap:4px}
.workspace-picker-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:98px;padding:12px 20px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);text-align:center;cursor:pointer}
.workspace-picker-item:hover{background:var(--primary-soft);border-color:var(--border)}
.workspace-picker-item[aria-pressed=true]{background:var(--primary-soft);border-color:var(--primary)}
.workspace-picker-item .workspace-avatar{width:38px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0}
.workspace-picker-item .workspace-avatar .icon{width:22px;height:22px}
.workspace-picker-name{min-width:0;max-width:100%;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.workspace-picker-item[aria-pressed=true] .workspace-picker-name{font-weight:600}
.workspace-picker-check{position:absolute;top:10px;right:10px;display:flex;align-items:center;width:18px;color:var(--primary)}
.workspace-picker-check .icon{width:18px;height:18px}

/* Workspace picker: three compact choices per row on larger screens. */
#modal:has(.workspace-picker-list){width:min(540px,calc(100% - 32px))}
.workspace-picker-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.workspace-picker-item{min-width:0;height:100%;border-color:var(--border)}
@media(max-width:540px){.workspace-picker-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.workspace-picker-list{grid-template-columns:minmax(0,1fr)}}

.grid-toolbar[hidden],.grid-pagination[hidden],.grid-toolbar .grid-size[hidden]{display:none}

/* Dashboard: quieter surfaces, clearer hierarchy, and concise previews. */
.dashboard-page{--dashboard-surface:color-mix(in srgb,var(--card) 94%,var(--primary) 6%);max-width:1520px}
.dashboard-page>.page-heading{margin-bottom:20px}
.dashboard-page .page-heading h1{font-size:26px;letter-spacing:-.8px}
.dashboard-page .dashboard-welcome{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:0;padding:18px 22px;margin-bottom:24px;background:var(--dashboard-surface);border:1px solid var(--border);border-radius:14px}
.dashboard-page .dashboard-welcome h2{font-size:17px;line-height:1.4;margin:4px 0 0;letter-spacing:-.2px;color:var(--text)}
.dashboard-kicker{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.dashboard-page .dashboard-welcome .btn{background:transparent;color:var(--primary);box-shadow:none}
.dashboard-page .stats-grid{gap:16px;margin-bottom:28px}
.dashboard-page .stat-card{padding:20px;min-height:135px;border-radius:14px;box-shadow:none}
.dashboard-page .stat-top{margin-bottom:14px;color:var(--muted);font-size:11px}
.dashboard-page .stat-icon{width:28px;height:28px;background:var(--primary-soft);color:var(--primary);border-radius:8px}
.dashboard-page .stat-value{font-size:30px;line-height:1.2;margin-bottom:10px;font-variant-numeric:tabular-nums}
.dashboard-page .stat-caption{font-size:10px;line-height:1.5;flex-wrap:wrap}
.dashboard-page .dashboard-grid{gap:24px;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr)}
.dashboard-page .panel{border-radius:14px;box-shadow:none}
.dashboard-page .panel-head{padding:20px 22px 0;margin-bottom:18px}
.dashboard-page .panel-head h2,.dashboard-page .section-heading h2{font-size:14px;font-weight:600}
.dashboard-page :is(.dashboard-applications,.dashboard-properties) .panel-head h2{background-color:transparent;color:var(--primary);font-size:26px;font-weight:700;letter-spacing:-.7px;line-height:1.25}
.dashboard-page .dashboard-applications .data-table tbody tr:last-child td{border-bottom:1px solid var(--border)}
.dashboard-page .panel-head .badge{margin-inline-start:6px}
.dashboard-page .chart-container{height:220px}
.dashboard-page .task-card .panel-body{display:block;padding:0 22px 12px}
.dashboard-page .task-row{padding:17px 0;align-items:center;border-bottom:1px solid var(--border)}
.dashboard-page .task-row:last-child{border-bottom:0}
.dashboard-page .task-info strong{line-height:1.5}
.dashboard-page .task-info span{line-height:1.6}
.dashboard-caught-up{display:flex;align-items:center;gap:12px;padding:22px 0;color:var(--muted);font-size:12px;font-weight:400}
.dashboard-caught-up>.icon{color:var(--green);width:26px;height:26px}
.dashboard-page .messages-preview .panel-body{display:block}
.dashboard-page .message-row{padding-block:16px}
.dashboard-page .data-table td{padding-block:6px}
.dashboard-page .portfolio-section{margin-top:30px}
.dashboard-page .property-grid{gap:20px}
.dashboard-page .property-card{border-radius:14px;box-shadow:none}
.dashboard-page .property-photo{height:175px}
.dashboard-page .portfolio-section .property-card:last-child{display:block}
.dashboard-page .section-heading{gap:12px;flex-wrap:wrap}
.dashboard-page .empty{padding:40px 20px}
@media(max-width:600px){.dashboard-page .dashboard-applications .panel-head h2{font-size:20px}}
@media(max-width:1100px){.dashboard-page .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-page .dashboard-grid{grid-template-columns:1fr}.dashboard-page .property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.dashboard-page .dashboard-welcome{padding:16px;flex-wrap:wrap}.dashboard-page .page-heading{flex-wrap:wrap}.dashboard-page .page-heading h1{font-size:22px}.dashboard-page .stats-grid{gap:10px}.dashboard-page .stat-card{padding:14px;min-height:128px}.dashboard-page .stat-value{font-size:24px}.dashboard-page .stat-top{font-size:10px}.dashboard-page .property-grid{grid-template-columns:1fr}.dashboard-page .dashboard-grid{gap:18px}.dashboard-page .panel-head{padding-inline:16px}}
.dashboard-page .chart-card{height:auto;padding-bottom:16px}
@media(max-width:720px){.sidebar:not(.open){visibility:hidden}}

/* Let short pages fit naturally; long content keeps normal document scrolling. */
.main{padding-bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + env(safe-area-inset-bottom,0px) + 18px)}
.main:not(.dashboard-page):not(.settings-page){padding-top:16px}
.main:not(.dashboard-page)>.page-heading{padding-block:8px;margin-bottom:16px}
.main:not(.dashboard-page) .page-heading h1{margin-bottom:5px}
.main:not(.dashboard-page) .empty{padding:30px 20px}
.main:not(.dashboard-page) .empty .icon{margin-bottom:10px}
.main:not(.dashboard-page) .empty p:last-child{margin-bottom:0}
.grid-toolbar{margin-block:8px;gap:10px}
.grid-pagination{padding-block:8px}
.panel>.grid-pagination{padding-block:8px}
.list-footer{padding-block:11px}
:is(#modal,.lease-detail-popup) .modal-body{padding:16px 20px}
:is(#modal,.lease-detail-popup) .modal-body>p:first-child,#modal .modal-body form>p:first-child{margin-top:0}
:is(#modal,.lease-detail-popup) .modal-body>p:last-child,#modal .modal-body form>p:last-child{margin-bottom:0}
#modal:has(.chat-attachment-selection) .modal-body{padding:0}
@media(max-width:600px){:is(#modal,.lease-detail-popup) .modal-body{padding:14px 16px}#modal:has(.chat-attachment-selection) .modal-body{padding:0}}

/* Workspace overview with an integrated chart and six balanced summary cards. */
.dashboard-page .dashboard-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:28px;padding:20px 24px;background:linear-gradient(115deg,var(--hero-from),var(--primary-soft) 45%,var(--hero-to));align-items:center;margin-bottom:18px}
html[data-theme=dark] .dashboard-page .dashboard-banner{background:linear-gradient(115deg,var(--hero-dark-from),var(--primary-soft) 45%,var(--hero-dark-to))}
.dashboard-banner-copy{min-width:0}
.dashboard-page .dashboard-banner-copy h2{font-size:24px;margin:10px 0 18px;overflow-wrap:anywhere}
.dashboard-page .dashboard-banner-chart{background:transparent;min-width:0;width:100%;max-width:560px;justify-self:end}
.dashboard-page .dashboard-banner-chart .dashboard-chart-title{margin:0 0 6px;font-size:13px;line-height:1.3;font-weight:600;color:var(--text);text-align:center}
.dashboard-page .dashboard-banner-chart .panel-head{padding:0;margin:0 0 8px}
.dashboard-page .dashboard-banner-chart .panel-head h2{font-size:13px}
.dashboard-page .dashboard-banner-chart .chart-summary{margin:0 0 6px;gap:10px;flex-wrap:wrap}
.dashboard-page .dashboard-banner-chart .chart-summary strong{font-size:22px}
.dashboard-page .dashboard-banner-chart .chart-container{height:145px;padding:0}
.dashboard-page .dashboard-six-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:20px;align-items:stretch}
.dashboard-page .dashboard-six-cards>.stat-card,.dashboard-page .dashboard-six-cards>.dashboard-mini-card{height:132px;min-height:0;padding:13px;border-radius:12px;overflow:hidden}
.dashboard-page .dashboard-six-cards .stat-top{font-size:10px;gap:6px;min-height:28px;margin-bottom:9px}
.dashboard-page .dashboard-six-cards .stat-icon{width:24px;height:24px;flex-shrink:0}
.dashboard-page .dashboard-six-cards .stat-value{font-size:clamp(18px,1.6vw,25px);margin-bottom:7px;overflow-wrap:anywhere}
.dashboard-page .dashboard-six-cards .stat-caption{font-size:9px;gap:3px}
.dashboard-mini-content{display:flex;flex-direction:column;gap:7px;max-height:68px;overflow:auto;font-size:10px;line-height:1.4}
.dashboard-mini-content>a{display:flex;align-items:center;justify-content:space-between;gap:5px}
.dashboard-mini-content>a>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dashboard-mini-content .icon{width:13px;height:13px}
.dashboard-mini-content a:hover{color:var(--primary)}
.dashboard-bottom-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.dashboard-bottom-row>.panel{height:330px;display:flex;flex-direction:column}
.dashboard-page .dashboard-bottom-row .panel-head{flex-shrink:0;margin-bottom:12px;padding:16px 18px 0}
.dashboard-panel-content{min-height:0;overflow:auto;flex:1}
.dashboard-property-list{padding:0 14px 10px}
.dashboard-property-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:start;color:var(--text)}
.dashboard-property-item:last-child{border:0}
.dashboard-property-item:hover{background:var(--primary-soft)}
.dashboard-property-item img{width:64px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0}
.dashboard-property-copy{flex:1;min-width:0}
.dashboard-property-copy strong,.dashboard-property-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-property-copy strong{font-size:11px;font-weight:600}
.dashboard-property-copy small{font-size:9px;color:var(--muted);margin-top:5px}
.dashboard-property-price{font-size:12px;font-weight:600;color:var(--primary);white-space:nowrap}
.dashboard-property-price small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:5px}
.dashboard-property-item>.icon{width:14px}
@media(max-width:1100px){.dashboard-page .dashboard-six-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-bottom-row{grid-template-columns:1fr}}
@media(max-width:600px){.dashboard-page .dashboard-banner{grid-template-columns:1fr;padding:16px;gap:18px}.dashboard-page .dashboard-banner-copy h2{font-size:20px;margin-block:6px 10px}.dashboard-page .dashboard-six-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dashboard-property-item{gap:8px}.dashboard-property-item img{width:46px;height:42px}.dashboard-property-price{font-size:10px}}
html[data-color] .dashboard-page .dashboard-banner{background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 24%,var(--card)),color-mix(in srgb,#efaa9c 24%,var(--card)) 48%,color-mix(in srgb,#40c9cc 27%,var(--card)))}
html[data-color][data-theme=dark] .dashboard-page .dashboard-banner{background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 35%,var(--card)),color-mix(in srgb,#9c4267 24%,var(--card)) 48%,color-mix(in srgb,#167d86 32%,var(--card)))}

/* Compact navigation so common laptop heights fit the complete menu. */
.sidebar-scroll{padding-top:18px}
.sidebar .workspace-switch{margin:16px 0 14px;padding:9px 10px}
.sidebar .nav-item{min-height:34px;height:auto;padding-block:6px;margin-block:1px;gap:10px;line-height:1.4}
.sidebar .nav-label{margin-bottom:6px}
.sidebar .nav-divider{margin-block:10px}
.sidebar-bottom{padding-top:10px}
.sidebar .plan-card{padding:10px 12px;margin-bottom:10px}
.sidebar .plan-card p{margin:5px 0 8px;line-height:1.4}
@media(max-height:800px){
 .sidebar-scroll{padding-top:12px}
 .sidebar .workspace-switch{margin-block:12px}
 .sidebar .nav-item{min-height:32px;padding-block:5px}
 .sidebar .plan-card p{display:none}
 .sidebar .plan-card .btn{margin-top:8px}
}

/* Compact overview banner with high-contrast graph labels. */
.dashboard-page .dashboard-banner{padding:12px 22px;gap:22px;min-height:0}
.dashboard-page .dashboard-banner-copy h2{font-size:18px;margin:4px 0 6px}
.dashboard-page .dashboard-banner-copy .btn{min-height:24px;padding-block:3px}
.dashboard-page .dashboard-banner-chart .chart-container{height:80px}
.dashboard-page .dashboard-banner-chart svg text{fill:var(--text);font-weight:600}
@media(max-width:600px){.dashboard-page .dashboard-banner{padding:14px 16px;gap:10px}.dashboard-page .dashboard-banner-chart .chart-container{height:80px}}

/* Compact payment totals without changing other summary cards. */
.payment-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.payment-summary .stat-card{min-height:0;padding:12px 16px}
.payment-summary .stat-top{margin-bottom:6px;gap:8px}
.payment-summary .stat-icon{width:25px;height:25px}
.payment-summary .stat-icon .icon{width:15px;height:15px}
.payment-summary .stat-value{font-size:24px;line-height:1.2;margin-bottom:5px;overflow-wrap:anywhere}
.payment-summary .stat-caption{line-height:1.4}
@media(max-width:600px){.payment-summary{grid-template-columns:1fr;gap:10px}.payment-summary .stat-card{padding:10px 14px}}

/* Fit the dashboard overview into standard laptop viewports. */
@media(min-width:1101px){
 .main.dashboard-page{padding-top:12px;padding-bottom:calc(var(--active-footer-height,var(--workspace-footer-height)) + env(safe-area-inset-bottom,0px) + 10px)}
 .dashboard-page>.page-heading{padding-block:6px;margin-bottom:12px}
 .dashboard-page .page-heading h1{font-size:23px;margin-bottom:4px}
 .dashboard-page .dashboard-banner{padding:10px 18px;margin-bottom:12px}
 .dashboard-page .dashboard-six-cards{gap:10px;margin-bottom:12px}
 .dashboard-page .dashboard-six-cards>.stat-card,.dashboard-page .dashboard-six-cards>.dashboard-mini-card{height:116px;padding:10px 12px}
 .dashboard-page .dashboard-six-cards .stat-top{margin-bottom:6px}
 .dashboard-bottom-row{gap:14px}
 .dashboard-bottom-row>.panel{height:clamp(180px,calc(100dvh - 440px),300px)}
 .dashboard-page .dashboard-bottom-row .panel-head{padding:12px 14px 0;margin-bottom:8px}
.dashboard-page .dashboard-bottom-row .data-table td{padding-block:6px}
 .dashboard-property-item{padding-block:8px}
}

/* Keep authenticated pages within the viewport; scroll only their content. */
.shell>.main{height:calc(100dvh - var(--page-topbar-height) - var(--active-footer-height,var(--workspace-footer-height)) - env(safe-area-inset-bottom,0px));min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-top:12px;padding-bottom:12px}
.shell>.main>.page-heading{position:static;flex-shrink:0;margin-bottom:12px;padding-block:6px}
.page-content{min-height:0;min-width:0;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:8px;scroll-padding-block:12px}
.page-content :is(input,select,textarea,button,canvas){scroll-margin-block:12px}
@media(max-width:720px){.shell>.main{padding-top:10px;padding-bottom:10px}.shell>.main>.page-heading{margin-bottom:10px}}
@media print{.shell>.main{height:auto;display:block;overflow:visible}.page-content{overflow:visible;height:auto}}

/* Non-production environment marker; reduced-motion users get a steady label. */
.environment-label{font-size:12px;font-weight:800;color:var(--text);animation:environment-blink 1.8s ease-in-out infinite}
.environment-footer{text-align:center;margin-top:24px;padding:16px 0;border-top:1px solid var(--border)}
.footer>.environment-label{text-align:center;color:inherit}
@keyframes environment-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.environment-label{animation:none}}

.auth-recovery-link{text-align:end;margin:10px 0 18px}.auth-recovery-link a{color:var(--primary);font-weight:600}.login-captcha{margin:18px 0;padding:14px;border:1px solid var(--border);border-radius:10px}.login-captcha[hidden]{display:none}.captcha-image-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.captcha-image-row img{max-width:100%;height:auto;border-radius:6px}.login-captcha .field{margin-top:12px}.login-captcha small{color:var(--muted)}.form-success:not(:empty){padding:12px;border:1px solid var(--border);border-radius:8px;color:var(--text)}

/* Keep copyright, help and the environment together on one line. */
:root{--active-footer-height:48px}
html[data-color] .footer{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;height:calc(var(--active-footer-height) + env(safe-area-inset-bottom,0px))}
html[data-color] .footer>.footer-links{display:flex;align-items:center;gap:8px;text-align:end;flex-shrink:0}
.footer .environment-label{line-height:20px;color:inherit}
.footer .btn.ghost{min-height:30px;padding:3px 0;white-space:nowrap}
@media(max-width:1100px){.footer .footer-extra,.footer>.footer-workspace{display:none}}
@media(max-width:720px){
 html[data-color] .footer{padding-inline:12px;font-size:10px;gap:8px}
 .footer .btn.ghost{font-size:10px}
 .footer .environment-label{font-size:10px}
 html[data-color] .footer>.footer-links{display:flex;gap:6px}
}
/* The dashboard application action is a text link, including hover/dark themes. */
html .dashboard-page .dashboard-banner-copy .btn.ghost,
html[data-theme=dark] .dashboard-page .dashboard-banner-copy .btn.ghost:is(:hover,:focus-visible){background:transparent;border-color:transparent;box-shadow:none;color:var(--text)}

.property-media-gallery figure { position:relative; }
.property-media-remove { position:absolute; top:8px; right:8px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #ffffff50; border-radius:50%; background:#242033df; color:#fff; box-shadow:0 2px 8px #0003; opacity:0; pointer-events:none; transition:opacity .15s ease,background .15s ease; }
.property-media-gallery figure:hover .property-media-remove,
.property-media-gallery figure:focus-within .property-media-remove { opacity:1; pointer-events:auto; }
.property-media-remove:hover { background:#b42335; }
@media(hover:none),(pointer:coarse){.property-media-remove{opacity:1;pointer-events:auto}}

/* A consistent calendar for every date field, including fields inside dialogs. */
.date-input { display:flex; position:relative; align-items:center; width:100%; min-width:0; }
.field .date-input input { width:100%; min-width:0; padding-inline-end:48px; }
.date-input input::-webkit-calendar-picker-indicator { display:none; }
.date-trigger { position:absolute; inset-inline-end:7px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:9px; background:var(--primary-soft); color:var(--primary); }
.date-trigger svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.date-input:has(input:disabled) .date-trigger,.date-input:has(input[readonly]) .date-trigger { display:none; }
.date-picker { position:fixed; inset:auto; margin:0; padding:16px; width:336px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; z-index:10000; border:1px solid var(--border); border-radius:18px; background:var(--card); color:var(--text); box-shadow:0 16px 56px #17132b30; }
.date-picker-heading { display:grid; grid-template-columns:32px minmax(0,1fr) 76px 32px; gap:5px; align-items:center; }
.date-picker button { border:0; background:transparent; border-radius:9px; font:inherit; color:var(--text); }
.date-picker-heading>button { height:36px; font-size:25px; }
.date-picker .date-month,.date-picker .date-year { padding:6px 3px; height:36px; width:100%; min-width:0; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; font:inherit; font-weight:600; }
.date-picker-caption { font-size:12px; color:var(--muted); margin:14px 0 8px; }
.date-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.date-weekday { text-align:center; padding:6px 0; font-size:10px; font-weight:600; color:var(--muted); overflow:hidden; }
.date-grid button { height:37px; font-size:13px; }
.date-picker button:hover:not(:disabled) { background:var(--primary-soft); color:var(--primary); }
.date-grid button.is-today { box-shadow:inset 0 0 0 1px var(--primary); color:var(--primary); font-weight:700; }
.date-grid button[aria-pressed=true],.date-grid button[aria-pressed=true]:hover { background:var(--primary); color:#fff; font-weight:700; }
.date-picker button:disabled { opacity:.3; }
.date-picker-footer { display:flex; gap:6px; border-top:1px solid var(--border); margin-top:14px; padding-top:10px; }
.date-picker-footer button { padding:9px 10px; font-size:12px; font-weight:600; color:var(--primary); }
.date-picker-footer button:last-child { margin-inline-start:auto; color:var(--muted); }

/* Keep progress notifications above open modal dialogs. */
#toast[popover]{margin:0;top:auto;border:0;width:max-content}

.table-wrap:has(> .dropdown-grid){overflow:visible}
.table-wrap .dropdown-grid{min-width:0;table-layout:fixed;width:100%}
.dropdown-grid th,.dropdown-grid td{white-space:normal;overflow-wrap:anywhere}
.dropdown-grid th:first-child,.dropdown-grid td:first-child{white-space:nowrap!important;overflow-wrap:normal;word-break:normal}
.dropdown-grid th:nth-child(1){width:32%}
.dropdown-grid th:nth-child(2){width:18%}
.dropdown-grid th:nth-child(3){width:20%}
.dropdown-grid th:nth-child(4){width:8%}
.dropdown-grid th:nth-child(5){width:10%}
.dropdown-grid th:nth-child(6){width:12%}
@media(max-width:720px){
 .dropdown-grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .dropdown-grid,.dropdown-grid tbody,.dropdown-grid tr{display:block;width:100%}
 .dropdown-grid tr{padding:12px;border-bottom:1px solid var(--border)}
 .data-table.dropdown-grid td{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;padding:6px 0;border:0}
 .dropdown-grid td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:11px}
 .dropdown-grid td[colspan]{display:block}.dropdown-grid td[colspan]::before{display:none}
}

/* Account role sits above the sidebar wordmark in every color theme. */
.sidebar-brand-name{position:relative;display:inline-block}
.sidebar .sidebar-role-badge{position:absolute;inset-block-start:-9px;inset-inline-end:-19px;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#6d28d9;color:#fff;font-size:11px;font-weight:750;line-height:1;letter-spacing:0;vertical-align:baseline}

/* Record columns share the full table width; actions stay at the right edge. */
.table-wrap .data-table.record-table{width:100%;table-layout:fixed}
.data-table.record-table th,.data-table.record-table td{white-space:normal;overflow-wrap:anywhere}
.data-table.record-table .person,.data-table.record-table .table-property{min-width:0}
.data-table.record-table .record-actions{text-align:right}
.data-table.record-table .record-actions>:is(.actions,.workspace-row-actions,.subscription-row-actions){justify-content:flex-end;flex-wrap:wrap}
.data-table.record-table .record-actions .table-action{white-space:normal;text-align:center}
.data-table.record-table .record-actions::before{text-align:left}
.data-table.team-grid .team-member-name,.data-table.team-grid .team-member-email{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
@media(min-width:721px){.table-wrap .data-table.record-table{min-width:0}}

.dashboard-page .rent-chart-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:11px;line-height:1.4;color:var(--text)}
.rent-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.rent-chart-legend i{display:inline-block;width:24px;height:9px;border-radius:3px;flex-shrink:0}
.rent-legend-collected{background:linear-gradient(90deg,#7c3aed 0% 16.67%,#0284c7 16.67% 33.33%,#0d9488 33.33% 50%,#d97706 50% 66.67%,#e11d48 66.67% 83.33%,#4f46e5 83.33% 100%)}
.rent-legend-due{background:linear-gradient(90deg,#c4b5fd 0% 16.67%,#7dd3fc 16.67% 33.33%,#5eead4 33.33% 50%,#fcd34d 50% 66.67%,#fda4af 66.67% 83.33%,#a5b4fc 83.33% 100%)}


.property-rent-details{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.property-availability{font-size:12px;line-height:1.5;color:var(--muted)}
.property-availability b{font-weight:600;color:var(--text)}
.property-preview-owners{font-size:12px;line-height:1.5;color:var(--muted)}
.property-preview-owners b{font-weight:600;color:var(--text)}
.modal-actions .property-preview-owners{margin-right:auto;align-self:center}
.property-detail-information .detail-values>.property-detail-owners{display:flex;flex-basis:100%;align-items:baseline;gap:8px;margin-top:2px}
.property-detail-owners small{font-size:13px;color:var(--muted)}

/* Shared record-table surface, matching the Properties grid. */
.workspace-panel{border-color:color-mix(in srgb,var(--text) 20%,var(--card));}
.data-table.record-table th{font-weight:600;color:var(--text);padding:6px 10px;background:var(--primary-soft)}
.data-table.record-table td{padding:6px 10px;background:var(--card)}
.data-table.record-table th+th,.data-table.record-table td+td{border-left:1px solid var(--border)}
.panel:has(> .table-wrap > .subscription-grid)>.panel-head{margin-bottom:0}
.panel:has(> .table-wrap > .subscription-grid)>.grid-toolbar{margin:0;padding:12px 16px;background:var(--primary-soft)}
.workspace-panel .workspace-grid tr.workspace-selected td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
.data-table.record-table tbody tr:hover td{background:var(--primary-soft)}
/* The Properties-group table has many columns; keep metadata and actions readable. */
.table-wrap .data-table.workspace-grid{min-width:1250px;table-layout:auto;width:100%}
.workspace-grid th:nth-child(7),.workspace-grid td:nth-child(7){width:145px;min-width:145px}
.workspace-grid th:nth-child(8),.workspace-grid td:nth-child(8){width:190px;min-width:190px}
.workspace-grid th:nth-child(9),.workspace-grid td:nth-child(9){width:190px;min-width:190px}
.workspace-grid th[data-grid-metadata] .grid-sort-button{white-space:nowrap}
.data-table.record-table thead tr:first-child th:last-child,.data-table.record-table td.record-actions{white-space:nowrap;width:max-content;min-width:max-content}
.data-table.record-table td.record-actions>:is(.actions,.workspace-row-actions,.subscription-row-actions){display:flex;flex-wrap:nowrap!important;white-space:nowrap;min-width:max-content}
.data-table.record-table td.record-actions :is(.icon-btn,.table-action){flex:0 0 auto;white-space:nowrap}
.data-table.record-table thead th,.data-table.record-table thead th .grid-sort-button{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.data-table.record-table thead th .grid-sort-button{max-width:none;flex-wrap:nowrap}
.user-subscriptions-panel .subscription-grid thead th:nth-child(4){min-width:175px;white-space:normal;overflow-wrap:anywhere}
.user-subscriptions-panel .subscription-grid thead th:nth-child(4) .grid-sort-button{max-width:100%;white-space:normal;flex-wrap:wrap}
.status-value-link{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:9px;padding:8px 12px;background:#e9f5ef;color:#4b9180;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.status-value-link:hover{filter:brightness(.97)}
.status-value-link.is-inactive{background:#f2f1f6;color:var(--muted)}
.status-value-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor;opacity:.8}
.sidebar .nav-item[data-action="communication"]{width:100%;border:0;background:transparent;text-align:start;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer}
.workspace-grid-summary{padding:11px 16px;border-top:1px solid var(--border);background:var(--card);font-size:12px;color:var(--muted)}
.grid-sort-button{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:inherit;text-align:left;cursor:pointer}.grid-sort-indicator{color:var(--primary);font-size:.9em;min-width:1em;text-align:center}.grid-sort-button:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}
/* Grid headings keep their text and sorting interaction without decorative arrows. */
.data-table thead th::before,.data-table thead th::after,.grid-sort-button::before,.grid-sort-button::after{content:none!important;display:none!important}
.data-table thead th>svg,.data-table thead th>.icon,.grid-sort-button>svg,.grid-sort-button>.icon{display:none!important}
.grid-sort-button{direction:ltr}
.grid-sort-indicator{display:inline-block!important;content:normal!important}
.workspace-owner-list{display:flex;flex-direction:column;gap:5px;align-items:flex-start}.workspace-owner-chip{display:flex;align-items:center;gap:6px;max-width:100%}.workspace-owner-chip .icon-btn{width:26px;height:26px;flex:none}
.workspace-help{font-size:12px;line-height:1.6}
@media(max-width:720px){
 .workspace-panel .workspace-grid td{padding:6px 0;background:transparent}
 .workspace-panel .workspace-grid td+td{border-left:0}
 .workspace-panel .workspace-grid tr.workspace-selected td:first-child{box-shadow:none}
}

.contact-footer-link{border:0;background:transparent;color:var(--primary);padding:4px 0;font:inherit;white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.contact-public-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:20px}
.contact-public-footer .contact-footer-link{margin-inline-start:auto}
.contact-layout{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:24px}
.contact-details{font-size:13px;line-height:1.7;overflow-wrap:anywhere}

.contact-details address{font-style:normal}
#contact-form{display:grid;gap:12px}
@media(max-width:600px){.contact-layout{grid-template-columns:minmax(0,1fr);gap:12px}.footer .footer-workspace{display:none}.footer .contact-footer-link{font-size:10px}}

#property-form [data-media-key] { cursor:grab; }
.property-media-moves { position:absolute; bottom:8px; right:8px; display:flex; gap:4px; }
.property-media-moves button { border:0; border-radius:6px; background:#242033df; color:white; padding:6px 10px; cursor:pointer; }
.property-media-moves button { display:inline-flex; align-items:center; justify-content:center; padding:6px 8px; }
.property-media-moves button .icon { width:16px; height:16px; }
.property-media-moves button:disabled { opacity:.4; cursor:default; }
.property-thumbnail-label { position:absolute; top:8px; left:8px; background:#242033df; color:white; border-radius:6px; padding:4px 8px; font-size:12px; pointer-events:none; }

.property-media-gallery img, img.detail-hero { cursor:zoom-in; }
dialog.photo-viewer { width:calc(100vw - 32px); max-width:1400px; height:calc(100dvh - 32px); max-height:100dvh; padding:0; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--text); overflow:hidden; }
dialog.photo-viewer[open] { display:flex; flex-direction:column; }
.photo-viewer::backdrop { background:#111c; }
.photo-viewer-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.photo-viewer-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.photo-viewer-controls button { padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:inherit; cursor:pointer; }
.photo-viewer-controls output { min-width:45px; text-align:center; font-size:13px; }
.photo-viewer-viewport { flex:1; min-height:0; overflow:auto; padding:16px; background:#171923; }
.photo-viewer-viewport img { display:block; max-width:none; max-height:none; margin:auto; object-fit:contain; }
.photo-viewer-error { padding:12px; }
.photo-viewer-viewport.is-pannable { cursor:grab; touch-action:none; user-select:none; }
.photo-viewer-viewport.is-panning { cursor:grabbing; }

/* Property editor: media on the left, listing details on the right. */
#modal:has(#property-form) { width:min(1240px,calc(100% - 32px)); }
.property-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,4fr); gap:24px; align-items:start; }
.property-editor-layout > * { min-width:0; }
.property-editor-layout .property-media-panel { margin:0; padding:12px; }
.property-media-panel .field { min-width:0; }
.property-media-panel input[type="file"] { width:100%; min-width:0; padding:8px 0; font-size:11px; }
.property-media-panel p,.property-media-panel .property-upload-summary { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.property-media-panel .property-media-gallery { grid-template-columns:minmax(0,1fr); gap:10px; }
.property-media-panel .property-media-gallery img,.property-media-panel .property-media-gallery video { height:150px; }
.property-editor-details > p:first-child { margin-top:0; }
@media(max-width:800px){
 .property-editor-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
 .property-media-panel .property-media-gallery { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
}

/* Let the dialog scroll as one surface so the property details panel does not. */
@media(min-width:801px){
 #modal:has(#property-form) { height:calc(100dvh - 48px); }
 #modal:has(#property-form) .modal-body { overflow-y:auto; }
 #property-form { min-width:0; }
 #property-form .property-editor-layout { min-height:auto; grid-template-rows:none; align-items:start; overflow:visible; }
 #property-form .property-media-panel,
 #property-form .property-editor-details { min-height:auto; overflow:visible; }
#property-form .property-editor-details { padding-inline:8px; padding-bottom:12px; }
}

/* Property preview mirrors the editor's media/details split. */
#modal:has(.property-detail-layout) { width:min(1480px,calc(100% - 32px))!important; height:calc(100dvh - 48px); }
#modal:has(.property-detail-layout) .modal-body { display:flex; overflow:hidden; }
.property-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,4fr); grid-template-rows:minmax(0,1fr); gap:24px; flex:1; min-width:0; min-height:0; }
.property-detail-media,.property-detail-information { min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-gutter:stable; padding-right:8px; }
.property-detail-media .property-media-gallery { grid-template-columns:minmax(0,1fr); margin:0; }
.property-detail-media .property-media-gallery img,.property-detail-media .property-media-gallery video { height:150px; }
.property-detail-information .detail-hero { width:100%; height:320px; object-fit:contain; object-position:center top; background:var(--bg); }
.property-detail-information .detail-values { display:flex; flex-wrap:wrap; gap:20px; }
@media(max-width:800px){
 #modal:has(.property-detail-layout) { height:auto; }
 #modal:has(.property-detail-layout) .modal-body { display:block; overflow:auto; }
 .property-detail-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:20px; }
 .property-detail-media,.property-detail-information { overflow:visible; padding-right:0; scrollbar-gutter:auto; }
 .property-detail-media .property-media-gallery { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
 .property-detail-information .detail-hero { height:220px; }
}

.property-detail-media img[data-property-preview] { cursor:pointer; }
.property-detail-media img.is-selected { outline:3px solid var(--primary); outline-offset:-3px; }
.property-detail-information .detail-heading { flex-wrap:wrap; }
.property-detail-information .detail-heading > div { min-width:0; }
.property-detail-information .property-address { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.property-detail-section { margin:20px 0; overflow-wrap:anywhere; }
.property-detail-section h4 { margin:0 0 10px; font-size:14px; }
.property-detail-section .property-full-description { white-space:pre-wrap; overflow:visible; max-height:none; line-height:1.7; }
.property-detail-information { padding-bottom:24px; }
.property-detail-information .chips { flex-wrap:wrap; overflow:visible; }

.property-detail-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.property-detail-title h3 { margin:0; }
.property-detail-inline { display:flex; align-items:baseline; gap:8px 12px; flex-wrap:wrap; }
.property-detail-inline h4,.property-detail-inline p,.property-detail-inline .chips { margin:0; }
.property-detail-inline h4 { flex-shrink:0; }
.property-detail-inline .chips { display:contents; }
.property-detail-inline .property-utility-bills { color:var(--muted); }

#modal:has(.help-center){width:min(1160px,calc(100% - 32px))!important;height:calc(100dvh - 48px)}
#modal:has(.help-center) .modal-body{display:flex;overflow:hidden}
.help-center{display:flex;flex-direction:column;min-height:0;min-width:0;width:100%}
.help-tools{display:flex;gap:16px;align-items:end}.help-tools>.field:first-child{flex:1}.help-tools .field{margin:0;min-width:0}
.help-note,.help-updated{font-size:12px;color:var(--muted);margin:10px 0}.help-role-label{font-size:13px}
.help-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:20px;flex:1;min-height:0}
.help-topics,.help-article{overflow:auto;min-height:0;min-width:0;overscroll-behavior:contain;padding:0 10px 12px 0}
.help-topics button{display:block;width:100%;text-align:start;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:12px;margin-bottom:8px;cursor:pointer}
.help-topics button[aria-current=true]{border-color:var(--primary);background:var(--primary-soft)}
.help-topics button span{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.help-article h3{margin-top:0}.help-article p{line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.help-question{color:var(--primary);font-weight:600}
.help-table-wrap{overflow:auto}.help-article table{width:100%;border-collapse:collapse;font-size:13px}.help-article th,.help-article td{padding:10px;text-align:start;border:1px solid var(--border);vertical-align:top}
.help-topic-navigation{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}.help-topic-navigation button{white-space:normal;text-align:start}
@media(max-width:700px){.help-tools{align-items:stretch;flex-direction:column;gap:8px}.help-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(80px,30%) minmax(0,1fr);gap:12px}.help-topics button{padding:8px}.help-center .notice{font-size:11px;padding:8px}.help-note{margin:6px 0}}

/* Role guide stays beside the Help Center title; screenshots keep their aspect ratio. */
#modal:has(.help-center) .modal-head{justify-content:flex-start;gap:16px;flex-wrap:wrap}
#modal:has(.help-center) .modal-head>h2{flex:0 0 auto}
#modal:has(.help-center) .modal-head>.icon-btn{margin:0;flex-shrink:0}
.help-header-guide{min-width:0;margin-inline-start:auto}.help-header-guide .field{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;margin:0;font-size:12px;white-space:nowrap}
.help-header-guide select{width:auto;max-width:200px;padding:7px 28px 7px 10px}
.help-header-guide .help-role-label{margin:0;font-weight:600;color:var(--primary)}
.help-figure{margin:20px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg)}
.help-figure a{display:block;cursor:zoom-in}.help-figure img{display:block;width:100%;height:auto}
.help-figure figcaption{padding:10px 12px;font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:700px){#modal:has(.help-center) .modal-head{gap:8px}.help-header-guide .field{gap:4px}.help-header-guide select{max-width:150px}}

.ask-ai-button{gap:6px;white-space:nowrap}.topbar .ask-ai-button{padding:8px 10px;font-size:12px}.ask-ai-button .icon{flex-shrink:0}

/* Keep help and contact readable against the selected frame palette. */
html[data-color] .topbar .ask-ai-button,
html[data-color] .footer .contact-footer-link { color:var(--frame-text,#fff); }
.topbar-actions .ask-ai-button { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.topbar .ask-ai-button:hover,.footer .contact-footer-link:hover { background:var(--frame-border,#ffffff26); }
.footer .contact-footer-link { display:inline-flex; flex-shrink:0; align-items:center; min-height:30px; }
@media(max-width:720px){
 .topbar-actions .help-button { display:inline-flex; padding:6px; font-size:11px; }
 .topbar .breadcrumb > span,.topbar .breadcrumb > .icon,.topbar-separator { display:none; }
 .topbar-actions { min-width:0; flex:1; justify-content:flex-end; }
 .topbar .ask-ai-button .icon { width:17px; height:17px; }
 .topbar .ask-ai-button span { max-width:100px; white-space:normal; }
 .footer > span:first-child { flex:1; overflow:hidden; text-overflow:ellipsis; }
}

/* Readable grid type without changing column order or pagination. */
.data-table.record-table { font-size:14px; line-height:1.5; }
.data-table.record-table th { font-size:13px; }
.data-table.record-table td { font-size:14px; }
.data-table.record-table :is(.person strong,.table-property strong) { font-size:14px; }
.data-table.record-table :is(small,.badge,.person small,.table-property small),.grid-toolbar,.grid-pagination { font-size:12px; }
.startup-error { max-width:720px; margin:10vh auto; padding:24px; text-align:center; }
.startup-error>img { display:block; margin:0 auto 12px; object-fit:contain; }
.startup-error .empty { padding:20px; }

#modal[open].workspace-dialog:has(#workspace-form) { width:min(1120px,calc(100% - 32px))!important; }
#modal:has(#workspace-form) .workspace-modal-title { flex:1 0 auto; }
#modal:has(#workspace-form) #modal-title { white-space:nowrap; overflow-wrap:normal; flex:none; }
#modal:has(#workspace-form) .modal-header-actions .btn { white-space:nowrap; }
@media(max-width:600px){
 #modal:has(#workspace-form) .workspace-modal-title { flex-basis:100%; }
 #modal:has(#workspace-form) .modal-header-actions { justify-content:flex-start; margin-inline-start:0; }
}
.country-filter { min-width:180px; margin:0; }
.country-filter select { max-width:280px; }
.posts-filters .country-filter { display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; max-width:100%; }
.posts-filters .country-filter > span { flex-shrink:0; }
.posts-filters .country-filter select { width:220px; min-width:0; }
.property-detail-section .panel-head { padding:0 0 12px; }
#modal .modal-header-actions .popup-cancel { order:100; margin-inline-start:auto; }

.property-filter-controls { display:flex; align-items:flex-end; gap:12px; margin-inline-start:auto; flex-wrap:wrap; }
.property-filter-controls .field { margin:0; min-width:180px; }
.rentalunit-filter-controls .field { display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; max-width:100%; }
.rentalunit-filter-controls .field > span { flex-shrink:0; }
.property-filter-controls.rentalunit-filter-controls select { width:220px; min-width:0; }
.property-filter-controls select { width:100%; min-height:44px; padding:11px 12px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--text); font:inherit; }

.dropdown-heading-controls .country-filter { width:280px; max-width:100%; }
.dropdown-heading-controls > .btn { min-height:44px; white-space:nowrap; }

html[data-custom-colors] body { background:var(--custom-page); }
html[data-custom-colors] #main > .page-content { --text:var(--custom-text); color:var(--custom-text); }
html[data-custom-colors] :is(.topbar,.public-header) { background:var(--custom-header); --frame-bg:var(--custom-header); --frame-text:var(--custom-header-text); color:var(--custom-header-text); }
html[data-custom-colors] :is(.sidebar,.sidebar-footer) { background:var(--custom-sidebar); --frame-bg:var(--custom-sidebar); --frame-text:var(--custom-sidebar-text); color:var(--custom-sidebar-text); }
html[data-custom-colors] .footer { background:var(--custom-footer); --frame-bg:var(--custom-footer); --frame-text:var(--custom-footer-text); color:var(--custom-footer-text); }
/* Match the shared action-button selectors so preset and hover rules cannot override custom colors. */
html[data-custom-colors] :is(.btn:not(.danger):not(.ghost):not(.chat-sound-button),.table-action,.theme-option,.color-option),
html[data-custom-colors] :is(.btn:not(.danger):not(.ghost):not(.chat-sound-button),.table-action,.theme-option,.color-option):is(:hover,:focus-visible) {
 background:var(--custom-button);
 border-color:var(--custom-button);
 color:var(--custom-button-text);
}
#custom-colors-form input[type=color] { width:100%; height:44px; padding:4px; cursor:pointer; }

/* Keep the 3px focus outline and 3px offset inside the scrolling page. */
.page-content > .filters { padding-inline:8px; }
.page-content > .filters .filter-controls { max-width:100%; }

.post-property-preview { display:flex; align-items:center; gap:16px; margin:16px 0 24px; }
.post-property-preview img { width:100px; height:76px; object-fit:contain; background:#eef0f5; border-radius:10px; flex-shrink:0; }
.post-property-address { margin:0; overflow-wrap:anywhere; }
dialog .btn { min-height:44px; font-size:14px; padding:11px 18px; }
dialog .icon-btn { min-width:44px; min-height:44px; }
#modal .modal-header-actions { flex-wrap:wrap; gap:10px; }
#modal .modal-header-actions .btn { font-size:14px; min-height:44px; white-space:normal; }
@media(max-width:600px){
 #modal .modal-head { flex-wrap:wrap; }
 #modal .modal-header-actions { flex-basis:100%; }
 .post-property-preview img { width:80px; height:64px; }
}

.property-card .property-info { font-size:14px; }
.heading-actions .date-button.btn { display:inline-flex; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; color:var(--muted); font-size:12px; font-weight:500; }
.heading-actions .date-button.btn:hover { border-color:transparent; background:transparent; color:var(--primary); }
.heading-actions .date-button.btn .icon { display:none; }
.dashboard-page .page-heading h1 { color:var(--primary); }
.dashboard-page .page-heading .dashboard-date { all:unset; display:inline-block; color:var(--primary); cursor:pointer; font:inherit; }
.dashboard-page .page-heading .dashboard-date:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.dashboard-page .page-heading .dashboard-date-static { cursor:default; }
.property-grid .property-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;background:#eef0f5}
.property-card .property-info h3 { font-size:17px; }
.property-card .property-address,.property-card .property-features { font-size:14px; line-height:1.5; }
.property-card .property-features { flex-wrap:wrap; gap:10px 16px; color:var(--muted); }
.property-card .property-features .icon { width:17px; height:17px; }
.property-features .preview-amenities { display:block; overflow-wrap:anywhere; }
.property-detail-information { font-size:15px; line-height:1.6; }
.property-detail-information .property-address,.property-detail-information .detail-values { font-size:15px; }
.property-detail-information .detail-values small { font-size:13px; }
.property-detail-information .detail-values > div { min-width:110px; max-width:100%; }
.property-detail-information .detail-values .preview-amenities { flex:1 1 220px; overflow-wrap:anywhere; }
.property-detail-information .property-detail-section h4 { font-size:16px; }

.property-name-location { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.property-name-location > span { font-size:14px; font-weight:400; }
.property-detail-title .property-name-location { flex:1; margin:0; }
.property-detail-information .detail-heading > div:first-child { min-width:0; flex:1; }
.property-features .preview-parking-lease,.detail-values .preview-parking-lease { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.preview-parking-lease > span { display:inline-flex; align-items:center; gap:6px; }
.property-features .preview-amenities,.detail-values .preview-amenities { display:flex; flex-wrap:wrap; gap:6px; }
.property-features .preview-amenities .chip,.detail-values .preview-amenities .chip { font-size:13px; line-height:1.4; }

.property-rental-summary { display:flex; align-items:center; gap:16px; flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; padding-block:6px; }
.property-rental-summary > * { flex-shrink:0; }
.property-rental-summary > strong { font-size:20px; color:var(--primary); }
.property-rental-summary > strong small { font-size:13px; font-weight:400; }
.property-detail-information .detail-values .property-amenities-utilities { display:flex; align-items:flex-start; gap:20px; flex:1 1 100%; flex-wrap:wrap; }
.property-amenities-utilities .preview-amenities { min-width:0; }
.detail-values > .property-utility-summary { display:flex; align-items:center; flex:1 1 100%; flex-wrap:wrap; gap:10px; margin:0; }
.detail-values > .property-utility-summary > small { margin:0; white-space:nowrap; }
.property-utility-value { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.property-utility-summary .property-utility-bills { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.property-card .chip,.property-detail-information .chip { background:color-mix(in srgb,var(--primary) 18%,var(--card)); border-color:color-mix(in srgb,var(--primary) 32%,var(--border)); color:var(--text); font-size:13px; line-height:1.4; }


.property-detail-information .property-preview-heading { display:flex; flex-wrap:nowrap; align-items:center; gap:16px; overflow-x:auto; }
.property-preview-heading .property-detail-title { flex:1 1 auto; min-width:150px; margin:0; }
.property-preview-heading .property-rental-summary { flex:0 0 auto; overflow:visible; }

.property-card .chip,.property-detail-information .chip { border-radius:999px; }

.property-detail-information .property-name-location > span { font-size:16px; }
.property-detail-information .property-rental-summary .property-availability { font-size:15px; }
.property-detail-information .property-rental-summary .property-preview-owners { font-size:15px; }
.property-detail-information .property-rental-summary .badge { font-size:14px; padding:6px 12px; }

/* Title-case English action labels without changing translated text or record names. */
html[lang="en"] :is(.btn,.table-action,.modal-header-actions .icon-btn) { text-transform:capitalize; }

.public-main .browse-toolbar { display:flex; align-items:center; gap:16px; }
.public-header nav .country-filter { min-width:0; flex-shrink:1; }
.public-header nav .country-filter select { width:200px; max-width:100%; min-height:36px; padding-block:7px; }
@media(max-width:720px){ .public-header nav { flex-wrap:wrap; row-gap:10px; } .public-header nav .country-filter select { width:150px; } }
.browse-toolbar .country-filter { margin-inline-start:auto; display:flex; align-items:center; gap:10px; min-width:0; }
.browse-toolbar .country-filter select { width:220px; max-width:100%; }
@media(max-width:600px){ .public-main .browse-toolbar { flex-wrap:wrap; } .browse-toolbar .country-filter select { width:180px; } }

.subscription-customer-preview { margin-top:20px; }
.subscription-customer-preview .pricing-card { min-width:0; }
.subscription-preview-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:18px; }

.supporting-documents-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 14px}.supporting-documents-heading .form-section{margin:0}/* Compact attachment tiles shared by the applicant form and upload dialog. */
.supporting-document-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,148px));gap:10px}
.supporting-document{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;padding:10px;border:1px solid var(--border);background:var(--card);border-radius:10px;min-width:0;min-height:130px;text-align:center}
.supporting-document-type{font-size:12px;font-weight:600;line-height:1.35;min-height:32px;overflow-wrap:anywhere;width:100%}
.supporting-document-format{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted)}
.supporting-document-format>.icon{width:28px;height:28px}.supporting-document-format small{font-size:10px}
.supporting-document-name{font-size:12px;line-height:1.4;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supporting-document-actions{position:absolute;inset-inline:4px;bottom:32px;display:flex;justify-content:center;gap:4px;padding:3px;background:var(--card);border-radius:8px;opacity:0;pointer-events:none}
.supporting-document:hover .supporting-document-actions,.supporting-document:focus-within .supporting-document-actions{opacity:1;pointer-events:auto}
@media(hover:none){.supporting-document-actions{position:static;opacity:1;pointer-events:auto;padding:0}}


button.supporting-document-format { border:0; background:transparent; padding:2px; cursor:zoom-in; }
.supporting-document-thumbnail { width:64px; height:48px; object-fit:contain; border-radius:4px; background:var(--bg); }
.supporting-document-actions { position:static; opacity:1; pointer-events:auto; padding:0; }

/* Applicant tabs identify documents by type; keep filenames out of the compact card. */
.application-content :is(#application-form,.application-readonly) .supporting-document { padding-top:38px; }
.application-content :is(#application-form,.application-readonly) .supporting-document-type { position:absolute; inset:11px 8px auto 42px; min-height:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.application-content :is(#application-form,.application-readonly) .supporting-document-name { display:none; }
.application-content :is(#application-form,.application-readonly) .supporting-document-download { position:absolute; inset:5px auto auto 5px; z-index:1; }

.signature-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.signature-heading .signature-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.signature-heading .signature-actions .icon-btn{min-width:34px;min-height:34px;padding:0;font-size:inherit}
.signature-heading .form-section { margin:0; min-width:0; }
.signature-upload-control { position:relative; flex-shrink:0; cursor:pointer; margin-inline-start:auto; }
.signature-upload-control input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.signature-upload-control:focus-within { outline:3px solid var(--primary); outline-offset:3px; }
.signature-heading :is(#signature-undo,#signature-clear) { flex-shrink:0; }
.signature-heading #signature-status { margin-inline-start:auto; font-size:11px; line-height:1.4; color:var(--muted); }
.signature-heading :is(.signature-upload-control,#signature-undo,#signature-clear) { min-width:132px; min-height:38px; padding:10px 14px; font-size:11px; justify-content:center; }
.signature-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:stretch; }
.signature-workspace[data-split=true] { grid-template-columns:repeat(2,minmax(0,1fr)); }
#signature-upload-preview:empty { display:none; }
#signature-upload-preview { min-width:0; height:180px; }
#signature-upload-preview .signature-preview { width:100%; height:180px; object-fit:contain; }
.signature-workspace #signature-pad { min-width:0; width:100%; }

.signature-workspace[data-split=true] #signature-upload-preview:empty { display:block; border:1px dashed var(--border); border-radius:10px; background:var(--bg); }

.navigable-error { cursor:pointer; scroll-margin-block:80px; }
.navigable-error:focus-visible { outline:2px solid currentColor; outline-offset:4px; border-radius:4px; }

.application-review-section { border:1px solid var(--border); border-radius:14px; padding:18px; margin:16px 0; background:var(--card); }
.application-review-section>.form-section,.application-review-section>.summary-title { margin-top:0; color:var(--text); font-weight:700; }
.applicant-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; }
.applicant-detail-grid .summary-item { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; margin:0; }
.applicant-detail-grid strong { overflow-wrap:anywhere; }
.application-review-section .review-answer { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:10px 0; }
.application-review-section .review-answer strong { flex:1; }
.application-review-section .review-answer p { margin:0; max-width:50%; overflow-wrap:anywhere; color:var(--text); }
.declaration-label { display:inline-flex; align-items:flex-start; gap:7px; }
.declaration-label input[type=checkbox] { width:16px; height:16px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--primary); opacity:1; }
.consent-review .summary-item>span { color:var(--text); font-weight:700; }
.application-export-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:600px){.applicant-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}

/* Editable applicant details use the same three-column layout for every household tab. */
#application-form .application-form-section > .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
#application-form .application-form-section > .form-grid > .field { min-width:0; }
@media(max-width:800px){#application-form .application-form-section > .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media(max-width:540px){#application-form .application-form-section > .form-grid { grid-template-columns:minmax(0,1fr); }}

#application-form .application-form-section { border:1px solid var(--border); border-radius:14px; padding:16px; margin:14px 0; min-width:0; background:var(--card); }
#application-form .application-form-section > :is(.summary-title,.form-section) { margin-top:0; }
#application-form .application-form-section .supporting-documents-heading { margin-top:0; }
.application-export-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.application-export-actions > .btn { width:100%; min-width:0; min-height:44px; height:100%; justify-content:center; white-space:normal; text-align:center; }

/* Stronger boundaries for controls, dialogs, and sections in every palette. */
html[data-theme=light] { --border:color-mix(in srgb,var(--primary) 22%,#d0ced8); }
html[data-theme=dark] { --border:color-mix(in srgb,var(--primary) 20%,#81788e); }
html[data-theme] .field :is(input,select,textarea):not(:focus):not([aria-invalid=true]) { border-color:var(--border); }

.household-rental-summary .applicant-detail-grid>div { min-width:0; }
.household-rental-summary small,.household-rental-summary strong { display:block; overflow-wrap:anywhere; }
.household-rental-summary small { color:var(--muted); margin-bottom:6px; }

/* Full-width application editor with progress and actions in the page heading. */
.application-layout.application-layout-wide { grid-template-columns:minmax(0,1fr); width:100%; }
.page-heading.application-heading { display:block; }
.application-heading-top,.application-heading-bottom { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.application-heading-top h1 { margin:0; }
.application-heading-progress { display:flex; align-items:center; flex:1; gap:12px; min-width:260px; font-size:12px; }
.application-heading-progress .progress-track { flex:1; min-width:100px; max-width:240px; margin:0; }
.application-heading-progress>span { white-space:nowrap; }
.application-heading-property { color:var(--muted); margin:8px 0 12px; }
.application-heading-rental { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.application-heading-rental .application-heading-property,
.application-heading-rental .application-rental-availability { margin:8px 0 12px; }
.application-heading-rental .application-rental-availability { color:var(--muted); }
.application-heading-tenancy-notice { color:var(--muted); }
.application-member-progress,.application-heading-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.application-member-progress { flex:1; }
.application-member-progress .btn { gap:8px; }
.application-heading-actions .btn { min-width:170px; min-height:42px; justify-content:center; }
.application-layout-wide .applicant-detail-grid,
.application-layout-wide #application-form .application-form-section > .form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:1000px){
 .application-layout-wide .applicant-detail-grid,
 .application-layout-wide #application-form .application-form-section > .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .application-heading-progress { flex-basis:100%; }
}
@media(max-width:540px){
 .application-layout-wide .applicant-detail-grid,
 .application-layout-wide #application-form .application-form-section > .form-grid { grid-template-columns:minmax(0,1fr); }
 .application-heading-progress { gap:6px; min-width:0; flex-wrap:wrap; }
 .application-heading-actions { width:100%; }
 .application-heading-actions .btn { flex:1; min-width:140px; }
}

/* Keep status, progress and available actions together on a single heading row. */
.application-heading .application-heading-top { flex-wrap:nowrap; gap:10px; overflow-x:auto; padding:4px 2px; }
.application-heading .application-heading-top h1 { flex-shrink:0; font-size:22px; white-space:nowrap; }
.application-heading .application-heading-top>.badge { flex-shrink:0; }
.application-heading .application-heading-progress { flex:1 0 270px; flex-wrap:nowrap; gap:8px; min-width:270px; }
.application-heading .application-heading-progress>strong { white-space:nowrap; }
.application-heading .application-heading-progress .progress-track { min-width:60px; }
.application-heading .application-heading-actions { flex:0 0 auto; width:auto; flex-wrap:nowrap; }
.application-heading .application-heading-actions .btn { flex:0 0 auto; min-width:150px; white-space:nowrap; }

.application-content .tab .application-member-status { display:inline-flex; flex-shrink:0; margin-inline-start:6px; }
.application-heading .application-export-icon { flex-shrink:0; width:36px; height:36px; }

#household-form fieldset { border:0; padding:0; margin:12px 0 0; min-width:0; }
#household-form fieldset[hidden] { display:none; }

.rental-history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:14px; }
.rental-history-heading .form-section { margin:0; flex-shrink:0; }
.rental-history-heading .check-field { margin:0; flex:1; justify-content:flex-end; }
@media(max-width:700px){.rental-history-heading .check-field { flex-basis:100%; justify-content:flex-start; }}

.application-layout-wide .application-readonly .applicant-detail-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:1000px){.application-layout-wide .application-readonly .applicant-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media(max-width:540px){.application-layout-wide .application-readonly .applicant-detail-grid { grid-template-columns:1fr; }}
/* Rental approvals, agreement signatures and compact notifications. */
.notification-item{display:flex;align-items:center;gap:12px;white-space:nowrap;min-width:0;padding:14px 0;border-bottom:1px solid var(--border)}
.notification-item strong{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}.notification-item .notification-body{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.notification-item time{flex-shrink:0;font-size:11px}
.rental-applicant{border:1px solid var(--border);border-radius:16px;padding:20px;margin:16px 0}.verification{border:0;padding:8px 0;margin:8px 0}.verification label{display:inline-flex;align-items:center;gap:6px;margin-right:24px}.verification legend{font-weight:600}.lease-text{white-space:pre-wrap;line-height:1.8;padding:20px 0;overflow-wrap:anywhere}.rental-tabs{position:sticky;top:0;z-index:6;display:flex;align-items:center;min-width:0;padding-block:8px;background:var(--card);border-bottom:1px solid var(--border)}.rental-tabs>.tabs{flex:1;min-width:0;overflow:auto;flex-wrap:nowrap}.rental-tabs .tab{flex-shrink:0}.rental-tabs>.icon-btn{flex-shrink:0}.rental-applicant .signature-preview{max-width:300px}
/* The panel normally clips its contents, which prevents sticky positioning.
   Application tabs are the exception: keep this header visible while its form scrolls. */
.application-content { overflow:visible; }

/* Popup controls match the Settings delegation button. */
#modal .btn,#modal .modal-header-actions .btn,#modal .workspace-header-actions .btn{min-height:40px;padding:10px 15px;font-size:11px;line-height:1.4;width:auto;flex-grow:0}
:is(#modal,.lease-detail-popup) .icon-btn{min-width:40px;min-height:40px}
:is(#modal,.lease-detail-popup) .lease-document-cards .supporting-document-download{min-width:30px;min-height:30px}
[data-invoice-select],#invoice-select-all{width:16px;height:16px;accent-color:var(--primary)}


/* Consistent approval sections, with readable layouts on smaller screens. */
.approval-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;align-items:start;margin:16px 0}
.approval-grid>*{min-width:0;overflow-wrap:anywhere}
.approval-grid p{margin:6px 0}.approval-grid input:not([type=radio]):not([type=checkbox]){min-width:0;max-width:100%}
.approval-grid .verification{min-inline-size:0;margin:0}.approval-grid .verification label{margin-right:12px}
@media(max-width:1100px){.approval-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.approval-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.approval-grid{grid-template-columns:minmax(0,1fr)}}

.settings-page .settings-layout{align-items:stretch}
.settings-side{display:flex;flex-direction:column;min-width:0}
.settings-side .settings-account{flex:1}
.settings-payments{grid-column:1/-1}
.payment-settings-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:start}
.payment-settings-grid .field{min-width:0}.payment-settings-grid input,.payment-settings-grid select{min-width:0;width:100%}
.rental-tabs{border-bottom:0!important;padding-bottom:0;margin-bottom:16px}.rental-tabs>.tabs{margin-bottom:0}.rental-tabs>button[hidden]{display:none}
.rental-tabs .tab{color:var(--text)}.rental-tabs .tab.active{color:var(--primary)}
.approval-documents{display:grid;gap:12px;margin:16px 0}
.approval-document-row{display:flex;align-items:center;gap:24px;min-width:0}
.approval-document-row>a{flex:1;min-width:0;overflow-wrap:anywhere}
.approval-document-row .verification{margin:0;min-inline-size:0}
.approval-tag-section{margin-top:16px}.approval-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.approval-tags .chip{background:var(--primary-soft);color:var(--text);border:1px solid var(--border)}
.confirmation-choice{display:flex;align-items:center;gap:16px;min-inline-size:0}
.confirmation-choice legend{float:left;margin-right:16px;font-weight:400}
.confirmation-choice>div{display:flex;flex-shrink:0}.confirmation-choice label{white-space:nowrap}
@media(max-width:1100px){.payment-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.payment-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.confirmation-choice{display:block}.confirmation-choice legend{float:none;margin-bottom:10px}}
@media(max-width:480px){.payment-settings-grid{grid-template-columns:minmax(0,1fr)}.approval-document-row{gap:12px}}
html[data-theme=dark] .rental-tabs .tab.active{color:var(--text);border-color:var(--text)}
.approval-document-row .verification{display:flex;align-items:center;gap:10px;padding:0}
.approval-document-row .verification legend{float:left;margin-right:10px}
.approval-document-row .verification label{margin:0;white-space:nowrap}
.approval-confirmation>div{display:flex;align-items:center;gap:16px}
.approval-confirmation>div p{margin:0}

.settings-page .profile-photo-picker{display:flex;align-items:center;gap:8px;max-width:320px}
.settings-page .profile-photo-picker input{min-width:0;width:100%;flex:1}
.settings-page .profile-photo-picker .icon-btn{flex-shrink:0}
.settings-page .profile-photo-controls{min-width:0}

.approval-tag-row{display:flex;align-items:flex-start;gap:32px}.approval-tag-row>div{flex:1;min-width:0}
.approval-document-link{flex:1;min-width:0;border:0;background:none;color:inherit;text-align:left;padding:0;overflow-wrap:anywhere;text-decoration:underline}
@media(max-width:480px){.approval-tag-row{gap:16px}}

/* Compact approval details without changing applicant forms or other sections. */
:is(#rental-approval-form,#rental-approval-review) .application-review-section{padding:14px;margin:10px 0}
:is(#rental-approval-form,#rental-approval-review) h3{margin:0 0 10px}
:is(#rental-approval-form,#rental-approval-review) h4{margin:12px 0 6px}
:is(#rental-approval-form,#rental-approval-review) .rental-applicant>h3{display:inline-block;margin-right:12px}
:is(#rental-approval-form,#rental-approval-review) .applicant-verify-all{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600}
:is(#rental-approval-form,#rental-approval-review) .approval-top-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
:is(#rental-approval-form,#rental-approval-review) .approval-top-sections>.application-review-section{margin:0}
:is(#rental-approval-form,#rental-approval-review) .approval-top-sections>.application-review-section:first-child{grid-column:1/-1}
:is(#rental-approval-form,#rental-approval-review) .approval-rental-details>.approval-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
:is(#rental-approval-form,#rental-approval-review) .approval-rental-details>.approval-grid>div:nth-child(5){grid-column:6}
:is(#rental-approval-form,#rental-approval-review) .approval-rental-details>.approval-grid>div:nth-child(9){grid-column:4}
/* Key deposit proof (after approval) lines up under Rental available from. */
#rental-approval-review .approval-rental-details>.approval-grid>div:nth-child(10){grid-column:6}
:is(#rental-approval-form,#rental-approval-review) .approval-deposit-section .approval-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(#rental-approval-form,#rental-approval-review) .approval-deposit-section .field{width:100%}
:is(#rental-approval-form,#rental-approval-review) .approval-top-sections h3{display:inline-block;margin-right:12px}
:is(#rental-approval-form,#rental-approval-review) .tenant-verify-all{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600}
@media(max-width:620px){:is(#rental-approval-form,#rental-approval-review) .approval-top-sections{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){:is(#rental-approval-form,#rental-approval-review) .approval-deposit-section .approval-grid{grid-template-columns:minmax(0,1fr)}}
:is(#rental-approval-form,#rental-approval-review) .rental-applicant>h4:has(+.approval-grid){display:inline-block;margin-right:16px;vertical-align:middle}
:is(#rental-approval-form,#rental-approval-review) .rental-applicant>h4:has(+.approval-grid)+.approval-grid{display:inline-flex;width:auto;vertical-align:middle;gap:16px;margin:12px 0 6px}
:is(#rental-approval-form,#rental-approval-review) .approval-verification{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:600;color:var(--text)}
/* After approval the verification checkboxes are read-only but keep full contrast. */
#rental-approval-review .approval-verification input:disabled{opacity:1;cursor:default;accent-color:var(--primary)}
#rental-approval-review .approval-confirmed{display:flex;margin:8px 0 0}
:is(#rental-approval-form,#rental-approval-review) .approval-grid{row-gap:10px;column-gap:16px;margin:8px 0}
:is(#rental-approval-form,#rental-approval-review) .approval-grid p{margin:3px 0;line-height:1.4}
:is(#rental-approval-form,#rental-approval-review) .approval-grid .verification{padding:3px 0}
:is(#rental-approval-form,#rental-approval-review) .approval-documents{gap:8px;margin:8px 0}
:is(#rental-approval-form,#rental-approval-review) .approval-documents.supporting-document-list{align-items:start}
:is(#rental-approval-form,#rental-approval-review) .approval-documents-heading{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:12px 0 6px}
:is(#rental-approval-form,#rental-approval-review) .approval-documents-heading h4{margin:0}
:is(#rental-approval-form,#rental-approval-review) .approval-documents-heading .check-field{margin:0;font-size:12px;font-weight:600}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card{min-width:0}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card{position:relative}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card>.approval-verification{position:absolute;inset:8px 8px auto auto;z-index:1;margin:0;padding:3px 5px;background:var(--card);border-radius:5px;font-size:11px}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .supporting-document{padding-top:38px}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .supporting-document-type{position:absolute;top:10px;left:42px;right:42px;min-height:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.approval-document-card .supporting-document-type{position:absolute!important;top:10px!important;left:42px!important;right:42px!important;min-height:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:left!important}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .supporting-document-name{display:none}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .supporting-document-actions{position:absolute;inset:5px auto auto 5px;z-index:1}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .verification{margin:8px 0 0;padding:0;min-inline-size:0}
/* Download icon, document heading and checkbox share one 30px row at the top of the card. */
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .supporting-document-actions{inset:6px auto auto 6px}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .supporting-document-download{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:5px}
.approval-document-card .supporting-document-type{top:6px!important;height:30px;line-height:30px!important}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card>.approval-verification{inset:6px 6px auto auto;height:30px;display:flex;align-items:center;padding:0 5px}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card>.approval-verification input{margin:0}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .verification legend{margin-bottom:4px}
:is(#rental-approval-form,#rental-approval-review) .approval-document-card .verification label{display:block;margin:2px 0}
:is(#rental-approval-form,#rental-approval-review) .approval-tag-section{margin-top:8px}
:is(#rental-approval-form,#rental-approval-review) .approval-tags{gap:6px;margin-top:5px}

.html-agreement-frame{width:100%;height:65vh;min-height:420px;border:1px solid var(--border);background:white;border-radius:8px}
#modal:has(.template-mapping-layout),#modal:has(#html-template-form),#modal:has(.html-agreement-frame){width:min(1400px,96vw);max-width:96vw}
#modal:has(#html-template-form[data-id=""]){width:min(680px,calc(100% - 32px))}
#modal:has(#html-template-form:not([data-id=""])){width:min(960px,calc(100% - 32px))}
#html-template-form .lease-template-edit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.template-mapping-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px}
.template-mapping-sources{display:grid;grid-template-columns:1fr;gap:10px}
.template-mapping-sources .field{min-width:0}
/* Source field picker: field names under sticky section headings, with Frequently Used first. */
.template-source-toggle{width:100%;min-height:40px;padding:11px 32px 11px 12px;border:1px solid #e4dfed;border-radius:7px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2377768b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text);font-size:12px;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
html[data-theme=dark] .template-source-toggle{border-color:#514461}
.template-source-list{position:relative;max-height:320px;overflow:auto;margin-top:4px;border:1px solid var(--border);border-radius:7px;background:var(--card)}
.template-source-heading{position:sticky;top:0;z-index:1;padding:6px 10px;background:var(--bg);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--muted)}
.template-source-option{display:block;width:100%;padding:6px 10px 6px 16px;border:0;background:none;color:var(--text);font-size:12px;text-align:start;cursor:pointer}
.template-source-option:is(:hover,:focus-visible){background:var(--primary-soft);outline:none}
.template-source-option[aria-selected="true"]{color:var(--primary);font-weight:600}
@keyframes template-control-flash{from{box-shadow:0 0 0 3px var(--primary)}to{box-shadow:0 0 0 3px transparent}}
.template-control-flash{animation:template-control-flash 1.2s ease-out}
#modal:has(.workspace-members-table){width:min(1150px,95vw);max-width:95vw}
.workspace-members-table{min-width:850px}.workspace-members-table td:nth-child(2){white-space:nowrap}
.properties-page .data-table{min-width:1000px}.properties-page .data-table td{white-space:nowrap}
@media(max-width:850px){.template-mapping-layout{grid-template-columns:1fr}.html-agreement-frame{height:55vh}}
@media(max-width:800px){#html-template-form .lease-template-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#html-template-form .lease-template-edit-grid{grid-template-columns:minmax(0,1fr)}}

/* Keep the name fields in their parent form grid. */
.person-name-fields { display:contents; }

/* Property details need room for the members table. */
#modal[open].workspace-dialog:has(.workspace-members-table) { width:min(1100px,calc(100% - 32px))!important; }

/* Shared layout for property and Team member popups. */
#modal[open].workspace-dialog:has(#workspace-member-form) { width:min(1040px,calc(100% - 32px))!important; }
#modal #workspace-member-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
#workspace-member-form .workspace-new-member:not([hidden]),
#workspace-member-form .workspace-existing-member:not([hidden]) { display:contents; }
#workspace-member-form .field { min-width:0; }
#workspace-member-form > p,
#workspace-member-form > .form-error,
#workspace-member-form > .modal-actions,
#workspace-member-form .workspace-existing-member > small { grid-column:1 / -1; }
@media(max-width:720px) {
 #modal #workspace-member-form { grid-template-columns:minmax(0,1fr); }
}

.member-address-fields { display:contents; }

.application-tab-person { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.application-content .tab .application-tab-person .application-member-status { margin-inline-start:0; }
.application-tab-name { display:flex; align-items:center; gap:6px; }

#modal[open].workspace-dialog:has(#team-user-form[data-remove="false"]) { width:min(1040px,calc(100% - 32px))!important; }
#modal #team-user-form[data-remove="false"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
#team-user-form[data-remove="false"] .field { min-width:0; }
#team-user-form[data-remove="false"] > p,
#team-user-form[data-remove="false"] > .form-error,
#team-user-form[data-remove="false"] > .modal-actions { grid-column:1 / -1; }
@media(max-width:720px) {
 #modal #team-user-form[data-remove="false"] { grid-template-columns:minmax(0,1fr); }
}

.payment-settings-heading{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.payment-settings-heading h2{margin:0}
.payment-settings-heading form{display:flex;align-items:center;gap:24px;flex-wrap:wrap;flex:1;min-width:0}
.payment-settings-heading form .form-error{flex-basis:100%}
.payment-settings-heading input[type=email]{width:260px;max-width:100%;min-width:0}
.payment-settings-heading .field{display:flex;flex-direction:row;align-items:center;gap:12px;margin:0;min-width:0}
.payment-settings-heading .field > span{white-space:nowrap}
.payment-settings-heading .field > select{width:auto;min-width:120px}

/* Shared dropdowns: options sit outside the control, with room to scroll. */
@supports (appearance:base-select) {
 select:not([multiple]):not([size]),select[size="1"]:not([multiple]),
 select:not([multiple]):not([size])::picker(select),select[size="1"]:not([multiple])::picker(select){appearance:base-select}
 select::picker(select){
  position:fixed;position-area:none;position-try-fallbacks:none;
  inset:auto;top:var(--select-top,anchor(bottom));bottom:var(--select-bottom,auto);left:var(--select-left,anchor(left));
  width:var(--select-width,anchor-size(width));
  inline-size:var(--select-width,anchor-size(width));min-inline-size:0;max-inline-size:var(--select-width,anchor-size(width));box-sizing:border-box;
  max-height:var(--select-height,320px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:5px;border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--text);box-shadow:0 8px 24px #0003;font:inherit;
 }
 select option{box-sizing:border-box;min-width:0;max-width:100%;padding:8px 10px;min-height:34px;white-space:normal;overflow-wrap:anywhere;border-radius:5px;cursor:pointer}
 select option:hover,select option:focus-visible,select option:checked{background:var(--primary-soft);color:var(--text)}
 select option:disabled{opacity:.5;cursor:default}
 select:not([multiple]):not([size]):not([hidden]),select[size="1"]:not([multiple]):not([hidden]){display:inline-flex;align-items:center;justify-content:space-between;column-gap:8px}
 select::picker-icon{content:"";display:block;width:14px;height:12px;background:currentColor;color:var(--text);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3 1h18c2.4 0 3.7 2.6 2.2 4.5L14 18c-1 1.4-3 1.4-4 0L.8 5.5C-.7 3.6.6 1 3 1Z'/%3E%3C/svg%3E") center/contain no-repeat;margin-inline-start:auto;margin-inline-end:2px;flex-shrink:0}
}
.property-multiselect[open] .property-checks{
 position:fixed;inset:auto;left:var(--select-left);top:var(--select-top);bottom:var(--select-bottom);
 width:var(--select-width);min-width:0;max-width:var(--select-width);max-height:var(--select-height,320px);box-sizing:border-box;margin:0;overflow-x:hidden;
 overscroll-behavior:contain;z-index:10000;
}

.property-multiselect .property-checks label{min-width:0;white-space:normal;overflow-wrap:anywhere}

#post-form > .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#post-form > .form-grid > .field{min-width:0}
@media(max-width:800px){#post-form > .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#post-form > .form-grid{grid-template-columns:minmax(0,1fr)}}
#processing-indicator{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgb(0 0 0 / .12);color:var(--text);z-index:2147483647;display:grid;place-items:center;cursor:progress}
#processing-indicator[hidden]{display:none}
.processing-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 30px;border-radius:14px;background:var(--card);box-shadow:0 8px 32px #0003;font-size:14px}
.processing-spinner{width:42px;height:42px;border:4px solid var(--primary-soft);border-top-color:var(--primary);border-radius:50%;animation:processing-spin .75s linear infinite}
@keyframes processing-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.processing-spinner{animation:none}}


#modal .modal-body .form-error{display:none}
#modal > .popup-error-summary{flex-shrink:0;margin:12px 24px 0;max-height:120px;overflow:auto;cursor:pointer}

#post-form > .form-grid > .field:has(input[name="title"]){grid-column:1 / -1}

/* Profile picture drafts are previewed inside a modal before being saved. */
.profile-picture-dialog{width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--text);overflow:hidden}
.profile-picture-dialog[open]{display:flex;flex-direction:column}
.profile-picture-dialog::backdrop{background:#1119}
.profile-picker-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.profile-picker-header h2{font-size:16px;margin:0;flex:1}
.profile-picker-header .icon-btn{flex-shrink:0}
.profile-picker-body{padding:20px;overflow:auto;min-height:0}
.profile-picker-body>.field{margin-bottom:8px}
.profile-picker-body>small{color:var(--muted)}
.profile-picker-preview{display:grid;place-items:center;min-height:160px;margin:16px 0;padding:12px;background:var(--bg);border-radius:12px}
.profile-picker-preview img{width:160px;height:160px;object-fit:cover;border-radius:50%}
.profile-picker-preview img[hidden],.profile-picker-preview p[hidden]{display:none}
.profile-picture-tab{flex:1 0 auto;min-height:44px;padding:12px 16px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.profile-picture-tab:hover{color:var(--primary);background:var(--primary-soft)}
.profile-picture-tab[aria-selected=true]{color:var(--primary);border-bottom-color:var(--primary);font-weight:650}
.profile-picture-tab:focus-visible{outline:2px solid var(--primary);outline-offset:-4px}
.profile-picture-dialog .form-error:empty{display:none}
@media(max-width:520px){.profile-picker-header{gap:8px;padding:12px;flex-wrap:wrap}.profile-picker-header h2{flex-basis:100%}.profile-picker-header .primary{margin-left:auto}.profile-picker-body{padding:14px}.profile-picker-preview img{width:120px;height:120px}}

.payment-secret-control{position:relative;min-width:0}
#paypal-client-secret{min-width:0;width:100%;box-sizing:border-box;padding-right:48px}
.payment-secret-control .icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:32px;padding:0;border:0;background:transparent;color:var(--muted)}
.payment-secret-control .icon-btn:hover{color:var(--primary)}
.payment-secret-control .icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}

/* Keep Settings compact while allowing overflow on small screens and at zoom. */
.settings-page .settings-layout{gap:10px}
.settings-page .settings-panel{padding:12px}
.settings-page .settings-panel h2{margin-bottom:7px}
.settings-page .settings-panel p{margin:5px 0}
.settings-page .profile-photo-heading{margin-bottom:6px}
.settings-page .profile-photo-heading h2{margin:0}
.settings-page .profile-photo-form{margin-bottom:6px}
.settings-page .profile-photo-display .avatar{width:48px;height:48px;font-size:18px}
.settings-page .field{margin-bottom:0}
.settings-page .form-grid{gap:6px 10px}
.show-column-filter-setting{align-self:end;min-height:var(--form-control-height,38px);display:flex;align-items:center;gap:8px}
.settings-page .form-section{margin:8px 0 5px;padding-bottom:4px}
.settings-page .settings-account{margin-top:10px}
.settings-page .color-option{min-height:38px;padding:6px;gap:5px}
.settings-page .payment-settings-heading{gap:16px;margin-bottom:6px}
.settings-page .payment-settings-heading h2{margin:0}
.settings-page .payment-settings-heading form{gap:8px 16px}
.settings-page .payment-settings-grid{gap:10px}
.settings-page .payment-secret-saved{font-size:10px;margin-bottom:0}
@media(min-width:1101px){
 .shell>.main.settings-page{--form-control-height:32px;padding-top:8px;padding-bottom:8px}
 .shell>.main.settings-page>.page-heading{margin-bottom:8px;padding-block:2px}
 .settings-page #profile-form>.form-grid:first-child{grid-template-columns:repeat(3,minmax(0,1fr))}
 .settings-page .field input,.settings-page .field select{min-height:32px;padding-block:5px}
 .settings-page .page-content{padding-bottom:0}
}
@media(max-width:600px){.settings-page .color-option{min-height:44px}}

/* Theme choices preview the resulting page background, including when hovered. */
#main.settings-page .color-option[data-color]{background:var(--palette-soft);color:#27263e;border-color:var(--primary)}
#main.settings-page .color-option[data-preview-theme=dark]{background:var(--palette-dark);color:#e6e0f3}
#main.settings-page .custom-color-option{background:var(--custom-page,var(--bg));color:var(--custom-text,var(--text));border-color:var(--border)}
#main.settings-page .color-option[aria-pressed=true],#main.settings-page .custom-color-option[data-selected=true]{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}

/* Popup dismissal stays a consistent, compact X control. */
:is(#modal,.lease-detail-popup) .modal-head>.popup-dismiss,.photo-viewer-controls .popup-dismiss,.date-picker-footer .popup-dismiss{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted)}
:is(#modal,.lease-detail-popup) .modal-head>.popup-dismiss:hover,.photo-viewer-controls .popup-dismiss:hover,.date-picker-footer .popup-dismiss:hover{background:var(--primary-soft);color:var(--primary)}

/* Center the Properties grid's unit, member and invitation counts. */
.workspace-grid tbody td:nth-child(4),
.workspace-grid tbody td:nth-child(5),
.workspace-grid tbody td:nth-child(6){text-align:center}
.workspace-grid tbody td:nth-child(4)::before,
.workspace-grid tbody td:nth-child(5)::before,
.workspace-grid tbody td:nth-child(6)::before{text-align:start}

/* Invitation address fields share two columns where the screen has room. */
.login-inner:has(#activate-household-form:is([data-purpose="team"],[data-purpose="tenant"])) {
  width:100%;
  max-width:620px;
}
#activate-household-form:is([data-purpose="team"],[data-purpose="tenant"]) .member-address-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:16px;
}
#activate-household-form:is([data-purpose="team"],[data-purpose="tenant"]) .member-address-fields .field { min-width:0; }
@media(max-width:640px) {
  #activate-household-form:is([data-purpose="team"],[data-purpose="tenant"]) .member-address-fields { grid-template-columns:minmax(0,1fr); }
}

.photo-viewer-stage { position:relative; display:flex; flex:1; min-height:0; }
.photo-viewer-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:44px; height:52px; border:1px solid #ffffff80; border-radius:10px; background:#171923d9; color:#fff; font-size:26px; cursor:pointer; }
.photo-viewer-previous { left:12px; }
.photo-viewer-next { right:12px; }
.photo-viewer-arrow[hidden] { display:none; }
.photo-viewer-arrow:disabled { opacity:.3; cursor:default; }
#modal:has(#tenant-invite-form) { width:min(820px,calc(100vw - 32px)); max-width:820px; }
#tenant-invite-form .property-invite-new { grid-template-columns:repeat(2,minmax(0,1fr)); }
#tenant-invite-form .property-invite-new[hidden] { display:none; }
#tenant-invite-form .field { min-width:0; }
@media(max-width:540px) { #tenant-invite-form .property-invite-new { grid-template-columns:minmax(0,1fr); } }

#household-form { grid-template-columns:repeat(4,minmax(0,1fr)); }
#household-form .household-new-fields .field { min-width:0; }
@media(max-width:900px) { #household-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { #household-form { grid-template-columns:minmax(0,1fr); } }

.household-add > summary { display:flex; align-items:center; gap:16px; width:100%; }
.household-add > summary > .btn { flex-shrink:0; }
.household-add-help { font-size:12px; line-height:1.7; color:var(--muted); }
#household-form { display:grid; gap:14px; }
#household-form > .field { min-width:0; margin:0; }
#household-form .household-new-fields:not([hidden]),#household-form .household-new-fields > .form-grid { display:contents; }
#household-form > .form-error,#household-form > .household-form-actions { grid-column:1 / -1; }
#household-form .household-existing-fields:not([hidden]) { display:contents; }
#household-form .household-existing-fields > .field { min-width:0; margin:0; }
#household-form .household-existing-fields > p { grid-column:1 / -1; margin:0; }
@media(max-width:540px) { .household-add > summary { align-items:flex-start; flex-direction:column; gap:8px; } }

.applicant-test-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.login-inner:has(#activate-household-form[data-purpose="household"]) { width:100%; max-width:860px; }
#activate-household-form[data-purpose="household"] .member-address-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:16px; }
#activate-household-form[data-purpose="household"] .member-address-fields .field { min-width:0; }
@media(max-width:900px) { #activate-household-form[data-purpose="household"] .member-address-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { #activate-household-form[data-purpose="household"] .member-address-fields { grid-template-columns:minmax(0,1fr); } }
#activate-household-form[data-purpose="household"] > .field:has(input[name="password"],input[data-invitation-email]) { width:auto; min-width:0; }
@media(max-width:900px) { #activate-household-form[data-purpose="household"] > .field:has(input[name="password"],input[data-invitation-email]) { width:auto; } }
@media(max-width:540px) { #activate-household-form[data-purpose="household"] > .field:has(input[name="password"],input[data-invitation-email]) { width:auto; } }

#activate-household-form[data-purpose="household"] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:16px; }
#activate-household-form[data-purpose="household"] > :is(p,.member-address-fields,.form-error,button) { grid-column:1 / -1; }

.settings-page .settings-address-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.settings-page .settings-address-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.settings-page .settings-address-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px) { #activate-household-form[data-purpose="household"] { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { #activate-household-form[data-purpose="household"] { grid-template-columns:minmax(0,1fr); } }
/* Every checkbox uses the larger 22px size; :is() lifts this above the older per-section 16–17px rules. */
html :is(body,.subscription-feature-options,.property-multiselect .property-checks,.declaration-label,.chat-attachment-selection) input[type=checkbox]{width:22px;height:22px;min-width:22px;min-height:22px;max-width:22px;flex:0 0 22px;vertical-align:middle;accent-color:var(--primary)}
/* Settings errors are mirrored into the page header, so the in-form copies stay hidden. */
.page-heading .heading-actions>.popup-error-summary{margin:0;padding:8px 12px;font-size:14px;line-height:1.4;max-width:min(520px,100%);max-height:80px;overflow:auto;cursor:pointer}
.settings-layout .form-error:not(.popup-error-summary){display:none}
/* Radios match the 22px checkboxes. */
html body input[type=radio]{width:22px;height:22px;min-width:22px;min-height:22px;max-width:22px;flex:0 0 22px;margin:0 6px 0 0;vertical-align:middle;accent-color:var(--primary)}
/* Phone and tablet layout. */
@media(max-width:1100px){
 /* Record grids scroll sideways instead of squeezing every column; the minimum width follows the column count. */
 .table-wrap .data-table.record-table:has(thead tr:first-child>:nth-child(4)){min-width:560px}
 .table-wrap .data-table.record-table:has(thead tr:first-child>:nth-child(6)){min-width:760px}
 .table-wrap .data-table.record-table:has(thead tr:first-child>:nth-child(8)){min-width:980px}
 .table-wrap .data-table.record-table:has(thead tr:first-child>:nth-child(10)){min-width:1180px}
 .data-table.record-table th,.data-table.record-table td{overflow-wrap:break-word;word-break:normal}
 .table-wrap{-webkit-overflow-scrolling:touch}
}
@media(max-width:720px){
 /* The Properties-group grid becomes stacked cards on phones, so it must not keep its desktop width. */
 .table-wrap .data-table.workspace-grid{min-width:0;width:100%}
 .workspace-grid thead tr.grid-column-filters :is(input,select){width:100%;min-width:0;box-sizing:border-box}
 /* Popup close stays in the top-right corner when header actions wrap. */
 :is(#modal,.lease-detail-popup) .modal-head{position:relative;padding-right:56px}
 :is(#modal,.lease-detail-popup) .modal-head>:is(.popup-dismiss,[data-action="close"]){position:absolute;top:8px;right:8px;margin:0}
 :is(#modal,.lease-detail-popup) .modal-head .btn{min-height:40px}
 .page-heading{flex-wrap:wrap;gap:12px}
 .page-heading .heading-actions{flex-wrap:wrap;justify-content:flex-start}
}

/* Profile & settings popup: wide two-column layout, Save changes and errors pinned in the header. */
.lease-detail-popup.settings-popup{width:min(1180px,calc(100% - 32px))}
.settings-popup .modal-head{justify-content:flex-end}
.settings-popup .modal-head h2{margin-right:auto}
.settings-popup .modal-head>.btn{min-height:40px;padding:10px 15px;width:auto;flex-grow:0}
.settings-popup .modal-head>.popup-error-summary{flex:1 1 240px;min-width:0;margin:0;padding:6px 10px;font-size:14px;line-height:1.4;max-height:64px;overflow:auto;cursor:pointer}
.settings-popup .settings-layout{margin:0}
@media (max-width:720px){.lease-detail-popup.settings-popup{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}.lease-detail-popup.settings-popup .modal-head{display:grid;grid-template-columns:1fr auto;gap:8px}.lease-detail-popup.settings-popup .modal-head h2{grid-column:1;grid-row:1;margin:0}.lease-detail-popup.settings-popup .modal-head .popup-dismiss{grid-column:2;grid-row:1}.lease-detail-popup.settings-popup .modal-head>.btn{grid-column:1/-1;grid-row:2;width:100%}.lease-detail-popup.settings-popup .modal-head>.popup-error-summary{grid-column:1/-1;grid-row:3}}

/* Account popups (Profile, Application Theme, Payment, Delegation, Change Password, Other Settings). */
.lease-detail-popup.account-popup:is(.account-popup-password,.account-popup-settings,.account-popup-delegation){width:min(900px,calc(100% - 32px))}
.account-popup .modal-head h2{display:flex;align-items:center;gap:8px}
.account-popup .modal-head h2 .icon{width:20px;height:20px;flex:none}
.account-popup .account-layout{display:grid;gap:14px;min-width:0}
.account-popup .account-layout>.panel{margin:0;min-width:0}
.account-popup .account-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:start}
.account-popup .account-grid>.field,.account-popup .account-grid>.check-field{min-width:0}
.account-popup .settings-address-grid{margin-top:12px}
.account-popup .account-color-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.account-popup .settings-payments .payment-settings-heading{display:block}
.account-popup .settings-payments .payment-settings-heading form,.account-popup .payment-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:start}
.account-popup .settings-payments .payment-settings-heading h2{margin-bottom:10px}
.account-popup .settings-payments .payment-settings-heading .form-error{grid-column:1/-1}
.account-popup .show-column-filter-setting{align-self:center;min-height:44px}
.account-popup .delegation-grid{width:100%}
.account-popup .delegation-grid .actions{display:flex;gap:6px;justify-content:flex-start}
.account-option .icon{width:18px;height:18px;flex:none}
#modal #account-delegation-form .account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1024px){.account-popup .account-grid,.account-popup .settings-payments .payment-settings-heading form,.account-popup .payment-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.account-popup .account-grid,.account-popup .settings-payments .payment-settings-heading form,.account-popup .payment-settings-grid,#modal #account-delegation-form .account-grid{grid-template-columns:minmax(0,1fr)}.account-popup .account-color-options{grid-template-columns:repeat(2,minmax(0,1fr))}.lease-detail-popup.account-popup:is(.account-popup-password,.account-popup-settings,.account-popup-delegation){width:calc(100% - 16px)}}

/* Tablet header: longer translations (French, Tamil, Russian…) must not push the account button off-screen. */
@media (min-width:721px) and (max-width:1100px){
 .topbar{min-width:0}
 .topbar .breadcrumb{min-width:0;overflow:hidden;flex:1 1 auto}
 .topbar .breadcrumb>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
 .topbar-actions{min-width:0;flex:0 1 auto;gap:8px}
 .topbar-actions .searchbox{min-width:0;flex:1 1 110px;max-width:190px}
 .topbar-actions .searchbox input{min-width:0;width:100%}
 .topbar-actions .searchbox kbd,.topbar-actions .topbar-separator{display:none}
 .topbar-actions .ask-ai-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .topbar-language bdi{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .topbar-actions>*{flex-shrink:0}
 .topbar-actions>.searchbox{flex-shrink:1}
}
.account-popup .settings-payments .payment-settings-heading .field{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:auto;max-width:none}
.account-popup .settings-payments .payment-settings-heading .field>span{white-space:normal}
.account-popup .settings-payments .payment-settings-heading .field :is(select,input){width:100%;max-width:none}

/* Popup errors: one line directly under the header (also shown as a toast); inline copies are hidden. */
dialog > .popup-error-summary{flex-shrink:0;margin:10px 20px 0;padding:8px 12px;font-size:14px;line-height:1.4;max-height:96px;overflow:auto;cursor:pointer}
dialog .modal-body .form-error:not(.popup-error-summary),dialog form .form-error:not(.popup-error-summary){display:none}
/* Delete actions in any popup use a solid red button. */
dialog .btn.danger,dialog .btn.danger-solid,.btn.danger-solid{background:#b42332;border-color:#b42332;color:#fff}
dialog .btn.danger:is(:hover,:focus-visible),.btn.danger-solid:is(:hover,:focus-visible){background:#921c29;border-color:#921c29;color:#fff}
dialog .icon-btn[data-action$="-delete"]:not(:disabled){background:#b42332;border-color:#b42332;color:#fff}
dialog .icon-btn[data-action$="-delete"]:not(:disabled):is(:hover,:focus-visible){background:#921c29;color:#fff}
/* Profile picture remove: red trash icon without a filled background. */
dialog .icon-btn[data-action="remove-photo"]:not(:disabled){background:transparent;border-color:transparent;color:#b42332}
dialog .icon-btn[data-action="remove-photo"]:not(:disabled):is(:hover,:focus-visible){background:transparent;border-color:transparent;color:#921c29}
/* Application Theme: swatches at half size in a narrower popup. */
.lease-detail-popup.account-popup-theme{width:min(620px,calc(100% - 32px))}
.account-popup-theme .account-color-options{gap:8px}
.account-popup-theme .color-option{min-height:0;height:auto;padding:8px 6px;gap:4px;font-size:12px}
.account-popup-theme .color-option .color-swatch{width:18px;height:18px;min-height:0}
.account-popup-theme .color-option .icon{width:14px;height:14px}

/* Compact listings on Rental Unit and Posts (the public #browse page keeps its card size). */
.main .property-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.main .property-grid .property-photo{height:130px}
:is(.main,#modal) .property-card .property-info{padding:11px 13px;font-size:12px}
:is(.main,#modal) .property-card .property-info h3{font-size:14px;margin-bottom:4px}
:is(.main,#modal) .property-card .property-name-location>span{font-size:12px}
:is(.main,#modal) .property-card .property-features{margin:8px 0;padding-bottom:9px;gap:6px 12px;font-size:12px}
:is(.main,#modal) .property-card .property-features .icon{width:14px;height:14px}
:is(.main,#modal) .property-card .property-features .preview-parking-lease{gap:10px}
:is(.main,#modal) .property-card .property-price strong{font-size:14px}
:is(.main,#modal) .property-card .property-price>span{font-size:11px}
/* Amenities and Utility bill sharing chips on cards and listing details (Rental Unit, Browse, Posts). */
.property-card .chip,.property-detail-information .chip,.property-features .preview-amenities .chip,.detail-values .preview-amenities .chip{font-size:11px;line-height:1.3;padding:2px 8px}
.property-features .preview-amenities,.detail-values .preview-amenities,.property-utility-summary .property-utility-bills{gap:4px}

/* Listing preview (Rental Unit, Posts, Browse): photos fill their frame, centred, and the popup is more compact. */
#modal:has(.property-detail-layout){width:min(1180px,calc(100% - 32px))!important}
@media(min-width:801px){#modal:has(.property-detail-layout){height:calc(100dvh - 64px)}.property-detail-layout{grid-template-columns:minmax(0,1fr) minmax(0,5fr);gap:16px}}
.property-detail-information .detail-hero{height:260px;object-fit:cover;object-position:center center}
.property-detail-media .property-media-gallery{gap:8px}
.property-detail-media .property-media-gallery img,.property-detail-media .property-media-gallery video{height:96px;object-fit:cover;object-position:center center}
.property-detail-information{font-size:13px;line-height:1.5}
.property-detail-information .property-address,.property-detail-information .detail-values{font-size:13px}
.property-detail-information .detail-values small{font-size:11px}
.property-detail-information .property-detail-section h4{font-size:14px}
.property-detail-information .property-name-location{font-size:18px}
.property-detail-information .property-name-location>span{font-size:13px}
.property-detail-information .property-rental-summary{gap:12px;font-size:12px}
.property-detail-information .property-rental-summary>strong{font-size:16px}
.property-detail-information .property-rental-summary>strong small{font-size:11px}
/* Tighter line spacing in the details block. */
.property-detail-information .detail-values{gap:8px 18px;padding:12px 14px;margin:12px 0;line-height:1.35}
.property-detail-information .detail-values small{margin-bottom:2px}
.property-detail-information .detail-values p{margin:0}
.property-detail-information .detail-values .property-amenities-utilities{gap:8px 18px}
.property-detail-information .property-detail-section{margin:12px 0}
.property-detail-information .property-detail-section h4{margin-bottom:6px}
/* Title, address, available-from date, status and price share one 12px size. */
.property-detail-information .property-preview-heading,.property-detail-information .property-preview-heading :is(h3,span,strong,small,b,.badge){font-size:12px!important}
/* The blue title and price stand out at 14px. */
.property-detail-information .property-preview-heading :is(.property-name-location>strong,.property-rental-summary>strong){font-size:14px!important}
@media(max-width:850px){.property-detail-information .detail-hero{height:200px}.property-detail-media .property-media-gallery img,.property-detail-media .property-media-gallery video{height:84px}}

/* Properties view popup: Members and Rental Unit use the same panel grid as Applications and Leases. */
.workspace-view-grid{margin:14px 0}
.workspace-view-grid .panel-head h2{font-size:15px;margin:0}
.workspace-view-grid .panel-head{padding-block:10px}
/* Empty Members/Rental Unit panels should not consume the full popup height. */
#modal .workspace-view-grid:has(.grid-empty,.empty),#modal .workspace-view-grid:has(tbody:empty){max-height:50vh;min-height:0;overflow:auto}
/* Half-height empty state for Members / Rental Unit with no records. */
#modal .workspace-view-grid .empty{padding:12px 16px!important}
#modal .workspace-view-grid .empty .icon{width:22px;height:22px;margin-bottom:4px!important}
#modal .workspace-view-grid .empty h3{font-size:13px;margin:0 0 3px}
#modal .workspace-view-grid .empty p{font-size:11px;line-height:1.5;margin:0!important}
#modal .workspace-view-grid .grid-empty:not([hidden])~.grid-pagination{display:none}
/* Compact rows: tighter cell padding, smaller avatar, badge and action buttons. */
#modal .workspace-view-grid .data-table :is(th,td){padding-block:5px!important;line-height:1.3}
#modal .workspace-view-grid .data-table .avatar{width:24px;height:24px;min-width:24px;font-size:9px}
#modal .workspace-view-grid .data-table .stat-icon{width:24px;height:24px}
#modal .workspace-view-grid .data-table .person{gap:8px}
#modal .workspace-view-grid .data-table .badge{padding-block:2px}
#modal .workspace-view-grid .data-table .icon-btn{min-width:28px;min-height:28px;width:28px;height:28px;padding:5px}

/* Site-wide: text beside a checkbox or radio is centred on it. Flex labels centre their items;
   inline labels rely on vertical-align. Label display types are left unchanged. */
html body input:is([type=checkbox],[type=radio]){vertical-align:middle}
html body .check-field,html body label:has(> input:is([type=checkbox],[type=radio])){align-items:center}
html body :is(.check-field,label) > input:is([type=checkbox],[type=radio]){margin-top:0;margin-bottom:0}

/* Billing plans grid: compact rows and smaller status tags. */
.subscription-plan-grid :is(th,td){padding-block:6px!important;line-height:1.3}
:is(.subscription-plan-grid,.user-subscription-grid) .badge{padding:2px 7px;font-size:10px;line-height:1.3}
:is(.subscription-plan-grid,.user-subscription-grid) .badge:before{width:3px;height:3px}
:is(.subscription-plan-grid,.user-subscription-grid) .status-value-link{gap:5px;padding:2px 8px;border-radius:6px;font-size:10px;line-height:1.4}
:is(.subscription-plan-grid,.user-subscription-grid) .status-value-dot{width:5px;height:5px;flex-basis:5px}
:is(.subscription-plan-grid,.user-subscription-grid) .numeric-cell{text-align:right}
.subscription-plan-grid .icon-btn{min-width:28px;min-height:28px;width:28px;height:28px;padding:5px}

/* Lease template Import mapping popup (opens above the View popup); uses the shared popup and grid styles. */
.template-mapping-import-dialog{width:min(980px,calc(100% - 32px))}
.template-mapping-import-dialog .modal-header-actions{display:flex;gap:10px;align-items:center}
.template-mapping-import-dialog .modal-body>p{margin:0 0 12px}
/* File names stay on one line; the File name column takes the spare width and the grid scrolls sideways if needed. */
.template-mapping-import-dialog .table-wrap .data-table.template-mapping-import-table{table-layout:auto;width:100%}
.template-mapping-import-dialog .template-mapping-import-table :is(th,td):first-child{white-space:nowrap!important;overflow-wrap:normal;width:100%;min-width:360px}
.template-mapping-import-dialog .template-mapping-import-table :is(th,td):not(:first-child){white-space:nowrap;width:1%}
/* Compact Import mapping rows, matching the Properties view popup grids. */
.template-mapping-import-dialog .template-mapping-import-table :is(th,td){padding-block:5px!important;line-height:1.3}
.template-mapping-import-dialog .template-mapping-import-table .icon-btn{min-width:28px;min-height:28px;width:28px;height:28px;padding:5px}
.template-mapping-import-dialog .template-mapping-import-table .icon-btn .icon{width:16px;height:16px}

/* Split dropdown button (Team page): main action plus an arrow that opens the other actions. */
.split-button{position:relative;display:inline-flex;align-items:stretch}
.split-button>.btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.split-button>.split-button-toggle{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid #ffffff55;padding-inline:10px;min-width:38px}
.split-button-toggle[aria-expanded="true"] .icon{transform:rotate(180deg)}
.split-button-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:100%;width:max-content;max-width:min(320px,90vw);background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px #2420391f;padding:6px;display:flex;flex-direction:column;gap:2px}
.split-button-menu[hidden]{display:none}
.split-button-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:10px 12px;border-radius:7px;font-size:12px;font-weight:500;white-space:nowrap}
.split-button-item .icon{width:16px;height:16px;color:var(--muted)}
.split-button-item:hover,.split-button-item:focus-visible{background:var(--primary-soft);color:var(--primary);outline:none}
.split-button-item:hover .icon,.split-button-item:focus-visible .icon{color:var(--primary)}

/* Sign-in / register left panel: introduction, animated rental scene and feature list. */
.login-layout .login-showcase{position:relative;justify-content:center;gap:22px;padding:96px 56px 40px;overflow:hidden}
.login-showcase .brand{position:absolute;top:40px;left:56px}
.login-showcase .login-showcase-copy{max-width:520px}
.login-showcase .eyebrow{color:var(--primary);margin-bottom:12px}
.login-showcase h1{font-size:44px;margin:0 0 14px}
.login-showcase .login-showcase-copy p{margin:0;max-width:470px;font-size:15px}
.login-scene{position:relative;width:min(520px,100%);aspect-ratio:460/250}
.login-scene-art{width:100%;height:100%;overflow:visible}
.scene-shadow{fill:var(--primary);opacity:.08}
.scene-cloud{fill:#fff;opacity:.85}
.scene-cloud-a{animation:scene-drift 18s ease-in-out infinite alternate}
.scene-cloud-b{animation:scene-drift 22s ease-in-out infinite alternate-reverse}
.scene-sun{fill:#ffd88a;opacity:.9;transform-box:fill-box;transform-origin:center;animation:scene-pulse 4s ease-in-out infinite}
.scene-house{transform-box:fill-box;transform-origin:bottom center;animation:scene-rise .9s cubic-bezier(.2,.8,.2,1) both}
.scene-wall{fill:#fff;stroke:var(--primary);stroke-opacity:.25;stroke-width:2}
.scene-roof{stroke:var(--primary);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:240;stroke-dashoffset:240;animation:scene-draw 1.2s .3s ease-out forwards}
.scene-window{fill:var(--primary-soft);stroke:var(--primary);stroke-opacity:.35;stroke-width:2}
.scene-window-a{animation:scene-light 6s 1.5s ease-in-out infinite}
.scene-window-b{animation:scene-light 6s 4.5s ease-in-out infinite}
.scene-door{fill:var(--primary);opacity:.85}
.scene-knob{fill:#fff}
.scene-trunk{fill:#b89b7a}
.scene-leaves{fill:#8fd1b4;transform-box:fill-box;transform-origin:bottom center;animation:scene-sway 5s ease-in-out infinite alternate}
.scene-tree-b .scene-leaves{fill:#a6dcc4;animation-duration:6s}
.scene-card{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px #2a22551a;font-size:11px;color:var(--text);white-space:nowrap;opacity:0;animation:scene-card-in .6s cubic-bezier(.2,.8,.2,1) forwards,scene-float 5s ease-in-out infinite alternate}
.scene-card .icon{width:28px;height:28px;padding:6px;border-radius:8px;background:var(--primary-soft);color:var(--primary)}
.scene-card strong{display:block;font-size:12px;font-weight:600}
.scene-card small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.scene-card-a{left:-2%;top:6%;animation-delay:.9s,1.5s}
.scene-card-b{right:-4%;top:34%;animation-delay:1.3s,1.9s}
.scene-card-c{left:6%;bottom:2%;animation-delay:1.7s,2.3s}
.scene-card-a .icon{background:#e5f5ee;color:#2f8a68}
.scene-card-c .icon{background:#fff3e2;color:#b7843f}
.login-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;max-width:560px}
.login-features li{display:flex;gap:11px;align-items:flex-start;opacity:0;animation:scene-card-in .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(1.8s + var(--delay,0ms))}
.login-feature-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#ffffffb3;color:var(--primary);box-shadow:0 4px 12px #2a22550d}
.login-feature-icon .icon{width:17px;height:17px}
.login-features strong{display:block;font-size:12px;font-weight:600;color:var(--text)}
.login-features small{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:3px}
html[data-theme=dark] .scene-wall{fill:#2b2740}
html[data-theme=dark] .scene-cloud{opacity:.15}
html[data-theme=dark] .login-feature-icon{background:#ffffff14}
html[data-theme=dark] .login-showcase .login-showcase-copy p,html[data-theme=dark] .login-features small{color:#d8d4e6}
html[dir=rtl] .login-showcase .brand{left:auto;right:56px}
@keyframes scene-drift{to{transform:translateX(26px)}}
@keyframes scene-pulse{50%{transform:scale(1.08);opacity:1}}
@keyframes scene-rise{from{transform:translateY(18px) scale(.96);opacity:0}}
@keyframes scene-draw{to{stroke-dashoffset:0}}
@keyframes scene-light{0%,100%{fill:var(--primary-soft)}45%,55%{fill:#ffe7a6}}
@keyframes scene-sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@keyframes scene-card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes scene-float{from{translate:0 0}to{translate:0 -6px}}
@media(max-height:820px){.login-layout .login-showcase{padding-top:84px;gap:16px}.login-showcase h1{font-size:36px}.login-scene{width:min(430px,100%)}.login-features small{display:none}}
@media(max-width:1100px){.login-features{grid-template-columns:1fr}.scene-card-b{right:0}}
@media(prefers-reduced-motion:reduce){.login-showcase *,.login-showcase *::before{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}
/* Login panel uses the full-colour logo with a transparent background. */
.login-showcase .brand .login-showcase-logo{width:52px;height:52px;object-fit:contain;background:none;mask:none;-webkit-mask:none}
/* Sign-in / register right panel: faint ApplyRent watermark behind the form. */
.login-layout .login-form{position:relative;isolation:isolate;overflow:hidden}
.login-layout .login-form::before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;translate:-50% -50%;width:min(620px,80%);aspect-ratio:1;background:url('applyrent-transparent.png') center/contain no-repeat;opacity:.05}
html[data-theme=dark] .login-layout .login-form::before{opacity:.07}

/* Upload progress card: current file, position and percentage (replaces the plain "Processing…" card while uploading). */
#processing-indicator.is-uploading>.processing-card:not(.processing-upload){display:none}
.processing-card.processing-upload{flex-direction:row;align-items:center;gap:16px;width:min(420px,calc(100vw - 32px));padding:20px 22px}
.processing-upload-copy{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.processing-upload-title{font-size:14px;font-weight:600}
.processing-upload-file{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.processing-upload-file:empty{display:none}
.processing-upload-bar{display:block;height:6px;border-radius:6px;background:var(--primary-soft);overflow:hidden}
.processing-upload-bar>span{display:block;height:100%;width:0;border-radius:6px;background:var(--primary);transition:width .2s ease}
.processing-upload-percent{font-size:15px;font-weight:650;color:var(--primary);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* Rental Units and Posts: inactive records use red text; active records keep their colours. */
.property-card.is-inactive .property-info,.property-card.is-inactive .property-info *{color:#c62828!important}
html[data-theme=dark] .property-card.is-inactive .property-info,html[data-theme=dark] .property-card.is-inactive .property-info *{color:#ff8a80!important}

/* Rental Units and Posts: status tabs, country and sort sit in the heading, before the Add button. */
.page-heading:has(.rentalunit-heading-filters){flex-wrap:wrap}
.page-heading .heading-actions:has(.rentalunit-heading-filters){flex-wrap:wrap;justify-content:flex-end;gap:12px;flex:1 1 auto;min-width:0}
.heading-actions .filters.rentalunit-heading-filters{margin:0;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.heading-actions .rentalunit-heading-filters .filter-controls{flex-wrap:wrap;gap:10px;align-items:center}
@media(max-width:900px){.page-heading .heading-actions:has(.rentalunit-heading-filters),.heading-actions .filters.rentalunit-heading-filters{justify-content:flex-start;width:100%}}

/* Properties screen: one compact card per Properties group, matching the Rental Units cards. */
.workspace-card-grid .workspace-card{cursor:pointer;display:flex;flex-direction:column}
.workspace-card-grid .workspace-card:focus-visible{outline:3px solid #8c7cf7;outline-offset:3px}
.workspace-card-grid .workspace-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #3429660c}
.workspace-card-grid .workspace-card.workspace-selected{background:var(--card);box-shadow:0 0 0 2px var(--primary),0 8px 24px #3429660c}
.workspace-card .property-photo{height:120px}
.workspace-card .property-info{display:flex;flex-direction:column;gap:6px;flex:1;padding:12px 14px}
.workspace-card .property-info h3{margin:0;font-size:13px}
.workspace-card .workspace-card-description{margin:0;font-size:11px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.workspace-card .property-features{margin:2px 0 0;padding:0 0 8px;gap:10px;flex-wrap:wrap;row-gap:4px;font-size:10px}
.workspace-card .property-features .icon{width:13px;height:13px}
.workspace-card .workspace-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;flex-wrap:wrap}
.workspace-card .workspace-owner-list{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:4px;font-size:10px;min-width:0;flex:1}
.workspace-card .workspace-owner-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:500;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.workspace-card .workspace-owner-chip .icon-btn{width:18px;height:18px;min-width:18px;min-height:18px;padding:2px;border:0}
.workspace-card .workspace-owner-chip .icon-btn .icon{width:12px;height:12px}
.workspace-card .workspace-row-actions{display:flex;gap:4px;flex-wrap:nowrap}
.workspace-card .workspace-row-actions .icon-btn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:5px!important}
.workspace-card .workspace-row-actions .icon-btn .icon{width:15px;height:15px}
/* Dashboard recent activity (application → lease → invoice → payment). */
.recent-activity-table{width:100%;border-collapse:collapse;font-size:13px}
.recent-activity-table th{background:var(--primary-soft);color:var(--text);font-weight:600;text-align:left;padding:10px 14px;border:1px solid var(--border)}
.recent-activity-table td{padding:10px 14px;border:1px solid var(--border);white-space:nowrap}
.recent-activity-cell{cursor:pointer;color:var(--text);font-weight:500}
.recent-activity-cell:hover,.recent-activity-cell:focus-visible{background:var(--primary-soft);color:var(--primary);outline:none}
.recent-activity-cell.is-alert,.recent-activity-cell.is-alert:hover{color:#c62828}
html[data-theme=dark] .recent-activity-cell.is-alert{color:#ff8a80}
/* Create invoice popup: three-column field layout. */
#modal:has(#rental-invoice-form){width:min(900px,calc(100% - 32px))}
#rental-invoice-form .invoice-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;align-items:start}
#rental-invoice-form .invoice-form-grid>h3{grid-column:1/-1;margin:0}
#rental-invoice-form .invoice-form-grid .field{margin:0;min-width:0}
#rental-invoice-form section.invoice-form-grid{margin-top:12px;padding:10px 14px 12px;gap:8px 16px}
#rental-invoice-form section.invoice-form-grid>h3{font-size:14px;line-height:1.3}
@media(max-width:700px){#rental-invoice-form .invoice-form-grid{grid-template-columns:1fr}}

#rental-invoice-form p:has(#rental-invoice-total),#rental-invoice-total{font-size:14px;color:var(--text)}
#rental-invoice-form .invoice-top-row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){#rental-invoice-form .invoice-top-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#rental-invoice-form .invoice-top-row{grid-template-columns:1fr}}
#rental-invoice-form .invoice-form-grid .field small{display:block;margin-top:4px;font-size:11px}
/* Invoice view popup: three-column label/value layout. */
#modal:has(.invoice-view){width:min(1300px,calc(100% - 32px))}
.invoice-view-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px}
.invoice-view-grid .summary-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-width:0;min-height:0;padding:0;text-align:left}
.invoice-view-grid .summary-item>strong{text-align:left;margin:0}
.invoice-view-grid .summary-item>span{font-size:11px;color:var(--muted)}
.invoice-view-grid .summary-item>strong{font-size:14px;color:var(--text);overflow-wrap:anywhere}
.invoice-view-grid .field{margin:0;min-width:0}
.invoice-view-section{margin-top:12px;padding:10px 14px 12px}
.invoice-view-section h4{margin:0 0 8px;font-size:14px}
form.invoice-view-section{padding:10px 0 0}
@media(max-width:700px){.invoice-view-grid{grid-template-columns:1fr}}
.invoice-view-lines{margin-top:10px}
.invoice-lines-table{width:100%;border-collapse:collapse;font-size:13px}
.invoice-lines-table th{background:var(--primary-soft);color:var(--text);font-weight:600;text-align:left;padding:6px 12px;border:1px solid var(--border)}
.invoice-lines-table td{padding:5px 12px;border:1px solid var(--border);color:var(--text)}
.invoice-lines-table .num{text-align:right;white-space:nowrap}
.invoices-table .num{text-align:right;white-space:nowrap}
.invoice-lines-table tfoot th{font-size:14px}
#modal:has(.invoice-view) .modal-body{padding-top:12px}
.invoice-view>.invoice-view-grid .summary-item{gap:2px}
.invoice-view>.invoice-view-grid .summary-item>strong .badge{margin:0}
.invoice-view-grid .summary-item{margin:0!important;border:0;background:none;box-shadow:none}
/* #invoices grid: keep every column on one line (the table scrolls sideways if needed). */
.table-wrap .data-table.record-table.invoices-table{table-layout:auto;width:100%}
.data-table.invoices-table :is(th,td),.data-table.record-table.invoices-table :is(th,td){white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}
/* Interac e-Transfer payment popup. */
#modal:has(.interac-pay){width:min(820px,calc(100% - 32px))}
.interac-pay-details{margin:10px 0;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--primary-soft)}
.interac-pay-details strong{display:inline-flex;align-items:center;gap:6px}
.interac-pay-details .icon-btn{width:28px;height:28px;min-width:28px}
.interac-steps{margin:8px 0 12px 18px;padding:0;font-size:13px;line-height:1.6;color:var(--text)}
.interac-evidence small{display:block;margin-top:4px;font-size:11px}
.invoice-view-grid .summary-item a{display:inline-flex;align-items:center;gap:4px}
.invoice-view-subhead{margin:14px 0 6px;font-size:14px}
.invoice-balance-due{color:#c62828}
html[data-theme=dark] .invoice-balance-due{color:#ff8a80}
.payment-method-choice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 10px}
.payment-method-option{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.payment-method-option input{width:18px;height:18px;accent-color:var(--primary)}
.payment-method-due{margin-left:auto;font-size:13px;color:var(--muted)}
.payment-method-due strong{color:var(--text)}
.interac-pay :is([data-method-only],[data-method-not])[hidden]{display:none!important}
.interac-pay .invoice-view-grid>div:empty{display:none}
.interac-note-row{margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.interac-note-row{grid-template-columns:1fr}}

/* Create / edit invoice: two-field top row and the editable bill-lines grid. */
#rental-invoice-form .invoice-top-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){#rental-invoice-form .invoice-top-row-2{grid-template-columns:1fr}}
.invoice-lines-editor{margin-top:12px}
.invoice-lines-editor td{vertical-align:middle}
.invoice-lines-editor select,.invoice-lines-editor input[type=number]{width:100%;min-width:90px;padding:6px 8px;border:1px solid #e4dfed;border-radius:7px;background:var(--card);color:var(--text);font-size:13px;min-height:34px}
.invoice-lines-editor input[type=number]{text-align:right}
.invoice-lines-editor input[readonly]{background:var(--bg);color:var(--muted)}
.invoice-lines-editor .invoice-line-file input[type=file]{max-width:210px;font-size:12px}
.invoice-lines-editor .invoice-line-file small{display:block;font-size:11px;overflow-wrap:anywhere}
.invoice-lines-editor .invoice-line-new td{background:var(--primary-soft)}
.invoice-lines-editor .actions{justify-content:flex-end;flex-wrap:nowrap}
.invoice-lines-editor tfoot th{font-size:14px}
/* Bill Type and Attach Bill columns share the same, wider width. */
.invoice-lines-editor .invoice-lines-table{table-layout:fixed}
.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(1),.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(5){width:24%}
.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(2),.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(4){width:14%}
.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(3){width:10%}
.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(6){width:14%}
.invoice-lines-editor .invoice-lines-table tfoot :is(th,td){width:auto}
.invoice-lines-editor .invoice-lines-table td{overflow-wrap:anywhere}
.invoice-lines-editor select{min-width:0}
.invoice-lines-editor .invoice-line-file input[type=file]{max-width:100%}
dialog.bill-type-dialog{width:min(460px,calc(100% - 32px))}
dialog.bill-type-dialog .modal-head{position:static}
.bill-type-help{margin:6px 0 0;font-size:12px}

/* Inputs always fit inside their grid cell (no overlap into the next column). */
.invoice-lines-editor select,.invoice-lines-editor input[type=number]{min-width:0;max-width:100%;box-sizing:border-box}
.invoice-lines-editor input[type=number]{-moz-appearance:textfield;appearance:textfield;padding-inline:8px}
.invoice-lines-editor input[type=number]::-webkit-inner-spin-button,.invoice-lines-editor input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(3){width:12%}
.invoice-lines-editor .invoice-lines-table :is(th,td):nth-child(6){width:12%}
.invoice-lines-editor .invoice-lines-table td{overflow:hidden}
.invoice-lines-editor .invoice-lines-table{min-width:760px}
.invoice-lines-editor .invoice-lines-table :is(th,td){padding:6px 10px}
.invoice-lines-editor .invoice-lines-table th{white-space:nowrap}
/* Invoice document (view popup): banner, parties, lines, totals, payment information. Uses the theme colours. */
#modal:has(.invoice-doc){width:min(1300px,calc(100% - 32px));max-width:calc(100% - 32px)}
.invoice-doc{position:relative;background:#fff;color:#2b2b38;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:14px;font-size:13px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.invoice-doc-banner{position:relative;height:150px;padding:34px 32px 0;color:#fff}
.invoice-doc-wave{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.invoice-doc-wave path{fill:var(--primary-dark)}
.invoice-doc-wave .invoice-doc-wave-light{fill:#ffffff2e}
.invoice-doc-banner h1,.invoice-doc-no{position:relative;z-index:1;margin:0}
.invoice-doc-banner h1{font-size:40px;letter-spacing:4px;font-weight:800;line-height:1}
.invoice-doc-no{position:absolute;right:32px;top:44px;font-weight:700;font-size:14px;letter-spacing:.5px}
.invoice-doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:6px 32px 0}
.invoice-doc-parties h2{margin:0 0 6px;font-size:18px;color:#3d3c4a}
.invoice-doc-parties p{margin:0 0 3px;color:#5f5e6e;line-height:1.45;overflow-wrap:anywhere}
.invoice-doc-from{text-align:right}
.invoice-doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:16px 32px 0;color:#5f5e6e}
.invoice-doc-meta p{margin:0;display:inline-flex;align-items:center;gap:6px}
.invoice-doc-table{width:calc(100% - 64px);margin:14px 32px 0;border-collapse:collapse}
.invoice-doc-table th{background:var(--primary-dark);color:#fff;font-weight:600;padding:9px 12px;text-align:left}
.invoice-doc-table td{padding:8px 12px;border:1px solid #d9d8e2;color:#3d3c4a}
.invoice-doc-table .num{text-align:right;white-space:nowrap}
.invoice-doc-bill{display:inline-flex;vertical-align:middle;margin-left:4px;color:var(--primary)}
.invoice-doc-bill .icon{width:15px;height:15px}
.invoice-doc-summary{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:14px 32px 0}
.modal-body .invoice-doc .invoice-doc-disclaimer{margin:6px 0 0;color:#c62828;font-weight:700;font-size:16px;line-height:1.4}
.invoice-doc-totals{width:min(340px,100%);margin:0 0 0 auto;flex:none}
.invoice-doc-subtotal,.invoice-doc-sumline{display:flex;justify-content:space-between;padding:8px 14px}
.invoice-doc-subtotal{background:var(--primary-dark);color:#fff;font-size:14px}
.invoice-doc-sumline{border-bottom:1px solid #e4e3ec;color:#3d3c4a}
.invoice-doc-sumline.is-due strong{color:#c62828}
.invoice-doc-note{padding:16px 32px 0}
.invoice-doc-note h3,.invoice-doc-pay h3{margin:0 0 6px;font-size:14px;color:#3d3c4a}
.invoice-doc-note p{margin:0;color:#5f5e6e;line-height:1.5;border-bottom:1px solid #d9d8e2;padding-bottom:6px}
.invoice-doc-footer{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:20px;padding:18px 32px 26px}
.invoice-doc-pay dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.invoice-doc-pay dt{font-weight:700;color:#3d3c4a}
.invoice-doc-pay dt small{font-weight:500;color:var(--primary)}
.invoice-doc-pay dd{margin:0;color:#5f5e6e;overflow-wrap:anywhere}
.invoice-doc-thanks{margin:0;text-align:center;font-size:34px;font-weight:600;color:var(--primary-dark);letter-spacing:.5px}
@media(max-width:700px){.invoice-doc-parties,.invoice-doc-footer{grid-template-columns:1fr}.invoice-doc-from{text-align:left}.invoice-doc-banner h1{font-size:30px}.invoice-doc-no{position:relative;right:auto;top:auto;margin-top:8px}.invoice-doc-table{width:calc(100% - 32px);margin-inline:16px}.invoice-doc-parties,.invoice-doc-meta,.invoice-doc-note,.invoice-doc-footer{padding-inline:16px}.invoice-doc-summary{flex-direction:column-reverse;margin-inline:16px}.invoice-doc-totals{width:100%}}
/* The invoice view popup must not be printed: printing the page while it is open prints nothing. */
@media print{body:has(#modal[open] .invoice-view){visibility:hidden!important}body:has(#modal[open] .invoice-view) *{visibility:hidden!important}}
.modal-body .invoice-doc p{font-size:13px;line-height:1.45;color:#5f5e6e}
.modal-body .invoice-doc .invoice-doc-no{color:#fff;font-size:15px;font-weight:700;line-height:1.2}
.modal-body .invoice-doc .invoice-doc-thanks{font-size:34px;line-height:1.1;font-weight:600;color:var(--primary-dark)}
.modal-body .invoice-doc .invoice-doc-parties p{font-size:13.5px}
/* Banner: "{Month} Invoice" + payment status on the left, invoice number + date on the right. */
.invoice-doc-banner{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.invoice-doc-title,.invoice-doc-ref{position:relative;z-index:1}
.modal-body .invoice-doc .invoice-doc-banner h1{font-size:30px;letter-spacing:1px;line-height:1.1;margin:0;white-space:nowrap}
@media(max-width:700px){.modal-body .invoice-doc .invoice-doc-banner h1{white-space:normal}}
.modal-body .invoice-doc .invoice-doc-status{margin:8px 0 0}
.invoice-doc-status .badge{background:#ffffffe6;color:var(--primary-dark);font-weight:600}
.invoice-doc-ref{text-align:right;padding-top:0}
.invoice-doc-brand{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.invoice-doc-logo{width:56px;height:56px;flex:none;padding:6px;border-radius:12px;background:#fff;box-shadow:0 2px 8px #0000002e}
.invoice-doc-site{position:absolute;top:12px;right:32px;z-index:1;color:#fff;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.modal-body .invoice-doc .invoice-doc-ref .invoice-doc-no{position:static;margin:0;line-height:33px;white-space:nowrap}
.modal-body .invoice-doc .invoice-doc-date{margin:-4px 0 0;color:#ffffffde;font-size:13px}
.invoice-doc-parties{padding-top:14px}
@media(max-width:700px){.invoice-doc-banner{flex-direction:column;gap:6px}.invoice-doc-ref{text-align:left}.invoice-doc-site{right:16px}.modal-body .invoice-doc .invoice-doc-ref .invoice-doc-no{line-height:1.2;white-space:normal}}
/* Email preview confirmation popup (opens on top of the current screen). */
dialog.email-preview-dialog{width:min(780px,calc(100% - 32px));max-height:92vh}
dialog.email-preview-dialog .modal-head{position:static}
.email-preview-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 12px;font-size:13px}
.email-preview-meta dt{font-weight:700;color:var(--text)}
.email-preview-meta dd{margin:0;color:var(--muted);overflow-wrap:anywhere}
.email-preview-frame{display:block;width:100%;height:min(62vh,640px);border:1px solid var(--border);border-radius:10px;background:#f3f5fa}
.payment-pay-summary{margin:0 0 12px;font-size:13px}
.payment-pay-summary .payment-method-due{margin-left:0}
.interac-pay-wrap .notice{margin:4px 0 12px}
/* With Cash (no evidence field) the note takes the full row. */
.interac-note-row:has(.interac-evidence[hidden]){grid-template-columns:1fr}
/* Payments grid in the Make Payment popup: plain trash icon (no filled background), red on hover. */
dialog .payment-history .icon-btn[data-action$="-delete"]:not(:disabled){background:transparent;border-color:transparent;color:var(--muted)}
dialog .payment-history .icon-btn[data-action$="-delete"]:not(:disabled):is(:hover,:focus-visible){background:#fff0f1;border-color:transparent;color:#b42332}
/* Make Payment popup is wide enough to show the whole Payments grid without scrolling. */
#modal:has(.interac-pay-wrap){width:min(1080px,calc(100% - 32px))}
.payment-history :is(th,td){white-space:nowrap}
.payment-history td:nth-child(5){white-space:normal}
.payment-history .badge{white-space:nowrap}
.payment-history td.payment-comment,.invoice-lines-table td.payment-comment{white-space:normal;min-width:140px;max-width:260px;overflow-wrap:anywhere}
dialog.payment-confirm-dialog{width:min(480px,calc(100% - 32px))}
/* Owner / agent view of the Payments grid has more columns: wider popup, compact cells. */
#modal:has(.interac-pay-wrap){width:min(1320px,calc(100% - 32px));max-width:calc(100% - 32px)}
.payment-history :is(th,td){padding:7px 9px;font-size:13px}
.payment-history td.payment-comment{min-width:120px;max-width:200px}
.payment-history td:nth-child(5){min-width:90px}
.payment-history .actions{gap:2px}
.payment-history .icon-btn{width:30px;height:30px;min-width:30px}
/* Let text columns wrap so the whole grid (incl. Actions) fits ~1100px screens; amounts/status/actions stay on one line. */
.payment-history :is(th,td){white-space:normal}
.payment-history th,.payment-history td.num,.payment-history .badge,.payment-history td:last-child{white-space:nowrap}
.payment-history td:first-child{min-width:84px}
.payment-history td:nth-child(2){min-width:80px}
.payment-history td:nth-child(4){max-width:150px;overflow-wrap:anywhere}
.payment-history td.payment-comment{min-width:100px;max-width:170px}
.payment-history .badge{font-size:10px;padding:3px 7px}
/* Loading screen: full-colour ApplyRent logo, larger. */
.boot .boot-logo{display:block;width:160px;height:160px;object-fit:contain;margin:0 auto 6px}
@media(max-width:480px){.boot .boot-logo{width:120px;height:120px}}
.invoice-lines-table tfoot th{background:var(--primary-soft);font-weight:700}
/* Profile popup: profile picture and signature side by side. */
.account-picture-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:start}
.account-signature #signature-pad,.account-signature #signature-upload-preview,.account-signature #signature-upload-preview .signature-preview{height:140px;max-height:140px}
.account-signature #signature-upload-preview .signature-preview{box-sizing:border-box}
.account-signature .signature-upload-control{margin-inline-start:0}
@media(max-width:860px){.account-picture-split{grid-template-columns:1fr}}
/* Rental Units, Posts, Properties and Browse cards: ten records fit on one screen, and previous / next share the records-per-page line. */
.grid-toolbar.grid-toolbar-pager{align-items:center;flex-wrap:nowrap}
.grid-toolbar-pager>.grid-pagination{padding:0;margin-inline-start:auto;gap:16px}
:is(.main,.public-main) .property-grid.compact-cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
@media(min-width:1100px){:is(.main,.public-main) .property-grid.compact-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
:is(.main,.public-main) .property-grid.compact-cards .property-photo{height:96px}
:is(.main,.public-main,#modal) .compact-cards .property-card .property-info{padding:7px 10px}
:is(.main,.public-main,#modal) .compact-cards .property-card .property-info h3{font-size:13px;margin-bottom:2px}
:is(.main,.public-main,#modal) .compact-cards .property-card .property-features{margin:4px 0;padding-bottom:5px;gap:3px 10px;font-size:11px}
:is(.main,.public-main,#modal) .compact-cards .property-card .property-features .icon{width:13px;height:13px}
:is(.main,.public-main,#modal) .compact-cards .property-features .preview-amenities{flex-wrap:nowrap;overflow:hidden;max-width:100%}
:is(.main,.public-main,#modal) .compact-cards .property-features .preview-amenities .chip{flex:0 0 auto;white-space:nowrap}
:is(.main,.public-main,#modal) .compact-cards .property-card .property-price strong{font-size:13px}
:is(.main,.public-main,#modal) .compact-cards .workspace-card .workspace-card-footer{margin-top:4px}
@media(max-width:600px){.grid-toolbar.grid-toolbar-pager{flex-wrap:wrap}.grid-toolbar-pager>.grid-pagination{margin-inline-start:0}}
.public-main .compact-cards .property-card .property-info{font-size:12px}
.public-main .compact-cards .property-card .property-name-location>span{font-size:12px}
.public-main .compact-cards .property-card .property-price>span{font-size:11px}
.public-main .compact-cards .property-card .property-features .preview-parking-lease{gap:10px}
/* Browse: records per page and the pager sit to the right of the heading. */
.browse-heading{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.browse-grid-controls{margin-inline-start:auto}
.browse-grid-controls .grid-toolbar{margin:0;gap:24px}
/* Browse: tagline beside the logo, a tight heading block and the full page width for the cards. */
.browse-brand{display:flex;align-items:center;gap:18px;min-width:0}
.browse-brand .browse-tagline{margin:0;white-space:nowrap}
/* Beats the theme rules that colour every .eyebrow with the primary colour. */
html[data-theme] .public-header .eyebrow.browse-tagline,html[data-color][data-theme] .public-header .eyebrow.browse-tagline{color:var(--frame-text,#fff)}
.public-header.browse-header{padding-block:16px;padding-inline:24px}
.public-main.browse-main{max-width:none;padding:18px 24px 24px}
.browse-main .browse-heading h1{margin:0;line-height:1.15}
.browse-main>p{margin:4px 0 14px}
@media(min-width:1600px){.public-main .property-grid.compact-cards{gap:14px}.public-main .property-grid.compact-cards .property-photo{height:130px}}
@media(max-width:720px){.browse-brand{flex-wrap:wrap;gap:4px 12px}.public-main.browse-main{padding:16px}}
.browse-grid-controls .browse-toolbar .country-filter{margin:0;order:-1}
.public-header .browse-search{width:300px;max-width:100%}
@media(max-width:720px){.public-header .browse-search{width:100%}}
html[data-color] .public-header .browse-search input::placeholder{color:var(--frame-text,#fff);opacity:.8}
/* Browse: the DEMO / Contact us footer stays at the bottom of the window. */
.browse-main .contact-public-footer{position:fixed;inset-inline:0;bottom:0;z-index:20;margin:0;padding:10px 24px;background:var(--bg);border-top:1px solid var(--border)}
.public-main.browse-main{padding-bottom:64px}
/* Browse fills the window: two rows of cards share the height between the heading and the fixed footer; photos take the extra height. */
@media(min-width:721px){
#app:has(> .browse-main){display:flex;flex-direction:column;height:100dvh}
#app:has(> .browse-main)>.public-header{flex:none}
.public-main.browse-main{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;width:100%;box-sizing:border-box}
.browse-main>.property-grid.compact-cards{flex:1 1 0;min-height:440px;grid-auto-rows:calc((100% - 14px)/2);row-gap:14px}
.browse-main .compact-cards .property-card{display:flex;flex-direction:column;height:100%}
.browse-main .compact-cards .property-card .property-photo{flex:1 1 auto;position:relative;height:auto;min-height:96px}
.browse-main .compact-cards .property-card .property-photo img{position:absolute;inset:0;width:100%;height:100%}
.browse-main .compact-cards .property-card .property-info{flex:none}
}
.contact-footer-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none}.contact-footer-link>span{text-decoration:underline;text-underline-offset:3px}
/* Listing preview (Rental Unit, Posts, Browse): photo mosaic, price and key facts, sections, and a side panel. */
#modal:has(.listing-layout){width:min(1280px,calc(100% - 32px))!important;height:calc(100dvh - 48px)}
#modal:has(.listing-layout) .modal-body{display:block;overflow:auto}
.property-detail-layout.listing-layout{display:block}
.listing-mosaic{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,2fr);gap:8px;height:clamp(240px,42vh,430px);margin-bottom:16px}
.listing-mosaic.is-single{grid-template-columns:1fr}
.listing-mosaic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:10px;cursor:pointer;background:#eef0f5}
.listing-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;min-height:0}
.listing-thumb{position:relative;min-height:0}
.listing-thumb img.is-selected{outline:3px solid var(--primary);outline-offset:-3px}
.listing-more{position:absolute;inset-inline-end:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-radius:8px;background:#000000b3;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.listing-more .icon{width:16px;height:16px}
.listing-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.listing-main,.listing-side{display:grid;gap:12px;min-width:0;align-content:start}
.listing-side{position:sticky;top:0}
.listing-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:0}
.listing-card h4{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--text)}
.listing-price{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.listing-rent{margin-top:8px;font-size:30px;font-weight:700;line-height:1.1;color:var(--primary)}
.listing-rent small{font-size:14px;font-weight:500;color:var(--muted)}
.listing-deposit{margin-top:2px;font-size:13px;color:var(--muted)}
.listing-title{margin:10px 0 2px;font-size:17px;font-weight:600}
.listing-address{margin:0;font-size:14px}
.listing-available{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--muted)}
.listing-available .icon{width:15px;height:15px}
.listing-keyfacts{display:flex;gap:22px}
.listing-keyfacts>span{display:grid;justify-items:center;gap:2px;font-size:15px}
.listing-keyfacts .icon{width:22px;height:22px;color:var(--muted)}
.listing-keyfacts small{font-size:11px;color:var(--muted)}
.listing-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 20px}
.listing-summary small{display:block;font-size:12px;font-weight:600;color:var(--text)}
.listing-summary span{font-size:13px;color:var(--muted)}
.listing-utility{margin:0 0 8px;font-size:13px}
.listing-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.listing-videos video{width:100%;border-radius:8px}
.listing-action-buttons{display:grid;gap:8px}
.listing-action-buttons .btn{width:100%;justify-content:center}
.listing-layout :is(.property-detail-media,.property-detail-information){overflow:visible;padding-right:0;scrollbar-gutter:auto}
.listing-actions form{display:grid;gap:10px}
.listing-owner-list{display:grid;gap:10px}
.listing-owner-list .person small{display:block;font-size:11px;color:var(--muted)}
@media(max-width:860px){.listing-body{grid-template-columns:1fr}.listing-side{position:static}.listing-mosaic{grid-template-columns:1fr;height:auto}.listing-mosaic>.listing-hero{height:240px}.listing-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none}.listing-thumb img{height:72px}}
.listing-mosaic .property-media-gallery{display:none!important}
.listing-layout>.listing-body{margin-top:16px}
.listing-mosaic{grid-template-rows:minmax(0,1fr);overflow:hidden}
.listing-mosaic>*,.listing-thumb{min-height:0;min-width:0;overflow:hidden;border-radius:10px}
.listing-mosaic img:focus:not(:focus-visible){outline:none}
@media(max-width:860px){.listing-mosaic{grid-template-rows:240px auto;overflow:visible}}
/* Listing photo gallery (opened from a listing preview): thumbnails left, photos stacked right, click for full screen. */
dialog.listing-gallery{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--card);color:var(--text)}
dialog.listing-gallery::backdrop{background:#0009}
dialog.listing-gallery[open]{display:flex;flex-direction:column}
.gallery-bar{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);flex:none}
.gallery-heading{display:flex;align-items:center;gap:10px;min-width:0;flex:1;font-size:15px}
.gallery-heading>.icon{width:20px;height:20px;color:var(--primary);flex:none}
.gallery-heading strong{font-size:17px;white-space:nowrap}
.gallery-heading span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gallery-price{padding-inline-start:12px;border-inline-start:1px solid var(--border);color:var(--primary);white-space:nowrap}
.gallery-bar .icon-btn{color:var(--text)}
.gallery-body{position:relative;display:grid;grid-template-columns:minmax(220px,26%) minmax(0,1fr);flex:1;min-height:0}
.gallery-thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;padding:14px;overflow-y:auto;border-inline-end:1px solid var(--border)}
.gallery-thumb{display:block;padding:0;border:3px solid transparent;border-radius:8px;background:#eef0f5;aspect-ratio:4/3;overflow:hidden;cursor:pointer}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-thumb.is-active{border-color:var(--primary)}
.gallery-stage{overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;background:var(--bg);outline:none}
.gallery-photo{display:flex;align-items:center;justify-content:center;height:100%;margin:0;padding:12px 24px;box-sizing:border-box;scroll-snap-align:start}
.gallery-photo img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;cursor:zoom-in;background:#eef0f5}
.gallery-count{position:absolute;bottom:18px;left:calc(max(220px,26%) + (100% - max(220px,26%))/2);transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:#000000a6;color:#fff;font-size:13px;font-weight:600;pointer-events:none}
.gallery-photo img:fullscreen{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:contain;background:#000;border-radius:0;cursor:zoom-out}
@media(max-width:720px){.gallery-body{grid-template-columns:1fr}.gallery-thumbs{display:none}.gallery-count{left:50%}.gallery-heading span,.gallery-price{display:none}}
.gallery-full{display:none}
.gallery-full:fullscreen{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:#000;cursor:zoom-out}
.gallery-full:fullscreen>img{max-width:100vw;max-height:100vh;object-fit:contain}
.gallery-full-step{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:#ffffff26;color:#fff;cursor:pointer}
.gallery-full-step[data-full-step="-1"]{left:24px}.gallery-full-step[data-full-step="1"]{right:24px}
.gallery-full-step:hover{background:#ffffff47}.gallery-full-step:disabled{opacity:.25;cursor:default}
.gallery-full-step .icon{width:28px;height:28px}
.gallery-full-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:#ffffff26;color:#fff;font-size:14px;font-weight:600}
/* Properties cards: actions sit on the photo's top-right corner, the photo fills the card's spare height, owners wrap in a line. */
.workspace-card-grid .workspace-card{position:relative}
.workspace-card-grid .workspace-card .workspace-row-actions{position:absolute;top:10px;inset-inline-end:10px;z-index:2;gap:6px}
.workspace-card-grid .workspace-card .workspace-row-actions .icon-btn{background:#ffffffeb;border:0;box-shadow:0 2px 8px #0000002e;color:var(--primary)}
.workspace-card-grid .workspace-card .workspace-row-actions .icon-btn:is(:hover,:focus-visible){background:#fff}
.workspace-card-grid .workspace-card .workspace-row-actions .workspace-danger{color:#b84560}
.workspace-card-grid.compact-cards .workspace-card .property-photo{flex:1 1 auto;height:auto;min-height:150px;position:relative}
.workspace-card-grid.compact-cards .workspace-card .property-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.workspace-card-grid .workspace-card .property-info{flex:none}
.workspace-card-grid .workspace-card .workspace-owner-list{flex:1 1 100%}
@media(max-width:600px){.dashboard-page .dashboard-properties .panel-head h2{font-size:20px}}
/* Dashboard Recent(s) and Your properties: panels grow with their rows, so neither scrolls; long numbers wrap inside the table. */
.dashboard-bottom-row>.panel{height:auto!important}
.dashboard-bottom-row .dashboard-panel-content{overflow:visible}
.dashboard-applications .recent-activity-table{table-layout:fixed}
.dashboard-applications .recent-activity-table :is(th,td){white-space:normal;overflow-wrap:anywhere;padding:9px 10px}
.sidebar .nav-item>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sidebar .nav-item>.count{flex:none;margin-inline-start:auto}
.filter-tab .filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-inline-start:6px;padding:0 5px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:10px;font-weight:700;line-height:1}
.filter-tab.active .filter-count{background:var(--primary);color:#fff}
.sidebar .nav-item>.count{overflow:visible;min-width:auto;text-overflow:clip}
/* Invoice view: "Record payment on behalf" is a bordered section like the others, with its four fields on one row. */
form.invoice-record-payment{padding:20px;margin:16px 0}
.invoice-view-grid.invoice-view-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.invoice-view-grid.invoice-view-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.invoice-view-grid.invoice-view-grid-4{grid-template-columns:1fr}}
/* Left panel counts (Applications, Lease Agreements, Invoice): a raised superscript badge right after the label. */
.sidebar .nav-item>span:not(.count){flex:0 1 auto}
.sidebar .nav-item>.count{align-self:flex-start;margin:0 0 0 -6px;margin-inline-start:-6px;transform:translateY(-3px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;font-size:10px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 1px 3px #0000002e}
/* Fixed record grids (Applications, Team, Invoices, Leases, Lease templates, Billing, User subscriptions, Dropdowns):
   controls on the right, sticky column headers, rows scroll inside the grid and never sideways. */
.grid-toolbar.grid-toolbar-right{justify-content:flex-end;gap:24px}
.grid-toolbar.grid-toolbar-right>.grid-pagination{margin-inline-start:0}
.table-wrap.grid-fixed-scroll{overflow-x:hidden!important;overflow-y:auto;overscroll-behavior:contain}
.grid-fixed-scroll>table{width:100%!important;min-width:0!important}
.grid-fixed-scroll>table>thead{position:sticky;top:0;z-index:3;background:var(--card)}
.grid-fixed-scroll>table>thead th{background:var(--card)}
.grid-fixed-scroll>table>thead>tr:first-child th{background:var(--primary-soft)}
.grid-fixed-scroll>table :is(th,td){white-space:normal!important;overflow-wrap:anywhere}
.grid-fixed-scroll>table th .grid-sort-button{white-space:normal;text-align:start}
.grid-fixed-scroll .data-table.record-table td.record-actions>:is(.actions,.workspace-row-actions,.subscription-row-actions){flex-wrap:wrap!important;min-width:0!important;white-space:normal!important}
.grid-fixed-scroll .grid-column-filter{min-width:0;width:100%}
/* Invoices grid: unpaid statuses stand out in red. */
.invoices-table .badge:is(.pending-payment,.partially-paid){color:#c62828;background:#fdecec}
html[data-theme=dark] .invoices-table .badge:is(.pending-payment,.partially-paid){color:#ff8a80;background:#4a1f24}
.data-table td.lease-term,.grid-fixed-scroll>table td.lease-term{white-space:nowrap!important;overflow-wrap:normal}
.data-table th.lease-term{width:215px}
/* Lease agreements grid: status colours follow the applications grid; monthly rent is right-aligned. */
.leases-table .num{text-align:right!important;white-space:nowrap}
.leases-table .badge.pending-approval{color:#6488b3;background:#edf4fc}
.leases-table .badge:is(.under-review,.awaiting-acceptance){color:#b28645;background:#fff5e5}
.leases-table .badge:is(.completed,.active){color:#3c9373;background:#eaf6ef}
.leases-table .badge:is(.rejected,.terminated){color:#c0787d;background:#fceff0}
.leases-table .badge:is(.expired,.draft){color:#77768b;background:#f1f0f5}
html[data-theme=dark] .leases-table .badge.pending-approval{background:#28415e}
html[data-theme=dark] .leases-table .badge:is(.under-review,.awaiting-acceptance){background:#59431f}
html[data-theme=dark] .leases-table .badge:is(.completed,.active){background:#21513d}
html[data-theme=dark] .leases-table .badge:is(.rejected,.terminated){background:#642e3a}
/* Properties cards: one fixed layout; several owners open from a dropdown. */
.workspace-card-grid .workspace-card .property-features{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.workspace-owner-menu{position:relative}
.workspace-owner-menu>summary{list-style:none;cursor:pointer;gap:5px}
.workspace-owner-menu>summary::-webkit-details-marker{display:none}
.workspace-owner-menu>summary b{font-weight:700}
.workspace-owner-menu>summary .icon{width:12px;height:12px;transition:transform .15s}
.workspace-owner-menu[open]>summary .icon{transform:rotate(180deg)}
.workspace-owner-popover{position:absolute;bottom:calc(100% + 6px);left:0;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:200px;max-height:220px;overflow-y:auto;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 10px 30px #2a225033}
.workspace-card-grid .workspace-card{overflow:visible}
.workspace-card-grid .workspace-card .property-photo{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:hidden}
/* Rental Unit and Posts: compact Country and Sort by dropdowns without visible labels. */
.listing-controls{display:flex;align-items:center;gap:10px;margin-inline-start:auto;flex-wrap:wrap}
.listing-controls .field{display:block;margin:0;min-width:0}
.listing-controls .field>span{display:none}
.listing-controls select,.property-filter-controls.listing-controls select,.posts-filters .listing-controls .country-filter select{width:170px;min-width:0;height:36px;min-height:36px;padding:0 12px;font-size:12px;border-radius:7px}
.workspace-view-tabs{margin:14px 0 12px}
.workspace-view-tabs .tab{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:600}
.workspace-view-grid[hidden]{display:none}
.listing-tabs{margin:0 0 14px}
.listing-tabs .tab{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:600}
.listing-tab-panel[hidden]{display:none}
.listing-header-actions{margin-inline-start:auto;margin-inline-end:8px}
/* Rental Unit / Posts cards and dashboard panels fill the page height (extra height set by grids.js). */
.main .property-grid.compact-cards:not(.workspace-card-grid) .property-photo{height:calc(96px + var(--fill-extra,0px))}
/* The chat button can sit over those sections; it steps aside while the pointer is on them. */
.floating-chat-button{transition:opacity .15s}
/* Dashboard Recent(s): seven compact rows fit without scrolling. */
.dashboard-applications .recent-activity-table{font-size:12px}
.dashboard-applications .recent-activity-table :is(th,td){padding:6px 9px;line-height:1.35}
/* Dashboard "Your properties": thumbnail cards with the post count as a superscript badge; a click opens the post. */
.dashboard-property-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:2px 18px 14px}
.dashboard-property-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:0;background:none;text-align:start;color:var(--text);cursor:pointer}
.dashboard-property-card strong{font-size:12px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-property-card:is(:hover,:focus-visible) strong{color:var(--primary)}
.dashboard-property-thumb{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:visible}
.dashboard-property-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;background:#eef0f5;transition:transform .15s}
.dashboard-property-card:hover .dashboard-property-thumb img{transform:scale(1.03)}
.dashboard-post-count{position:absolute;top:-7px;inset-inline-end:-7px;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 2px 6px #0000003a}
.dashboard-property-cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px 12px}
.dashboard-property-thumb{aspect-ratio:auto;height:72px}
.dashboard-property-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:700px){.dashboard-property-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dashboard-applications .recent-activity-table td:nth-child(3){white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
.dashboard-applications .recent-activity-table{table-layout:auto}
.dashboard-applications .recent-activity-table :is(th,td):not(:nth-child(4)){white-space:nowrap!important;overflow-wrap:normal}
.floating-chat-button.is-stepped-aside{opacity:0;pointer-events:none}
.listing-posts-panel{padding:0;overflow:hidden}
.listing-posts-panel>.grid-toolbar{margin:0;padding:12px 16px;background:var(--primary-soft)}
.listing-owner-group{display:grid;gap:2px;margin-top:4px;padding-top:10px;border-top:1px solid var(--border)}
.listing-owner-group small{font-size:11px;color:var(--muted)}
.listing-owner-group strong{font-size:13px}
.listing-owner-contact{display:grid;gap:8px;margin-top:6px}
.listing-owner-contact .btn{width:100%;justify-content:center}
dialog.listing-contact-dialog{width:min(560px,calc(100% - 32px));padding:22px;border:0;border-radius:16px;background:var(--card);color:var(--text);box-shadow:0 20px 60px #0004}
dialog.listing-contact-dialog::backdrop{background:#0006}
.listing-contact-dialog h3{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.listing-contact-dialog textarea{width:100%;box-sizing:border-box;font:inherit;line-height:1.5}
.listing-contact-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
/* Rental Unit and Posts cards: the Properties group name on the photo's top-right corner. */
.property-photo .property-group-tag{position:absolute;top:10px;inset-inline-end:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;max-width:55%;padding:3px 8px;border-radius:999px;background:#ffffffe6;color:var(--primary);font-size:10px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px #0000002e}
.property-photo .property-group-tag .icon{width:11px;height:11px;flex:none}
.table-wrap.grid-fixed-scroll>.data-table.record-table.invoices-table :is(th,td):is(:nth-child(1),:nth-child(2),:nth-child(6)){white-space:normal!important;overflow-wrap:anywhere!important}
.listing-header-contact{display:flex;gap:8px;margin-inline-start:auto;margin-inline-end:8px}
.listing-header-contact+.listing-header-actions{margin-inline-start:0}
.posts-filters:has(.posts-grid-controls){display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.posts-grid-controls{flex:1;min-width:0}
.posts-grid-controls .grid-toolbar{margin:0}
.posts-filters .posts-grid-controls+.listing-controls{margin-inline-start:0}
/* Pages with status tabs (Applications, Leases, Rental Unit, Posts, Invoice): the tabs and buttons share the heading's line on wide screens. */
@media(min-width:1101px){
.page-heading:has(.rentalunit-heading-filters){flex-wrap:nowrap;align-items:center}
.page-heading:has(.rentalunit-heading-filters)>div:first-child{flex:0 1 auto;min-width:180px}
.page-heading .heading-actions:has(.rentalunit-heading-filters){flex-wrap:nowrap;gap:10px}
.heading-actions .filters.rentalunit-heading-filters{flex-wrap:nowrap;gap:8px}
.heading-actions .rentalunit-heading-filters .filter-tabs{flex-wrap:nowrap;gap:2px}
.heading-actions .rentalunit-heading-filters .filter-tab{padding:7px 8px;white-space:nowrap}
.heading-actions .rentalunit-heading-filters .filter-tab>.button-label-icon{display:none}
.heading-actions:has(.rentalunit-heading-filters)>.btn{white-space:nowrap;flex:none}
}
.page-heading:has(.posts-heading-controls){align-items:center;flex-wrap:nowrap}
.page-heading:has(.posts-heading-controls)>div:first-child{flex:0 1 auto;min-width:200px}
.heading-actions:has(.posts-heading-controls){flex:1 1 auto;min-width:0;justify-content:flex-end}
.posts-heading-controls{margin:0;flex-wrap:nowrap;justify-content:flex-end}
.posts-heading-controls .posts-grid-controls{flex:0 1 auto}
.posts-heading-controls .grid-toolbar{gap:14px;flex-wrap:nowrap}
.posts-heading-controls .grid-pagination{gap:10px}
@media(max-width:1100px){.page-heading:has(.posts-heading-controls){flex-wrap:wrap}.posts-heading-controls{flex-wrap:wrap;justify-content:flex-start}}
/* Status filter dropdown (Applications, Leases, Invoice) and the heading's records-per-page / pager slot. */
.filter-menu{position:relative}
.filter-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:240px}
.filter-menu>summary::-webkit-details-marker{display:none}
.filter-menu-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.filter-menu>summary>.icon:last-child{width:14px;height:14px;transition:transform .15s}
.filter-menu[open]>summary>.icon:last-child{transform:rotate(180deg)}
.filter-menu-list{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:30;display:grid;gap:2px;min-width:240px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 12px 32px #2a225033}
.filter-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:12px;text-align:start;cursor:pointer}
.filter-menu-item:hover{background:var(--primary-soft)}
.filter-menu-item.active{color:var(--primary);font-weight:600}
.filter-menu-item .filter-count{margin-inline-start:auto}
.filter-menu-check{display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid var(--border);border-radius:4px;font-size:11px;color:#fff;flex:none}
.filter-menu-item.active .filter-menu-check{background:var(--primary);border-color:var(--primary)}
.heading-grid-controls:empty{display:none}
.heading-grid-controls .grid-toolbar{margin:0;padding:0;background:none;gap:12px;flex-wrap:nowrap}
.heading-grid-controls .grid-toolbar .grid-size{white-space:nowrap}
.heading-grid-controls .grid-pagination{gap:8px;flex-wrap:nowrap;white-space:nowrap}
.heading-grid-controls .grid-range{white-space:nowrap}
.grid-column-filters[hidden]{display:none}
/* Posts (tenant): keep the controls on the heading line. */
.page-heading .filters.posts-filters.posts-heading-controls{flex-wrap:nowrap}
.page-heading:has(.posts-heading-controls) h1{white-space:nowrap}
/* In heading slots the records-per-page dropdown keeps only its accessible name, to save width. */
.heading-grid-controls .grid-size,.posts-heading-controls .grid-size{font-size:0;gap:0}
.heading-grid-controls .grid-size select,.posts-heading-controls .grid-size select{font-size:12px;width:64px}
.posts-heading-controls .listing-controls{flex-wrap:nowrap}
.posts-heading-controls .listing-controls select{width:150px}
/* Loved posts: heart toggles. */
.love-toggle{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);transition:transform .12s,color .12s}
.love-toggle .icon{width:18px;height:18px;fill:none}
.love-toggle:hover{transform:scale(1.1)}
.love-toggle.is-loved,.love-filter.is-loved{color:#e0245e}
.love-toggle.is-loved .icon,.love-filter.is-loved .icon{fill:currentColor}
.property-photo .love-toggle.love-card{position:absolute;left:10px;bottom:10px;z-index:3;background:#ffffffe6;box-shadow:0 1px 4px #0000002e}
.listing-header-contact .love-toggle,.love-toggle.love-header{width:40px;height:40px;border:1px solid var(--border);background:var(--card)}
.love-toggle.love-header{margin-inline-end:8px}
.gallery-bar .love-toggle.love-gallery{width:36px;height:36px}
html[data-color] .topbar .love-filter.is-loved{color:#ffb3c8}
/* Hearts: no background badge; larger; red when loved (including the header filter). */
.love-toggle,.property-photo .love-toggle.love-card,.listing-header-contact .love-toggle,.love-toggle.love-header,.gallery-bar .love-toggle.love-gallery{background:none!important;border:0!important;box-shadow:none!important}
.property-photo .love-toggle.love-card{left:8px;bottom:8px;width:36px;height:36px;color:#fff;filter:drop-shadow(0 1px 2px #000000a6)}
.property-photo .love-toggle.love-card .icon{width:28px;height:28px;stroke-width:2.2}
.love-toggle.love-header{width:44px;height:44px}
.love-toggle.love-header .icon{width:30px;height:30px}
.gallery-bar .love-toggle.love-gallery{width:42px;height:42px}
.gallery-bar .love-toggle.love-gallery .icon{width:28px;height:28px}
.love-toggle.is-loved,.property-photo .love-toggle.love-card.is-loved{color:#e0245e}
.topbar .love-filter{background:none!important}
.topbar .love-filter .icon{width:22px;height:22px}
.topbar .love-filter.is-loved,html[data-color] .topbar .love-filter.is-loved{color:#ff1f4b}
.topbar .love-filter.is-loved .icon{fill:currentColor;filter:drop-shadow(0 0 1px #fff)}
/* Card carousel (Browse, Posts, Rental Unit, Properties): side arrows and page dots. */
.card-carousel{position:relative;padding-inline:56px}
.carousel-arrow{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--card);color:var(--text);box-shadow:0 2px 8px #0000001f;transform:translateY(-50%);cursor:pointer}
.carousel-prev{left:0}.carousel-next{right:0}
.carousel-arrow:hover:not(:disabled){color:var(--primary);border-color:var(--primary)}
.carousel-arrow:disabled{opacity:.35;cursor:default}
.carousel-arrow[hidden],.carousel-dots[hidden]{display:none}
.carousel-arrow .icon{width:22px;height:22px}
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:10px}
.carousel-dot{width:12px;height:12px;padding:0;border:1.5px solid var(--muted);border-radius:50%;background:transparent;cursor:pointer}
.carousel-dot.is-active{background:var(--primary);border-color:var(--primary)}
.property-grid.compact-cards.is-centered{grid-template-columns:repeat(var(--card-count),calc((100% - 40px)/5))!important;justify-content:center}
@media(max-width:1100px){.property-grid.compact-cards.is-centered{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}}
@media(max-width:600px){.card-carousel{padding-inline:0}.carousel-arrow{top:auto;bottom:-52px;transform:none}.carousel-prev{left:8px}.carousel-next{right:8px}}
/* Browse: the carousel takes the page height and its two card rows share it. */
@media(min-width:721px){
.browse-main>.card-carousel{flex:1 1 0;min-height:440px;display:flex;flex-direction:column}
.browse-main>.card-carousel>.property-grid.compact-cards{flex:1 1 0;min-height:0;grid-auto-rows:calc((100% - 14px)/2);row-gap:14px}
.browse-main>.carousel-dots{margin:8px 0 0}
}
/* A page with fewer than 6 cards sits in the middle of the space above the footer. */
#main .card-carousel{display:flex;flex-direction:column;justify-content:center}
#main .card-carousel>.property-grid{width:100%}
@media(min-width:721px){.browse-main>.card-carousel{justify-content:center}.browse-main>.card-carousel>.property-grid.compact-cards.is-centered{flex:0 0 calc(50% - 7px);grid-auto-rows:100%}}
/* Application and lease cards. */
.record-card{cursor:pointer}
.property-photo .record-card-actions{position:absolute;right:8px;bottom:8px;z-index:3;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 16px)}
.record-card-actions .icon-btn{width:30px;height:30px;padding:5px;border:0;border-radius:8px;background:#ffffffeb;box-shadow:0 1px 4px #0000002e;color:var(--primary)}
.record-card-actions .icon-btn.danger{color:#c62828}
.record-card-actions .icon-btn .icon{width:16px;height:16px}
.record-sort{display:flex;align-items:center;gap:6px}
.record-sort select{width:170px;height:36px;min-height:36px;padding:0 12px;font-size:12px;border-radius:7px}
.record-sort .listing-sort>span{display:none}
.record-sort-dir{height:36px;padding:0 10px;white-space:nowrap}
.record-sort-dir:disabled{opacity:.45}
.record-card-actions .icon-btn,.record-card-actions .icon-btn:is(:hover,:focus-visible){background:#fff!important;opacity:1!important}
.record-card-actions .icon-btn:hover{box-shadow:0 0 0 2px var(--primary)}
.record-card .record-card-meta{flex-basis:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:11px}
.record-card .property-price{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.record-card .property-price>strong{flex:none;white-space:nowrap}
.record-card .property-price>span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:end}
.record-card .property-price>span{font-size:10px;letter-spacing:-.1px}
.record-card .property-price>strong{font-size:13px}
/* Sort by menu with ↑ / ↓ per option; larger status badges on application and lease cards. */
.record-sort-menu>summary{min-width:170px;justify-content:space-between;background:var(--card);color:var(--text);border:1px solid var(--border)}
.record-sort-arrow{color:var(--primary);font-size:14px}
.record-sort-item{display:flex;align-items:center;gap:2px;border-radius:8px}
.record-sort-item .filter-menu-item{flex:1}
.record-sort-item.active>.filter-menu-item{color:var(--primary);font-weight:600}
.record-sort-dir-btn{width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:7px;background:none;color:var(--muted);font-size:15px;font-weight:700;cursor:pointer}
.record-sort-dir-btn:hover{background:var(--primary-soft);color:var(--primary)}
.record-sort-dir-btn.is-active{background:var(--primary);color:#fff}
.record-card .property-photo>.badge{font-size:12px;padding:5px 11px}
html .page-heading .record-sort-menu>summary.btn{background:var(--primary)!important;color:#fff!important;border:1px solid var(--primary)!important;box-shadow:none;font-weight:500;text-transform:none}
.record-sort-menu>summary>.icon{color:#fff}
.record-card.tone-attention{border:2px solid #d93636!important;box-shadow:0 0 0 1px #d9363633}
.record-card.tone-approved{border:2px solid #2f9e6b!important;box-shadow:0 0 0 1px #2f9e6b33}
/* Team cards (profile picture, details below, actions on the picture) and the cards / list toggle. */
.team-view-toggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.team-view-toggle .team-view-btn{width:32px;height:32px;border:0;border-radius:7px;color:var(--muted)}
.team-view-toggle .team-view-btn.is-active{background:var(--primary);color:#fff}
.team-card .property-photo img{object-fit:cover;object-position:center 30%}
.team-card .property-features{display:grid;gap:3px}
.team-card .team-card-line{display:flex;align-items:center;gap:5px;min-width:0}
.team-card .team-card-line>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-card .record-card-actions .btn{height:30px;padding:0 8px;font-size:11px}
.team-heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
/* Dashboard Recent(s): cards with the step's icon, number and status. */
.recent-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:4px 18px 16px}
.recent-card{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:12px 8px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;transition:transform .12s,box-shadow .12s}
.recent-card:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 6px 18px #2a225026;border-color:var(--primary)}
.recent-card img{width:72px;height:72px;object-fit:contain}
.recent-card strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600}
.recent-card small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.recent-card small.is-alert{color:#c62828}
@media(max-width:700px){.recent-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.recent-card strong{white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:10px;line-height:1.3;overflow:visible}
.view-pref-toggle{width:max-content}
.view-pref-option{display:grid;place-items:center;width:40px;height:36px;border-radius:7px;color:var(--muted);cursor:pointer}
.view-pref-option input{position:absolute;opacity:0;pointer-events:none}
.view-pref-option.is-active{background:var(--primary);color:#fff}
.view-pref-option:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.view-pref-option .icon{width:18px;height:18px}
/* Recent(s) cards stay compact so the dashboard fits shorter windows. */
.recent-cards{gap:10px;padding-bottom:12px}
.recent-card{padding:8px 6px;gap:4px}
.recent-card img{width:56px;height:56px}
/* Bottom pill pager for record pages (same line as the chat button). */
.page-pill{position:fixed;left:50%;bottom:calc(var(--active-footer-height,var(--workspace-footer-height,0px)) + env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);z-index:54;display:flex;align-items:center;gap:10px;padding:5px;border:2px solid var(--border);border-radius:999px;background:var(--card);box-shadow:0 4px 18px #0002;color:var(--text)}
.page-pill[hidden]{display:none}
@media(min-width:721px){.page-pill{left:calc(50% + 118px)}}
.page-pill-arrow{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer}
.page-pill-arrow:disabled{background:#cfcfd6;cursor:default}
.page-pill-arrow .icon{width:20px;height:20px}
.page-pill-select select{height:34px;min-height:34px;padding:0 26px 0 10px;border:0;background-color:transparent;font-size:15px;font-weight:600;color:var(--text)}
.page-pill-total{font-size:15px;padding-inline-end:6px;white-space:nowrap}
#main:has(> .page-pill:not([hidden])){padding-bottom:78px}

/* Share by email: bottom-right of post cards, next to the heart in the post view and gallery. */
.share-toggle{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--muted);flex:none}
.share-toggle:hover,.share-toggle:focus-visible{color:var(--primary)}
.property-price .share-toggle.share-card{width:30px;height:30px;margin-inline-start:auto}
.property-price .share-toggle.share-card .icon{width:20px;height:20px}
.share-toggle.share-header{width:44px;height:44px;margin-inline-end:8px;color:var(--text)}
.share-toggle.share-header .icon{width:26px;height:26px}
.gallery-bar .share-toggle.share-gallery{width:42px;height:42px;color:inherit}
.gallery-bar .share-toggle.share-gallery .icon{width:24px;height:24px}
.share-photo{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0}
.share-photo img{width:96px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.share-photo figcaption{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.share-photo figcaption .icon{width:16px;height:16px}
/* Request a showing: a card above the owner card in the post view, and its form popup. */
.listing-showing{display:grid;gap:12px;text-align:center}
.listing-showing p{margin:0;font-size:15px}
.listing-showing .btn{width:100%;justify-content:center;border-radius:999px;min-height:44px}
.showing-to{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.showing-to>div{display:grid;gap:2px}
.showing-note{display:grid;justify-items:end;gap:2px;margin:0;font-size:13px;color:var(--muted)}
.required-mark{color:var(--danger,#d92d20);font-weight:600}
.header-form-popup form>.showing-full{grid-column:1/-1}
.header-form-popup .showing-method{display:flex;flex-wrap:wrap;gap:8px 24px;border:0;padding:0;margin:0}
.showing-method legend{padding:0;margin-bottom:6px;width:100%}
.showing-method label{display:flex;align-items:center;gap:6px;font-weight:400}
.showing-method input[type=radio],.showing-help .check input{width:16px;height:16px;min-height:0;flex:none}
.showing-count{text-align:end}
.showing-help{display:grid;gap:10px}
.showing-help .check{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.showing-help .check input{margin-top:3px}
.showing-slots{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-inline-start:24px}
.showing-slots[hidden]{display:none}
.showing-slot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;flex:1 1 100%}
.showing-slot .field{margin:0}
.showing-add[hidden]{display:none}
.showing-slot input,.showing-slot select{min-width:0}
.showing-add .icon{color:var(--primary)}
.showing-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Form popups (share, contact owner) follow the standard popup: themed header with the action and close button. */
.lease-detail-popup.header-form-popup{width:min(560px,calc(100% - 32px))}
.header-form-popup .modal-head h2{display:flex;align-items:center;gap:8px}
.header-form-popup .modal-head .btn{min-height:34px}
.header-form-popup form{display:grid;gap:12px}
.header-form-popup .field{margin:0}
.header-form-popup .field small{display:block;margin-top:4px}
.header-form-popup textarea{width:100%;box-sizing:border-box;font:inherit;line-height:1.5}
.header-form-popup input[readonly]{background:var(--bg);color:var(--muted)}
.header-form-popup .form-error:empty{display:none}

/* Applications / leases filtered to one post or rental unit from its menu. */
.record-scope-chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:2px 4px 2px 10px;border:1px solid var(--primary);border-radius:999px;background:var(--primary-soft);color:var(--text);font-size:12px;max-width:340px}
.record-scope-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.record-scope-chip>.icon{width:15px;height:15px;color:var(--primary);flex:none}
.record-scope-chip .icon-btn{min-width:26px;min-height:26px;width:26px;height:26px;border:0;background:none}
.record-scope-chip .icon-btn .icon{width:14px;height:14px}
.listing-post-cards{grid-template-columns:repeat(auto-fill,minmax(250px,280px));margin:0}
/* Properties / Rental Unit filter menus sit on one line with the country and sort controls. */
.heading-actions .rentalunit-heading-filters .listing-controls:has(.pick-filter-menu){flex-wrap:nowrap}
.listing-controls .pick-filter-menu>summary{height:36px;min-height:36px;max-width:200px;font-size:12px}
@media(max-width:900px){.heading-actions .rentalunit-heading-filters .listing-controls:has(.pick-filter-menu){flex-wrap:wrap}}
.heading-actions .rentalunit-heading-filters .listing-controls:has(.pick-filter-menu) select{width:132px}
.heading-actions .rentalunit-heading-filters .listing-controls .pick-filter-menu>summary{max-width:170px}
/* Searchable Rental Unit / Properties menus: wider, one line per option, search box beside "All". */
.pick-filter-menu.is-searchable .filter-menu-list{min-width:320px;max-width:min(360px,calc(100vw - 32px))}
.pick-filter-all{display:flex;align-items:center;gap:6px;padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.pick-filter-all>.filter-menu-item{flex:none;white-space:nowrap}
.pick-filter-all input{flex:1;min-width:0;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--text);font:inherit;font-size:12px}
.pick-filter-items{display:grid;gap:2px;max-height:320px;overflow-y:auto}
.pick-filter-menu.is-searchable .filter-menu-item{white-space:nowrap}
.pick-filter-name{overflow:hidden;text-overflow:ellipsis}
.pick-filter-none{margin:6px 10px;font-size:12px}
@media(min-width:901px){.page-heading:has(.listing-controls .pick-filter-menu)>.heading-actions{flex:0 0 auto;max-width:calc(100% - 200px)}}
.pick-filter-items>[hidden]{display:none!important}
.pick-filter-all input{flex:0 0 50%;width:50%;margin-inline-start:auto}

/* Rental Unit / Properties menus: only as wide as the names need; the search box follows "All (n)". */
.pick-filter-menu.is-searchable .filter-menu-list{min-width:0;width:max-content;max-width:min(320px,calc(100vw - 32px))}
.pick-filter-all input{flex:1 1 0;width:auto;min-width:90px;margin-inline-start:0}
/* Country and Sort controls everywhere use the same themed button style as the filter menus. */
:is(.country-filter,.listing-sort) select{appearance:none;-webkit-appearance:none;background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;color:#fff;border:1px solid var(--primary);font-weight:600;padding-inline-end:30px;cursor:pointer}
:is(.country-filter,.listing-sort) select:hover{background-color:var(--primary-dark)}
:is(.country-filter,.listing-sort) select:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
:is(.country-filter,.listing-sort) select option{background:var(--card);color:var(--text)}
html .page-heading .record-sort-menu>summary.btn:hover{background:var(--primary-dark)!important}
.record-sort-menu>summary .record-sort-arrow{color:#fff}
:is(.country-filter,.listing-sort) select::picker-icon{display:none}
:is(.country-filter,.listing-sort) select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heading-actions .rentalunit-heading-filters .listing-controls:has(.pick-filter-menu) .listing-sort select{width:140px}


/* Every popup is the size of the post view popup: up to 1280px wide and the height of the screen, shrinking with the
   window and filling the screen on phones. Popup forms flow into as many columns as fit (5 wide, then 4, 3, 2, 1);
   text areas, notes and sections keep the full width. */
:is(#modal,dialog.lease-detail-popup,dialog.bill-type-dialog,dialog.email-preview-dialog,dialog.profile-picture-dialog,dialog.listing-contact-dialog)[open]{width:min(1280px,calc(100% - 32px))!important;max-width:none!important;height:calc(100dvh - 48px);max-height:calc(100dvh - 48px)!important;box-sizing:border-box}
:is(dialog.bill-type-dialog,dialog.email-preview-dialog,dialog.profile-picture-dialog,dialog.listing-contact-dialog)[open]{overflow:auto}
#modal[open]:has(#post-form){overflow:auto}
@media(max-width:600px){:is(#modal,dialog.lease-detail-popup,dialog.bill-type-dialog,dialog.email-preview-dialog,dialog.profile-picture-dialog,dialog.listing-contact-dialog)[open]{width:calc(100% - 16px)!important;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)!important}}
:is(#modal,dialog.lease-detail-popup) .form-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
:is(#modal,dialog.lease-detail-popup) .form-grid>:not(.field),:is(#modal,dialog.lease-detail-popup) .form-grid>.field:is(.full,:has(textarea)){grid-column:1/-1}
.header-form-popup form{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.header-form-popup form>:is(.field:has(textarea),p,.form-error){grid-column:1/-1}
@media(max-width:600px){:is(#modal,dialog.lease-detail-popup) .form-grid{grid-template-columns:minmax(0,1fr)!important}}
.property-card[role="button"]{cursor:pointer;text-align:start}
/* Phones: data tables keep readable columns and scroll sideways (like Invoices) instead of squeezing every column to
   the screen width, which broke words letter by letter. Desktop layouts are unchanged. */
@media(max-width:720px){
 .table-wrap:has(> .data-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
 .table-wrap .data-table.record-table,.table-wrap .data-table.workspace-grid,.table-wrap .data-table.managed-grid{table-layout:auto!important;width:max-content!important;min-width:100%!important}
 .table-wrap .data-table:is(.record-table,.workspace-grid,.managed-grid) :is(th,td){white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;min-width:110px;max-width:240px}
 .table-wrap .data-table:is(.record-table,.workspace-grid,.managed-grid) thead th{white-space:nowrap!important}
 .table-wrap .data-table:is(.record-table,.workspace-grid,.managed-grid) :is(th,td):has(.badge,.team-member-name,.team-member-email){white-space:nowrap!important;max-width:none}
 .table-wrap .data-table:is(.record-table,.workspace-grid,.managed-grid) td:last-child{min-width:0;white-space:nowrap!important;max-width:none}
 .table-wrap .data-table :is(input,select)[data-grid-filter],.table-wrap .data-table thead input{min-width:90px}
 .data-table.team-grid :is(.team-member-name,.team-member-email){overflow-wrap:normal;word-break:normal}
}
/* Seed account picker on the sign-in page (SEEDACCOUNT=1): the rental unit filter's searchable menu at full width. */
.seed-account-field{display:grid;gap:6px}
.seed-account-menu{width:100%}
html[lang] .seed-account-menu>summary.btn{width:100%;max-width:none;justify-content:flex-start;text-transform:none;background:var(--card);color:var(--text);border:1px solid var(--border);font-weight:500}
.seed-account-menu>summary .filter-menu-label{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-filter-menu.is-searchable.seed-account-menu .filter-menu-list{left:0;right:0;width:100%;min-width:0;max-width:none}
.seed-account-menu .filter-menu-item{justify-content:space-between;gap:10px}
.seed-account-menu .filter-menu-item .filter-count{flex:none}