/* ============================================================================
   pro-detail.css — Listing DETAIL / DOSSIER view
   Screen: #page-listing-view (opened via openListingView)
   Loads AFTER styles.css + pro-theme.css. Tokens-only, one BLUE accent.
   Goal: clean, official, trustworthy (PropertyGuru / bank-app feel) — bright,
   spacious, calm. Her #1 need: SEE each post's status (live / awaiting / failed)
   at ONE glance. Every selector is scoped to #page-listing-view — nothing leaks.
   ========================================================================== */

/* ---- Page rhythm --------------------------------------------------------- */
#page-listing-view {
  --lv-status-col: 132px;
}
#page-listing-view #lv-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 6px;
}

/* ---- Back affordances ---------------------------------------------------- */
#page-listing-view .lv-back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 120ms ease, transform 120ms ease;
}
#page-listing-view .lv-back-top:hover {
  color: var(--accent);
  transform: translateX(-2px);
}
#page-listing-view #lv-back {
  margin-top: 8px;
  color: var(--ink-soft);
  font-weight: 600;
}
#page-listing-view #lv-back:hover { color: var(--accent); }

/* ---- Header: property name big + plain fact line -------------------------- */
#page-listing-view .page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
#page-listing-view #lv-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
/* Plain-language fact strip (bed · bath · sqft · price) */
#page-listing-view #lv-sub {
  margin: 9px 0 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-soft);
}
/* Private (🔒) badge — quietly walled off, not alarming */
#page-listing-view .lv-private {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-faint);
  padding: 3px 11px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  background: var(--paper-2);
}

/* ---- Header actions: big, clear buttons ---------------------------------- */
#page-listing-view .lv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
#page-listing-view .lv-actions .btn {
  height: 42px;
  padding-inline: 18px;
  font-size: 0.9rem;
  font-weight: 650;
  border-radius: var(--radius-sm);
}
/* Publish is the primary, confident blue call-to-action */
#page-listing-view .lv-actions .btn-primary {
  box-shadow: var(--shadow-1);
}
#page-listing-view .lv-actions #lv-rescan { font-weight: 600; }

/* ---- Section eyebrows ---------------------------------------------------- */
#page-listing-view .lv-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

/* ---- Photos: tidy, crisp gallery ---------------------------------------- */
#page-listing-view .lv-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
#page-listing-view .lv-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  border: 1px solid var(--line);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
#page-listing-view .lv-photos a { display: block; line-height: 0; }
#page-listing-view .lv-photos a:hover .lv-ph {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
#page-listing-view .lv-more-tile {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
#page-listing-view .lv-more-tile span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 27, 45, 0.52);
  border-radius: var(--radius-sm);
}

/* ---- Unit details card --------------------------------------------------- */
#page-listing-view .lv-desc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-1);
}
/* Fact strip: labels muted, values --ink, price in blue */
#page-listing-view .lv-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
#page-listing-view .lv-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
#page-listing-view .lv-fact.lv-wide { grid-column: 1 / -1; }
#page-listing-view .lv-fact span {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
}
#page-listing-view .lv-fact strong {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
  text-align: right;
}
/* Price / Rent — the headline figure, in blue */
#page-listing-view .lv-fact:last-of-type strong {
  color: var(--accent);
  font-size: 1.02rem;
  font-weight: 750;
}

/* Feature chips */
#page-listing-view .lv-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
#page-listing-view .lv-feat {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
}
#page-listing-view .lv-adcopy {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
#page-listing-view .lv-adcopy summary {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
#page-listing-view .lv-adcopy summary:hover { text-decoration: underline; }
#page-listing-view .lv-desc-text {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ============================================================================
   POSTING RECORD — the STATUS LEDGER (her priority: status at a glance)
   ========================================================================== */
#page-listing-view .lv-record {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px 12px;
  box-shadow: var(--shadow-1);
}

/* ---- Channel section (collapsible: 🏠 PropertyGuru / 👥 Facebook Groups) -- */
#page-listing-view .lv-channel {
  border-top: 1px solid var(--line);
}
#page-listing-view .lv-channel:first-of-type { border-top: none; }
#page-listing-view .lv-channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}
#page-listing-view .lv-channel-head::-webkit-details-marker { display: none; }
#page-listing-view .lv-channel-head::before {
  content: "▸";
  order: -1;
  color: var(--ink-faint);
  font-size: 0.8rem;
  transition: transform 140ms ease;
}
#page-listing-view .lv-channel[open] > .lv-channel-head::before {
  transform: rotate(90deg);
}
#page-listing-view .lv-channel-name {
  flex: 1;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#page-listing-view .lv-channel-head:hover .lv-channel-name { color: var(--accent); }
#page-listing-view .lv-channel-tags {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Plain "8 / 21 live" summary tally */
#page-listing-view .lv-channel-count {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
}
#page-listing-view .lv-channel-count.has-live {
  color: var(--green);
  background: var(--green-bg);
  border-color: rgba(21, 128, 61, 0.22);
}
/* Awaiting-approval tally — amber, gently demands attention */
#page-listing-view .lv-await-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid rgba(181, 71, 8, 0.24);
  border-radius: 999px;
  padding: 3px 11px;
}

/* ---- Post rows: aligned status ledger ------------------------------------ */
#page-listing-view .lv-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
#page-listing-view .lv-row + .lv-row { border-top: 1px solid var(--line); }
#page-listing-view .lv-row:hover { background: var(--card-2); }
#page-listing-view .lv-main { flex: 1; min-width: 0; }
#page-listing-view .lv-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---- The STATUS PILL — big, obvious, plain words (not just a dot) --------- */
#page-listing-view .lv-status {
  flex: 0 0 var(--lv-status-col);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Glyph icon replaces the plain dot: ✓ live · ⏳ waiting · ✕ failed */
#page-listing-view .lv-status i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 auto;
}
/* Live / Posted — reassuring green ✓ */
#page-listing-view .lv-status.lv-posted {
  color: var(--green);
  background: var(--green-bg);
  border-color: rgba(21, 128, 61, 0.26);
}
#page-listing-view .lv-status.lv-posted i {
  background: var(--green);
  color: #fff;
}
#page-listing-view .lv-status.lv-posted i::before { content: "✓"; }
/* Posting / Waiting — amber ⏳ */
#page-listing-view .lv-status.lv-posting,
#page-listing-view .lv-status.lv-pending {
  color: var(--amber);
  background: var(--amber-bg);
  border-color: rgba(181, 71, 8, 0.26);
}
#page-listing-view .lv-status.lv-posting i,
#page-listing-view .lv-status.lv-pending i {
  background: transparent;
  font-size: 0.9rem;
}
#page-listing-view .lv-status.lv-posting i::before,
#page-listing-view .lv-status.lv-pending i::before { content: "⏳"; }
/* Failed — clear red ✕ */
#page-listing-view .lv-status.lv-failed {
  color: var(--red);
  background: var(--red-bg);
  border-color: rgba(212, 45, 31, 0.26);
}
#page-listing-view .lv-status.lv-failed i {
  background: var(--red);
  color: #fff;
}
#page-listing-view .lv-status.lv-failed i::before { content: "✕"; }
/* Paused / Cancelled — quiet neutral */
#page-listing-view .lv-status.lv-paused,
#page-listing-view .lv-status.lv-cancelled {
  color: var(--ink-faint);
  background: var(--paper-2);
  border-color: var(--line);
}
#page-listing-view .lv-status.lv-paused i,
#page-listing-view .lv-status.lv-cancelled i {
  background: var(--ink-faint);
  color: #fff;
}
#page-listing-view .lv-status.lv-paused i::before,
#page-listing-view .lv-status.lv-cancelled i::before { content: "–"; }

/* ---- Delivery tone overrides --------------------------------------------
   The rules above colour by STATUS, so every submitted row came out green —
   including the ones sitting invisible in an admin queue. These come last
   and win: green is reserved for posts we can actually prove are published
   (server sets delivery_tone in routes/posts.js). */
#page-listing-view .lv-status.lv-tone-waiting {
  color: var(--amber);
  background: var(--amber-bg);
  border-color: rgba(181, 71, 8, 0.26);
}
#page-listing-view .lv-status.lv-tone-waiting i {
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
}
#page-listing-view .lv-status.lv-tone-waiting i::before { content: "🕐"; }

#page-listing-view .lv-status.lv-tone-bad {
  color: var(--red);
  background: var(--red-bg);
  border-color: rgba(212, 45, 31, 0.26);
}
#page-listing-view .lv-status.lv-tone-bad i { background: var(--red); color: #fff; }
#page-listing-view .lv-status.lv-tone-bad i::before { content: "!"; }

#page-listing-view .lv-status.lv-tone-info {
  color: #3B6EA5;
  background: #EAF1F8;
  border-color: rgba(59, 110, 165, 0.26);
}
#page-listing-view .lv-status.lv-tone-info i { background: transparent; color: inherit; }
#page-listing-view .lv-status.lv-tone-info i::before { content: "↻"; }

#page-listing-view .lv-status.lv-tone-idle {
  color: var(--ink-faint);
  background: var(--paper-2);
  border-color: var(--line);
}
#page-listing-view .lv-status.lv-tone-idle i { background: var(--ink-faint); color: #fff; }
#page-listing-view .lv-status.lv-tone-idle i::before { content: "–"; }

/* ---- Row body: group name, size, time, link ------------------------------ */
#page-listing-view .lv-name {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}
#page-listing-view .lv-line .hint {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
#page-listing-view .lv-line time {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
#page-listing-view .lv-note {
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--red);
}

/* "see my post ↗" / "View post ↗" links — clear blue affordance */
#page-listing-view .lv-action {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--accent);
  white-space: nowrap;
  transition: color 120ms ease;
}
#page-listing-view .lv-action:hover { color: var(--brass-dark); text-decoration: underline; }
#page-listing-view .lv-action-soft {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--amber);
  white-space: nowrap;
}
#page-listing-view a.lv-action-soft:hover { text-decoration: underline; }

/* ---- Row tints: awaiting = amber, failed = red spine --------------------- */
/* Awaiting approval rows carry .lv-action-soft ("🕐 awaiting approval …") */
#page-listing-view .lv-row:has(.lv-action-soft) {
  background: var(--amber-bg);
  border-left-color: var(--amber);
}
#page-listing-view .lv-row:has(.lv-action-soft):hover {
  background: rgba(181, 71, 8, 0.10);
}
/* Failed rows get a quiet red spine so they stand out */
#page-listing-view .lv-row:has(.lv-status.lv-failed) {
  border-left-color: var(--red);
}

/* ---- "N not live" nested disclosure -------------------------------------- */
#page-listing-view .lv-rest {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-2);
}
#page-listing-view .lv-rest > summary {
  padding: 6px 2px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
}
#page-listing-view .lv-rest > summary::-webkit-details-marker { display: none; }
#page-listing-view .lv-rest > summary::before {
  content: "▸ ";
  color: var(--ink-faint);
}
#page-listing-view .lv-rest[open] > summary::before { content: "▾ "; }
#page-listing-view .lv-rest > summary:hover { color: var(--ink-soft); }

/* ---- Empty state --------------------------------------------------------- */
#page-listing-view #lv-body .empty {
  padding: 28px 24px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
#page-listing-view #lv-body .empty strong { color: var(--accent); }

/* ---- Narrow screens ------------------------------------------------------ */
@media (max-width: 620px) {
  #page-listing-view { --lv-status-col: 118px; }
  #page-listing-view #lv-title { font-size: 1.5rem; }
  #page-listing-view .page-head-row { flex-direction: column; gap: 16px; }
  #page-listing-view .lv-actions { width: 100%; }
  #page-listing-view .lv-actions .btn { flex: 1; min-width: 120px; }
  #page-listing-view .lv-facts { grid-template-columns: 1fr; }
  #page-listing-view .lv-action,
  #page-listing-view .lv-action-soft { margin-left: 0; }
}