:root{
  --bg:#faf8f5;
  --bg-alt:#f1ece4;
  --text:#2b2620;
  --text-soft:#6b6259;
  --accent:#a97a50;
  --accent-dark:#7c5636;
  --line:#e4dcd0;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(43,38,32,0.08);
  --radius: 14px;
  --danger:#c0392b;
  --ok:#2f9e58;
  --warn:#c98a1a;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5;
}
h1,h2{margin:0 0 6px; letter-spacing:-.3px;}
h1{font-size:1.5rem;}
h2{font-size:1.1rem;}
.muted{color:var(--text-soft); font-size:.9rem;}
.center-text{text-align:center; padding:40px 0;}
.wrap{max-width:900px; margin:0 auto; padding:24px 20px 60px;}

.topbar{
  position:sticky; top:0; z-index:10; background:rgba(250,248,245,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:900px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{font-weight:700; white-space:nowrap;}
.topbar-actions{display:flex; align-items:center; gap:14px; min-width:0;}
.user-box{display:flex; align-items:center; gap:12px; font-size:.85rem; color:var(--text-soft); min-width:0;}
/* Never let a long address push the buttons off the edge. */
#userEmail{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px;}

/* The account buttons are two short words each; never let them break mid-label. */
.user-box .btn-link{white-space:nowrap;}

/* On a phone the brand and the account controls each get their own line, and
   the address takes a line of its own so the buttons keep their full width. */
@media (max-width:640px){
  .topbar-inner{flex-direction:column; align-items:stretch; padding:10px 16px; gap:8px;}
  .topbar-actions{justify-content:space-between; gap:10px;}
  .brand{font-size:.95rem;}
  .user-box{flex-wrap:wrap; justify-content:flex-end; row-gap:6px;}
  #userEmail{max-width:none; flex:1 1 100%; text-align:right;}
}
.btn-lang{
  background:var(--bg-alt); border:1px solid var(--line); color:var(--text);
  padding:5px 10px; border-radius:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.03em; cursor:pointer;
}
.btn-lang:hover{background:var(--line);}

.view{ }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:18px; box-shadow:var(--shadow);
}
.center-card{max-width:440px; margin:60px auto;}
/* On a phone that 60px pushes the form well below the fold for no benefit. */
@media (max-width:640px){ .center-card{margin:20px auto;} }

label{display:block; font-size:.82rem; font-weight:600; margin:12px 0 5px; color:var(--text-soft);}
input, select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:.95rem; font-family:inherit; background:var(--bg);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;}

.btn-primary{
  margin-top:16px; background:var(--accent); color:#fff; border:none;
  padding:11px 20px; border-radius:10px; font-weight:600; font-size:.92rem; cursor:pointer;
}
.btn-primary:hover{background:var(--accent-dark);}
.btn-link{
  background:none; border:none; color:var(--accent-dark); font-size:.85rem;
  cursor:pointer; text-decoration:underline; padding:0;
}
.btn-small{
  background:var(--bg-alt); border:1px solid var(--line); color:var(--text);
  padding:6px 12px; border-radius:8px; font-size:.8rem; cursor:pointer; font-weight:600;
}
.btn-small:hover{background:var(--line);}
.btn-small.danger{color:var(--danger); border-color:#e8c4bd;}
.danger-link{color:var(--danger);}

/* Location card: the address, the map, and a way out to the phone's own app. */
.loc-address{margin:6px 0 12px; font-weight:600;}
.map-frame{
  position:relative; aspect-ratio:4/3; max-width:100%; overflow:hidden;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-alt);
}
.map-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.map-open{display:inline-block; margin-top:10px; text-decoration:none;}
/* A checkbox reads as a sentence, not as a stacked label over a lone box. */
.check-row{display:flex; align-items:center; gap:8px; margin:10px 0 0; font-weight:500;}
.check-row input{width:auto; margin:0;}

.msg{margin-top:14px; padding:10px 14px; border-radius:10px; font-size:.88rem;}
.msg.ok{background:#e6f4ea; color:var(--ok);}
.msg.error{background:#fbe9e7; color:var(--danger);}

.onboarding-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px;}
@media (max-width:700px){ .onboarding-grid{grid-template-columns:1fr;} }

.dash-header{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; margin-bottom:20px;
}
.invite-box{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:10px;
  padding:10px 16px; text-align:center;
}
.invite-box .label{display:block; font-size:.72rem; color:var(--text-soft); margin-bottom:4px;}
.invite-box code{font-size:1.1rem; font-weight:700; letter-spacing:1px; color:var(--accent-dark);}

.tabs{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.tab-btn{
  background:none; border:1px solid var(--line); padding:8px 16px; border-radius:999px;
  font-size:.85rem; font-weight:600; color:var(--text-soft); cursor:pointer;
}
.tab-btn.active{background:var(--accent); color:#fff; border-color:var(--accent);}

.list{display:grid; gap:10px; margin-top:12px;}
.list-item{
  border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.list-item .main{flex:1; min-width:180px;}
.list-item .title{font-weight:600; font-size:.92rem;}
.list-item .sub{font-size:.8rem; color:var(--text-soft); margin-top:2px;}

/* A payment row holds a variable number of pills and buttons. Left to wrap on
   their own they broke differently on every row — a button riding up beside the
   pills here, wrapping alone there. Grouping them fixes the shape: pills sit
   beside the title, actions always take a line of their own. */
.row-pills{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.row-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1 1 100%;}
.row-actions:empty{display:none;}
.pill{
  font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.4px;
}
.pill.pending{background:#fdf1dc; color:var(--warn);}
.pill.paid{background:#e6f4ea; color:var(--ok);}
.pill.overdue{background:#fbe9e7; color:var(--danger);}
.pill.open{background:#fbe9e7; color:var(--danger);}
.pill.in_progress{background:#fdf1dc; color:var(--warn);}
.pill.resolved, .pill.closed{background:#e6f4ea; color:var(--ok);}
.pill.low{background:var(--bg-alt); color:var(--text-soft);}
/* The tenant says they have paid; the owner has not confirmed it yet. */
.pill.declared{background:#eef3fb; color:#3a5a8c;}
/* A link styled as a button still has to sit on the row like one. */
a.btn-small{display:inline-block; text-decoration:none;}
.pill.medium{background:#fdf1dc; color:var(--warn);}
.pill.high, .pill.urgent{background:#fbe9e7; color:var(--danger);}

.request-card{border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:10px;}
.request-card .head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.request-card .desc{font-size:.88rem; color:var(--text-soft); margin:8px 0;}
.status-actions{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0;}
.comments{margin-top:10px; border-top:1px solid var(--line); padding-top:10px;}
.comment{font-size:.85rem; margin-bottom:10px;}
.comment .author{font-weight:600;}
.comment-time{font-size:.72rem; color:var(--text-soft); margin-left:8px;}
.comment-body{margin-top:2px;}
.comment-form{display:flex; gap:8px; margin-top:8px;}
.comment-form input{flex:1;}
.comment-form button{white-space:nowrap;}

/* The conversation is its own section of a report card, foldable when the
   list is long enough that the replies would drown the reports. */
.convo{margin-top:10px; border-top:1px solid var(--line); padding-top:10px;}
.convo .comments{margin-top:0; border-top:none; padding-top:0;}
.convo-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px;}
.section-head{font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; color:var(--text-soft);}
.convo-collapsed{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
[data-show-all]{margin-bottom:10px;}

/* Full-width line standing between the runs of a payment list. */
.section-toggle{width:100%; padding:10px; margin-top:2px;}

.messages-list{display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; margin-bottom:14px; padding-right:4px;}
.message-bubble{padding:9px 13px; border-radius:12px; max-width:75%; font-size:.9rem;}
.message-bubble.mine{background:var(--accent); color:#fff; align-self:flex-end;}
.message-bubble.theirs{background:var(--bg-alt); align-self:flex-start;}
.message-bubble .sender{font-size:.72rem; font-weight:700; opacity:.85; margin-bottom:2px;}
[data-load-earlier]{align-self:center; margin-bottom:6px;}

/* Unread count on a tab. It rides on a data attribute because the language
   switch rewrites each button's text, which would wipe a child element. */
.tab-btn[data-badge]::after{
  content:attr(data-badge); margin-left:6px; padding:1px 6px;
  background:var(--danger); color:#fff; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:0;
}
.tab-btn.active[data-badge]::after{background:#fff; color:var(--accent-dark);}
.message-bubble .meta{font-size:.7rem; opacity:.7; margin-top:3px;}
.message-form{display:flex; gap:8px;}
.message-form input{flex:1;}
.message-form button{margin-top:0; white-space:nowrap;}

[hidden]{display:none !important;}

/* Invite codes are typed in uppercase, but the placeholder hint is not. */
#inviteCodeInput, #guestCodeInput{text-transform:uppercase;}
#inviteCodeInput::placeholder, #guestCodeInput::placeholder{text-transform:none;}

/* Checkbox sits inline with its label, unlike the stacked form fields. */
.check-row{display:flex; align-items:center; gap:8px; margin:14px 0 0; font-weight:500;}
.check-row input[type=checkbox]{width:auto; margin:0;}
.list-item code{background:var(--bg-alt); padding:2px 8px; border-radius:6px; letter-spacing:.08em;}

/* Month headings inside a payment history, plus the row that pages it. */
.group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:6px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.group-head:first-child{margin-top:0;}
.group-title{font-weight:700; font-size:.88rem;}
.group-count{font-size:.78rem; color:var(--text-soft); white-space:nowrap;}
.list-more{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin-top:4px;
}

/* Sits between the sign-in form and the magic-link fallback button. */
.small-note{margin:18px 0 8px; font-size:.85rem;}
.center-card + .center-card{margin-top:18px;}

.btn-secondary{
  margin-top:10px; width:100%; background:var(--bg-alt); color:var(--accent-dark);
  border:1px solid var(--accent); padding:11px 20px; border-radius:10px;
  font-weight:600; font-size:.92rem; cursor:pointer; font-family:inherit;
}
.btn-secondary:hover{background:var(--line);}
.soft-rule{border:none; border-top:1px solid var(--line); margin:22px 0 0;}

.sub-head{font-size:1rem; margin:18px 0 4px;}
#backToSignIn{margin-top:14px;}

.audit-row .audit-details{margin-top:6px;}
.audit-row summary{font-size:.78rem; color:var(--text-soft); cursor:pointer;}
.audit-row pre{
  font-size:.72rem; background:var(--bg-alt); padding:8px; border-radius:8px;
  margin:6px 0 0; overflow-x:auto; max-height:220px;
}

/* Thumbnails of whatever the tenant photographed. */
.photo-strip{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.photo-thumb{padding:0; border:none; background:none; cursor:pointer; line-height:0;}
.photo-strip img{
  width:84px; height:84px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); display:block;
}
.photo-thumb:focus-visible img{outline:2px solid var(--accent); outline-offset:2px;}

/* Full-screen photo viewer: one report's photos read as one set. */
.photo-viewer{
  position:fixed; inset:0; z-index:100; background:rgba(20,17,14,.93);
  display:flex; align-items:center; justify-content:center; padding:56px 16px;
}
.photo-viewer img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;}
.photo-viewer button{
  position:absolute; background:rgba(255,255,255,.12); color:#fff; border:none;
  cursor:pointer; font-family:inherit; line-height:1;
}
.photo-viewer button:hover{background:rgba(255,255,255,.22);}
.pv-close{top:12px; right:12px; width:40px; height:40px; border-radius:50%; font-size:1.1rem;}
/* Big enough for a thumb, and clear of the image itself. */
.pv-nav{top:50%; transform:translateY(-50%); width:44px; height:64px; border-radius:10px; font-size:2rem;}
.pv-nav.prev{left:8px;}
.pv-nav.next{right:8px;}
.pv-count{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:.82rem; letter-spacing:.04em;
  background:rgba(255,255,255,.12); padding:5px 14px; border-radius:999px;
}

/* ---- Calendar ---- */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.cal-head h2{margin:0; font-size:1.05rem; text-align:center; flex:1;}
#ownerCalToday, #tenantCalToday{margin:10px 0 14px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-wd{
  text-align:center; font-size:.68rem; font-weight:700; color:var(--text-soft);
  padding:4px 0; text-transform:uppercase;
}
.cal-cell{
  aspect-ratio:1; border:1px solid var(--line); border-radius:8px; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:inherit; font-size:.85rem; color:var(--text); cursor:pointer; padding:0;
}
.cal-cell.empty{border:none; background:none; cursor:default;}
.cal-cell.today{border-color:var(--accent); font-weight:700;}
.cal-cell.selected{background:var(--accent); color:#fff; border-color:var(--accent);}
.cal-cell .dots{display:flex; gap:2px; min-height:6px;}
.dot{width:6px; height:6px; border-radius:50%; display:inline-block;}
.dot.due{background:var(--warn);}
/* Late money must not share a colour with money that is merely coming. */
.dot.overdue{background:var(--danger);}
.dot.paid{background:var(--ok);}
.dot.lease{background:var(--accent-dark);}
.dot.guest{background:var(--text-soft);}
.cal-cell.selected .dot{outline:1px solid #fff;}
.cal-day-head{font-weight:700; margin:4px 0 8px;}

/* Both languages visible, the active one filled in. */
.lang-switch{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.lang-switch .btn-lang{border:none; border-radius:0; background:var(--bg-alt);}
.lang-switch .btn-lang + .btn-lang{border-left:1px solid var(--line);}
.lang-switch .btn-lang.active{background:var(--accent); color:#fff;}
.lang-switch .btn-lang.active:hover{background:var(--accent-dark);}

/* Creating an account is rare here, so it steps back from the primary action. */
#forgotPassword{display:block; margin:14px auto 0;}
.create-link{display:block; margin:12px auto 0; font-weight:600;}

.pay-summary{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.pay-summary .pill{font-size:.78rem;}