/* The MLS listing card, the listing picker, and the send control.
   One sheet for the three, because they are one feature and share the row and
   fact shapes; three sheets would let them drift. */

/* ---- Facts -------------------------------------------------------------
   A label/value grid rather than a table. 194 fields arrive and a listing fills
   maybe 130, so this has to read well at any length and wrap rather than
   scroll. minmax(210px, 1fr) is the width at which "Cumulative days on market"
   and its number still sit on one line. */
.mls-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 18px; margin-top: 8px; }
.mls-fact { display: flex; gap: 8px; align-items: baseline; padding: 3px 0;
  border-bottom: 1px solid var(--border); min-width: 0; }
.mls-fact:last-child { border-bottom: 0; }
.mls-fl { color: var(--muted); font-size: 12px; flex: none; min-width: 96px; }
.mls-fv { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }

/* A long value (remarks, directions, legal description) takes the full row and
   stacks, because 1,600 characters in a 1fr column is a very tall thin strip. */
.mls-fact.wide { grid-column: 1 / -1; flex-direction: column; gap: 2px; }
.mls-fact.wide .mls-fv { line-height: 1.5; }

/* Realtor-only fields are marked wherever they appear, so nobody has to
   remember which they were. */
.mls-fact.ro { background: var(--warn-bg, rgba(217, 119, 6, 0.06)); }
.mls-fl i { font-style: normal; font-size: 11px; color: #b45309; }

/* ---- The card head ---------------------------------------------------- */
.mls-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mls-num { font-variant-numeric: tabular-nums; }
.mls-price { font-size: 18px; font-weight: 600; }
.mls-synced { margin: 10px 0 0; }

/* On the deal modal this is a sub-block inside the details card rather than a
   card of its own: the modal already scrolls. */
.mls-sub { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---- History ---------------------------------------------------------
   Three columns: when, where it came from, what happened. The source column is
   the honest part of this feature and is never dropped for space, because "the
   MLS record says so" and "we watched it change" are different claims. */
.mls-history { margin-top: 14px; }
.mls-history h4 { margin: 0 0 6px; font-size: 13px; }
.mls-hist-rows { display: flex; flex-direction: column; }
.mls-hist { display: grid; grid-template-columns: 78px 46px 1fr; gap: 10px;
  align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mls-hist:last-child { border-bottom: 0; }
.mls-hist-at { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mls-hist-src { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; border-radius: 3px; padding: 1px 0; }
.mls-hist-src.read { background: rgba(100, 116, 139, 0.14); color: #475569; }
.mls-hist-src.seen { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
.mls-hist-what { min-width: 0; overflow-wrap: anywhere; }
.mls-hist-note { margin: 8px 0 0; line-height: 1.5; }

/* ---- Picking a listing ------------------------------------------------
   A button per candidate rather than a select, because the choice is made on
   four facts (number, status, address, date) and a select shows one line. */
.mls-sugg, .mls-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mls-results { max-height: 46vh; overflow-y: auto; }
.mls-sugg-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--card); cursor: pointer; font: inherit; color: inherit; }
.mls-sugg-row:hover { border-color: var(--accent, #2563eb); }
.mls-sugg-row.on { border-color: var(--accent, #2563eb); box-shadow: inset 0 0 0 1px var(--accent, #2563eb); }
.mls-sugg-row b { flex: none; font-variant-numeric: tabular-nums; }

/* ---- Sending ---------------------------------------------------------- */
/* The send control sits at the top of the ReplyCoach ribbon, so it reads as
   the first thing offered rather than as a stray button under the Send box.
   Laid out as one row: the button, then the sentence explaining it. */
.mls-send-mount {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.mls-send-mount .btn { flex: none; }
.mls-send-mount .muted { flex: 1; min-width: 180px; }
.mls-send .field { margin-bottom: 12px; }
.mls-send textarea { width: 100%; }
.mls-comp { display: flex; flex-direction: column; gap: 2px; }
/* Text or email, and where an email goes. The [hidden] rule is paired with the
   display rule on purpose: a class that sets display beats the attribute, and
   the address box would then show on a text send. */
.mls-via { display: flex; gap: 18px; flex-wrap: wrap; }
.mls-to { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mls-to[hidden] { display: none; }
.mls-to select, .mls-to input[type="email"] { width: 100%; }
/* Inside a .field every label is a bold block and every input full width
   (styles.css), which would stack each radio on top of its word. */
.mls-via .check-row, .mls-to .check-row {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 13px; font-weight: 400; color: var(--text);
}
.mls-via input[type="radio"], .mls-to input[type="checkbox"] { width: auto; margin: 0; padding: 0; border: 0; }
.mls-aud { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mls-aud .btn { flex: none; }

/* Every field, in the modal: a little tighter than the card since it is the
   whole record rather than the headline. */
.mls-allfields h4 { margin: 14px 0 0; font-size: 13px; }
.mls-allfields .mls-facts { margin-top: 4px; }

/* ---- RPR --------------------------------------------------------------- */
.rpr-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rpr-row .muted { flex-basis: 100%; }
.rpr-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rpr-list-row { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: inherit; }
.rpr-list-row:hover { border-color: var(--accent, #2563eb); }

/* ---- Banners on the MLS card -------------------------------------------
   The app's own .banner, so an expiring listing looks like every other thing
   in this app that needs attention rather than inventing a second visual
   language for urgency. */
.mls-expiry, .mls-pace { margin: 10px 0 0; }
.mls-pace-ok { margin: 8px 0 0; }

/* ---- Syndication ------------------------------------------------------- */
.mls-synd { margin-top: 14px; }
.mls-synd h4 { margin: 0 0 6px; font-size: 13px; }
.mls-synd-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.mls-synd-list li { margin-bottom: 3px; }
.mls-synd-list li.blocker b { color: #b91c1c; }
.mls-synd-list li.warn b { color: #b45309; }
.mls-synd .banner { margin: 0; }
.mls-missing { margin: 8px 0 0; line-height: 1.5; }

/* ---- The Properties filter bar -----------------------------------------
   Three rows: what to include, what is wrong with it, how to order it. They
   are separate rows rather than one wrapping line because the day filters are
   the part people read twice and they get lost between chips. */
.prop-filter { margin-bottom: 12px; }
.prop-filter .card-body { padding-top: 12px; padding-bottom: 12px; }
.pf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-row + .pf-row { margin-top: 10px; }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-chips .chip .muted { margin-left: 3px; }

.pf-days { gap: 14px; }
.pf-day { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pf-day input[type="number"] { width: 62px; }
.pf-day.check { gap: 6px; }
.pf-day.check input { margin: 0; }

.pf-row #pf-q { flex: 1; min-width: 200px; }
.pf-sort { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.pf-said { margin: 10px 0 0; line-height: 1.5; }

/* ---- Signals on a listing card -----------------------------------------
   Small, dense and quiet by default. These are on every card, so anything
   louder than this would make the page read as a wall of warnings and stop
   meaning anything. Only the 30-day-plus ones get colour. */
.lg-sigs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.lg-sig { font-size: 11px; padding: 1px 6px; border-radius: 3px;
  background: rgba(100, 116, 139, 0.12); color: #475569; white-space: nowrap; }
.lg-sig.dom { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; font-variant-numeric: tabular-nums; }
.lg-sig.ss { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.lg-sig.bad { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.lg-sig.never { background: rgba(185, 28, 28, 0.10); color: #b91c1c; font-style: italic; }

/* Contract dates on the deal modal. A disagreement between the contract and
   the deal is the row somebody has to look at, so it is marked; agreement is
   the quiet case and stays quiet. */
.cd-table .cd-clash td { background: var(--warn-wash, rgba(217, 119, 6, .07)); }
.cd-table .cd-was { text-decoration: line-through; opacity: .7; }
.cd-table th { font-weight: 600; }