:root{
  /* Text RGB triplet, so rgba(var(--ink), .65) works in both themes. */
  --ink:245,242,237;--black:#000000;--white:#F5F2ED;--gold:#C8A96E;--gold-dim:#8B7147;--grey:#111111;--mid:#2A2A2A;--muted:#6B6B6B;--border:rgba(200,169,110,0.15);--rust:#B5451B;--sage:#5C7A5E;}
*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:'Barlow',sans-serif;min-height:100vh;overflow-x:hidden;overscroll-behavior:none;}
/* Disable map touch capture when any modal is open */
.modal-overlay.open ~ * #home-map,
.modal-overlay.open ~ * #df-map,
body.modal-open #home-map,
body.modal-open #df-map{pointer-events:none!important;touch-action:none!important;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;opacity:0.4;}

/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:5000;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:rgba(0,0,0,0.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.logo-wrap img{height:48px;width:auto;}
.header-right{display:flex;align-items:center;gap:16px;}

/* PROPERTIES NAV DROPDOWN */
.nav-dropdown-wrap{position:relative;}
.nav-dropdown-btn{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(var(--ink),0.6);background:none;border:none;cursor:pointer;padding:8px 12px;transition:color 0.2s;display:flex;align-items:center;gap:6px;}
.nav-dropdown-btn:hover{color:var(--gold);}
.nav-dropdown-btn::after{content:'▾';font-size:10px;opacity:0.6;}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#141414;border:1px solid var(--border);min-width:300px;display:none;z-index:300;box-shadow:0 8px 32px rgba(0,0,0,0.4);}
.nav-dropdown.open{display:block;}
.nav-prop-item{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;border-bottom:1px solid rgba(200,169,110,0.06);transition:background 0.15s;}
.nav-prop-item:last-child{border-bottom:none;}
.nav-prop-item:hover{background:rgba(200,169,110,0.06);}
.nav-prop-badge{flex-shrink:0;}
.nav-prop-info{}
.nav-prop-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--white);margin-bottom:1px;}
.nav-prop-city{font-size:11px;color:var(--muted);}

/* GEAR */
.gear-wrap{position:relative;display:flex;align-items:center;gap:8px;}
.gear-btn{background:none;border:1px solid var(--border);color:var(--muted);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.gear-btn:hover{border-color:var(--gold);color:var(--gold);}
.gear-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#141414;border:1px solid var(--border);width:224px;display:none;z-index:300;box-shadow:0 8px 32px rgba(0,0,0,0.4);}
.gear-dropdown.open{display:block;}
.gear-pwd-section{padding:20px;}
.gear-pwd-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;text-align:center;}
.gear-pwd-input{width:100%;background:var(--grey);border:1px solid rgba(200,169,110,0.2);padding:10px 12px;font-family:'Barlow',sans-serif;font-size:14px;color:var(--white);outline:none;text-align:center;letter-spacing:0.15em;margin-bottom:8px;transition:border-color 0.2s;}
.gear-pwd-input:focus{border-color:var(--gold);}
.gear-pwd-btn{width:100%;background:var(--gold);color:var(--black);border:none;padding:10px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;}
.gear-pwd-btn:hover{background:#D4B87A;}
.gear-pwd-error{font-size:11px;color:var(--rust);text-align:center;margin-top:6px;min-height:14px;}
.gear-menu{display:none;}
.gear-menu.visible{display:block;}
.gear-item{display:flex;align-items:center;gap:10px;padding:14px 18px;font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(var(--ink),0.65);cursor:pointer;transition:all 0.15s;border-bottom:1px solid var(--border);}
.gear-item:last-child{border-bottom:none;}
.gear-item:hover{background:rgba(200,169,110,0.06);color:var(--gold);}
.gear-item-icon{font-size:14px;width:20px;text-align:center;}
.gear-logout{padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:center;border-top:1px solid var(--border);transition:color 0.2s;}
.gear-logout:hover{color:var(--rust);}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 48px 80px;position:relative;overflow:visible;}
.hero-bg{position:absolute;inset:0;background:linear-gradient(160deg,rgba(200,169,110,0.04) 0%,transparent 50%),repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(200,169,110,0.015) 80px,rgba(200,169,110,0.015) 81px),repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(200,169,110,0.015) 80px,rgba(200,169,110,0.015) 81px);}
.hero-line{position:absolute;right:48px;top:50%;transform:translateY(-50%);width:1px;height:40%;background:linear-gradient(to bottom,transparent,var(--gold),transparent);opacity:0.3;z-index:1;}
.hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;position:relative;z-index:1;display:flex;align-items:center;gap:12px;}
.hero-eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--gold);}
.hero-sub{margin-top:20px;font-size:15px;font-weight:300;color:rgba(var(--ink),0.45);max-width:400px;line-height:1.7;position:relative;z-index:1;}
.scroll-hint{position:relative;z-index:1;margin-top:40px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;}
.scroll-hint::after{content:'';display:block;width:40px;height:1px;background:var(--muted);}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{animation:fadeUp 0.7s ease both;animation-delay:0.1s;opacity:0;}
.hero-logo-wrap{animation:fadeUp 0.7s ease both;animation-delay:0.2s;opacity:0;transform-origin:left center;will-change:transform;display:inline-block;position:relative;z-index:2;}
.hero-sub{animation:fadeUp 0.7s ease both;animation-delay:0.35s;opacity:0;}
.scroll-hint{animation:fadeUp 0.7s ease both;animation-delay:0.5s;opacity:0;}

/* PROPERTIES SECTION */
#properties-section{position:relative;z-index:1;padding:80px 48px;}
.section-eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:56px;letter-spacing:0.04em;color:var(--white);line-height:1;margin-bottom:48px;}
.prop-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.prop-card{background:var(--grey);position:relative;overflow:hidden;cursor:pointer;border:1px solid transparent;transition:border-color 0.25s;}
.prop-card:hover{border-color:var(--border);}
.prop-card.closed{cursor:not-allowed;opacity:0.5;}
.prop-photo{width:100%;height:220px;object-fit:cover;display:block;background:var(--mid);
  /* Cover art is auto-populated from the address: black & white, fading to
     black at the bottom so the card body reads cleanly against it. */
  filter:grayscale(100%) contrast(0.95) brightness(0.88);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 55%,rgba(0,0,0,0.35) 88%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,0.92) 55%,rgba(0,0,0,0.35) 88%,rgba(0,0,0,0) 100%);}
.prop-photo-placeholder{width:100%;height:220px;background:linear-gradient(135deg,#111 0%,#1e1e1c 100%);display:flex;align-items:center;justify-content:center;font-size:32px;color:rgba(200,169,110,0.15);}
.prop-card-body{padding:22px 24px 26px;}
.prop-card-num{font-family:'Bebas Neue',sans-serif;font-size:44px;color:rgba(200,169,110,0.1);line-height:1;margin-bottom:6px;}
.prop-card-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--white);margin-bottom:4px;}
.prop-card-city{font-size:12px;color:var(--muted);margin-bottom:14px;}
.prop-card-footer{display:flex;align-items:center;justify-content:space-between;}
.prop-card-cta{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold);opacity:0;transform:translateX(-8px);transition:all 0.25s;}
.prop-card:hover .prop-card-cta{opacity:1;transform:translateX(0);}
.prop-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.3s;}
.prop-card:hover::after{transform:scaleX(1);}

/* STATUS BADGES */
.status-badge{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;padding:4px 10px;}
.status-select-closed{color:#888!important;}
.status-select-open{color:#5C7A5E!important;}
.status-select-occupied{color:#C8A96E!important;}
.status-open{background:rgba(92,122,94,0.15);color:var(--sage);border:1px solid rgba(92,122,94,0.3);}
.status-active{background:rgba(200,169,110,0.1);color:var(--gold);border:1px solid rgba(200,169,110,0.3);}
.status-occupied{background:rgba(200,169,110,0.1);color:var(--gold);border:1px solid rgba(200,169,110,0.3);}
.status-closed{background:rgba(136,136,128,0.1);color:var(--muted);border:1px solid rgba(136,136,128,0.2);}
.status-proforma{background:rgba(123,168,160,0.1);color:#7BA8A0;border:1px solid rgba(123,168,160,0.3);}
.pf-mode .admin-prop-header{border-left:3px solid #7BA8A0;}
.pf-mode .admin-prop-title{color:#7BA8A0;}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:28px 48px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;}
.footer-copy{font-size:12px;color:var(--muted);font-weight:300;letter-spacing:0.04em;}

/* body.modal-open intentionally empty - no scroll lock needed */
/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:400;display:flex;align-items:flex-start;justify-content:center;padding:20px;padding-top:max(90px,calc(env(safe-area-inset-top) + 90px));opacity:0;pointer-events:none;transition:opacity 0.3s;
  /* The overlay never scrolls — it's the frame. Exactly one scroller lives
     inside it (.modal-body), which is what makes desktop and touch feel the
     same instead of two nested scrollers fighting each other. */
  overflow:hidden;overscroll-behavior:contain;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--grey);border:1px solid var(--border);width:100%;max-width:580px;transform:translateY(20px);transition:transform 0.3s;
  /* A flex column with a bounded height: the header stays put, the body scrolls. */
  display:flex;flex-direction:column;overflow:hidden;
  max-height:calc(100dvh - 110px);}
@supports not (height: 100dvh){ .modal{ max-height:calc(100vh - 110px); } }
.modal-overlay.open .modal{transform:translateY(0);}
.modal-lg{max-width:700px;}
.modal-xl{max-width:96vw;width:96vw;}
.modal-header{background:var(--black);padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;position:sticky;top:0;z-index:10;}
.modal-title-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.04em;color:var(--white);}
.modal-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px;line-height:1;transition:color 0.2s;flex-shrink:0;margin-left:12px;}
.modal-close:hover{color:var(--white);}
.modal-body{padding:24px 28px;
  /* The single scroll container. overscroll-behavior stops a flick at the end
     of the list from scrolling the page behind it. */
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.modal-header{flex:0 0 auto;}
.modal-step{display:none;}.modal-step.active{display:block;}
.step-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.step-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* FORM */
.form-group{margin-bottom:13px;}
.form-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:block;}
.form-input{width:100%;background:var(--black);border:1px solid rgba(200,169,110,0.18);padding:11px 13px;font-family:'Barlow',sans-serif;font-size:14px;color:var(--white);outline:none;transition:border-color 0.2s;}
.form-input:focus{border-color:var(--gold);}
.form-input::placeholder{color:var(--muted);}
select.form-input option{background:var(--grey);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.btn-primary{width:100%;background:var(--gold);color:var(--black);border:none;padding:13px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;margin-top:8px;}
.btn-primary:hover{background:#D4B87A;}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;}
.btn-secondary{width:100%;background:none;color:var(--muted);border:1px solid var(--border);padding:11px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;margin-top:8px;}
.btn-secondary:hover{color:var(--white);border-color:rgba(200,169,110,0.35);}
.btn-outline-gold{background:none;border:1px solid var(--gold);color:var(--gold);padding:9px 18px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
.btn-outline-gold:hover{background:var(--gold);color:var(--black);}
.status-msg{padding:8px 0;font-size:13px;color:var(--muted);font-weight:300;min-height:18px;text-align:center;}
.status-msg.error{color:var(--rust);}
.status-msg.info{color:var(--gold);}
.status-msg.success{color:var(--sage);}
.tabs{display:flex;gap:2px;margin-bottom:18px;}
.tab{flex:1;padding:9px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);background:var(--black);border:1px solid var(--border);cursor:pointer;transition:all 0.2s;text-align:center;}
.tab.active{background:var(--gold);color:var(--black);border-color:var(--gold);}

/* SUMMARY */
.summary-box{background:var(--black);border:1px solid var(--border);padding:16px 18px;margin-bottom:13px;}
.summary-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.summary-row{display:flex;justify-content:space-between;margin-bottom:6px;}
.summary-row span:first-child{font-size:12px;color:var(--muted);}
.summary-row span:last-child{font-size:13px;font-weight:500;}
.summary-total{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border);margin-top:4px;}
.summary-total span:first-child{font-family:'Barlow Condensed',sans-serif;letter-spacing:0.1em;text-transform:uppercase;font-size:10px;color:var(--muted);}
.summary-total span:last-child{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--gold);}

/* AMOUNT INPUT */
.amount-display{text-align:center;padding:16px 0;}
.amount-prefix{font-family:'Barlow Condensed',sans-serif;font-size:20px;color:var(--gold);vertical-align:top;margin-top:8px;display:inline-block;}
#amount-input{font-family:'Bebas Neue',sans-serif;font-size:52px;color:var(--white);background:none;border:none;outline:none;width:180px;text-align:center;}
#amount-input::placeholder{color:rgba(var(--ink),0.15);}
.amount-note{font-size:11px;color:var(--muted);text-align:center;margin-top:4px;font-weight:300;}
#stripe-element-mount{background:var(--black);border:1px solid rgba(200,169,110,0.18);padding:14px;margin-bottom:12px;min-height:50px;}
.stripe-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:11px;color:var(--muted);}
.stripe-secure::before,.stripe-secure::after{content:'';height:1px;flex:1;background:var(--border);}
.mandate-text{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:12px;padding:10px 12px;border:1px solid var(--border);font-weight:300;}
.late-fee-notice{background:rgba(181,69,27,0.08);border:1px solid rgba(181,69,27,0.2);padding:10px 14px;margin-bottom:12px;font-size:12px;color:#E8896A;line-height:1.5;}

/* SUCCESS */
.success-icon{text-align:center;font-size:40px;margin-bottom:10px;}
.success-title{font-family:'Bebas Neue',sans-serif;font-size:30px;text-align:center;color:var(--white);letter-spacing:0.04em;margin-bottom:6px;}
.success-sub{text-align:center;font-size:13px;color:var(--muted);font-weight:300;line-height:1.7;}
.success-ref{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:0.1em;color:var(--gold-dim);text-align:center;margin-top:8px;}

/* TENANT DASHBOARD */
.portal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.portal-welcome{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:0.04em;}
.portal-logout{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:color 0.2s;}
.portal-logout:hover{color:var(--rust);}
.due-card{background:var(--black);border:1px solid var(--border);padding:16px 18px;margin-bottom:10px;}
.due-card-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.due-amount{font-family:'Bebas Neue',sans-serif;font-size:40px;color:var(--white);line-height:1;}
.due-amount.overdue{color:var(--rust);}
.due-meta{font-size:12px;color:var(--muted);margin-top:4px;font-weight:300;line-height:1.5;}
.history-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(200,169,110,0.06);}
.history-row:last-child{border-bottom:none;}
.history-date{font-size:11px;color:var(--muted);}
.history-amount{font-family:'Barlow Condensed',sans-serif;font-size:14px;color:var(--white);}
.history-status{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.08em;padding:3px 8px;}
.history-status.pending{background:rgba(200,169,110,0.1);color:var(--gold);}
.history-status.succeeded{background:rgba(92,122,94,0.1);color:var(--sage);}
.history-status.failed{background:rgba(181,69,27,0.1);color:var(--rust);}
.mini-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px;display:flex;align-items:center;gap:8px;}
.mini-label::after{content:'';flex:1;height:1px;background:var(--border);}
.lease-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.1em;padding:4px 10px;margin-bottom:10px;}
.lease-signed{background:rgba(92,122,94,0.12);color:var(--sage);border:1px solid rgba(92,122,94,0.25);}
.lease-pending{background:rgba(200,169,110,0.1);color:var(--gold);border:1px solid rgba(200,169,110,0.25);}
.maint-form{background:var(--black);border:1px solid var(--border);padding:16px 18px;margin-top:4px;}

/* ADMIN PANEL */
.admin-prop-accordion{margin-bottom:8px;border:1px solid var(--border);}
.admin-prop-header{display:flex;align-items:center;justify-content:space-between;padding:34px 20px;min-height:104px;background:var(--black);cursor:pointer;transition:background 0.2s;
  /* Gold spine marks a managed property; .pf-mode overrides it to teal for
     Pro Forma. Higher specificity there means order here doesn't matter. */
  border-left:3px solid var(--gold);}
.admin-prop-header:hover{background:#050505;}
.admin-prop-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--white);display:flex;align-items:center;gap:8px;}
.admin-prop-chevron{color:var(--gold);font-size:12px;transition:transform 0.25s;}
.admin-prop-chevron.open{transform:rotate(180deg);}
.admin-prop-body{display:none;background:var(--grey);}
.admin-prop-body.open{display:block;}
.admin-sub-tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--grey);position:sticky;top:0;z-index:5;flex-shrink:0;}
.admin-sub-tabs::-webkit-scrollbar{display:none;}
.admin-sub-tab{flex:none;padding:10px 12px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);background:none;border:none;cursor:pointer;transition:all 0.2s;border-right:1px solid var(--border);white-space:nowrap;display:flex;align-items:center;gap:5px;}
.admin-sub-tab:last-child{border-right:none;}
.admin-sub-tab.active{background:rgba(200,169,110,0.08);color:var(--gold);}
.admin-sub-tab .tab-label{display:inline;}
.admin-sub-panel{display:none;padding:16px 16px;}.admin-sub-panel.active{display:block;}
@media(max-width:600px){
  .admin-sub-tab{padding:10px 10px;}
  .admin-sub-tab .tab-label{display:none;}
  .admin-sub-tab svg{width:16px;height:16px;}
  .admin-sub-panel{padding:14px 12px;}
  .admin-fields,.admin-fields-3{grid-template-columns:1fr;}
  /* No inner height cap: an open property would otherwise become a THIRD nested
     scroller inside the modal body, which is what made the phone feel unlike the
     desktop. It grows naturally; the modal body is the one thing that scrolls. */
  .admin-prop-body{max-height:none;}
  .modal{max-width:100%;}
  .modal-header{padding:14px 16px;}
  .admin-sub-panel{padding:14px 12px;}
  .financial-grid{grid-template-columns:1fr;}
}
.admin-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.admin-fields-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;}
.admin-field-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:block;}
.admin-input{width:100%;background:var(--black);border:1px solid rgba(200,169,110,0.12);padding:9px 11px;font-family:'Barlow',sans-serif;font-size:13px;color:var(--white);outline:none;transition:border-color 0.2s;
  /* line-height + box-sizing keep descenders from being clipped when a fixed
     height is applied inline; without it 13px text in a 32px box gets cut. */
  line-height:1.4;box-sizing:border-box;}
select.admin-input{min-height:40px;padding-right:30px;}
.admin-input:focus{border-color:var(--gold);}
select.admin-input option{background:var(--grey);}
.admin-save-btn{background:none;border:1px solid var(--gold);color:var(--gold);padding:9px 20px;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;width:100%;}
.admin-save-btn:hover{background:var(--gold);color:var(--black);}
.tenant-mode-chip{flex:1;background:none;border:1px solid var(--border);color:var(--muted);padding:8px 10px;font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;transition:all 0.2s;}
.tenant-mode-chip.active{border-color:var(--gold);color:var(--gold);background:rgba(200,169,110,0.08);}
.tenant-mode-chip:hover{color:var(--gold);}
.admin-saved{font-family:'Barlow Condensed',sans-serif;font-size:10px;text-align:center;margin-top:6px;min-height:14px;}
.admin-row{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(200,169,110,0.06);}
.admin-row:last-child{border-bottom:none;}
.admin-name{font-weight:500;color:var(--white);font-size:13px;}
.admin-meta{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}
.maint-resolve-btn{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.1em;padding:4px 10px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all 0.2s;white-space:nowrap;}
.maint-resolve-btn:hover{border-color:var(--gold);color:var(--gold);}
.priority-high{color:var(--rust);}
.priority-normal{color:var(--gold);}
.priority-low{color:var(--muted);}

/* PRO FORMA INFO DOTS */
.pf-info-dot{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid rgba(200,169,110,0.35);font-size:8px;color:var(--gold);cursor:help;margin-left:4px;vertical-align:middle;font-style:normal;font-family:'Barlow Condensed',sans-serif;letter-spacing:0;text-transform:none;position:relative;}
.pf-info-dot:hover::after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1A1A1A;border:1px solid var(--border);padding:8px 10px;font-size:11px;color:rgba(var(--ink),0.8);line-height:1.5;max-width:240px;width:max-content;box-shadow:0 4px 16px rgba(0,0,0,0.6);z-index:200;white-space:normal;font-family:'Barlow',sans-serif;letter-spacing:0;text-transform:none;border-radius:2px;}
/* FINANCIALS */
.fin-controls{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.fin-sort-btn{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all 0.2s;}
.fin-sort-btn.active{background:rgba(200,169,110,0.1);color:var(--gold);border-color:rgba(200,169,110,0.3);}
.fin-sort-btn:hover{color:var(--gold);}
.financial-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.financial-card{background:var(--black);border:1px solid var(--border);padding:14px 16px;}
.financial-big{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--white);line-height:1;margin-bottom:2px;}
.financial-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.financial-sub{font-size:11px;color:var(--muted);font-weight:300;}
.admin-empty{text-align:center;padding:20px;color:var(--muted);font-size:13px;}

/* LEASES */
.lease-row{background:var(--black);border:1px solid var(--border);margin-bottom:8px;}
.lease-row-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;user-select:none;}
.lease-row-header:hover{background:rgba(200,169,110,0.04);}
.lease-row-body{display:none;padding:0 16px 14px;border-top:1px solid var(--border);}
.lease-row-body.open{display:block;}
.lease-status-badge{font-family:'Barlow Condensed',sans-serif;font-size:9px;letter-spacing:0.14em;text-transform:uppercase;padding:2px 8px;border:1px solid;}
.lease-status-current{color:var(--sage);border-color:rgba(92,122,94,0.4);background:rgba(92,122,94,0.1);}
.lease-status-past{color:var(--muted);border-color:var(--border);background:transparent;}
/* DOCUMENTS */
.doc-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(200,169,110,0.06);}
.doc-row:last-child{border-bottom:none;}
.doc-name{font-size:13px;color:var(--white);font-weight:500;}
.doc-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.doc-link{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);text-decoration:none;padding:4px 10px;border:1px solid rgba(200,169,110,0.3);transition:all 0.2s;}
.doc-link:hover{background:rgba(200,169,110,0.1);}

/* REPORTS MODAL */
.reports-section-title{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin:20px 0 12px;display:flex;align-items:center;gap:10px;}
.reports-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.reports-section-title:first-child{margin-top:0;}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.report-card{background:var(--black);border:1px solid var(--border);padding:14px 16px;}
.report-big{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--white);line-height:1;}
.report-label{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.report-sub{font-size:11px;color:var(--muted);margin-top:2px;font-weight:300;}
.report-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
.report-table th{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border);text-align:left;cursor:pointer;white-space:nowrap;}
.report-table th:hover{color:var(--gold);}
.report-table th.sorted{color:var(--gold);}
.report-table td{padding:8px 10px;border-bottom:1px solid rgba(200,169,110,0.05);color:var(--white);vertical-align:top;}
.report-table tr:last-child td{border-bottom:none;}
.report-table tr:hover td{background:rgba(200,169,110,0.03);}
.late-tag{font-family:'Barlow Condensed',sans-serif;font-size:10px;padding:2px 6px;background:rgba(181,69,27,0.1);color:var(--rust);border:1px solid rgba(181,69,27,0.2);}
.ontime-tag{font-family:'Barlow Condensed',sans-serif;font-size:10px;padding:2px 6px;background:rgba(92,122,94,0.1);color:var(--sage);border:1px solid rgba(92,122,94,0.2);}

/* PAYMENT RESULT POPUP */
.pay-result-overlay{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);}
.pay-result-overlay.show{opacity:1;pointer-events:all;}
.pay-result-box{text-align:center;padding:48px 56px;border:1px solid var(--border);background:var(--grey);max-width:400px;width:90%;transform:scale(0.92);transition:transform 0.3s;}
.pay-result-overlay.show .pay-result-box{transform:scale(1);}
.pay-result-icon{font-size:64px;margin-bottom:16px;line-height:1;}
.pay-result-title{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:0.04em;margin-bottom:8px;}
.pay-result-title.success{color:var(--sage);}
.pay-result-title.fail{color:var(--rust);}
.pay-result-sub{font-size:14px;color:var(--muted);font-weight:300;line-height:1.6;margin-bottom:6px;}
.pay-result-ref{font-family:'Barlow Condensed',sans-serif;font-size:11px;color:var(--gold-dim);letter-spacing:0.1em;margin-top:8px;}
.pay-result-btn{margin-top:24px;display:inline-block;background:var(--gold);color:var(--black);border:none;padding:13px 32px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;}
.pay-result-btn:hover{background:#D4B87A;}
.pay-result-btn.fail-btn{background:none;border:1px solid var(--border);color:var(--muted);}
.pay-result-btn.fail-btn:hover{color:var(--white);border-color:rgba(var(--ink),0.3);background:none;}
/* MAP */
#home-map .leaflet-tile-pane{filter:grayscale(0.85) brightness(0.7) contrast(1.1);}
#home-map .leaflet-control-attribution{background:rgba(10,10,10,0.7);color:var(--muted);font-size:10px;}
.prop-map-popup .leaflet-popup-content-wrapper{background:var(--grey);border:1px solid var(--border);border-radius:0;box-shadow:0 4px 20px rgba(0,0,0,0.5);}
.prop-map-popup .leaflet-popup-tip{background:var(--grey);}
.prop-map-popup .leaflet-popup-content{margin:12px 16px;font-family:'Barlow Condensed',sans-serif;}
.comp-iframe-wrap{width:100%;height:calc(96vh - 70px);}
#comp-frame{width:100%;height:100%;border:none;display:block;}

/* LIGHT MODE */
body.light-mode{--black:#F0EDE8;--white:#1A1A1A;--ink:26,26,26;--gold:#8B6914;--gold-dim:#6B5010;--grey:#E0DDD8;--mid:#D0CCC6;--muted:#7A7770;--border:rgba(139,105,20,0.2);--rust:#B5451B;--sage:#3D5C3F;}
body.light-mode header{background:rgba(240,237,232,0.95);}
body.light-mode .nav-dropdown,body.light-mode .gear-dropdown{background:#E8E4DE;border-color:rgba(139,105,20,0.2);}body.light-mode .nav-dropdown-btn{color:rgba(40,30,10,0.75);}body.light-mode .nav-dropdown-btn:hover{color:var(--gold);}
body.light-mode .modal{background:#E8E4DE;}
body.light-mode .modal-header{background:#F0EDE8;}
body.light-mode .admin-prop-header{background:#F0EDE8;}
body.light-mode .admin-prop-body{background:#E8E4DE;}
body.light-mode .form-input,body.light-mode .admin-input{background:#F0EDE8;color:var(--white);border-color:rgba(139,105,20,0.25);}
body.light-mode .due-card,body.light-mode .summary-box,body.light-mode .financial-card,body.light-mode .report-card{background:#F0EDE8;}
body.light-mode .report-table td,body.light-mode .report-table th{color:var(--white);}
body.light-mode .maint-form{background:#F0EDE8;}
body.light-mode #home-map .leaflet-tile-pane{filter:grayscale(0.3) brightness(1) contrast(1);}

body.light-mode .hero { background: #F0EDE8; }
.theme-btn{background:none;border:1px solid var(--border);color:var(--muted);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.theme-btn:hover{border-color:var(--gold);color:var(--gold);}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(10,10,10,0.2);border-top-color:var(--black);border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:6px;}
.spinner-light{border:2px solid rgba(var(--ink),0.1);border-top-color:var(--gold);}

@media(max-width:768px){
  header{padding:14px 20px;}
  .hero{padding:0 20px 60px;}
  #properties-section{padding:60px 20px;}
  .prop-cards{grid-template-columns:1fr;gap:2px;}
  footer{padding:20px;flex-direction:column;gap:10px;text-align:center;}
  .admin-fields,.admin-fields-3,.financial-grid,.form-row,.report-grid{grid-template-columns:1fr;}
}


/* MOBILE FIX V4 - iOS scroll, modal stacking, and viewport containment */
html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}
#site-root {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}
body.modal-open #site-root {
  z-index: 20000 !important;
  pointer-events: auto !important;
}
/* Leaflet controls use high z-index values; modal must sit far above them. */
.modal-overlay,
.pay-result-overlay {
  z-index: 10000 !important;
  isolation: isolate;
}
/* Nested modals that can open ON TOP of the admin properties modal must beat the
   base 10000 !important rule above. Without this, they share z-index 10000 with
   #admin-overlay and can render behind it. */
#insp-builder-overlay,
#screening-detail-overlay {
  z-index: 12000 !important;
}
.modal-overlay.open {
  display: flex !important;
}
.modal-overlay:not(.open) {
  visibility: hidden;
}
.modal-overlay.open {
  visibility: visible;
}
body.modal-open header,
body.modal-open #home-map,
body.modal-open .leaflet-container,
body.modal-open .leaflet-pane,
body.modal-open .leaflet-control-container {
  pointer-events: none !important;
}
body.modal-open .hero,
body.modal-open .hero * {
  pointer-events: none !important;
}
body.modal-open .modal-overlay.open,
body.modal-open .modal-overlay.open * {
  pointer-events: auto !important;
}
img, video, canvas, svg, iframe {
  max-width: 100%;
}
@media (max-width: 768px) {
  body { overscroll-behavior-y: auto; }
  header {
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px !important;
    min-height: calc(72px + env(safe-area-inset-top));
  }
  .header-right { gap: 8px; }
  .nav-dropdown-btn { padding: 8px 6px; font-size: 10px; }
  .logo-wrap img { max-width: 155px; height: auto; }
  .hero {
    min-height: 100svh;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: calc(var(--header-h, 72px) + var(--props-ribbon-h, 42px) + 20px + env(safe-area-inset-top));
  }
  .hero-logo-wrap img { max-width: min(86vw, 360px); height: auto; }

  .modal-overlay {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
    overscroll-behavior: contain;
  }
  /* The base rules already make the modal a flex column with the body as the
     single scroller. On a phone it simply fills the screen edge to edge. */
  .modal-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Admin Properties specifically: full-screen scroll container on iPhone. */
  #admin-overlay { background: rgba(0,0,0,0.98) !important; }
  #admin-overlay .modal {
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
    background: var(--grey) !important;
  }
  #admin-overlay .modal-body {
    padding: 0 !important;
    background: var(--grey) !important;
  }
  #admin-overlay [style*="grid-template-columns:1fr 1fr"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns:1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .admin-prop-body {
    max-height: none !important;
    overflow: visible !important;
  }
  .admin-prop-header,
  .admin-row,
  .doc-row,
  .summary-row,
  .summary-total {
    min-width: 0 !important;
  }
  .admin-prop-title,
  .admin-name,
  .doc-name {
    overflow-wrap: anywhere;
  }

  /* Deal Findr remains a full-screen app but the list/map columns stack. */
  #dealfindr-overlay {
    padding: 0 !important;
    background: rgba(0,0,0,0.98) !important;
  }
  #dealfindr-overlay .modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #dealfindr-overlay .modal-body {
    overflow-y: auto !important;
  }
  #df-map, #home-map {
    touch-action: pan-y !important;
  }
}



/* === V5 FINANCIALS MOBILE FIT PATCH ===
   Fixes cut-off content inside the Admin Properties > Financials tab on iPhone.
   The prior scroll fix intentionally clipped modal overflow; these rules keep vertical
   scrolling intact while making the Financials cards, reserve grids, mortgage rows,
   appraisal row, and payment edit form fit inside the modal viewport. */
@media (max-width: 600px) {
  #admin-overlay,
  #admin-overlay .modal,
  #admin-overlay .modal-body,
  #admin-overlay .admin-sub-panel,
  #admin-overlay .admin-prop-body,
  #admin-overlay [id^="spanel-"],
  #admin-overlay [id^="mort-summary-"],
  #admin-overlay [id^="mort-piti-"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Any inline multi-column financial/admin grid becomes one column on phones. */
  #admin-overlay [style*="grid-template-columns:repeat(2"],
  #admin-overlay [style*="grid-template-columns: repeat(2"],
  #admin-overlay [style*="grid-template-columns:repeat(3"],
  #admin-overlay [style*="grid-template-columns: repeat(3"],
  #admin-overlay [style*="grid-template-columns:repeat(4"],
  #admin-overlay [style*="grid-template-columns: repeat(4"],
  #admin-overlay [style*="grid-template-columns:1fr 1fr"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns:1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr"],
  #admin-overlay [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr auto"],
  #admin-overlay [style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #admin-overlay [id^="mort-summary-"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
  }
  #admin-overlay [id^="mort-summary-"] > *,
  #admin-overlay [id^="mort-piti-"] > *,
  #admin-overlay .financial-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #admin-overlay .financial-card {
    padding: 14px 12px !important;
    overflow: hidden !important;
  }
  #admin-overlay .financial-label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
  }
  #admin-overlay .financial-big {
    font-size: clamp(30px, 11vw, 46px) !important;
    line-height: .95 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  #admin-overlay .financial-sub {
    font-size: 11px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  /* Large value rows, such as Monthly Cash Flow and Equity Amount, wrap instead of pushing right. */
  #admin-overlay [id^="mort-summary-"] [style*="display:flex"][style*="justify-content:space-between"],
  #admin-overlay [id^="mort-piti-"] [style*="display:flex"][style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  #admin-overlay [id^="mort-summary-"] [style*="display:flex"][style*="justify-content:space-between"] > *,
  #admin-overlay [id^="mort-piti-"] [style*="display:flex"][style*="justify-content:space-between"] > * {
    min-width: 0 !important;
  }

  /* Appraisal input row: label, input, and helper stack cleanly. */
  #admin-overlay [id^="mort-summary-"] label {
    white-space: normal !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1.35 !important;
  }
  #admin-overlay [id^="inv-appraisal-"] {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    font-size: 16px !important;
    min-width: 0 !important;
  }
  #admin-overlay [id^="mort-summary-"] label + input + span {
    display: block !important;
    width: 100% !important;
  }

  /* Payment history table: keep all columns reachable without clipping the modal. */
  #admin-overlay [id^="fin-table-"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  #admin-overlay [id^="fin-table-"] .report-table {
    width: max-content !important;
    min-width: 620px !important;
    max-width: none !important;
    table-layout: auto !important;
  }
  #admin-overlay [id^="fin-table-"] .report-table th,
  #admin-overlay [id^="fin-table-"] .report-table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    padding: 8px 8px !important;
  }
  #admin-overlay [id^="fin-row-edit-"] td {
    white-space: normal !important;
  }
  #admin-overlay [id^="fin-row-edit-"] .admin-input,
  #admin-overlay [id^="fin-row-edit-"] button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Screening form: error highlight + indented sub-labels */
.scr-error, input.scr-error, select.scr-error, textarea.scr-error{border-color:#C24A4A !important;background:rgba(194,74,74,0.06) !important;}
.scr-error.occ-card,.scr-error.pet-card{border-color:#C24A4A !important;}
.scr-sublbl{display:block;font-size:10px;letter-spacing:0.04em;color:var(--muted);margin-bottom:3px;text-transform:none;}

/* Resource page format picker cards */
.rp-fmt-card{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--border);background:var(--black);color:var(--white);cursor:pointer;transition:border-color 0.15s,background 0.15s}
.rp-fmt-card:hover{border-color:var(--gold);background:rgba(200,169,110,0.06)}
.rp-fmt-card.selected{border-color:var(--gold);background:rgba(200,169,110,0.1)}
.rp-fmt-icon{font-size:22px;color:var(--gold);min-width:30px;text-align:center;line-height:1.2}
.rp-fmt-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;color:var(--white);margin-bottom:2px}
.rp-fmt-desc{font-size:11px;color:var(--muted);line-height:1.5}

/* Resource page three-dots menu */
.rp-menu-item{display:block;width:100%;text-align:left;padding:11px 16px;border:none;background:none;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:0.04em;color:#333;cursor:pointer;white-space:nowrap}
.rp-menu-item:hover{background:#f5f0e6}
.rp-menu-danger{color:#a4442f;border-top:1px solid #eee}
.rp-menu-danger:hover{background:#faeae6}

/* Rehab estimator grid: fits its container on desktop (no scrollbar).
   Only enforce a min-width on narrow screens so the columns stay legible and
   the container scrolls horizontally on mobile. */
@media (max-width:640px){
  .pf-rehab-grid{ min-width:560px; }
}

/* Edit session: while one section is open for editing the rest of the app is
   dimmed and inert, so a change can't be abandoned by wandering off. */
body.is-editing .admin-sub-tabs,
body.is-editing .admin-prop-header { transition: opacity 0.15s; }
body.is-editing #edit-guard-toast { animation: none; }

/* ── Properties sub-ribbon ──────────────────────────────────────────────────
   Sits directly beneath the fixed header. The header is z-index 5000 and
   modals are 400, so the gear and theme toggle stay clickable while the
   properties panel is open; this bar uses 4900 to sit just under the header
   but above the panel. */
#props-ribbon{
  position:fixed; top:0; left:0; right:0; z-index:4900;
  margin-top:var(--header-h,73px);
  display:flex;
  /* Inset from the edges with a full gold outline so it reads as a button
     rather than a full-width ribbon. */
  padding:8px 40px;
  background:rgba(0,0,0,0.94);
  backdrop-filter:blur(12px);
}
/* The button fills the bar, so a click anywhere on the ribbon opens it. */
#props-ribbon-btn{
  flex:1; width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 20px;
  background:rgba(200,169,110,0.05);
  border:2px solid var(--gold);
  border-radius:3px;
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); transition:background 0.2s;
}
#props-ribbon-btn:hover{ background:rgba(200,169,110,0.14); }
#props-ribbon-btn.open{ background:rgba(200,169,110,0.18); }
#admin-notif-badge{
  display:none; align-items:center; justify-content:center;
  background:var(--rust); color:var(--white);
  font-size:10px; font-family:'Barlow Condensed',sans-serif;
  padding:1px 6px; border-radius:2px; letter-spacing:0.05em;
}
body.light-mode #props-ribbon{ background:rgba(240,237,232,0.95); }

/* The panel opens below both bars rather than under them. */
#admin-overlay{ padding-top:calc(var(--header-h,73px) + var(--props-ribbon-h,44px) + 14px) !important; }

@media (max-width: 768px){
  #props-ribbon{
    margin-top:var(--header-h, calc(72px + env(safe-area-inset-top)));
  }
  #props-ribbon{ padding:7px 14px; }
  #props-ribbon-btn{ font-size:11px; padding:10px 14px; }
  #admin-overlay{ padding-top:calc(var(--header-h,72px) + var(--props-ribbon-h,42px) + 12px) !important; }
}

/* Column headings inside the mid-lease payment schedule rows. */
.rp-collabel{
  font-family:'Barlow Condensed',sans-serif;
  font-size:8px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}

/* Tenant session: the portal is the whole app. Everything behind it stays
   hidden so closing or dismissing it can never expose the marketing site.
   The class is only applied while the portal is genuinely open — see
   applyTenantLockdown() — otherwise the page would be blank. */
body.tenant-locked header,
body.tenant-locked #props-ribbon,
body.tenant-locked .hero,
body.tenant-locked #map-section,
body.tenant-locked #home-payments-section,
body.tenant-locked footer,
body.tenant-locked .scroll-hint { display: none !important; }
body.tenant-locked { overflow: hidden; background: var(--black); }
/* The portal is re-parented to <body> when opened, but guard both positions so
   it can never be hidden by the very rules meant to hide the page behind it. */
body.tenant-locked #tenant-overlay,
body.booting #tenant-overlay { visibility: visible !important; }
/* Nothing behind the portal should be reachable by scrolling. */
body.tenant-locked #site-root > .modal-overlay:not(#tenant-overlay) { display: none !important; }

/* Boot: hold the page blank-but-branded until initSiteAuth() decides where the
   visitor belongs, so the public home screen never flashes before a tenant is
   routed into their portal. Cleared by _clearBooting(). */
body.booting .hero,
body.booting #map-section,
body.booting #home-payments-section,
body.booting footer,
body.booting header,
body.booting #props-ribbon { visibility: hidden !important; }
body.booting { background: var(--black); }

/* ── Scrollbars ─────────────────────────────────────────────────────────────
   Hidden everywhere, on every scroller, while remaining fully scrollable by
   wheel, trackpad, touch and keyboard. This is the other half of making the
   desktop feel like the phone: no chrome, just content that moves. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Momentum and predictability ────────────────────────────────────────────
   One scroll model for every device. The page scrolls, or a single panel
   scrolls — never both at once. */
/* Scrolling is instant: smooth animated every programmatic jump, which reads
   as lag on a long document rather than polish. */
html { scroll-behavior: auto; }
/* Returning from a page view jumps to the top instantly rather than gliding. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Any nested scroller in the app keeps its momentum and stops chaining. */
.modal-body,
.admin-prop-body,
.tenant-body,
#admin-overlay .modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* The page itself uses dynamic viewport units so mobile browser chrome
   appearing/disappearing doesn't cause the jump you get with 100vh. */
@supports (height: 100svh) {
  /* svh is stable; dvh re-resolves as the URL bar hides, relayouting the hero
     on every scroll frame. */
  .hero { min-height: 100svh; }
}

/* ── Page views ─────────────────────────────────────────────────────────────
   Properties, Resources, the tenant portal, Deal Findr, Reports and Contacts
   are destinations rather than dialogs. In page mode they stop being floating
   overlays and become the page: normal document flow, full width, and the
   document itself is the only thing that scrolls. This is what removes the
   nested-scroller feel and makes touch and trackpad behave identically. */
/* The home page content (hero, map, footer, scroll hint) lives OUTSIDE
   #site-root — #site-root only wraps the modals. Hiding "children of site-root"
   therefore never touched the home screen, which is why a page view appeared
   *below* the map instead of replacing it. Target the real elements instead. */
body.page-mode .hero,
body.page-mode #map-section,
body.page-mode #home-payments-section,
body.page-mode footer,
body.page-mode .scroll-hint { display: none !important; }
/* Closed modals stay out of the flow behind a page, wherever their markup sits
   (some are inside #site-root, some are siblings of it, and the active page is
   hoisted to the front of <body>). An OPEN dialog must still show on top, so
   `:not(.open)` is essential. */
body.page-mode .modal-overlay:not(.page-view):not(.open) { display: none !important; }
body.page-mode {
  overflow-y: auto; overflow-x: hidden; background: var(--grey);
  /* No rubber-banding at the top of a page: pulling down used to drag the
     sticky header with it and reveal grey behind it until it snapped back. */
  overscroll-behavior-y: none;
}
html:has(body.page-mode) { overscroll-behavior-y: none; }
/* A page must never outrank the site header. `body.modal-open #site-root` lifts
   it to 20000 for real dialogs; page mode doesn't set that class, but pin it
   anyway so a stray modal-open can't push a page over the header. */
body.page-mode #site-root { z-index: 1 !important; }
/* #site-root stays visible: its children are all modal-overlays, and an OPEN
   dialog inside it (payment, comp lookup, lease editor) must still show over a
   page. Closed ones are hidden by the rule above, so it contributes no height. */
body.page-mode #site-root { display: block !important; }

/* While a page is open the Properties ribbon is redundant — on the Properties
   page its own title already says so, and on a gear page it's dead space above
   the content. Hiding it also means a page only clears the site header. */
body.page-mode #props-ribbon { display: none !important; }

.modal-overlay.page-view {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  background: var(--grey) !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding-top: var(--header-h, 73px) !important;
}
.modal-overlay.page-view .modal {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  display: block !important;
  overflow: visible !important;
  background: var(--grey) !important;
}
/* The body no longer scrolls on its own — the page does. */
.modal-overlay.page-view .modal-body {
  overflow: visible !important;
  max-height: none !important;
  flex: none !important;
}
/* Keep the page's own header pinned under the site header while scrolling. */
.modal-overlay.page-view .modal-header {
  position: sticky !important;
  top: var(--header-h, 73px);
  z-index: 30;
  /* Opaque, so nothing shows through if the viewport is over-scrolled. */
  background: var(--black);
}
/* The overscroll strip behind the header is handled by the html background
   (set to match the theme in JS) instead of a large fixed pseudo-element, which
   was a full-viewport compositing layer repainting on every scroll. */

/* A tenant sees only their portal, so there's no ribbon to clear. */
body.tenant-locked .modal-overlay.page-view { padding-top: 0 !important; }
body.tenant-locked .modal-overlay.page-view .modal-header { top: 0; }

@media (max-width: 768px) {
  .modal-overlay.page-view {
    padding-top: var(--header-h, 72px) !important;
  }
  .modal-overlay.page-view .modal-header {
    top: var(--header-h, 72px);
    padding: 14px 16px !important;
  }
}

/* ── Page-view specificity guard ────────────────────────────────────────────
   Several older rules target these panels by #id, which outranks the .page-view
   class. Restating them at ID specificity so page mode wins without resorting
   to a blanket override — the height caps in particular would reintroduce the
   nested scroller we just removed. */
#app-settings-overlay.page-view,
#admin-overlay.page-view,
#resources-overlay.page-view,
#tenant-overlay.page-view,
#dealfindr-overlay.page-view,
#reports-overlay.page-view,
#maint-contacts-overlay.page-view {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  padding-top: var(--header-h, 73px) !important;
  background: var(--grey) !important;
  overflow: visible !important;
}
#app-settings-overlay.page-view .modal,
#admin-overlay.page-view .modal,
#resources-overlay.page-view .modal,
#tenant-overlay.page-view .modal,
#dealfindr-overlay.page-view .modal,
#reports-overlay.page-view .modal,
#maint-contacts-overlay.page-view .modal {
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  background: var(--grey) !important;
}
/* These win over inline styles on the element itself. */
#app-settings-overlay.page-view .modal-body,
#admin-overlay.page-view .modal-body,
#resources-overlay.page-view .modal-body,
#tenant-overlay.page-view .modal-body,
#dealfindr-overlay.page-view .modal-body,
#reports-overlay.page-view .modal-body,
#maint-contacts-overlay.page-view .modal-body {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
/* An open property grows to fit; the document scrolls, not the panel. */
body.page-mode .admin-prop-body,
body.page-mode .admin-sub-panel,
body.page-mode [id^="spanel-"] {
  max-height: none !important;
  overflow: visible !important;
}

/* ── Report table ───────────────────────────────────────────────────────────
   Six columns don't fit a phone. Rather than clipping the Timeliness column,
   the table scrolls sideways inside its own wrapper while the page keeps
   scrolling vertically as normal. */
.report-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.report-table-scroll .report-table{ min-width:640px; }
@media (max-width:768px){
  .report-table-scroll .report-table th,
  .report-table-scroll .report-table td{ padding:7px 8px; }
  /* Keep the date column readable rather than wrapping to three lines. */
  .report-table-scroll .report-table td:first-child,
  .report-table-scroll .report-table th:first-child{ white-space:nowrap; }
}
/* Charts must size to their container, not overflow it. */
.reports-chart-wrap{ position:relative; width:100%; }
.reports-chart-wrap canvas{ max-width:100% !important; }

/* Reports chart panels: keep the canvas inside its box on narrow screens so a
   chart is never clipped by the viewport edge. */
@media (max-width: 768px){
  #reports-overlay [style*="height:180px"]{ padding:12px !important; }
  #reports-overlay canvas{ max-width:100% !important; }
  #reports-body{ overflow-x:hidden; }
}

/* Light-mode surfaces added since the original theme block. */
body.light-mode #home-payments-section{ background:var(--black); }
body.light-mode .report-table-scroll .report-table td,
body.light-mode .report-table-scroll .report-table th{ color:var(--white); }
/* Page views inherit the panel colour rather than staying dark. */
body.light-mode .modal-overlay.page-view,
body.light-mode .modal-overlay.page-view .modal{ background:var(--grey) !important; }
body.light-mode .modal-overlay.page-view .modal-header{ background:var(--black); }
/* The overscroll backstop behind the header must match the theme. */
body.light-mode.page-mode::before{ background:var(--black); }

/* The html/body backdrop must always match the theme so no dark band shows
   behind short pages. */
html{ background:var(--black); }
body{ background:var(--black); }
body.page-mode{ background:var(--grey); }
/* A page always fills at least the viewport, so its own surface reaches the
   bottom rather than exposing the backdrop. */
/* svh, not dvh: dvh changes value continuously as the mobile URL bar hides,
   forcing a layout pass on a very large element during every scroll frame.
   svh is the stable small-viewport height and never triggers that. */
.modal-overlay.page-view{ min-height:100svh; }
@supports not (height:100svh){ .modal-overlay.page-view{ min-height:100vh; } }

/* ── Rendering cost ─────────────────────────────────────────────────────────
   In page mode the document lays out every property panel at once instead of a
   bounded scroll box. `content-visibility` lets the browser skip layout and
   paint for anything off-screen while keeping it in the document, searchable
   and scroll-accurate. This is the single biggest win on a long Properties
   list, and it degrades to normal rendering where unsupported. */
body.page-mode .admin-prop-accordion,
body.page-mode .admin-prop-body,
#home-payments-section .report-table-scroll {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
/* Promote only what actually moves. Fixed bars were repainting with the page. */
header, #props-ribbon { will-change: transform; }

/* Images decode off the main thread. */
img { content-visibility: auto; }

/* ── Emblems ────────────────────────────────────────────────────────────────
   Every icon is an inline SVG stroked with currentColor, so it inherits the
   surrounding text colour and matches in both themes. The few remaining glyph
   characters (✓ ✕ ★ ⚠ ⬤) are forced to text presentation so no platform
   substitutes a colour emoji for them. */
svg{ flex-shrink:0; }
button svg, .gear-item svg, .admin-sub-tab svg{ vertical-align:-2px; }
body{ font-variant-emoji: text; }