/* ==========================================================================
   style.css — the look of the whole platform.
   Every page links to this one file, so a change here changes every page.

   Look and feel: "liquid glass". A soft wash of lime, teal and sand sits
   behind every page, and the cards, bars and buttons on top are made of
   see-through, blurred glass with a shiny top edge. Black and lime are the
   accent colours. The selected menu item sits on a glass capsule that
   slides across when you change page (see setupMenuCapsule in shared.js).

   Sections in this file (search for the title to jump to one):
     1. Colours and sizes
     2. Basics and the coloured background
     3. Glass surfaces
     4. Top bar (logo, menu, account)
     5. Page title area
     6. Buttons
     7. Filters and inputs
     8. Number cards (stats)
     9. Progress bar
    10. Property cards
    11. Badges
    12. Cards, sections and empty messages
    13. List rows (units, leases, inquiries)
    14. Property page
    15. Marketplace (public pages)
    16. Admin page
    17. Pop-up windows (modals)
    18. Forms
    19. Login, register and account pages
    20. Payments and receipts
    21. Phones and small screens
    22. Fallbacks (old browsers, "reduce transparency", "reduce motion")
    23. Printing (receipts)
   ========================================================================== */


/* ---------- 1. Colours and sizes ----------
   Change a colour here and it changes everywhere it is used. */
:root {
  --background: #eef0e7;
  --white: #ffffff;
  --black: #15181d;
  --dark-grey: #3a3f47;
  --grey-text: #5f646c;
  --line: rgba(21, 24, 29, 0.1);

  --lime: #d4ee4f;
  --lime-hover: #c8e33c;
  --lime-soft: rgba(212, 238, 79, 0.3);
  --lime-dark: #52700c;

  --green: #237a34;
  --green-light: rgba(44, 138, 62, 0.14);
  --orange: #a35304;
  --orange-light: rgba(222, 138, 38, 0.18);
  --red: #b0291f;
  --red-light: rgba(206, 60, 48, 0.14);
  --blue: #2e4cad;
  --blue-light: rgba(52, 83, 184, 0.13);

  /* Glass: how see-through each kind of surface is. More text = frostier. */
  --glass-clear: rgba(255, 255, 255, 0.3);     /* number cards, menu track */
  --glass: rgba(255, 255, 255, 0.5);           /* cards, rows, inputs */
  --glass-frosted: rgba(255, 255, 255, 0.82);  /* pop-ups and drop-down menus */
  --glass-dark: rgba(21, 24, 29, 0.84);        /* the black number card */
  --glass-rim: rgba(255, 255, 255, 0.72);      /* the thin bright border */
  --glass-blur: blur(22px) saturate(190%);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 10px 30px rgba(21, 24, 29, 0.08);

  --round-big: 24px;
  --round-medium: 18px;
  --round-small: 12px;
  --shadow-big: 0 24px 60px rgba(21, 24, 29, 0.2);

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/* ---------- 2. Basics and the coloured background ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--black);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
}

/* The soft colour wash behind everything. Glass needs colour behind it,
   otherwise it just looks white. It stays still while the page scrolls. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 30rem at 6% 0%, rgba(212, 238, 79, 0.5), transparent 62%),
    radial-gradient(34rem 28rem at 100% 28%, rgba(143, 208, 204, 0.5), transparent 62%),
    radial-gradient(40rem 30rem at 38% 100%, rgba(245, 214, 140, 0.42), transparent 62%);
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

/* Icons come from the Tabler icon font: <i class="ti ti-home"></i> */
.ti {
  font-size: 18px;
  line-height: 1;
}

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* Add class="hidden" to hide anything; JavaScript removes it to show it. */
.hidden {
  display: none !important;
}

/* For screen readers only (e.g. a label the design doesn't show). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.grey-text {
  color: var(--grey-text);
}

/* The centred column that holds every page. */
.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 28px 56px;
}


/* ---------- 3. Glass surfaces ----------
   Everything listed here is made of glass: blurred, see-through, with a
   bright rim and a shiny top edge. Each part's own section then sets how
   clear or frosted it is. */
.topbar::before,
.stat,
.card,
.property-card,
.list-row,
.activity-entry,
.inquiry,
.tile,
.empty,
.pill,
.chip,
.btn-white,
.round-button,
.role-pill,
.pill-input,
.field input,
.field select,
.field textarea,
.menu,
.modal,
.receipt {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shine), var(--glass-shadow);
}


/* ---------- 4. Top bar (logo, menu, account) ----------
   One floating glass bar that stays at the top while you scroll. The glass
   is drawn on a layer behind the bar (::before) rather than on the bar
   itself — a blurred bar would stop the phone menu inside it from floating
   at the bottom of the screen. */
.topbar {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 10px 12px 10px 16px;
  border-radius: 28px;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  justify-self: start;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2b3038, var(--black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--lime);
  display: grid;
  place-items: center;
}

.brand-accent {
  color: var(--lime-dark);
}

/* The menu: a slightly sunken track with round items on it. */
.nav-pills {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-clear);
  box-shadow: inset 0 1px 3px rgba(21, 24, 29, 0.08);
}

.nav-item {
  position: relative;
  z-index: 1;
  height: 40px;
  min-width: 40px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}

.nav-item .ti {
  font-size: 20px;
}

.nav-item span {
  display: none;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* The selected item shows its name. Without the sliding capsule (e.g. if
   JavaScript hasn't run yet) it gets its own glass background. */
.nav-item.active {
  padding: 0 18px 0 14px;
  background: rgba(255, 255, 255, 0.9);
}

.nav-item.active span {
  display: inline;
}

.nav-pills.has-capsule .nav-item.active {
  background: transparent;
}

/* The glass capsule behind the selected item. JavaScript moves it. */
.nav-capsule {
  position: absolute;
  top: 4px;
  bottom: 4px;
  z-index: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--glass-shine), 0 4px 14px rgba(21, 24, 29, 0.12);
  transition:
    left 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15),
    width 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

.nav-capsule.no-slide {
  transition: none;
}

/* Menu items for screens that are not built yet. */
.nav-item.soon {
  opacity: 0.4;
  cursor: not-allowed;
}

.topbar-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.role-pill {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--glass-clear);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-grey);
}

.role-pill .ti {
  font-size: 15px;
  color: var(--lime-dark);
}

.account {
  position: relative;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #e2f76e, var(--lime));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px rgba(120, 150, 20, 0.25);
  color: var(--black);
  font: 600 15px var(--font);
  cursor: pointer;
}

/* A profile picture inside a round avatar (the top bar, My account). */
.avatar.has-photo,
.profile-picture.has-photo {
  padding: 0;
  overflow: hidden;
}

.avatar img,
.profile-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The big one on My account. */
.profile-picture {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #e2f76e, var(--lime));
  box-shadow: var(--glass-shadow);
  display: grid;
  place-items: center;
  font: 600 36px var(--font);
  color: var(--black);
}

.profile-picture-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* The drop-down account menu. */
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 250px;
  background: var(--glass-frosted);
  border-radius: var(--round-medium);
  padding: 8px;
  z-index: 46;   /* above the phone's floating bottom menu (45) */
}

.menu-name {
  padding: 10px 12px 0;
  font-weight: 600;
}

.menu-email {
  padding: 0 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--grey-text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--round-small);
  border: none;
  background: none;
  font: 500 14px var(--font);
  color: var(--black);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.menu-item:hover {
  background: rgba(21, 24, 29, 0.05);
}


/* ---------- 5. Page title area ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 4px 0 22px;
}

.page-title {
  font-size: 30px;
  line-height: 1.15;
}

/* The small line under the title with a lime sparkle, e.g. "3 vacant units". */
.page-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--grey-text);
  font-size: 14px;
}

.note-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--lime-dark);
  display: grid;
  place-items: center;
}

.note-dot .ti {
  font-size: 14px;
}

.page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--grey-text);
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--black);
}

.round-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--glass);
  display: grid;
  place-items: center;
  color: var(--black);
}


/* ---------- 6. Buttons ----------
   btn-dark = black, btn-lime = lime green, btn-white = clear glass.
   The dark and lime buttons have a light top edge so they look glossy. */
.btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 14px var(--font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.15s;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-dark {
  background: linear-gradient(180deg, #30353e, var(--black));
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px rgba(21, 24, 29, 0.18);
}

.btn-dark:hover {
  filter: brightness(1.15);
}

.btn-lime {
  background: linear-gradient(180deg, #e3f774, var(--lime));
  color: var(--black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 6px 16px rgba(140, 170, 20, 0.25);
}

.btn-lime:hover {
  filter: brightness(0.97);
}

.btn-white {
  background: var(--glass);
  color: var(--black);
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.75);
}

.btn-small {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-full {
  width: 100%;
}


/* ---------- 7. Filters and inputs ---------- */
.filters {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) auto minmax(120px, 0.7fr);
  gap: 14px 16px;
  align-items: end;
  margin-bottom: 24px;
}

.filter-label {
  display: block;
  font-size: 12.5px;
  color: var(--grey-text);
  margin: 0 0 6px 4px;
}

.pill-input {
  height: 42px;
  width: 100%;
  border-radius: 999px;
  background: var(--glass);
  padding: 0 16px;
  font: 400 14px var(--font);
  color: var(--black);
}

.pill-input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px var(--lime-soft);
}

.search-box {
  position: relative;
}

/* z-index keeps the icon above the glass input (glass is drawn on its own layer). */
.search-box .ti {
  position: absolute;
  z-index: 1;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey-text);
  font-size: 17px;
  pointer-events: none;
}

.search-box .pill-input {
  padding-left: 40px;
}

.chips {
  display: flex;
  gap: 6px;
}

.chip {
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--glass);
  font: 500 13.5px var(--font);
  color: var(--black);
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* The chosen chip turns glossy black. */
.chip.active {
  background: linear-gradient(180deg, #30353e, var(--black));
  border-color: var(--black);
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.chips-small .chip {
  height: 34px;
  font-size: 13px;
}


/* ---------- 8. Number cards (stats) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat {
  background: var(--glass-clear);
  border-radius: var(--round-medium);
  padding: 18px 20px;
}

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--grey-text);
  font-size: 13.5px;
}

.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--glass-shine);
  display: grid;
  place-items: center;
  color: var(--black);
}

.stat-number {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 12px;
}

.stat-number small {
  font-size: 15px;
  font-weight: 500;
  color: var(--grey-text);
  letter-spacing: 0;
}

.stat-note {
  font-size: 12.5px;
  color: var(--grey-text);
  margin-top: 6px;
}

/* The dark glass number card with the lime number. */
.stat-black {
  background: var(--glass-dark);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 34px rgba(21, 24, 29, 0.22);
  color: var(--white);
}

.stat-black .stat-top,
.stat-black .stat-note,
.stat-black .stat-number small {
  color: rgba(255, 255, 255, 0.65);
}

.stat-black .stat-icon {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: var(--lime);
}

.stat-black .stat-number {
  color: var(--lime);
}

.stat-black .progress {
  background: rgba(255, 255, 255, 0.14);
  margin-top: 12px;
}

.stat-black .progress span {
  background: var(--lime);
}

.stat-black .progress span::after {
  display: none;
}


/* ---------- 9. Progress bar ----------
   <div class="progress"><span style="width: 75%"></span></div> */
.progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.1);
}

.progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: var(--dark-grey);
}

/* The round knob at the end of the bar. */
.progress span::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 999px;
  background: var(--black);
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(21, 24, 29, 0.25);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--grey-text);
}

.progress-labels strong {
  color: var(--black);
  font-weight: 500;
}


/* ---------- 10. Property cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.property-card {
  background: var(--glass);
  border-radius: var(--round-big);
  padding: 10px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s, transform 0.25s;
}

a.property-card:hover {
  box-shadow: var(--glass-shine), 0 18px 40px rgba(21, 24, 29, 0.14);
  transform: translateY(-3px);
}

/* The picture area at the top of a card. */
.property-picture {
  position: relative;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #edf4d4 0%, #f5f8ea 100%);
}

.property-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.picture-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--glass-shine);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

/* A lime tag for listings that are live on the marketplace. */
.picture-tag.tag-live {
  background: rgba(212, 238, 79, 0.9);
}

/* Real photos fill the picture area from the middle (the drawings sit on
   the ground line, so they're lined up at the bottom). */
.property-picture img.is-photo {
  object-position: center;
}

/* "12 photos" in the corner of a picture. */
.photo-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.62);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

.photo-count .ti {
  font-size: 14px;
}

/* The previous / next arrows on a listing's big photo. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--glass-shine), 0 4px 14px rgba(21, 24, 29, 0.18);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.gallery-arrow.left {
  left: 10px;
}

.gallery-arrow.right {
  right: 10px;
}

/* The row of small photos under a listing's big photo. */
.gallery-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 2px 2px;
}

.gallery-strip button {
  flex: 0 0 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.gallery-strip button.active {
  border-color: var(--black);
}

.gallery-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photos being added in a form or on the property page, each with an "x". */
.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}

.photo-thumbs.big .photo-thumb {
  width: 150px;
  height: 110px;
}

.photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.72);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.photo-remove .ti {
  font-size: 14px;
}

/* "Add photos": a label that opens the file picker. */
.field label.photo-add,
label.photo-add {
  display: inline-flex;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--black);
  cursor: pointer;
}

.section-head label.photo-add {
  margin: 0;
  font-size: 14px;
}

label.photo-add.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* A group of small buttons. They wrap onto a new line when space runs out. */
.card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn.icon-only {
  width: 34px;
  padding: 0;
}

.property-body {
  padding: 14px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.property-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.property-name {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Listing titles are longer than property names, so they may wrap. */
.property-name.can-wrap {
  white-space: normal;
}

.property-rent {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.property-rent small {
  font-size: 12px;
  font-weight: 400;
  color: var(--grey-text);
}

.property-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--grey-text);
  font-size: 13px;
}

.property-location .ti {
  font-size: 16px;
}

.property-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--grey-text);
}

.property-counts {
  display: flex;
  gap: 12px;
}

.property-counts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.property-counts .ti {
  font-size: 16px;
}

/* Shimmering glass boxes shown while the cards are loading. */
.loading-card {
  border-radius: var(--round-big);
  min-height: 330px;
  border: 1px solid var(--glass-rim);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.25) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}


/* ---------- 11. Badges ----------
   Small coloured labels: badge-green, badge-orange, badge-red, badge-blue,
   badge-dark, badge-lime */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.6);
  color: var(--dark-grey);
  border: 1px solid var(--glass-rim);
  white-space: nowrap;
}

.badge-green {
  background: var(--green-light);
  color: var(--green);
  border-color: transparent;
}

.badge-orange {
  background: var(--orange-light);
  color: var(--orange);
  border-color: transparent;
}

.badge-red {
  background: var(--red-light);
  color: var(--red);
  border-color: transparent;
}

.badge-blue {
  background: var(--blue-light);
  color: var(--blue);
  border-color: transparent;
}

.badge-dark {
  background: var(--black);
  color: var(--lime);
  border-color: var(--black);
}

.badge-lime {
  background: var(--lime);
  color: var(--black);
  border-color: transparent;
}

.badge .ti {
  font-size: 13px;
}

/* An input and a button side by side, e.g. "Add a super admin". */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.inline-form .pill-input {
  flex: 1;
  min-width: 220px;
}


/* ---------- 12. Cards, sections and empty messages ---------- */
.card {
  background: var(--glass);
  border-radius: var(--round-big);
  padding: 22px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 30px 0 14px;
}

.section-title {
  font-size: 18px;
}

.section-note {
  color: var(--grey-text);
  font-size: 13.5px;
  margin-top: 2px;
}

/* Shown when a list has nothing in it yet. */
.empty {
  background: var(--glass-clear);
  border-style: dashed;
  border-color: rgba(21, 24, 29, 0.16);
  border-radius: var(--round-big);
  padding: 36px 24px;
  text-align: center;
  color: var(--grey-text);
}

.empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--lime-dark);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.empty-icon .ti {
  font-size: 22px;
}

.empty h3 {
  color: var(--black);
  font-size: 16px;
  margin-bottom: 4px;
}

.empty .btn {
  margin-top: 16px;
}

/* The "activate your account" card on a new landlord's dashboard. */
.activation-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

.activation-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.activation-title {
  font-size: 22px;
  margin: 10px 0 4px;
}

/* The reference number, big enough to read out over the phone. */
.reference-box {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--round-medium);
  background: var(--glass-dark);
  color: var(--white);
}

.reference-box span {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}

.reference-box strong {
  font-size: 26px;
  letter-spacing: 0.02em;
}

.setup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setup-steps li {
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--glass);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
}

.setup-steps .done .ti {
  color: var(--green);
}

.setup-steps .current {
  background: var(--lime);
}


/* ---------- 13. List rows (units, leases, inquiries) ---------- */
.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--glass);
  border-radius: var(--round-medium);
  padding: 12px 16px 12px 12px;
}

.row-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--lime-soft);
  color: var(--lime-dark);
  display: grid;
  place-items: center;
}

.row-icon .ti {
  font-size: 22px;
}

.row-title {
  font-size: 15px;
  font-weight: 600;
}

.row-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 2px;
  color: var(--grey-text);
  font-size: 13px;
}

.row-details span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.row-details .ti {
  font-size: 15px;
}

/* The right-hand end of a list row: badges on top, a button below. */
.row-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Inquiries: one card per viewing request. */
.inquiry {
  background: var(--glass);
  border-radius: var(--round-medium);
  padding: 14px 16px;
}

.inquiry-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.inquiry .row-icon {
  font-size: 17px;
  font-weight: 600;
}

.inquiry-message {
  margin: 12px 0 0 58px;
  padding: 10px 14px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.55);
  color: var(--dark-grey);
}

.inquiry-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 0 58px;
}

.inquiry-buttons .card-buttons {
  flex-wrap: wrap;
}

/* Complaints use the same card: "Accepted by Joe (caretaker)..." lines. */
.complaint-progress {
  margin: 8px 0 0 58px;
}

.complaint-progress:empty {
  display: none;
}

/* Complaint cases: the number above the title, e.g. "INC-2026-0001". */
.case-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--grey-text);
}

/* The six steps as dots on a line: done ones filled, the current one
   ringed and named. */
.case-steps {
  list-style: none;
  display: flex;
  margin: 4px 0 8px;
  padding: 0;
  max-width: 460px;
}

.case-steps li {
  position: relative;
  flex: 1;
  height: 22px;
}

.case-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: rgba(21, 24, 29, 0.14);
}

.case-steps li:first-child::before {
  left: 50%;
}

.case-steps li:last-child::before {
  right: 50%;
}

.case-steps li.done::before,
.case-steps li.current::before {
  background: var(--black);
}

.case-steps li.current::before {
  right: 50%;
}

.case-steps li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(21, 24, 29, 0.22);
  box-sizing: border-box;
}

.case-steps li.done::after {
  background: var(--black);
  border-color: var(--black);
}

.case-steps li.current::after {
  background: var(--lime);
  border-color: var(--black);
}

/* Only the current step is named, under its dot. */
.case-steps li span {
  display: none;
}

.case-steps li.current span {
  display: block;
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.case-steps li.current:first-child span {
  left: 0;
  transform: none;
}

.case-steps li.current:last-child span {
  left: auto;
  right: 0;
  transform: none;
}

.case-history {
  margin-top: 6px;
  font-size: 13px;
}

.case-history summary {
  cursor: pointer;
  color: var(--grey-text);
  width: fit-content;
}

.case-history ol {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-history li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.case-history li > .ti {
  margin-top: 2px;
  color: var(--grey-text);
}

.case-note {
  color: var(--dark-grey);
  font-style: italic;
}

/* ---------- Move-in / move-out inspections (moveout/inspection.html) ---------- */
.inspection-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px;
  margin-top: 18px;
}

.inspection-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspection-area-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inspection-area-head .section-title {
  margin: 0;
  flex: 1;
}

/* "At move-in: Good — …" on a move-out inspection. */
.inspection-baseline {
  font-size: 13px;
  color: var(--dark-grey);
  padding: 8px 12px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.inspection-baseline .photo-thumbs {
  width: 100%;
}

.inspection-baseline .photo-thumb {
  width: 56px;
  height: 56px;
}

/* Good / Fair / Damaged as three pill buttons. */
.condition-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.condition-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.condition-choice span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-rim);
  font-size: 14px;
  cursor: pointer;
}

.condition-choice input:focus-visible + span {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.condition-good input:checked + span {
  background: var(--green-light);
  color: var(--green);
  border-color: var(--green);
  font-weight: 600;
}

.condition-fair input:checked + span {
  background: var(--orange-light);
  color: var(--orange);
  border-color: var(--orange);
  font-weight: 600;
}

.condition-damaged input:checked + span {
  background: var(--red-light);
  color: var(--red);
  border-color: var(--red);
  font-weight: 600;
}

.inspection-note {
  width: 100%;
}

.inspection-area label.photo-add {
  align-self: flex-start;
  margin: 0;
}

.inspection-area > .photo-thumbs:empty {
  display: none;
}

.inspection-note-text {
  margin: 0;
  color: var(--dark-grey);
  font-style: italic;
}

/* ---------- Plans (landlord/plan.html, admin/plans.html) ---------- */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-card.current {
  outline: 2px solid var(--lime);
}

.plan-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.plan-card-top .section-title {
  margin: 0;
}

.plan-price {
  font-size: 22px;
  font-weight: 700;
}

.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.plan-features .ti-check {
  color: var(--green);
}

.plan-features .not-included {
  color: var(--grey-text);
  text-decoration: line-through;
}

.plan-features .not-included .ti {
  color: var(--red);
}

.plan-card > .btn {
  align-self: flex-start;
  margin-top: auto;
}

.plan-switches .check-line {
  margin: 6px 0 0;
}

/* Numbered setup steps (admin → Plans → M-Pesa). */
.setup-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

/* Admins page: the owner's switches for what each admin can do. */
.admin-powers {
  margin-top: 8px;
  font-size: 14px;
}

.admin-powers summary {
  cursor: pointer;
  color: var(--grey-text);
  width: fit-content;
}

.admin-powers .check-line {
  margin: 8px 0 0;
}

/* On a lease: "Move-in check · Move-out check · Deposit". */
.move-out-steps {
  margin-top: 4px;
}

.move-out-steps a {
  color: var(--black);
  font-weight: 500;
}

/* The deposit statement: one row per deduction, then the sum. */
.deduction-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deduction-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 8px;
  align-items: center;
}

.deposit-sum {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.55);
}

.deposit-sum > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.deposit-sum-total {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* The tenant's "Is it sorted?" on a resolved case. */
.case-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* The small "Priority" list on a case, for the people handling it. */
.case-priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 4px 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-rim);
  font-size: 13px;
}

.case-priority select {
  border: none;
  background: transparent;
  font: inherit;
  padding: 0 4px;
  height: 30px;
  cursor: pointer;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  height: 38px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--glass);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.pill .ti {
  color: var(--lime-dark);
}


/* ---------- 14. Property page ---------- */
.property-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
}

.property-hero .property-card {
  height: 100%;
}

.property-hero .property-picture {
  height: 100%;
  min-height: 250px;
}

.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}


/* ---------- 15. Marketplace (public pages) ---------- */

/* Visitors' top bar: just the logo and the log-in buttons. */
.topbar-simple {
  grid-template-columns: 1fr auto;
}

.see-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--black);
  font-weight: 500;
}

/* One home: picture and description on the left, price and form on the right. */
.listing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}

.listing-picture {
  height: 360px;
}

.tenant-picture {
  height: 220px;
}

/* A Google map shown inside a rounded box. */
.map-box {
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.4);
}

.map-box iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-box.small {
  height: 200px;
  margin-top: 14px;
}

.description-text {
  margin-top: 10px;
  color: var(--dark-grey);
  line-height: 1.6;
  white-space: pre-line;
}

.listing-side {
  position: sticky;
  top: 96px;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-big {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.fact-list {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.fact-list div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.fact-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.success-box {
  text-align: center;
  padding: 24px 8px 8px;
}

.success-box h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.success-box p {
  color: var(--grey-text);
}


/* ---------- 16. Admin page ---------- */
.status-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(21, 24, 29, 0.1);
}

.status-bar span {
  height: 100%;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--grey-text);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend strong {
  color: var(--black);
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tile {
  background: var(--glass);
  border-radius: var(--round-medium);
  padding: 14px 16px;
}

.tile-number {
  font-size: 22px;
  font-weight: 600;
}

.tile-label {
  font-size: 13px;
  color: var(--grey-text);
}

.two-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

/* ---- Building forum (forum/index.html) ---- */
.forum-page {
  max-width: 860px;
}

/* The rules, always on top. */
.forum-rules {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--round-medium);
  background: var(--lime-soft);
  color: var(--dark-grey);
  font-size: 13.5px;
  line-height: 1.5;
}

.forum-rules .ti {
  font-size: 22px;
  color: var(--lime-dark);
  flex-shrink: 0;
}

.forum-rules a {
  color: var(--black);
  font-weight: 600;
}

.forum-composer {
  margin-top: 18px;
  padding: 16px;
}

.forum-composer textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.7);
  font: 15px/1.5 var(--font);
  resize: vertical;
}

.forum-composer textarea:focus,
.reply-form textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px var(--lime-soft);
}

.composer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.composer-bottom .check-line {
  margin: 0;
}

.composer-bottom .btn {
  margin-left: auto;
}

.forum-filter {
  flex-wrap: wrap;
  margin: 20px 0 12px;
}

.forum-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forum-post {
  padding: 16px;
  border-radius: var(--round-medium);
  background: var(--glass);
  border: 1px solid var(--glass-rim);
}

.forum-post.is-pinned {
  border-color: var(--lime-dark);
  box-shadow: 0 0 0 1px var(--lime-dark) inset;
}

.forum-post.is-hidden,
.forum-reply.is-hidden {
  opacity: 0.65;
}

.forum-post-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.forum-post-top .row-icon {
  font-weight: 600;
}

.forum-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
}

.forum-body {
  margin: 10px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* Reply · Report · Pin · Hide · Delete */
.forum-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
}

.forum-actions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: 500 13px var(--font);
  color: var(--grey-text);
  cursor: pointer;
}

.forum-actions button:hover {
  color: var(--black);
}

.forum-replies {
  margin: 12px 0 0 22px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.forum-reply .forum-author {
  font-size: 13.5px;
}

.forum-reply .forum-body {
  margin-top: 4px;
}

.reply-form {
  margin: 12px 0 0 22px;
}

.reply-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--round-small);
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.75);
  font: 14px/1.5 var(--font);
  resize: vertical;
}

.reply-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Activity log: filters, then entries grouped by day. */
.activity-page {
  max-width: 980px;
}

.activity-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.activity-kinds {
  flex-wrap: wrap;
}

.activity-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-tools .pill-input {
  height: 34px;
}

.activity-tools select.pill-input {
  width: auto;
  max-width: 220px;
}

.activity-tools .search-box {
  width: 260px;
}

.activity-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.activity-active-filters .badge {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  cursor: pointer;
}

.activity-day {
  margin: 22px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-text);
}

.activity-day:first-child {
  margin-top: 6px;
}

.activity-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  background: var(--glass);
  border-radius: var(--round-medium);
  padding: 12px 16px 12px 12px;
  margin-bottom: 8px;
}

.activity-icon.green {
  background: var(--green-light);
  color: var(--green);
}

.activity-icon.red {
  background: var(--red-light);
  color: var(--red);
}

.activity-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.activity-time {
  font-size: 13px;
  white-space: nowrap;
}

.activity-who {
  margin-top: 4px;
  font-size: 13px;
  color: var(--grey-text);
}

.activity-who .badge {
  height: 20px;
  padding: 0 8px;
  font-size: 11.5px;
  margin-left: 2px;
}

/* A name that filters the log when clicked: looks like text, underlined. */
.link-button {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--black);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(21, 24, 29, 0.25);
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover {
  text-decoration-color: var(--black);
}

.activity-reason {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
  font-size: 14px;
}

.activity-reason .ti {
  margin-top: 2px;
  color: var(--grey-text);
}

.activity-details {
  margin-top: 6px;
  font-size: 13px;
}

.activity-details summary {
  cursor: pointer;
  color: var(--grey-text);
  width: fit-content;
}

.activity-changes {
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 13px;
}

.activity-changes th,
.activity-changes td {
  padding: 3px 12px 3px 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.activity-changes th {
  font-weight: 500;
  color: var(--grey-text);
  white-space: nowrap;
}

.activity-arrow {
  color: var(--grey-text);
}

.activity-more {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* ---------- Short stays ----------
   "Homes to rent | Short stays" switch, the stays pages, the calendar,
   "My stays" and the landlord's Stays page. */
.market-switch {
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

.market-switch .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.stay-filters {
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(90px, 0.6fr) minmax(90px, 0.6fr) minmax(120px, 0.8fr);
}

.rates-credit {
  margin: -14px 0 18px 4px;
}

.rates-credit a {
  color: inherit;
}

.listing-side .rates-credit {
  margin: 16px 0 0;
}

.currency-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  font-size: 13px;
}

.currency-line .pill-input {
  width: auto;
  height: 34px;
}

.stay-subtitle {
  font-size: 15px;
  margin: 18px 0 4px;
}

.price-breakdown {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.price-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}

.price-breakdown .price-total {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 600;
}

.login-needed {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: var(--lime-soft);
  font-size: 14px;
}

.login-needed p {
  margin-bottom: 10px;
}

/* The month calendar (a stay's free nights; the landlord's bookings). */
.cal-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 10px;
}

.cal-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-head {
  font-size: 11.5px;
  color: var(--grey-text);
  text-align: center;
}

.cal-day {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.75);
  font: 500 13px var(--font);
  color: var(--black);
  cursor: pointer;
}

.cal-day:hover {
  border-color: var(--black);
}

.cal-day.is-past {
  opacity: 0.35;
  cursor: default;
}

.cal-day.is-past:hover {
  border-color: transparent;
}

.cal-day.is-taken {
  background: repeating-linear-gradient(135deg, #e6e2da, #e6e2da 4px, #f2efe9 4px, #f2efe9 8px);
  color: var(--grey-text);
}

.cal-day.is-chosen {
  background: var(--lime);
}

.cal-day.is-start,
.cal-day.is-end {
  background: var(--black);
  color: var(--lime);
}

.cal-day.is-closed {
  background: var(--blue-light);
  color: var(--blue);
}

.cal-day.is-request {
  background: var(--orange-light);
  color: var(--orange);
}

.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--grey-text);
}

.cal-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.cal-dot-free {
  background: var(--white);
  border: 1px solid var(--line);
}

.cal-dot-taken {
  background: #e6e2da;
}

.cal-dot-chosen {
  background: var(--lime);
}

.cal-dot-closed {
  background: var(--blue-light);
}

.cal-dot-request {
  background: var(--orange-light);
}

/* "My stays": one card per booking, with the step the guest is at. */
.guest-page {
  max-width: 880px;
}

.stay-list {
  display: grid;
  gap: 16px;
}

.stay-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.stay-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--lime-soft);
}

.stay-card-title .row-title {
  color: var(--black);
  text-decoration: none;
}

.stay-facts {
  margin-top: 12px;
}

.stay-step {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

/* A line with an icon on the left; the words wrap under each other. */
.stay-step > p {
  position: relative;
  padding-left: 24px;
}

.stay-step > p > .ti:first-child {
  position: absolute;
  left: 0;
  top: 2px;
}

.stay-step-action {
  background: var(--orange-light);
}

.stay-step-good {
  background: var(--green-light);
}

.stay-note {
  font-size: 14px;
}

.stay-host {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.stay-instructions {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
}

.stay-instructions p {
  margin-top: 4px;
  white-space: pre-line;
}

.stay-payments {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

/* The landlord's Stays page. */
.id-photo-box {
  margin-top: 14px;
}

.id-photo-box img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: 14px;
  background: var(--white);
}

.block-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 14px;
  align-items: end;
}

.block-form .btn {
  margin-top: 16px;
}

.stay-past {
  margin-top: 24px;
}

.stay-past summary {
  cursor: pointer;
  font-weight: 600;
}

.stay-proof-line.is-disabled {
  opacity: 0.5;
}

/* Reviews: "★ 4.3", the stars to give, each part's average, the list. */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}

.rating .ti {
  color: #e0a800;
  font-size: 15px;
}

.star-rows {
  display: grid;
  gap: 8px;
}

.star-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.star {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  color: #cfcac0;
  font-size: 18px;
  cursor: pointer;
}

.star.is-on {
  color: #e0a800;
}

.star:hover {
  background: var(--white);
}

.review-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 22px;
  margin: 6px 0 16px;
}

.review-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 30px;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.review-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.review-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--black);
}

.review-list {
  display: grid;
  gap: 14px;
}

.review {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.review-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 4px;
}

.stay-review {
  display: grid;
  gap: 6px;
}

.stay-reply {
  padding: 8px 12px;
  border-left: 3px solid var(--lime);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
}

.list-row.is-muted {
  opacity: 0.65;
}

/* Overview: "Long-term rentals" / "Short stays" tabs — never mixed. */
.view-tabs {
  flex-wrap: wrap;
  margin: 26px 0 16px;
}

.view-tabs .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  font-size: 14.5px;
}

/* "Rent this month": label on the left, amount on the right. */
.money-lines {
  margin-top: 14px;
}

.money-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.money-line span {
  color: var(--grey-text);
}

.money-rate {
  padding: 10px 0 8px;
  font-size: 12.5px;
  color: var(--grey-text);
}

.money-rate .progress {
  margin-bottom: 6px;
}

/* Six months of billed and collected bars. */
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-head .legend {
  margin-top: 4px;
}

.key-billed,
.bar-billed {
  background: rgba(21, 24, 29, 0.18);
}

.key-collected,
.bar-collected {
  background: var(--lime);
}

.month-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.month-bars {
  height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.month-bars span {
  width: 36%;
  max-width: 26px;
  min-height: 2px;
  border-radius: 6px 6px 0 0;
}

.month-label {
  margin-top: 6px;
  text-align: center;
  font-size: 12.5px;
  color: var(--grey-text);
}

/* "Where the listings are" / "By size": a short table with bars. */
.rank-list {
  margin-top: 12px;
}

.rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(40px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.rank-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.08);
  overflow: hidden;
}

.rank-bar span {
  display: block;
  height: 100%;
  background: var(--lime-dark);
  border-radius: 999px;
}

.rank-count {
  color: var(--grey-text);
  white-space: nowrap;
}

/* A small drop-down inside a row, e.g. how a unit is rented. */
.mode-select {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.7);
  font: 500 12.5px var(--font);
  color: var(--dark-grey);
  cursor: pointer;
}

/* "Block Tom?": what will happen, one line each. */
.consequence-list {
  margin: 10px 0 4px;
  padding-left: 20px;
  color: var(--dark-grey);
  font-size: 14px;
  line-height: 1.5;
}

.consequence-list li {
  margin: 4px 0;
}


/* ---------- 17. Pop-up windows (modals) ----------
   A modal is hidden until JavaScript calls openModal("its-id"). The page
   behind it goes slightly dark and blurry. */
.modal-background {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(21, 24, 29, 0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--glass-frosted);
  border-radius: 28px;
  padding: 26px;
  box-shadow: var(--glass-shine), var(--shadow-big);
}

.modal h2 {
  font-size: 20px;
}

.modal-note {
  color: var(--grey-text);
  font-size: 13.5px;
  margin-top: 4px;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}


/* ---------- 18. Forms ---------- */
.field {
  margin-top: 16px;
}

.field label {
  display: block;
  margin: 0 0 6px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-grey);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  padding: 0 16px;
  font: 400 14px var(--font);
  color: var(--black);
}

.field textarea {
  height: auto;
  min-height: 96px;
  border-radius: 16px;
  padding: 12px 16px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px var(--lime-soft);
}

/* Drop-down lists get a small arrow on the right. */
select.pill-input,
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2315181d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-hint {
  font-size: 12.5px;
  color: var(--grey-text);
  margin: 6px 0 0 4px;
}

/* A tick box with its words beside it. */
.check-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0 4px;
  font-size: 14px;
  cursor: pointer;
}

.check-line input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--black);
}

/* Tick boxes and choices inside a form field (e.g. "How guests pay"):
   not the round text-box look the field gives its inputs. */
.field .check-line {
  display: flex;
  margin: 8px 0 0 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
}

.field .check-line input {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.error-message,
.success-message {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--round-small);
  font-size: 13.5px;
}

.error-message {
  background: var(--red-light);
  color: var(--red);
}

.success-message {
  background: var(--green-light);
  color: var(--green);
}


/* ---------- 19. Login, register and account pages ---------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 16px;
  padding: 16px;
}

.auth-left {
  display: flex;
  flex-direction: column;
  padding: 18px 28px;
}

.auth-form-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

.auth-form {
  width: 100%;
  max-width: 400px;
}

.auth-form .page-title {
  font-size: 32px;
}

.auth-form .intro {
  color: var(--grey-text);
  margin: 8px 0;
}

.auth-form .btn {
  height: 46px;
  margin-top: 22px;
}

.auth-switch {
  margin-top: 18px;
  text-align: center;
  color: var(--grey-text);
}

.auth-switch a {
  color: var(--black);
  font-weight: 600;
}

/* A label with a small link at the other end, e.g. "Password · Forgot password?" */
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.label-row .small-link {
  margin-right: 4px;
}

.small-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
}

/* "I agree to the Terms..." on the register page. */
.agree-line {
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--dark-grey);
}

.agree-line input {
  margin-top: 2px;
  flex-shrink: 0;
}

.agree-line a {
  color: var(--black);
  font-weight: 600;
}

/* The legal links at the bottom of every page (added by shared.js). */
.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: var(--grey-text);
}

.site-footer a {
  color: var(--grey-text);
}

.auth-left .site-footer {
  margin-top: 12px;
  border-top: 0;
}

/* The legal pages (legal/index.html) and their editor (admin/legal.html). */
.legal-page {
  max-width: 860px;
}

.legal-tabs {
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.legal-tabs .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.legal-card {
  padding: 28px;
}

.legal-text {
  margin-top: 18px;
  line-height: 1.65;
  color: var(--dark-grey);
}

.legal-text h2 {
  margin: 26px 0 8px;
  font-size: 19px;
  color: var(--black);
}

.legal-text h3 {
  margin: 20px 0 6px;
  font-size: 16px;
  color: var(--black);
}

.legal-text p {
  margin: 0 0 12px;
}

.legal-text ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal-text li {
  margin: 4px 0;
}

.legal-text strong {
  color: var(--black);
}

.legal-history {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--grey-text);
}

.legal-history summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--dark-grey);
}

.legal-history ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.legal-history li {
  margin: 4px 0;
}

.legal-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legal-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.legal-editor {
  margin-top: 16px;
}

.legal-editor textarea {
  min-height: 360px;
  font-size: 14px;
  line-height: 1.55;
}

.legal-preview {
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--round-medium);
  border: 1px dashed rgba(21, 24, 29, 0.25);
  background: rgba(255, 255, 255, 0.6);
}

/* A wider pop-up, for reading a whole page of text. */
.modal.modal-wide {
  max-width: 760px;
}

/* "My account" (auth/account.html): one narrow column of cards. */
.account-page {
  max-width: 760px;
}

.account-page .card + .card {
  margin-top: 18px;
}

.account-page .card form {
  margin-top: 4px;
}

/* The dark glass panel on the right with the building picture. */
.auth-right {
  border-radius: 30px;
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 60px rgba(21, 24, 29, 0.22);
  color: var(--white);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.auth-right h2 {
  font-size: 40px;
  line-height: 1.08;
  max-width: 13ch;
}

.auth-right h2 span {
  color: var(--lime);
}

.auth-right p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 40ch;
  font-size: 15px;
  margin-top: 14px;
}

.auth-picture {
  border-radius: 20px;
  overflow: hidden;
  height: 260px;
  background: linear-gradient(180deg, #edf4d4 0%, #f5f8ea 100%);
}

.auth-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-features span {
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.auth-features .ti {
  font-size: 16px;
  color: var(--lime);
}


/* The installed app's first screen (auth/start.html) and the "Install app"
   button the browser offers in the top bar. */
.start-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
}

.start-screen .brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}

.start-screen .brand-mark .ti {
  font-size: 32px;
}


/* ---------- 20. Payments and receipts ---------- */

/* The search box and chips above a list (bills; the admin's landlords and listings). */
.bill-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bill-tools .search-box {
  width: 240px;
}

.bill-tools .pill-input {
  height: 34px;
}

/* Top of a row's right-hand end: the amount owed, then the badge. */
.row-end-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.row-amount {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.red-text {
  color: var(--red);
}

/* Small receipt links under a bill, one per payment. */
.receipt-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.receipt-link {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-rim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.receipt-link:hover {
  background: var(--white);
}

.receipt-link .ti {
  font-size: 14px;
  color: var(--lime-dark);
}

/* The list of bills about to be made, inside "Bill monthly rent". */
.preview-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-rim);
  font-size: 13.5px;
  max-height: 240px;
  overflow-y: auto;
}

.preview-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.preview-line:last-child {
  border-bottom: 0;
}

/* An M-Pesa code shown big, so it's easy to compare with your messages. */
.code-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: var(--glass-dark);
  color: var(--lime);
  font: 600 24px ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.12em;
  text-align: center;
}

.code-input {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Choosing a picture: a plain file box, and the picture shown underneath. */
.field input.file-input {
  height: auto;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
}

.screenshot-preview {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}

/* Tenant portal: what they owe, and how to pay. */
.owed-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}

/* "How to pay": the landlord's Paybill / Till / bank, each in its own box. */
.pay-how {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: var(--lime-soft);
  color: var(--dark-grey);
}

.pay-how-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pay-how-title .ti {
  font-size: 20px;
  color: var(--lime-dark);
}

.pay-how-title strong {
  color: var(--black);
  font-weight: 600;
}

.pay-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pay-option {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--glass-rim);
}

.pay-option-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
}

.pay-option-title .ti {
  font-size: 17px;
  color: var(--lime-dark);
}

.pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}

.pay-row strong {
  color: var(--black);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.copy-button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim);
  background: var(--white);
  color: var(--dark-grey);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.copy-button:hover {
  color: var(--black);
}

.copy-button .ti {
  font-size: 15px;
}

.pay-notes {
  margin-top: 10px;
  white-space: pre-line;
}

.pay-small {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--grey-text);
}

.green-text {
  color: var(--green);
}

/* The landlord's payment details form is split into groups. */
.form-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.form-group-title .ti {
  color: var(--lime-dark);
}

/* A row that asks the landlord to do something (e.g. add payment details). */
.warning-row {
  margin-bottom: 18px;
}

.warning-row .row-icon {
  background: var(--orange-light);
  color: var(--orange);
}

.orange-text {
  color: var(--orange);
}

/* Under a line of a preview: e.g. "Rent 20,000 · Garbage collection 300". */
.preview-sub {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  color: var(--grey-text);
  font-size: 12.5px;
}

.preview-line:has(+ .preview-sub) {
  padding-bottom: 2px;
  border-bottom: 0;
}

.preview-total {
  font-weight: 600;
}

/* Tick boxes for choosing bills: one row per bill, amount on the right. */
.bill-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* (".bill-checks .bill-check" so it beats the form's ".field label".) */
.bill-checks .bill-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-rim);
  cursor: pointer;
  color: var(--black);
  font-size: 14px;
  font-weight: 400;
}

.bill-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--black);
}

.bill-check:has(input:checked) {
  border-color: var(--black);
  background: rgba(255, 255, 255, 0.9);
}

.bill-check-name .ti {
  color: var(--lime-dark);
}

.bill-check-name small {
  display: block;
  color: var(--grey-text);
  font-size: 12px;
}

button.small-link {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: underline;
}

.tick-all {
  align-self: flex-start;
}

/* "Check before you accept" in the pop-up for tenants' M-Pesa codes. */
.caution-box {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  background: var(--orange-light);
  color: #6b3a05;
  font-size: 13.5px;
  line-height: 1.45;
}

.caution-box .ti {
  font-size: 20px;
  color: var(--orange);
  flex-shrink: 0;
}

/* "Charges & rules": one block per building. */
.rule-block .form-group-title {
  margin-top: 18px;
}

.rule-block:first-child .form-group-title {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

.charge-list {
  margin-top: 14px;
}

.charge-title {
  margin: 0 0 6px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-grey);
}

.charge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.charge-row .ti {
  color: var(--lime-dark);
}

.charge-add {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.charge-add .pill-input {
  height: 38px;
  min-width: 0;
}

/* The receipt page. */
.receipt-page {
  max-width: 720px;
}

.receipt {
  background: var(--glass-frosted);
  border-radius: var(--round-big);
  padding: 28px;
}

.receipt-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.receipt-top .brand-mark {
  display: grid;
}

.receipt-landlord {
  font-size: 22px;
  margin-top: 12px;
}

.receipt-number-box {
  text-align: right;
}

.receipt-number {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.receipt-amount {
  margin: 24px 0 8px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--glass-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.65);
}

.receipt-big {
  margin-top: 4px;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lime);
}

.receipt .fact-list strong {
  font-weight: 500;
  text-align: right;
}

.receipt-foot {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--grey-text);
}

/* "Part of one payment of KES 20,800, which also paid: …" */
.receipt-together {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.receipt-together ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.receipt-together li {
  margin: 3px 0;
}

.receipt-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}


/* ---------- 21. Phones and small screens ---------- */
@media (max-width: 1100px) {
  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chips {
    flex-wrap: wrap;
  }
}

@media (max-width: 960px) {
  /* Room at the bottom for the floating menu bar. */
  .page {
    padding: 10px 16px 112px;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    top: 8px;
    padding: 8px 8px 8px 12px;
  }

  .topbar::before {
    background: rgba(255, 255, 255, 0.7);
  }

  /* On phones the menu floats as a glass bar at the bottom of the screen,
     within easy reach of your thumb. */
  .nav-pills {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 45;
    padding: 6px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-rim);
    box-shadow: var(--glass-shine), 0 12px 32px rgba(21, 24, 29, 0.18);
  }

  .nav-capsule {
    top: 6px;
    bottom: 6px;
  }

  .property-hero,
  .two-columns,
  .listing-layout {
    grid-template-columns: 1fr;
  }

  .listing-picture {
    height: 220px;
  }

  .listing-side {
    position: static;
  }

  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-right {
    display: none;
  }

  .auth-left {
    padding: 8px 4px;
  }
}

@media (max-width: 560px) {
  .page-title {
    font-size: 25px;
  }

  .role-pill,
  .phone-hide,
  .install-button span {
    display: none;
  }

  /* On small phones the menu shows icons only, so it fits. */
  .nav-item.active {
    padding: 0 12px;
  }

  .nav-item.active span {
    display: none;
  }

  /* Lighter glass on small phones: long lists of blurred cards can make
     cheaper phones stutter while scrolling, so these use frosted white. */
  .property-card,
  .list-row,
  .inquiry,
  .activity-entry {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.78);
  }

  .activity-tools,
  .activity-tools .search-box,
  .activity-tools select.pill-input {
    width: 100%;
    max-width: none;
  }

  .activity-entry {
    gap: 10px;
    padding: 12px;
  }

  .activity-changes th {
    white-space: normal;
  }

  .two-fields {
    grid-template-columns: 1fr;
  }

  .inquiry-message,
  .inquiry-buttons,
  .complaint-progress {
    margin-left: 0;
  }

  /* On phones the badges and button drop below the row's text. */
  .list-row .row-end {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Rows with many buttons: the badge on top, the buttons below it. */
  .list-row .row-end.row-end-stack {
    flex-direction: column;
    align-items: flex-start;
  }

  .warning-row > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .activation-top {
    grid-template-columns: 1fr;
  }

  .charge-add {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .legal-card {
    padding: 20px;
  }

  .rank-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .forum-replies,
  .reply-form {
    margin-left: 6px;
  }

  .rank-bar {
    display: none;
  }

  .month-bars {
    height: 110px;
  }

  .legal-card-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .legal-card-top .card-buttons {
    grid-column: 1 / -1;
  }

  .charge-add .pill-input:first-child {
    grid-column: 1 / -1;
  }

  .reference-box {
    justify-self: start;
  }

  .filters {
    grid-template-columns: 1fr 1fr;
  }

  .filters > :first-child,
  .filters > :last-child,
  .filters .wide-filter {
    grid-column: 1 / -1;
  }

  /* Number cards sit two per row, with smaller numbers. */
  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .stat {
    padding: 14px 16px;
  }

  .stat-number {
    font-size: 24px;
  }

  .bill-tools,
  .bill-tools .search-box {
    width: 100%;
  }

  .receipt {
    padding: 20px;
  }

  .receipt-number-box {
    text-align: left;
  }

  .receipt-big {
    font-size: 30px;
  }

  .photo-thumbs.big .photo-thumb {
    width: calc(50% - 4px);
  }
}

/* Phones: the landlord menu has 9 icons, so they sit closer... */
@media (max-width: 430px) {
  .nav-pills {
    gap: 0;
    padding: 4px;
  }

  .nav-item,
  .nav-item.active {
    min-width: 34px;
    padding: 0 8px;
  }

  .stay-card-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .stay-card-top > span {
    grid-column: 1 / -1;
  }

  .star {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .review-part {
    grid-template-columns: minmax(0, 1fr) 70px 30px;
  }
}

/* ...and closer still on very small ones. */
@media (max-width: 350px) {
  .nav-item,
  .nav-item.active {
    min-width: 30px;
    padding: 0 6px;
  }
}


/* ---------- 22. Fallbacks ----------
   Browsers that can't blur, and people who switched on "reduce
   transparency" in their phone or computer settings, get solid white
   surfaces instead of glass. "Reduce motion" turns off the sliding. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar::before,
  .stat,
  .card,
  .property-card,
  .list-row,
  .activity-entry,
  .inquiry,
  .tile,
  .empty,
  .pill,
  .chip,
  .btn-white,
  .round-button,
  .role-pill,
  .pill-input,
  .menu,
  .modal,
  .receipt,
  .nav-pills {
    background-color: rgba(255, 255, 255, 0.94);
  }

  .stat-black {
    background-color: var(--black);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar::before,
  .stat,
  .card,
  .property-card,
  .list-row,
  .activity-entry,
  .inquiry,
  .tile,
  .empty,
  .pill,
  .chip,
  .btn-white,
  .round-button,
  .role-pill,
  .pill-input,
  .menu,
  .modal,
  .receipt,
  .nav-pills {
    background-color: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .stat-black,
  .auth-right,
  .code-box,
  .receipt-amount {
    background-color: var(--black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-capsule,
  .property-card,
  .btn {
    transition: none;
  }

  .loading-card {
    animation: none;
  }
}


/* ---------- 23. Printing (receipts) ----------
   Printing (or "Save as PDF") shows only the receipt, in black on white.
   Printers usually skip background colours, so nothing relies on them. */
@media print {
  body {
    background: var(--white);
  }

  body::before,
  .no-print {
    display: none !important;
  }

  .page {
    padding: 0;
  }

  .receipt {
    background: var(--white);
    border: 1px solid #cfd2cc;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .receipt-amount {
    background: none;
    border: 2px solid var(--black);
    box-shadow: none;
    color: var(--grey-text);
  }

  .receipt-big {
    color: var(--black);
  }

  .badge-green {
    border-color: var(--green);
  }
}


/* === Who you are: tenant or landlord (sign-up, account menu) ===
   The "I'm renting a home / I'm a landlord" choice on the register page,
   the "Switch to" links in the account menu for people with more than one
   role, and the small "not a landlord? / actually a landlord?" links. */
.account-type-choices {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.account-type-choice {
  position: relative;
  display: block;
  cursor: pointer;
}

/* The round button itself is hidden; the whole card is the button. */
.account-type-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.account-type-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-rim);
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-grey);
}

.account-type-card .ti {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--lime-soft);
  color: var(--lime-dark);
}

.account-type-card strong {
  display: block;
  color: var(--black);
  font-weight: 600;
}

.account-type-choice input:checked + .account-type-card {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black);
  background: var(--white);
}

.account-type-choice input:focus-visible + .account-type-card {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* "Use the same email your landlord put on your lease." */
.account-type-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--round-small);
  background: var(--blue-light);
  color: var(--blue);
  font-size: 13.5px;
}

/* A quiet way out under a form or an empty page. */
.account-type-switch {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--grey-text);
  text-align: center;
}

/* "Switch to" in the account menu. */
.menu-label {
  padding: 8px 12px 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--grey-text);
}

.menu-line {
  border: none;
  border-top: 1px solid var(--line);
  margin: 6px 0;
}

/* The register page's "Who are you?" block (not a .field, so the
   text-box look doesn't reach the round buttons). */
.account-type-field {
  margin-top: 16px;
}

.account-type-title {
  margin: 0 0 6px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark-grey);
}

/* "If this email already has an account, log in or reset your password." */
.success-message a {
  color: inherit;
  font-weight: 600;
}

/* === Lease fixes (Fix details pop-up on the Leases page) === */
.lease-mistake {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.lease-mistake .row-title {
  margin: 0 0 4px;
}

/* === Money corrections (reversed payments, changing a bill) === */
/* The receipt of a payment that was reversed: a clear red banner. */
.receipt-reversed {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  background: var(--red-light);
  color: var(--red);
  font-size: 13.5px;
  line-height: 1.45;
}
.receipt-reversed strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.receipt-reversed p {
  margin: 4px 0 0;
}

/* "KES 5,000 (…) was reversed on 5 Sep: why" under a bill. */
.reversed-line {
  margin-top: 6px;
}
.reversed-line a {
  color: inherit;
  font-weight: 600;
}

/* A reversed payment in "Payments received": its amount struck through. */
.reversed-row .payment-amount {
  text-decoration: line-through;
  color: var(--grey-text);
}

.more-payments {
  display: flex;
  width: fit-content;
  margin: 12px auto 0;
}

/* "Payments on this bill" and "Made this bill by mistake?" in the
   "Change this bill" pop-up. */
.bill-extra {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.bill-extra .form-group-title {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.bill-extra .row-title {
  margin: 0 0 4px;
}
.bill-extra .list-row {
  background: rgba(255, 255, 255, 0.55);
}

/* === Viewing requests and listing reports (migration 0060) === */

/* "Best time to view" on a viewing request (landlord → Inquiries). */
.row-details .preferred-time {
  color: var(--dark-grey);
  font-weight: 500;
}

/* "Report this listing" under a home's or a stay's booking card. */
.report-line {
  margin-top: 16px;
  text-align: center;
}

.report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-text);
}

.report-link:disabled {
  cursor: default;
  text-decoration: none;
}

/* admin → Listings / Stays: the reported listings, above the cards. */
.reports-block {
  margin-bottom: 30px;
}

.row-icon.report-icon {
  background: var(--red-light);
  color: var(--red);
}

.report-reasons {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

.report-reasons li {
  padding: 8px 12px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.55);
}

.report-note {
  display: block;
  margin-top: 2px;
  color: var(--dark-grey);
  overflow-wrap: anywhere;
}

/* === Notifications (the bell, the notifications page and the menu's "waiting" numbers — migration 0061) === */

/* The bell in the top bar, next to the account button. */
.bell {
  position: relative;
}

.bell-button {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  color: var(--black);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.bell-button .ti {
  font-size: 20px;
}

.bell-button:hover {
  background: rgba(255, 255, 255, 0.75);
}

/* How many are unread (a small red number on the bell). */
.bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--white);
  background: var(--red);
  color: var(--white);
  font: 700 10.5px/16px var(--font);
  text-align: center;
}

/* The drop-down with the latest few. */
.bell-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: 360px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: var(--round-medium);
  border: 1px solid var(--glass-rim);
  background: var(--glass-frosted);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shine), var(--shadow-big);
  z-index: 46;   /* above the phone's floating bottom menu (45) */
}

.bell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
  font-size: 15px;
}

.bell-head .link-button {
  font-size: 13px;
}

.bell-list {
  /* Short phones: stop above the floating bottom menu. */
  max-height: max(160px, min(420px, 60vh, calc(100vh - 300px)));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bell-empty {
  padding: 18px 12px;
  color: var(--grey-text);
  font-size: 13.5px;
  text-align: center;
}

.bell-empty .ti {
  display: block;
  margin: 0 auto 6px;
  font-size: 22px;
}

.bell-all {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--black);
}

.bell-all:hover {
  text-decoration: underline;
}

/* One notification (in the bell and on the notifications page). */
.notif-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px;
  border-radius: var(--round-small);
  color: var(--black);
  text-decoration: none;
}

.notif-item:hover {
  background: rgba(21, 24, 29, 0.05);
}

.notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.notif-icon .ti {
  font-size: 19px;
}

/* Read ones are quieter. */
.notif-item:not(.unread) .notif-icon {
  background: rgba(21, 24, 29, 0.06);
  color: var(--grey-text);
}

.notif-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-title {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.notif-item:not(.unread) .notif-title {
  font-weight: 500;
}

.notif-body {
  font-size: 13px;
  color: var(--dark-grey);
  overflow-wrap: anywhere;
}

.notif-time {
  font-size: 12px;
  color: var(--grey-text);
}

.notif-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--lime-dark);
}

/* The notifications page: the same items as cards. */
.notif-page-list .notif-item {
  margin-bottom: 8px;
  padding: 12px 14px 12px 12px;
  border-radius: var(--round-medium);
  border: 1px solid var(--glass-rim);
  background: var(--glass);
  box-shadow: var(--glass-shine), var(--glass-shadow);
}

.notif-page-list .notif-item.unread {
  background: rgba(255, 255, 255, 0.82);
}

.notif-page-list .notif-item:hover {
  background: rgba(255, 255, 255, 0.9);
}

.notif-page-hint {
  margin-top: 18px;
  text-align: center;
}

/* A small number on a menu item: how many things wait there. */
.nav-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--white);
  background: var(--red);
  color: var(--white);
  font: 700 10px/14px var(--font);
  text-align: center;
  pointer-events: none;
}

/* "Waiting for you" (landlord dashboard, staff page). */
.waiting-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 22px;
  padding: 12px 14px;
  border-radius: var(--round-medium);
  border: 1px solid var(--glass-rim);
  background: var(--lime-soft);
  box-shadow: var(--glass-shine), var(--glass-shadow);
}

.waiting-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.waiting-title .ti {
  color: var(--lime-dark);
  font-size: 18px;
}

.waiting-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.waiting-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.78);
  color: var(--black);
  font-size: 13.5px;
  text-decoration: none;
}

.waiting-link:hover {
  background: var(--white);
}

.waiting-link .ti {
  font-size: 16px;
  color: var(--dark-grey);
}

@media (max-width: 560px) {
  /* On phones the bell's drop-down spans the screen under the top bar. */
  .bell-panel {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 74px;
    width: auto;
    max-width: none;
  }

  .bell-button {
    width: 40px;
    height: 40px;
  }

  .waiting-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .waiting-link {
    width: 100%;
  }
}

/* Very small phones: a little more room for the logo, the bell and the account button. */
@media (max-width: 360px) {
  .brand {
    font-size: 17px;
  }

  .topbar-right {
    gap: 8px;
  }

  .bell-button {
    width: 36px;
    height: 36px;
  }
}

/* === Editing, deleting and stopping properties & units (property page) === */

/* "Added by mistake?" at the bottom of the Edit pop-ups. */
.place-remove-box {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.place-remove-box .row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
}
.place-remove-box .btn {
  margin-top: 10px;
}

/* Why something can't be deleted: one plain line each. */
.place-reasons {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}
.place-reasons li {
  padding: 8px 12px;
  border-radius: var(--round-small);
  background: var(--red-light);
  color: var(--red);
  overflow-wrap: anywhere;
}

.place-stop-text {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dark-grey);
}

/* The final "Delete" button: red, so it isn't pressed by habit. */
.btn-danger {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(176, 41, 31, 0.22);
}
.btn-danger:hover {
  filter: brightness(1.1);
}

/* Buildings: each pill is a button that opens "Edit building". */
.pill-button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pill-button:hover {
  background: rgba(255, 255, 255, 0.85);
}
.pill-button .pill-edit {
  color: var(--grey-text);
  font-size: 14px;
}

/* A unit row's "how it's rented" choice and its Edit button, side by side. */
.unit-buttons {
  align-items: center;
  justify-content: flex-end;
}

/* Units that are not in use: greyed out. */
.stopped-row .row-icon {
  background: rgba(21, 24, 29, 0.06);
  color: var(--grey-text);
}
.stopped-row .row-title {
  color: var(--dark-grey);
}


/* === Rental applications (migration 0063): "Apply to rent this home", the landlord's Applications page, "My applications" === */

/* A small dark number inside a chip or a button, e.g. "Applications 3". */
.chip-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
}

/* One home's page: "Want to rent it?" between the facts and the viewing request. */
.apply-box {
  margin-top: 22px;
}

.apply-box .btn-full {
  margin-top: 12px;
}

.apply-status {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--lime-soft);
  font-size: 14px;
}

.apply-status .badge {
  margin-left: 4px;
  vertical-align: middle;
}

.apply-sent-buttons {
  justify-content: center;
  margin-top: 14px;
}

.apply-sent-buttons .btn {
  margin-top: 0;
}

/* Landlord → Applications: "Only the applications for …  Show all homes". */
.applications-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px 4px;
  font-size: 14px;
  color: var(--dark-grey);
}

/* The applicant's answers: small labelled boxes that wrap on phones. */
.application-answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0 0 58px;
}

.application-answers div {
  padding: 8px 12px;
  border-radius: var(--round-small);
  background: rgba(255, 255, 255, 0.55);
  min-width: 0;
}

.application-answers dt {
  font-size: 12px;
  color: var(--grey-text);
}

.application-answers dd {
  margin: 2px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* The landlord's message to the applicant, and hints under a card. */
.application-reply,
.application-hint {
  margin: 10px 0 0 58px;
  font-size: 13.5px;
  color: var(--dark-grey);
}

/* Opened from a notification: that card stands out. */
.application-card.is-highlighted {
  box-shadow: 0 0 0 2px var(--black);
}

/* My applications: "Your answers", folded away. */
.application-details {
  margin-top: 12px;
  font-size: 14px;
}

.application-details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--dark-grey);
}

.application-details .application-answers {
  margin-left: 0;
}

/* Leases → New lease, opened from an application. */
.lease-from-application {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--round-small);
  background: var(--lime-soft);
  font-size: 13.5px;
}

/* Tenant page, "No lease linked yet": find a home / my applications. */
.no-lease-links {
  justify-content: center;
  margin-top: 16px;
}

.no-lease-links .btn {
  margin-top: 0;
}

@media (max-width: 560px) {
  .application-answers,
  .application-reply,
  .application-hint {
    margin-left: 0;
  }

  .application-answers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === Staff work: jobs, cleaning tasks and the daily log (migration 0064) === */

/* "WO-0003 · with Juma (Plumber) · Not started · Due tomorrow" under a repair. */
.job-line {
  align-items: center;
  margin-top: 6px;
}

/* The landlord's or caretaker's note on a job, under the tenant's words. */
.job-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0 58px;
  font-size: 13.5px;
  color: var(--dark-grey);
  overflow-wrap: anywhere;
}

.job-note .ti {
  margin-top: 2px;
  color: var(--lime-dark);
}

/* The property list next to a page's buttons (Cleaning page). */
.page-choice {
  width: auto;
  max-width: 240px;
}

/* The daily log: the form on the staff page, and each entry. */
.log-form {
  margin-bottom: 12px;
}

.log-form .modal-buttons {
  margin-top: 6px;
}

.log-when {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}

.log-time {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--lime-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.log-body {
  margin: 4px 0 2px;
  font-size: 14px;
  color: var(--dark-grey);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-incident .row-icon {
  background: var(--orange-light);
  color: var(--orange);
}

/* The landlord's Daily log page: ‹ day › */
.day-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.day-picker .pill-input {
  width: auto;
  height: 34px;
}

@media (max-width: 560px) {
  .job-note {
    margin-left: 0;
  }

  .page-actions .page-choice {
    max-width: none;
    flex: 1 1 100%;
  }

  .day-picker {
    width: 100%;
  }

  .day-picker .pill-input {
    flex: 1;
    min-width: 0;
  }
}


/* === Marketplace upgrades (migration 0066): amenities, more filters, saved homes (the heart), compare === */

/* Amenity chips (a home's page, compare) */
.amenity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--black);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.amenity-chip .ti {
  font-size: 16px;
  color: var(--lime-dark);
}

/* The landlord's tick boxes in the listing form */
.amenity-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 10px;
}

.amenity-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  cursor: pointer;
}

.amenity-option input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--black);
}

.amenity-option .ti {
  color: var(--lime-dark);
}

/* "More filters" on the marketplace: folded away until opened */
.more-filters {
  margin: -8px 0 24px;
}

.more-filters summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--glass);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.more-filters summary::-webkit-details-marker {
  display: none;
}

.more-filters[open] summary {
  background: rgba(255, 255, 255, 0.8);
}

.more-filters-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 16px;
  align-items: end;
  margin-top: 14px;
}

.more-filters-body .chips {
  flex-wrap: wrap;
}

/* A small black number ("Saved homes 3", "More filters 2") */
.saved-count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 600;
}

/* A home card with the heart and the "Compare" tick on its photo */
.market-card {
  position: relative;
}

.market-card > .property-card {
  height: 100%;
}

.market-facts {
  margin: 6px 0 2px;
}

.heart-button {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--glass-shine), 0 4px 14px rgba(21, 24, 29, 0.16);
  display: inline-grid;
  place-items: center;
  color: var(--black);
  font-size: 19px;
  cursor: pointer;
  flex-shrink: 0;
}

.heart-button:hover {
  background: var(--white);
}

.heart-button.saved {
  color: #d6336c;
}

.heart-big {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.market-card > .heart-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.compare-tick {
  position: absolute;
  top: 164px;
  left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--glass-shine), 0 2px 8px rgba(21, 24, 29, 0.14);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.compare-tick input {
  width: 15px;
  height: 15px;
  accent-color: var(--black);
}

.compare-tick.ticked {
  background: var(--lime);
}

/* The bar at the bottom while homes are ticked to compare */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(21, 24, 29, 0.9);
  color: var(--white);
  box-shadow: 0 12px 32px rgba(21, 24, 29, 0.25);
  font-size: 13.5px;
}

.compare-bar.hidden {
  display: none;
}

.compare-bar-text {
  min-width: 0;
}

/* A home's page: the heart and "Compare" next to the title */
.listing-actions {
  align-items: center;
}

.compare-note {
  margin: -8px 0 14px;
}

/* Saved homes */
.saved-browser-note {
  margin-bottom: 18px;
}

.saved-browser-note p {
  margin: 0 0 12px;
  font-size: 14px;
}

.saved-gone {
  opacity: 0.8;
}

/* Compare: the homes side by side, scrolling sideways inside the box on phones */
.compare-box {
  padding: 10px;
}

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
}

.compare-table th,
.compare-table td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(21, 24, 29, 0.08);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table td {
  width: 30%;
}

.compare-label {
  width: 110px;
  color: var(--grey-text);
  font-weight: 500;
  font-size: 13px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: rgba(247, 248, 242, 0.96);
}

.compare-home {
  min-width: 170px;
}

.compare-photo {
  display: block;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #edf4d4 0%, #f5f8ea 100%);
}

.compare-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.compare-photo img.is-photo {
  object-position: center;
}

.compare-title {
  display: block;
  margin: 8px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

a.compare-title:hover {
  text-decoration: underline;
}

.compare-home .card-buttons {
  align-items: center;
}

.compare-table .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .compare-bar {
    padding-left: 14px;
    font-size: 12.5px;
  }

  .compare-label {
    width: 86px;
  }

  .listing-actions {
    width: 100%;
  }
}


/* === Documents (migration 0067): a lease's papers (Leases pop-up, tenant's home page) and a property's papers === */

/* In the Leases pop-up the rows are narrow: the buttons go under the text. */
.document-list {
  margin-top: 16px;
}

.document-list .list-row .row-end {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: flex-start;
}

.document-row .row-title {
  overflow-wrap: anywhere;
}

.document-empty {
  margin-top: 16px;
  font-size: 13.5px;
}

.document-form {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(21, 24, 29, 0.08);
}

.document-form-title {
  font-size: 15px;
  font-weight: 600;
}

.document-form-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}


/* === Messages (migration 0068): messages/index.html — conversations about a lease, a stay or an application === */

.messages-page {
  max-width: 1100px;
}

.messages-groups {
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* The list on the left, the open conversation on the right. */
.messages-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversation-list-empty {
  padding: 12px 4px;
  font-size: 13.5px;
}

.conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--round-medium);
  border: 1px solid var(--glass-rim);
  background: var(--glass);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  font: inherit;
  color: var(--black);
  text-align: left;
  cursor: pointer;
}

.conversation-item:hover {
  background: rgba(255, 255, 255, 0.75);
}

.conversation-item.unread {
  background: rgba(255, 255, 255, 0.85);
}

.conversation-item.active {
  border-color: var(--black);
  box-shadow: 0 0 0 1px var(--black) inset;
}

.conversation-item .row-icon {
  width: 40px;
  height: 40px;
}

.conversation-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.conversation-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14.5px;
}

.conversation-item-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item-top .notif-time {
  flex-shrink: 0;
}

.conversation-item-about,
.conversation-item-last {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--grey-text);
}

.conversation-item.unread .conversation-item-last {
  color: var(--black);
  font-weight: 600;
}

/* The open conversation */
.conversation-pane {
  padding: 16px;
  min-height: 320px;
}

.conversation-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 280px;
  color: var(--grey-text);
  text-align: center;
}

.conversation-placeholder .ti {
  font-size: 34px;
  color: var(--lime-dark);
}

.conversation-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.conversation-head-text {
  min-width: 0;
}

.conversation-head .row-details a {
  color: var(--black);
  font-weight: 600;
}

/* The back arrow is for phones only (the list is hidden there while reading). */
.conversation-back {
  display: none;
}

.message-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 58vh;
  min-height: 180px;
  overflow-y: auto;
  padding: 14px 2px;
}

.message-thread-empty {
  margin: auto 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--grey-text);
}

.message-day {
  display: flex;
  justify-content: center;
  margin: 6px 0 2px;
}

.message-day span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--glass-clear);
  font-size: 12px;
  color: var(--grey-text);
}

.message-bubble {
  max-width: min(78%, 520px);
  align-self: flex-start;
  padding: 9px 13px;
  border-radius: 16px 16px 16px 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--glass-rim);
}

.message-bubble.is-mine {
  align-self: flex-end;
  border-radius: 16px 16px 6px 16px;
  background: var(--lime-soft);
  border-color: rgba(82, 112, 12, 0.18);
}

.message-bubble.is-deleted {
  opacity: 0.7;
}

.message-bubble.is-deleted .message-text {
  font-style: italic;
  color: var(--grey-text);
}

.message-sender {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark-grey);
}

.message-text {
  margin: 2px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 14.5px;
}

.message-meta {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--grey-text);
  text-align: right;
}

.message-meta .link-button {
  font-size: 11.5px;
}

.conversation-closed {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--round-small);
  background: var(--glass-clear);
  font-size: 13.5px;
  color: var(--grey-text);
}

.message-composer {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.message-composer textarea {
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--round-small);
  border: 1px solid var(--glass-rim);
  background: rgba(255, 255, 255, 0.7);
  font: 15px/1.5 var(--font);
  resize: vertical;
}

.message-composer textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px var(--lime-soft);
}

.message-composer .field-hint {
  flex: 1 1 200px;
  margin: 0;
}

/* A "Message" button on its own line in a card (booking, application). */
.message-line {
  margin-top: 12px;
}

/* Phones: the list, or one conversation — not both. */
@media (max-width: 760px) {
  .messages-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .messages-layout.is-reading .conversation-list {
    display: none;
  }

  .messages-layout:not(.is-reading) .conversation-pane {
    display: none;
  }

  .conversation-back {
    display: inline-flex;
    flex-shrink: 0;
  }

  .conversation-pane {
    padding: 12px;
  }

  .message-thread {
    max-height: 60vh;
  }

  .message-bubble {
    max-width: 88%;
  }
}


/* === Disputes (plan §46, migration 0070) === */
.dispute-card { margin-bottom: 14px; }
.dispute-card.highlight { outline: 2px solid var(--lime, #b5d334); outline-offset: 2px; }
.dispute-reason { margin-top: 10px; }
.dispute-text { margin-top: 4px; color: var(--dark-grey); overflow-wrap: anywhere; }
.dispute-facts { margin-top: 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
.dispute-messages { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.dispute-message { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dispute-message:last-child { border-bottom: none; }
.dispute-message-head { font-size: 13px; color: var(--grey-text); margin-bottom: 2px; }
.dispute-result { margin-top: 12px; padding: 10px 12px; border-radius: var(--round-small); background: rgba(255, 255, 255, 0.55); }
.dispute-hint { font-size: 13px; align-self: center; }


/* === Show / hide password (the eye on password boxes) === */
.password-wrap { position: relative; display: block; }
.password-wrap input { width: 100%; padding-right: 46px; }
.password-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--grey-text);
  font-size: 19px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}
.password-eye:hover { background: rgba(0, 0, 0, 0.06); color: var(--black); }
.password-eye:focus-visible { outline: 2px solid var(--black); outline-offset: 1px; }


/* === Accepting the terms (the screen nobody can close) === */
.legal-gate-list { list-style: none; margin: 14px 0; padding: 0; }
.legal-gate-list li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 6px; border-radius: var(--round-small); background: rgba(255, 255, 255, 0.6); }
.legal-gate-list a { font-weight: 600; }
#legal-gate .btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* === Silencing in the building forum, and the ID / age screens === */
.mute-banner { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; border-left: 4px solid var(--red, #c0392b); }
.mute-banner > .ti { font-size: 24px; margin-top: 2px; }

/* Students under 18 at sign-up: the parent or guardian box (migration 0078) */
.guardian-block {
  border: 1px solid var(--border, #e3e6d8);
  border-radius: 14px;
  padding: 14px 14px 4px;
  margin: 4px 0 14px;
  background: rgba(255, 255, 255, 0.5);
}
.hostel-filters { margin-top: -6px; }

/* Grouped amenity tick boxes and the landlord's own special features (migration 0079) */
.amenity-groups { display: grid; gap: 14px; }
.amenity-group-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey, #6b6f63);
}
.feature-add { display: flex; gap: 8px; align-items: center; }
.feature-add input { flex: 1; min-width: 0; }
.amenity-chip-own {
  height: auto;
  min-height: 32px;
  padding: 5px 12px;
  white-space: normal;
  background: #fff;
  border: 1px solid var(--lime-dark, #9db83c);
}
.chip-remove {
  border: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--black);
  padding: 0 0 0 2px;
}

/* Add many units at once (landlord/bulk-units.js) */
.bulk-kind { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bulk-kind .bulk-kind-count { width: 84px; flex: none; }
.bulk-kind .bulk-kind-type { flex: 1; min-width: 0; }
.bulk-preview {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border, #e3e6d8);
  border-radius: 12px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.5);
}
.bulk-preview:empty { display: none; }
.bulk-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 8px; align-items: center; padding: 3px 0; }
.bulk-row input, .bulk-row select { min-width: 0; height: 34px; }
.bulk-row.problem input { border-color: #b3261e; background: #fdeeed; }
.bulk-problem { grid-column: 1 / -1; font-size: 12px; color: #b3261e; margin-top: -2px; }

/* Edit many units (landlord/edit-units.js) */
.eu-table-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--border, #e3e6d8); border-radius: 12px; background: rgba(255, 255, 255, 0.5); }
.eu-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.eu-table th { position: sticky; top: 0; background: var(--card, #f6f7f0); text-align: left; padding: 8px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey, #6b6f63); z-index: 1; }
.eu-table td { padding: 3px 4px; vertical-align: middle; }
.eu-table input, .eu-table select { height: 34px; min-width: 0; width: 100%; }
.eu-table .eu-narrow, .eu-narrow { width: 76px; }
.eu-table tr.changed td { background: rgba(200, 230, 90, 0.18); }
.eu-table tr.problem input { border-color: #b3261e; background: #fdeeed; }
.eu-note { font-size: 12px; color: #b3261e; white-space: nowrap; }

/* Ticking listing cards and the bar under them (landlord/bulk-listings.js) */
.select-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--glass-shine), 0 2px 8px rgba(21, 24, 29, 0.14);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.select-tick input { width: 15px; height: 15px; accent-color: var(--black); }
.listing-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-shine), 0 8px 30px rgba(21, 24, 29, 0.2);
  font-size: 13.5px;
  font-weight: 500;
}
.listing-bulk-bar.hidden { display: none; }

/* A tick on each unit row (landlord/bulk-units.js) */
.unit-tick { display: inline-flex; align-items: center; padding: 0 4px 0 2px; cursor: pointer; }
.unit-tick input { width: 17px; height: 17px; accent-color: var(--black); }

/* "Listing more than one unit?" strip at the top of the New listing form (landlord/listings.html) */
.list-many-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(21, 24, 29, 0.05);
  font-size: 13.5px;
  font-weight: 500;
}
.list-many-hint.hidden { display: none; }
.list-many-hint i { margin-right: 4px; }
#no-listings .btn + .btn { margin-left: 8px; }

/* The line under a map: "Map not showing? Use the simple map · Open in Google Maps" (shared.js showMap) */
.map-fallback {
  margin: 6px 2px 0;
  font-size: 12.5px;
  color: var(--dark-grey);
}
.map-fallback a,
.map-fallback .link-button { font-size: inherit; text-decoration: underline; }