/* ============================================================================
   Proplist — HOME / dashboard  (pro-home.css)  — CLEAN & OFFICIAL rebuild
   Loads AFTER styles.css + pro-theme.css (light theme). Direction: bright,
   white, spacious, calm professional BLUE accent, big clear buttons — the
   "legit company you can trust" look (PropertyGuru / bank app). NOT dark,
   NOT neon. Every selector is scoped to #page-home so nothing leaks. Tokens
   only; one accent (blue); status colours only for status.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1) HERO — a welcoming WHITE card with a soft blue wash + blue left accent.
   Big friendly greeting, plain subline, big obvious blue primary button.
   The base .hero is a dark forest slab with white text — we overturn it here
   to a bright, trustworthy panel and re-ink all its text to dark slate.
--------------------------------------------------------------------------- */
#page-home .hero,
#page-home .hero-compact {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--brass-soft) 0%, transparent 58%),
    linear-gradient(180deg, #FBFDFF 0%, var(--card) 100%);
  box-shadow: var(--shadow-2), inset 4px 0 0 var(--accent);
  color: var(--ink);
  padding: 30px 32px 30px 34px;
  margin-bottom: 24px;
}
/* Neutralise the inherited gold ::before glow → soft blue. */
#page-home .hero::before {
  background: radial-gradient(110% 90% at 92% 6%, var(--brass-soft), transparent 60%);
}

#page-home .hero .hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
#page-home .hero h2,
#page-home .hero-compact h2,
#page-home .hero #home-greeting {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2rem;
  line-height: 1.14;
  margin: 8px 0 0;
  max-width: none;
}
#page-home .hero-compact h2 { font-size: 1.4rem; margin: 0; }
#page-home .hero p {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
  margin-top: 10px;
  max-width: 52ch;
}
#page-home .hero .hero-sub {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* Action row — generous, big tap targets. */
#page-home .hero .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Primary "New listing" → big, solid, confident blue. */
#page-home .hero .btn-peach {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 8px 20px rgba(30, 99, 214, .24);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#page-home .hero .btn-peach:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .14), 0 12px 28px rgba(30, 99, 214, .30);
}

/* Secondary "Manage connections" → clean white ghost, same big height. */
#page-home .hero .btn-outline {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-2);
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1rem;
  padding: 14px 24px;
  border-radius: var(--r-md);
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
#page-home .hero .btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--brass-soft);
}

/* ----------------------------------------------------------------------------
   2) STAT ROW — three calm white cards, big bold tabular numbers, small clear
   uppercase labels, a subtle top status accent (green = live). Bank-dashboard
   legible; generous padding; gentle hover-lift.
--------------------------------------------------------------------------- */
#page-home .stat-row { gap: 18px; margin-bottom: 26px; }

#page-home .stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 26px 26px 24px;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* Slim status accent along the top edge (live=green, active=blue, enquiries=amber). */
#page-home .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0.7;
  transition: opacity .16s ease;
}
#page-home .stat-row .stat-card:nth-child(1)::before { background: var(--green); }
#page-home .stat-row .stat-card:nth-child(3)::before { background: var(--amber); }

#page-home .stat-card:hover {
  transform: translateY(-2px);
  border-color: #C9D6E8;
  box-shadow: var(--shadow-2);
}
#page-home .stat-card:hover::before { opacity: 1; }

#page-home .stat-num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
#page-home .stat-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Enquiries card is a button — make it obviously clickable. */
#page-home .stat-card-link { cursor: pointer; }
#page-home .stat-card-link:hover .stat-label { color: var(--accent); }

/* Delivery breakdown under the headline count — the honest half of the tile. */
#page-home .stat-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft, #4A5568);
}
#page-home .stat-sub b { color: var(--green); font-weight: 700; }
#page-home .stat-sub-muted { color: var(--ink-faint); }
#page-home .stat-card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   3) "WORKING FOR YOU" activity feed — clean readable rows, comfy spacing,
   a small colored status dot, right-aligned muted timestamps, subtle row
   separators, gentle hover.
--------------------------------------------------------------------------- */
#page-home .pulse-feed {
  margin-top: 18px;
  padding: 8px 10px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
#page-home .pulse-feed .lv-eyebrow {
  padding: 14px 16px 10px;
  margin: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#page-home .pulse-line {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 11px 16px;
  font-size: 0.94rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background .14s ease;
}
#page-home .pulse-line:last-child { border-bottom: none; }
#page-home .pulse-line:hover { background: var(--card-2); }
#page-home .pulse-line b { color: var(--ink); font-weight: 700; }
#page-home .pulse-line time {
  margin-left: auto;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
#page-home .pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: var(--ink-faint);
}
#page-home .pulse-dot.live {
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-bg);
}

/* ----------------------------------------------------------------------------
   4) "Recent listings" head + cards — clean white cards, clear photo, bold
   price, simple status chip, obvious click affordance, hover-lift.
--------------------------------------------------------------------------- */
#page-home .page-head { margin-top: 28px; }
#page-home .page-head h2 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}
#page-home .page-head p { color: var(--ink-soft); margin-top: 4px; }

/* Stack the recent cards with comfortable gaps. */
#page-home #home-recent {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

#page-home #home-recent .listing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#page-home #home-recent .listing-card:hover {
  transform: translateY(-2px);
  border-color: #C9D6E8;
  box-shadow: var(--shadow-2);
}
#page-home #home-recent .listing-thumb {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
#page-home #home-recent .listing-thumb.placeholder {
  background: var(--brass-soft);
}
#page-home #home-recent .listing-body h3 { color: var(--ink); font-weight: 700; }
#page-home #home-recent .listing-meta { color: var(--ink-faint); }

/* Price reads bold + tabular; purpose stays a quiet caption. */
#page-home #home-recent .listing-price {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}
#page-home #home-recent .listing-purpose {
  font-family: var(--sans);
  color: var(--ink-faint);
}

/* Status chip on the photo (sold / rented / draft): clean white pill, leading
   status dot, dark-slate label — legible over any image, never scam-looking. */
#page-home #home-recent .badge-onphoto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#page-home #home-recent .badge-onphoto::before {
  content: "\25CF"; /* ● */
  font-size: 0.72em;
  line-height: 1;
  color: var(--ink-faint);
}
#page-home #home-recent .badge-onphoto.sold::before,
#page-home #home-recent .badge-onphoto.rented::before { color: var(--amber); }
#page-home #home-recent .badge-onphoto.draft::before { color: var(--ink-faint); }

/* "View all listings" footer — quiet ghost link that warms to blue. */
#page-home .home-see-all {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
#page-home .home-see-all .btn-ghost {
  color: var(--ink-soft);
  font-weight: 650;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
#page-home .home-see-all .btn-ghost:hover {
  color: var(--accent);
  background: var(--brass-soft);
}

/* Empty state (no listings yet) — calm and reassuring. */
#page-home #home-recent .empty { color: var(--ink-faint); }
#page-home #home-recent .empty strong { color: var(--ink); }

/* ============================================================================
   HOME nicer (2026-08-29) — Recent listings as a clean vertical card grid
   (cover photo on top, price-hero, status pill on photo) matching the new
   Coral/Listings direction; Enquiries becomes a coral action tile.
   ======================================================================== */
#page-home #home-recent { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
#page-home #home-recent .listing-card { display: block; overflow: hidden; padding: 0; }
#page-home #home-recent .thumb-wrap { position: relative; display: block; }
#page-home #home-recent .listing-thumb { width: 100%; height: 132px; object-fit: cover; border-radius: 0; border: none; border-bottom: 1px solid var(--line); display: block; }
#page-home #home-recent .listing-thumb.placeholder { height: 132px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--coral); background: var(--peach-2); border-bottom: 1px solid var(--line); }
#page-home #home-recent .listing-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
#page-home #home-recent .listing-price { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--ink); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; letter-spacing: -0.01em; }
#page-home #home-recent .listing-price .pr-rm { color: var(--coral-deep); font-size: 0.6em; font-weight: 700; }
#page-home #home-recent .listing-price .pr-mo { color: var(--ink-faint); font-size: 0.5em; font-weight: 600; }
#page-home #home-recent .listing-price .listing-purpose { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; color: var(--ink-soft); background: var(--card-2); border: 1px solid var(--line-2); padding: 2px 8px; border-radius: 999px; align-self: center; }
#page-home #home-recent .listing-body h3 { font-family: var(--serif); font-size: 0.98rem; font-weight: 650; margin: 3px 0 0; line-height: 1.25; }
#page-home #home-recent .listing-meta { font-size: 0.8rem; color: var(--ink-soft); margin-top: 1px; }

/* Enquiries = the one action tile → warm coral */
#page-home .stat-row .stat-card-link { background: linear-gradient(160deg, var(--brass-soft), #FFF6F1); border-color: #F0C9B8; }
#page-home .stat-row .stat-card-link .stat-num { color: var(--coral-deep); }
#page-home .stat-row .stat-card:nth-child(3)::before { background: var(--coral); }

/* ============================================================================
   TIGHTEN HOME SPACING (2026-08-29) — Abigail: "why so big spacing?".
   Trim hero + stat-card padding and section gaps; give short stat cards a
   sub-line so they don't stretch empty next to the taller Posts-sent card.
   ======================================================================== */
#page-home .hero, #page-home .hero-compact { padding: 15px 22px; }
#page-home .stat-row { gap: 12px; margin-top: 12px; }
#page-home .stat-card { padding: 13px 16px; }
#page-home .stat-num { font-size: 1.6rem; }
#page-home .stat-card .stat-sub { font-size: 0.75rem; color: var(--ink-faint); margin-top: 4px; line-height: 1.4; }
#page-home #pulse-feed { margin-top: 14px; padding: 12px 16px 6px; }
#page-home .page-head { margin-top: 18px; margin-bottom: 8px; }
#page-home #home-recent { margin-top: 6px; }

/* Getting-started dismiss button (2026-08-30) */
#page-home .onboarding-card { position: relative; }
#page-home .onb-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-faint); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
#page-home .onb-close:hover { color: var(--coral-deep); background: var(--peach-2); }
#page-home .onb-close svg { width: 15px; height: 15px; }