/* ============================================================
   EDSA UNIVERSAL — TENANT RENTAL PORTAL (front-end prototype)
   Reuses tokens from style.css. Demo only — no real accounts
   or payments until the Phase-2 backend is wired in.
   ============================================================ */

.portal-note {
  background: #fff8e1; border: 1px solid #ffe082; color: #7a5c00;
  padding: 12px 16px; font-size: .85rem; margin-bottom: 24px;
}
.portal-note strong { color: #5c4600; }

/* ---------- Rent listing intro ---------- */
.rent-intro { max-width: 720px; }

/* ---------- Status badges ---------- */
.status-badge {
  display: inline-block; padding: 5px 14px; font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
}
.status-pending  { background: #b7791f; }
.status-approved { background: #2E7D5B; }
.status-renewing { background: #b7791f; }
.status-confirming { background: #7c5cbf; }   /* tenant has paid; we are verifying */
.status-declined { background: #b91c1c; }
.status-paid,
.status-active   { background: var(--color-primary); }
.status-notice   { background: #c05621; }
.status-closed   { background: var(--color-text-muted); }

/* ---------- Multi-step application ---------- */
.steps { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.step {
  flex: 1; min-width: 120px; text-align: center;
  padding: 12px 8px; border-bottom: 3px solid var(--color-border);
  font-size: .82rem; font-weight: 600; color: var(--color-text-muted);
}
.step.active { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.step.done { border-bottom-color: var(--color-primary-light); color: var(--color-text); }
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-right: 6px;
  background: var(--color-border); color: #fff; font-size: .75rem;
}
.step.active .num, .step.done .num { background: var(--color-primary); }

.form-panel { display: none; }
.form-panel.active { display: block; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.form-section-title { font-size: 1.2rem; margin-bottom: 6px; }
.form-section-hint { color: var(--color-text-muted); font-size: .92rem; margin-bottom: 22px; }
.field-error { color: #b91c1c; font-size: .8rem; margin-top: 4px; display: none; }
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: #b91c1c; }
.form-group.invalid .field-error { display: block; }

/* Property summary card in the application */
.apply-summary {
  display: flex; gap: 16px; align-items: center;
  background: var(--color-light-bg); padding: 16px; margin-bottom: 28px;
}
.apply-summary img { width: 96px; height: 72px; object-fit: cover; }
.apply-summary h3 { font-size: 1.05rem; margin-bottom: 2px; }
.apply-summary .loc { color: var(--color-text-muted); font-size: .85rem; }
.apply-summary .price { color: var(--color-primary); font-weight: 700; font-family: var(--font-heading); }

/* Review list */
.review-list { width: 100%; border-collapse: collapse; }
.review-list td { padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; vertical-align: top; }
.review-list td:first-child { color: var(--color-text-muted); width: 42%; }

/* Confirmation */
.confirm-box { text-align: center; max-width: 560px; margin: 0 auto; }
.confirm-box .tick {
  width: 72px; height: 72px; border-radius: 50%; background: #2E7D5B; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 20px;
}
.ref-pill {
  display: inline-block; background: var(--color-secondary); color: #fff;
  padding: 10px 20px; font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: .06em; margin: 10px 0 20px;
}

/* ---------- Tenant dashboard ---------- */
.tenant-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
  color: #fff; padding: 32px; margin-bottom: 28px; box-shadow: var(--shadow-card);
}
/* flex-grow so the identity block absorbs the leftover width instead of
   stopping at its content width and leaving the row visually short. */
.tenant-hero__id { display: flex; align-items: center; gap: 18px; flex: 1 1 320px; min-width: 0; }
.tenant-avatar-wrap { position: relative; flex-shrink: 0; }
/* The avatar doubles as the profile-photo picker (a <button>), so it needs the
   button reset — colour/font are inherited from .tenant-hero, not the UA. */
.tenant-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; flex-shrink: 0;
  color: #fff; padding: 0; cursor: pointer; overflow: hidden; position: relative;
  transition: border-color .2s, transform .2s;
}
.tenant-avatar:hover { border-color: #fff; transform: scale(1.04); }
.tenant-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tenant-avatar__cam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.tenant-avatar:hover .tenant-avatar__cam,
.tenant-avatar:focus-visible .tenant-avatar__cam { opacity: 1; }
/* With no photo yet the camera hint stays visible, so it reads as "you can
   add one" rather than as a decorative initials circle. */
.tenant-avatar:not(.tenant-avatar--photo) .tenant-avatar__cam { opacity: .75; }
.tenant-avatar.is-busy { opacity: .55; pointer-events: none; }
.tenant-avatar__remove {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #b3261e; color: #fff; border: 2px solid var(--color-secondary);
  font-size: .8rem; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.tenant-avatar__remove:hover { background: #8c1d18; }
.tenant-hero__name { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; margin-bottom: 4px; color: #fff; }
.tenant-hero__property { font-size: .92rem; color: rgba(255,255,255,.8); margin-bottom: 10px; }
.tenant-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ref-chip {
  font-size: .78rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 5px 12px; letter-spacing: .02em;
}
.tenant-hero__logout,
.tenant-hero__switch,
.tenant-hero__rent { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; text-decoration: none; }
.tenant-hero__logout:hover, .tenant-hero__logout:focus-visible,
.tenant-hero__switch:hover, .tenant-hero__switch:focus-visible,
.tenant-hero__rent:hover, .tenant-hero__rent:focus-visible { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
/* Primary action gets a solid fill so it reads as the main CTA on the navy hero */
.tenant-hero__rent { background: #fff; border-color: #fff; color: var(--color-primary); font-weight: 600; }
.tenant-hero__rent:hover, .tenant-hero__rent:focus-visible { background: #eef1fb; border-color: #eef1fb; color: var(--color-primary); }

/* Explicit column counts rather than auto-fit/minmax. auto-fit was creating a
   FOURTH 273px column on a 1152px container while only three summary cards
   exist — so the cards were squeezed narrow AND a whole empty column of dead
   space sat on the right. The card count here is content-driven (countdown /
   payment / documents), so the track count should be too. */
.portal-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 700px)  { .portal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .portal-grid { grid-template-columns: repeat(3, 1fr); } }
.portal-card {
  background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
  padding: 26px 24px; transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column; height: 100%;
}
.portal-card:hover { box-shadow: 0 12px 28px rgba(1,19,108,.1); transform: translateY(-2px); }
.portal-card h3 {
  font-size: 1.05rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--color-border);
}
/* Push a card's trailing button to the bottom so cards sharing a row line up
   at the base instead of leaving ragged gaps under short content. */
.portal-card > .btn:last-child { margin-top: auto; }
.portal-card--wide { grid-column: 1 / -1; }
.card-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  background: var(--color-light-bg); color: var(--color-primary); border-radius: 50%; flex-shrink: 0;
}
.card-ic svg { width: 16px; height: 16px; }

/* Countdown (animated — numbers count up and the progress bar fills in on render) */
.countdown { display: flex; gap: 14px; }
.countdown .unit { text-align: center; background: var(--color-secondary); color: #fff; padding: 14px 10px; min-width: 68px; }
.countdown .unit .n { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1; }
.countdown .unit .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-top: 4px; }
.countdown.overdue .unit { background: #b91c1c; }
.rent-meta { margin-top: 14px; font-size: .9rem; color: var(--color-text-muted); }

.lease-progress { height: 6px; background: var(--color-light-bg); margin-top: 16px; overflow: hidden; }
.lease-progress__bar { height: 100%; width: 0%; background: var(--color-primary-light); transition: width 1s cubic-bezier(.4,0,.2,1); }
.countdown.overdue ~ .lease-progress .lease-progress__bar { background: #b91c1c; }

/* Payment */
.pay-breakdown { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.pay-breakdown td { padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: .95rem; }
.pay-breakdown td:last-child { text-align: right; font-weight: 600; }
.pay-breakdown tr.total td { border-top: 2px solid var(--color-secondary); border-bottom: none; font-size: 1.1rem; padding-top: 12px; }
.pay-methods { display: grid; gap: 12px; }
.bank-box { background: var(--color-light-bg); padding: 16px; font-size: .95rem; }
.bank-box .row { display: flex; justify-content: space-between; padding: 4px 0; }
.bank-box .row strong { font-family: var(--font-heading); }
/* Optional per-account footnote — only rendered when the admin has filled it in. */
.bank-box__note {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border);
  font-size: .84rem; line-height: 1.5; color: var(--color-text-muted);
}

/* Messages */
.chat { border: 1px solid var(--color-border); max-height: 320px; overflow-y: auto; padding: 14px; background: var(--color-off-white); }
.msg { max-width: 78%; padding: 10px 14px; margin-bottom: 10px; font-size: .9rem; }
.msg.them { background: #fff; border: 1px solid var(--color-border); }
.msg.me { background: var(--color-primary); color: #fff; margin-left: auto; }
.msg .who { font-size: .7rem; opacity: .7; margin-bottom: 3px; }
.chat-input { display: flex; gap: 8px; margin-top: 12px; }
.chat-input input { flex: 1; padding: 11px 14px; border: 1px solid var(--color-border); }

/* Move-out notice banner (shown once a tenant has given notice) */
.notice-banner {
  background: #fff4ec; border: 1px solid #f0c9a8; border-left: 4px solid #c05621;
  padding: 14px 16px; font-size: .9rem; color: #7a3d12;
}
.notice-banner strong { color: #7a3d12; }
.notice-banner p { color: #8a5a34; }

/* Receipt (printable, sized to A4) — 210mm ≈ 794px at 96dpi is used for the
   on-screen preview so it reads like the printed page; actual print output
   is governed by the @page rule further down. */
.receipt {
  background: #fff; border: 1px solid var(--color-border);
  width: 100%; max-width: 794px; margin: 0 auto;
  padding: 56px 60px; box-shadow: var(--shadow-card);
}
.receipt__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--color-secondary); padding-bottom: 20px; margin-bottom: 24px; }
.receipt__head img { height: 40px; }
.receipt h2 { font-size: 1.5rem; }
.receipt__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.receipt__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.receipt__parties p { font-size: .92rem; line-height: 1.5; }
.receipt table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.receipt td { padding: 9px 0; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
.receipt td:last-child { text-align: right; }
.receipt .paid-stamp { color: #2E7D5B; border: 2px solid #2E7D5B; display: inline-block; padding: 4px 14px; font-weight: 700; text-transform: uppercase; transform: rotate(-4deg); }
.receipt__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 56px; gap: 24px; }
.receipt__sign { min-width: 200px; }
.receipt__sign-line { border-top: 1px solid var(--color-text); width: 200px; margin-bottom: 6px; }
.receipt__sign p { font-size: .78rem; color: var(--color-text-muted); }

@media (max-width: 700px) {
  .receipt { padding: 32px 24px; }
  .receipt__parties { grid-template-columns: 1fr; gap: 16px; }
  .receipt__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Documents / maintenance list */
.doc-row, .req-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: .9rem; }
.doc-row:last-child, .req-row:last-child { border-bottom: none; }
.req-row { align-items: flex-start; padding: 12px 0; }
.req-row__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.req-row__date { font-size: .76rem; color: var(--color-text-muted); }
.req-row__note {
  font-size: .82rem; color: var(--color-primary); background: var(--color-light-bg);
  padding: 6px 10px; margin-top: 5px; border-left: 3px solid var(--color-primary-light);
}
.req-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.maint-chip {
  color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.maint-chip--open     { background: #b7791f; }
.maint-chip--progress { background: var(--color-primary-light); }
.maint-chip--resolved { background: #2E7D5B; }
.maint-chip--declined { background: #b91c1c; }
.req-cancel {
  background: none; border: none; color: var(--color-text-muted); font-size: .76rem;
  text-decoration: underline; cursor: pointer; padding: 0;
}
.req-cancel:hover { color: #b91c1c; }

/* Small login card */
.login-card { max-width: 440px; margin: 0 auto; }

/* Multi-property account: property picker + dashboard switch button */
/* align-items:stretch (not center) so the <a> CTA and the <button> actions come
   out the same height — as separate element types they resolve their own
   content height differently and were rendering 51px vs 45px side by side. */
.tenant-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; flex: 0 0 auto; }
/* Slightly tighter than the global .btn so all three actions still fit beside
   the identity block on a normal laptop instead of wrapping. */
/* An explicit line-height (not just stretch) because align-items only equalises
   items on the SAME flex line — once these wrap onto separate rows the <a> and
   <button> fall back to their own differing default line boxes again. */
.tenant-hero__actions .btn {
  padding: 12px 20px; font-size: .9rem; line-height: 1.45; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Below the width where the actions still fit next to the name/property block,
   they wrapped onto their own line but stayed content-width and left-aligned —
   leaving a wide band of empty navy on the right and making the whole hero look
   huddled into its left half. Give them a full-width row of their own with a
   divider, and let the buttons share that row evenly, so the wrapped state
   reads as a deliberate action bar rather than an orphaned clump. */
@media (max-width: 1100px) {
  .tenant-hero__actions {
    flex: 1 1 100%; padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  /* Sign Out takes the far edge rather than every button stretching to share
     the row — stretching bloated a secondary action to the same visual weight
     as the primary CTA. This fills the row from both ends instead, and keeps
     the destructive action spatially separated from the two it sits beside. */
  .tenant-hero__actions .tenant-hero__logout { margin-left: auto; }
}
.picker-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tenancy-pick-list { display: grid; gap: 12px; }
.tenancy-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 16px 18px; background: #fff; border: 1px solid var(--color-border);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tenancy-pick:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.tenancy-pick__main h4 { margin: 0 0 4px; font-size: 1.02rem; }
.tenancy-pick__main p { margin: 0 0 8px; color: var(--color-text-muted); font-size: .88rem; }
.tenancy-pick__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tenancy-pick__go { font-size: 1.4rem; color: var(--color-primary); flex: 0 0 auto; }

/* "Applying as existing customer" banner on the apply form */
.apply-returning {
  background: #eef1fb; border: 1px solid var(--color-primary);
  border-left-width: 4px; padding: 14px 16px; margin-bottom: 18px;
  font-size: .9rem; line-height: 1.5; color: var(--color-text);
}
.form-group input.is-locked,
.form-group select.is-locked { background: #f1f3f9; cursor: not-allowed; color: var(--color-text-muted); }
.locked-note { color: var(--color-text-muted); font-size: .8rem; margin-top: 8px; }
/* Witness / prepared-by blocks on the tenancy agreement */
.agreement-witness { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-border); font-size: .88rem; line-height: 1.9; }
.agreement-prepared { margin-top: 22px; font-size: .78rem; color: var(--color-text-muted); text-align: center; }

/* 15% administration-charge notice on the application review step */
.apply-notice {
  background: #fff8e6; border: 1px solid #e5b53a; border-left-width: 4px;
  padding: 14px 16px; margin: 18px 0 4px; font-size: .9rem; line-height: 1.5; color: #6b4e00;
}
.login-card .field-error { display: none; }
.login-links { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 14px; }
.login-links a { font-size: .82rem; color: var(--color-primary); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .steps .step { min-width: 0; font-size: 0; padding: 10px 4px; }
  .steps .step .num { margin: 0; font-size: .75rem; }
  .countdown .unit { min-width: 56px; }
  .tenant-hero { padding: 24px 20px; margin-bottom: 22px; }
  .portal-grid { gap: 18px; }
  .tenant-hero__id { width: 100%; }
  .tenant-hero__actions { width: 100%; }
  .tenant-hero__logout,
  .tenant-hero__switch,
  .tenant-hero__rent { flex: 1 1 auto; justify-content: center; }
}

/* Small phones: stack what's cramped, let what's flexible fill the width. */
@media (max-width: 480px) {
  .tenant-hero__id { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tenant-hero__name { font-size: 1.2rem; }
  .portal-card { padding: 22px 18px; }
  .portal-card h3 { margin-bottom: 16px; padding-bottom: 12px; }
  .countdown { width: 100%; }
  .countdown .unit { flex: 1; }
  .chat-input { flex-direction: column; }
  .chat-input .btn { width: 100%; }
  .msg { max-width: 92%; }
  .req-row { flex-direction: column; }
  .req-row__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .bank-box .row { flex-direction: column; gap: 1px; padding: 6px 0; }
  .pay-methods .btn { width: 100%; }
  .receipt { padding: 26px 18px; }
}

/* Document holders (receipt, tenancy agreement) — only one shown at a time,
   toggled via the --visible class rather than inline styles so the print
   rule below can target "whichever one is open" generically. */
.doc-holder { display: none; }
.doc-holder--visible { display: block; }

/* Print: show only the open document, sized to a single A4 page.
   IMPORTANT: use display:none (not visibility:hidden) to hide everything
   else — visibility:hidden keeps hidden elements' layout space reserved,
   so the tall dashboard behind the document still pushes the print job onto
   a second (blank) page. display:none removes them from flow entirely. */
@page { size: A4; margin: 16mm; }
@media print {
  .nav, .footer, .portal-note, #edsa-fabs { display: none !important; }
  #tenant-root > *:not(.portal-grid) { display: none !important; }
  .portal-grid { display: block !important; }
  .portal-grid > *:not(.doc-holder--visible) { display: none !important; }
  .doc-holder--visible { display: block !important; }
  .receipt {
    width: 100%; max-width: none; margin: 0;
    border: none; box-shadow: none; padding: 0;
  }
  .no-print { display: none !important; }
}

/* Shown when the listed accounts don't add up to the total due — a charge with
   no account behind it. Deliberately loud: it concerns money owed. */
.pay-shortfall {
  margin: 14px 0 0; padding: 12px 14px;
  background: #fff4f4; border: 1px solid #e7b9b9; border-left: 4px solid #b91c1c;
  color: #7f1d1d; font-size: .88rem; line-height: 1.5;
}

/* Heads-up that the rent changes at the next renewal. Informational, not an
   alarm — the current term is unaffected. */
.rent-review-note {
  margin: 12px 0 0; padding: 10px 12px;
  background: #fff8e6; border: 1px solid #f0dca8; border-left: 4px solid #b7791f;
  color: #6b4e12; font-size: .84rem; line-height: 1.5;
}

/* ---------- Upload progress / confirmation ----------
   A file picker gives no feedback of its own, and these uploads are re-encoded
   before being stored, so without this a tenant can't tell a slow upload from
   a failed one. */
.upl { display: block; margin-top: 6px; font-size: .82rem; color: var(--color-text-muted); }
.upl__bar { display: block; height: 5px; background: var(--color-border); overflow: hidden; margin-bottom: 5px; }
.upl__fill { display: block; height: 100%; width: 0; background: var(--color-primary-light); transition: width .12s linear; }
.upl__txt b { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.upl--done { display: flex; align-items: center; gap: 6px; color: #2E7D5B; font-weight: 600; }
.upl__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: #2E7D5B; color: #fff;
  font-size: .68rem; flex-shrink: 0;
}
.upl__size { color: var(--color-text-muted); font-weight: 400; }