/* Add-property (admin) modal — caps height so the long form fits the viewport
   with its own scrollbar (header + footer stay put; the form body scrolls).
   overscroll-behavior stops the scroll from chaining to the page behind it. */
.al-modal {
  max-width: 560px;
  width: 92%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.al-modal .modal-header,
.al-modal .modal-subtitle,
.al-modal .modal-footer { flex: 0 0 auto; }
.al-modal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Add-property (admin) modal — seller mode toggle + account radios. */
.al-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.al-seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--gray-300);
  border-radius: var(--radius-full); font-size: 0.85rem; cursor: pointer;
}
.al-radio-col { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }
.al-radio-col label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.al-divider { border: none; border-top: 1px solid var(--gray-200); margin: 16px 0; }

/* ============================================
   DASHBOARD TWO-COLUMN FEED (My Feed | Market Feed) — 2026-06-23
   ============================================ */

/* Quad layout: two side-by-side stacked columns. Each side = a scrolling
   feed box on top + a KPI box below. The feed boxes scroll independently. */
.dash-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin: 8px 0 24px;
}

@media (max-width: 900px) {
  .dash-quad { grid-template-columns: 1fr; }
}

/* Tri-column dashboard (2026-06-28): Your activity / Market feed / Market
   KPIs + Leaderboard. Collapses to 2-up on mid widths, single stack when
   narrow so the columns never get cramped. */
.dash-tri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin: 8px 0 24px;
}
@media (max-width: 1200px) {
  .dash-tri { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .dash-tri { grid-template-columns: 1fr; }
}

.dash-col,
.dash-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-box {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  padding: 14px 16px;
  min-width: 0;
}

.dash-box-head { margin-bottom: 10px; }
.dash-box-head .section-title { margin: 0; }

/* Top feed box: bounded height with its own scrollbar so left/right scroll
   independently. ~42vh keeps it to roughly a quarter-to-third of the screen. */
.dash-scroll {
  max-height: 42vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* Market feed column (2026-07-03): taller than the other dash boxes so
   3-4 property cards are visible without scrolling — there was a lot of
   dead space below the tri-column grid. */
#market-feed-col.dash-scroll {
  max-height: 74vh;
}

/* Deep-link flash (2026-07-03): dashboard activity rows that land on
   My Offers highlight the target offer card briefly. */
.is-deeplink-flash {
  animation: deeplink-flash 2.4s ease-out;
}
@keyframes deeplink-flash {
  /* translucent amber so it reads in both light and dark themes */
  0%   { background: rgba(245, 158, 11, 0.18); border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35); }
  60%  { background: rgba(245, 158, 11, 0.18); border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
  100% { background: transparent; box-shadow: none; }
}

/* The embedded market feed renders its own header; tighten it in the box. */
.dash-box-feed .dashboard-header { margin: 0 0 12px; }
.dash-box-feed .dashboard-header h1 { font-size: 1.15rem; }
.dash-box-feed .feed-live-pill { font-size: 0.7rem; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi-grid .stat-card { margin: 0; }

/* Stacked KPI tiles (2026-07-03): one metric family per tile with
   per-period rows, plus a full-width average tile at the bottom. */
.kpi-stack { text-align: left; }
.kpi-stack-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.kpi-stack-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid var(--gray-100);
}
.kpi-stack-row:last-child { border-bottom: none; }
.kpi-stack-num {
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-stack-cap { font-size: 0.72rem; color: var(--text-muted); }
.kpi-wide {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}
.kpi-wide .kpi-stack-title { margin: 0; flex: 1; }
.kpi-wide-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.myfeed-header { margin-bottom: 10px; }

.myfeed-section { margin-bottom: 18px; }

.myfeed-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.myfeed-count {
  background: var(--gray-100);
  color: var(--gray-600);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 600;
}

.myfeed-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.myfeed-row:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.myfeed-row.is-pastdue { border-left: 3px solid #ef4444; }
.myfeed-row.is-myturn { border-left: 3px solid #f59e0b; }

.myfeed-icon { font-size: 1.05rem; line-height: 1.3; }

.myfeed-body { flex: 1; min-width: 0; }

.myfeed-primary {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myfeed-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.myfeed-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.myfeed-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 20px 16px;
  text-align: center;
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-sm);
}

/* Shorter scroll cap for the leaderboard box so it doesn't tower. */
.dash-scroll-short { max-height: 32vh; }

/* Activity type-filter chips (2026-06-28) */
.myfeed-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.myfeed-chip {
  font-size: 0.76rem;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-300);
  background: var(--surface);
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.myfeed-chip:hover { background: var(--gray-50); border-color: var(--gray-400); }
.myfeed-chip.active {
  background: var(--brand-primary-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 600;
}

/* Per-type tag pill shown inline in each activity row */
.myfeed-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
}
.myfeed-tag.tag-showing { background: #e0edff; color: #1d4ed8; }
.myfeed-tag.tag-task    { background: var(--gray-100); color: var(--gray-700); }
.myfeed-tag.tag-closing { background: #dcfce7; color: #15803d; }
.myfeed-tag.tag-offer   { background: #fef3c7; color: #92600a; }
.myfeed-tag.tag-buyer   { background: #ede9fe; color: #6d28d9; }
html[data-theme="dark"] .myfeed-tag.tag-showing { background: #1e3a8a; color: #bfdbfe; }
html[data-theme="dark"] .myfeed-tag.tag-closing { background: #14532d; color: #bbf7d0; }
html[data-theme="dark"] .myfeed-tag.tag-offer   { background: #713f12; color: #fde68a; }
html[data-theme="dark"] .myfeed-tag.tag-buyer   { background: #4c1d95; color: #ddd6fe; }
.myfeed-primary { white-space: normal; }

/* Dashboard leaderboard widget rows */
.dash-lb-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dash-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.82rem;
}
.dash-lb-row:first-of-type { border-top: none; }
.dash-lb-row.is-me {
  background: var(--brand-primary-light);
  border-radius: var(--radius-sm);
  border-top-color: transparent;
}
.dash-lb-rank {
  flex: none;
  width: 22px;
  text-align: center;
  font-weight: 600;
  color: var(--gray-500);
}
.dash-lb-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-800);
}
.dash-lb-you { color: var(--brand-primary); font-weight: 600; }
.dash-lb-fill {
  flex: none;
  font-size: 0.74rem;
  color: var(--gray-600);
}
.dash-lb-comm {
  flex: none;
  font-weight: 600;
  color: var(--gray-800);
  min-width: 56px;
  text-align: right;
}
.dash-lb-gap {
  text-align: center;
  color: var(--gray-400);
  font-size: 0.7rem;
  letter-spacing: 2px;
  padding: 2px 0;
}
.dash-lb-more {
  margin-top: 10px;
  display: inline-block;
}

/* ============================================
   PROPERTY CARDS
   ============================================ */

.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.property-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  box-shadow: var(--shadow-card);
}

.property-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Whole-tile click (2026-07-17): cards + table rows on the Properties grid
   open the detail modal, so signal clickability. Scoped to the agent grid —
   other .property-card surfaces (e.g. dashboard Recent) aren't wired. */
#all-properties .property-card { cursor: pointer; }
#agent-properties-table-mode .property-table tbody tr { cursor: pointer; }

.property-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 0;
}

.property-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-available { background: var(--green-light); color: var(--green); }
.badge-sold { background: var(--gray-200); color: var(--gray-600); }
.badge-offmarket { background: var(--yellow-light); color: var(--yellow); }
.badge-info { background: var(--blue-light); color: var(--blue); }
.badge-new { background: var(--orange-light); color: var(--orange); }

.property-badges-right {
  display: flex;
  gap: 6px;
}

.mini-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.badge-new-listing {
  background: var(--green);
  color: white;
}

.badge-price-drop {
  background: var(--red);
  color: white;
}

.badge-lockbox-change {
  background: var(--orange);
  color: white;
}

.badge-availability-check {
  background: var(--blue);
  color: white;
}

.property-card-body {
  padding: 12px 18px;
}

.property-address {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 2px;
}

.property-location {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.property-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.stat strong {
  color: var(--gray-800);
}

.stat-divider {
  color: var(--gray-300);
}

.property-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--brand-primary-light);
  border-radius: var(--radius-sm);
}

/* Property card multi-select checkbox (top-left overlay).
   Subtle until hovered or checked; lets agents flag multiple properties
   for bulk share-as-text. */
.property-card { position: relative; }

.property-card-select {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}

.property-card:hover .property-card-select,
.property-card-select:has(input:checked) {
  opacity: 1;
  background: var(--surface);
}

.property-card-select input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand-primary, #2563eb);
}

/* Floating "Share N selected" bar at the bottom of the screen.
   Only present when at least one card is checked. */
.bulk-share-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  font-size: 14px;
}

.bulk-share-count {
  font-weight: 600;
  color: var(--gray-700, #374151);
  white-space: nowrap;
  margin-right: 4px;
}

.bulk-share-bar .card-btn,
.bulk-share-bar .auth-btn {
  white-space: nowrap;
}

/* Labeled price cells (TGW mastermind feedback 2026-04-29).
   Three side-by-side boxes with uppercase labels above each value.
   Replaces the inline "$X · $Y · $Z" string that buyers were misreading. */
.price-cells {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}

.price-cell {
  flex: 1;
  background: var(--brand-primary-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  min-width: 0;
}

.price-cell-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.price-cell-value {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-primary);
  white-space: nowrap;
}

/* On narrow viewports (mobile, map sidebar), shrink so $79,000 fits. */
@media (max-width: 480px) {
  .price-cell-value { font-size: 13px; }
  .price-cell-label { font-size: 9px; }
}

.property-notes {
  font-size: 0.83rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin-bottom: 6px;
}

.property-lockbox {
  font-size: 0.83rem;
  color: var(--gray-700);
  padding: 6px 10px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  margin-top: 6px;
}

.property-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 16px;
}

/* Primary CTA — Schedule showing — gets full width on top of the footer
   so it's visually clear what the main action is. */
.property-card-action-primary {
  width: 100%;
}

/* Secondary action grid — Details / Share / Email / Request edit, evenly
   distributed in 4 columns on desktop, 2 on narrow viewports. Smaller
   font + tighter padding than the primary CTA. */
.property-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.property-card-actions .card-btn {
  padding: 6px 4px;
  font-size: 12px;
  white-space: nowrap;
  min-width: 0;
}

.card-btn {
  flex: 1;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--brand-primary);
  color: white;
  transition: background 0.15s;
}

.card-btn:hover { background: var(--brand-primary-hover); }

.card-btn-secondary {
  background: var(--surface);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

.card-btn-secondary:hover { background: var(--gray-50); }

.interest-btn {
  width: 100%;
  padding: 10px;
  background: var(--brand-accent);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.interest-btn:hover { background: var(--brand-accent-hover); }

/* ============================================
   FILTERS
   ============================================ */

.filters-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 0.9rem;
}

.search-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.filter-select {
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--gray-700);
  outline: none;
  cursor: pointer;
}

.filter-select:focus {
  border-color: var(--brand-primary);
}

/* Custom multi-select (e.g. City filter) — styled to match .filter-select */
.filter-multiselect {
  position: relative;
  display: inline-block;
}

.filter-multiselect-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  min-width: 130px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--gray-700);
  outline: none;
  cursor: pointer;
}

.filter-multiselect-toggle:focus,
.filter-multiselect.open .filter-multiselect-toggle {
  border-color: var(--brand-primary);
}

.filter-multiselect-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-multiselect-label.has-selection {
  color: var(--brand-primary);
  font-weight: 600;
}

.filter-multiselect-caret {
  font-size: 0.7rem;
  opacity: 0.7;
}

.filter-multiselect-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.filter-multiselect-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
}

.filter-multiselect-actions .filter-ms-count {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.filter-multiselect-clear {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.filter-multiselect-clear:disabled {
  color: var(--gray-400);
  cursor: default;
}

.filter-multiselect-options {
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}

.filter-ms-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  font-size: 0.85rem;
  color: var(--gray-700);
  cursor: pointer;
}

.filter-ms-option:hover {
  background: var(--gray-50);
}

.filter-ms-option input {
  cursor: pointer;
  margin: 0;
}

.filter-ms-empty {
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--gray-500);
}

.filter-input {
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--gray-700);
  outline: none;
  width: 150px;
}

.filter-input:focus {
  border-color: var(--brand-primary);
}

/* Hide the spinner buttons on number inputs for a cleaner look */
.filter-input[type="number"]::-webkit-inner-spin-button,
.filter-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-input[type="number"] {
  -moz-appearance: textfield;
}

.filter-chip {
  padding: 7px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-chip:hover {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.filter-chip.active {
  background: var(--brand-primary-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Min–Max range inputs (down payment, monthly payment) */
.filter-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-input-range {
  width: 110px;
}
.filter-range-sep {
  color: var(--gray-400);
  font-size: 0.9rem;
}

/* Filter-chip help bubbles — small "?" trigger + popover tooltip.
   Shows on hover (desktop) and on tap via .tip-open (mobile). */
.filter-chip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.filter-chip-info {
  width: 16px;
  height: 16px;
  margin-left: -6px;
  margin-right: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  cursor: help;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}
.filter-chip-info:hover {
  background: var(--brand-primary);
  color: #fff;
}
.filter-chip-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 230px;
  padding: 9px 11px;
  background: var(--gray-800);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}
.filter-chip-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: var(--gray-800);
}
.filter-chip-wrap:hover .filter-chip-tip,
.filter-chip-wrap.tip-open .filter-chip-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.results-count {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 14px;
}

/* ============================================
   WHAT'S NEW FEED
   ============================================ */

.whats-new-section {
  margin-bottom: 28px;
}

.whats-new-list {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
  max-height: 240px;
  overflow-y: auto;
}

/* ============================================
   DASHBOARD FEED — 5 tabs (New Listings / Sold /
   Price Changes / Lockbox Changes / Picture Changes)
   ============================================ */

.dashboard-feed {
  margin-bottom: 28px;
}

/* Header row: title on the left, time-window dropdown on the right. */
.dashboard-feed .feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-feed .section-title {
  margin-bottom: 0;
}

.feed-window-select {
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--gray-300, #d1d5db);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--gray-700, #374151);
  cursor: pointer;
}

.feed-window-select:focus {
  outline: none;
  border-color: var(--brand-primary, #2563eb);
}

.dashboard-feed .section-subtitle {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--gray-500);
  margin-left: 4px;
}

.feed-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.feed-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}

.feed-tab:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.feed-tab.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.feed-tab-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.feed-tab-count {
  display: inline-block;
  min-width: 22px;
  padding: 0 7px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius-full);
}

.feed-tab.active .feed-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

.feed-panel {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  max-height: 320px;
  overflow-y: auto;
}

.feed-panel .empty-subtle,
.feed-panel .loading-placeholder {
  padding: 18px;
  margin: 0;
}

.feed-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.12s ease;
}

.feed-row:last-child {
  border-bottom: none;
}

.feed-row:hover {
  background: var(--gray-50);
}

.feed-row:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  background: var(--gray-50);
}

.feed-row-icon {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1.4;
}

.feed-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.feed-row-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-row-detail {
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-row-time {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--gray-400);
  white-space: nowrap;
  margin-top: 2px;
}

/* 2026-05-31: inline thumbnail for property-backed feed rows (currently
   only the new-listings bucket). Replaces the icon position; falls back
   to the icon at runtime when the image fails to load. */
.feed-row-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;            /* matches .feed-row-icon when fallback fires */
  line-height: 1;
}

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

.feed-row-thumb-failed {
  background: var(--gray-100);
}

/* Slightly tighter vertical center when the row carries a thumb so the
   image baseline sits in line with the title + detail block. */
.feed-row-with-thumb {
  align-items: center;
}

@media (max-width: 480px) {
  .feed-row-thumb { width: 40px; height: 40px; }
}

html[data-theme="dark"] .feed-row-thumb,
html[data-theme="dark"] .feed-row-thumb-failed {
  background: rgba(15, 23, 42, 0.6);
}

/* ============================================
   LEADS & AGENT CARDS
   ============================================ */

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

.lead-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-card);
  /* Whole-card click opens the buyer profile (2026-07-18). */
  cursor: pointer;
}

.lead-card:hover { border-color: var(--brand-primary); }

.lead-info h3 { font-size: 1rem; margin-bottom: 4px; }
.lead-info p { font-size: 0.85rem; color: var(--gray-600); }
.lead-contact { color: var(--gray-500) !important; font-size: 0.8rem !important; }
.lead-message {
  font-style: italic;
  color: var(--gray-500) !important;
  margin-top: 6px;
}

.lead-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.lead-status {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.status-new { background: var(--green-light); color: var(--green); }
.status-pending { background: var(--yellow-light); color: var(--yellow); }
.status-contacted { background: var(--blue-light); color: var(--blue); }
.status-complete { background: var(--gray-200); color: var(--gray-600); }

.lead-time { font-size: 0.78rem; color: var(--gray-400); }

.lead-line {
  font-size: 0.85rem !important;
  color: var(--gray-700) !important;
  margin-top: 4px;
}

.lead-line-label {
  color: var(--gray-500);
  font-weight: 500;
  margin-right: 4px;
}

/* Match toggle on lead cards — shows "N matching properties" with click-to-expand */
.match-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--brand-primary);
  background: var(--brand-primary-light);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.15s ease;
}

.match-toggle:hover {
  background: rgba(37, 99, 235, 0.18);
}

.match-toggle-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}

.match-toggle.open .match-toggle-caret {
  transform: rotate(180deg);
}

.lead-matches {
  margin-top: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  max-height: 360px;
  overflow-y: auto;
}

.match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  cursor: pointer;
  transition: background 0.12s ease;
}

.match-row:last-child {
  border-bottom: none;
}

.match-row:hover {
  background: var(--surface);
}

.match-row:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  background: var(--surface);
}

.match-row-body {
  flex: 1 1 auto;
  min-width: 0;
}

.match-row-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-row-sub {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 1px;
}

.match-row-price {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--brand-primary);
  font-weight: 600;
  white-space: nowrap;
}

.status-qualified { background: var(--blue-light); color: var(--blue); }
.status-matched { background: var(--violet-bg); color: var(--violet-text); }
.status-closed { background: var(--gray-200); color: var(--gray-600); }

/* ============================================
   ADD BUYER LEAD MODAL — form styles reusable for any modal form
   ============================================ */

.dashboard-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-header-with-action .primary-btn {
  flex-shrink: 0;
}

/* primary-btn outside auth context — give it standalone padding/sizing */
.dashboard-header-with-action .primary-btn,
.modal-actions .primary-btn {
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--brand-primary);
  color: white;
  transition: background 0.15s ease;
}

.dashboard-header-with-action .primary-btn:hover,
.modal-actions .primary-btn:hover {
  background: var(--brand-primary-hover);
}

.dashboard-header-with-action .primary-btn:disabled,
.modal-actions .primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-card-form {
  max-width: 720px;
  width: 90%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.form-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.form-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid-2 {
  grid-template-columns: 1fr 1fr;
}

.form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
  .form-grid-2,
  .form-grid-3 {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field > span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--gray-900);
  background: var(--surface);
  outline: none;
  font-family: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brand-primary);
}

.form-field textarea {
  resize: vertical;
  min-height: 60px;
}

.form-hint {
  font-size: 0.74rem;
  color: var(--gray-400);
}

.form-checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
}

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--gray-700);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.agents-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 2026-05-31: pending-review banner at top of Agent Manager so admins
   can't miss self-serve trainee signups awaiting approval. */
.agent-pending-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning);
  border-left: 4px solid #d97706;
  border-radius: 10px;
}
.agent-pending-banner-icon {
  font-size: 22px;
  line-height: 1;
}
.agent-pending-banner-body {
  font-size: 14px;
  line-height: 1.4;
}
.agent-pending-banner-body strong {
  font-weight: 700;
  color: #7c2d12;
}

.agent-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agent-info .user-initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.agent-info h3 { font-size: 0.95rem; margin-bottom: 1px; }
.agent-info p { font-size: 0.83rem; color: var(--gray-500); }

.agent-group {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--blue-light);
  color: var(--blue);
  margin-top: 2px;
}

/* Reports-to line on filler/trainee agent cards — small, muted; sits
   just below the permission-group chip. Shows the team lead this user
   reports to (filled in by admin via the Assign-to dropdown). */
.agent-reports-to {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

.agent-reports-to::before {
  content: '↳ ';
  margin-right: 2px;
  color: var(--text-muted, #94a3b8);
}

.agent-actions {
  display: flex;
  gap: 12px;
}

/* ============================================
   PERMISSION GROUPS
   ============================================ */

.groups-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.group-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.group-stat {
  font-size: 0.8rem;
  color: var(--gray-500);
}

.group-permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.perm-chip {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.perm-enabled {
  background: var(--green-light);
  color: var(--green);
}

.perm-disabled {
  background: var(--gray-100);
  color: var(--gray-400);
}

/* ============================================
   ACTIVITY LOG
   ============================================ */

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.activity-item:hover {
  background: var(--gray-50);
}

.activity-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.activity-content p {
  font-size: 0.9rem;
  color: var(--gray-700);
}

.activity-time {
  font-size: 0.78rem;
  color: var(--gray-400);
}

/* ============================================
   PUBLIC VIEW
   ============================================ */

.public-container {
  min-height: 100vh;
  background: var(--gray-50);
}

.public-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--gray-200);
}

.public-login-btn {
  padding: 8px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  transition: all 0.15s;
}

.public-login-btn:hover {
  background: var(--brand-primary);
  color: white;
}

.public-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* 2026-06-14 — hero collapsed to a thin bar so the map/list split fills the
   screen (Cameron: make the map + cards much bigger, like InvestorLift). */
.public-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
}

.public-hero-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-600);
}

.public-hero .public-cta-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.public-cta-btn {
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--brand-primary);
  color: white;
  transition: background 0.15s ease;
}

.public-cta-btn:hover {
  background: var(--brand-primary-hover);
}

.public-cta-hint {
  font-size: 0.85rem;
  color: var(--gray-500);
}

.public-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.public-filters .search-input {
  flex: 2;
  min-width: 240px;
}

/* ============================================
   SELLER DASHBOARD
   ============================================ */

.seller-properties {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.seller-property-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  /* Session 4 rewrite: hero runs edge-to-edge; padding lives on .seller-card-body */
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.seller-property-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.seller-property-header h2 {
  font-size: 1.25rem;
}

.seller-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin-bottom: 24px;
}

.pipeline-tracker {
  margin: 24px 0;
}

.pipeline-tracker h3 {
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: var(--gray-700);
}

.pipeline-stages {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  text-align: center;
  position: relative;
}

.stage-marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-bottom: 6px;
  transition: all 0.2s;
}

.pipeline-stage.stage-complete .stage-marker {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green);
}

.pipeline-stage.stage-current .stage-marker {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: white;
  box-shadow: 0 0 0 4px var(--brand-primary-light);
}

.stage-label {
  font-size: 0.68rem;
  color: var(--gray-500);
  line-height: 1.3;
  max-width: 80px;
}

.pipeline-stage.stage-complete .stage-label,
.pipeline-stage.stage-current .stage-label {
  color: var(--gray-700);
  font-weight: 500;
}

/* Pipeline history timeline below the stage tracker. Shows the property's
   actual journey in time (most recent first). Each row is a stage event
   with optional notes the agent left. */
.pipeline-timeline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}

.pipeline-timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

.pipeline-timeline-row + .pipeline-timeline-row {
  border-top: 1px dashed var(--gray-100, #f3f4f6);
}

.pipeline-timeline-icon {
  flex: 0 0 24px;
  font-size: 16px;
  line-height: 1.4;
}

.pipeline-timeline-body { flex: 1; min-width: 0; }

.pipeline-timeline-title {
  font-size: 13px;
  color: var(--gray-900, #111827);
  font-weight: 500;
}

.pipeline-timeline-when {
  color: var(--gray-500, #6b7280);
  font-weight: 400;
  font-size: 12px;
}

.pipeline-timeline-note {
  margin-top: 3px;
  font-size: 12px;
  color: var(--gray-600, #4b5563);
  background: var(--gray-50, #f9fafb);
  padding: 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--gray-300, #d1d5db);
}

.pipeline-notes {
  background: var(--blue-light);
  border: 1px solid var(--brand-primary-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.pipeline-notes h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 4px;
}

.pipeline-notes p {
  font-size: 0.9rem;
  color: var(--gray-700);
}

.seller-actions {
  display: flex;
  gap: 12px;
}

.seller-actions .auth-btn {
  width: auto;
  padding: 10px 20px;
}

/* ============================================
   SELLER DASHBOARD — SESSION 4 (April 23, 2026)
   New layout for the rebuilt seller.js: hero photo,
   structured address + price, pipeline, leads list,
   and four request buttons.
   ============================================ */

/* Photo hero */
.seller-card-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
  display: block;
}

.seller-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.seller-card-hero-empty,
.seller-card-hero-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gray-400);
  font-size: 0.95rem;
}

.seller-card-hero-empty .hero-fallback-icon,
.seller-card-hero-failed .hero-fallback-icon {
  font-size: 1.8rem;
}

/* External-album hero (link) */
.seller-card-hero-link { text-decoration: none; color: inherit; }

.seller-card-hero-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.78rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
}

.seller-card-hero-link:hover .seller-card-hero-overlay {
  background: rgba(0, 0, 0, 0.85);
}

/* Body — everything below the hero */
.seller-card-body {
  padding: 24px 26px 28px;
}

.seller-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}

.seller-card-address h2 {
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.2;
}

.seller-card-loc {
  font-size: 0.88rem;
  color: var(--gray-500);
  margin: 4px 0 0;
}

.seller-card-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-primary);
  margin: 14px 0 4px;
}

.seller-card-section {
  margin-top: 22px;
}

.seller-card-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.seller-card-notes {
  font-size: 0.88rem;
  color: var(--gray-700);
  background: var(--blue-light);
  border: 1px solid var(--brand-primary-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 12px;
}

/* Leads list (per property) */
.seller-leads-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-lead-row {
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

.seller-lead-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-900);
}

.seller-lead-msg {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-top: 2px;
  font-style: italic;
}

.seller-lead-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--gray-400);
}

.seller-lead-status {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  color: var(--gray-700);
  text-transform: capitalize;
}

.seller-lead-status.status-new {
  background: var(--brand-primary-light);
  border-color: transparent;
  color: var(--brand-primary);
}

.seller-empty-mini {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: 6px 0 0;
}

/* Request buttons row */
.seller-request-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.seller-request-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-800);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}

.seller-request-btn:hover {
  background: var(--gray-50);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

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

/* ============================================
   SELLER REQUEST MODAL
   ============================================ */

.seller-request-modal {
  max-width: 520px;
  width: calc(100% - 32px);
  position: relative;
  /* 2026-05-31 review #2: Cameron had to zoom out to see the modal title
     because content + 32px top padding pushed the header off-screen on
     standard zoom. Cap the modal height, scroll the body, tighten the top
     padding. The .modal-close-floating × stays in place because it's
     position:absolute inside .seller-request-modal. */
  padding: 20px 28px 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.seller-request-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.seller-request-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.seller-request-header h2 {
  font-size: 1.25rem;
  margin: 0 0 2px;
}

.seller-request-sub {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: 0;
}

.seller-request-intro {
  font-size: 0.92rem;
  color: var(--gray-600);
  margin: 8px 0 18px;
  line-height: 1.5;
}

.seller-request-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seller-request-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seller-request-field > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-700);
}

.seller-request-field input,
.seller-request-field textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.seller-request-field input:focus,
.seller-request-field textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.seller-request-field textarea {
  resize: vertical;
  min-height: 72px;
}

.seller-request-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.seller-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* 2026-05-31: "currently on file" prefill panel above the price /
   lockbox request forms so sellers see the existing values. */
.seller-request-prefill {
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 14px;
}
.seller-request-prefill-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
}
.seller-request-prefill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.seller-request-prefill-chip {
  font-size: 0.84rem;
  color: var(--text-primary, #111827);
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 999px;
}

/* 2026-05-31: quick-pick chips for the status-update textarea. */
.seller-request-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.seller-request-chip {
  appearance: none;
  border: 1px solid var(--brand-primary-soft, #bfdbfe);
  background: var(--surface-accent-soft, #eff6ff);
  color: var(--brand-primary, #1a56db);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background 0.15s ease, transform 0.05s ease;
}
.seller-request-chip:hover {
  background: var(--brand-primary-soft, #dbeafe);
}
.seller-request-chip:active {
  transform: translateY(1px);
}

.seller-request-actions .auth-btn {
  width: auto;
  padding: 10px 20px;
}

/* 2026-05-31: new_pictures secondary upload section. Renders below the
   album-link field with a thin "or" divider so both paths feel parallel. */
.seller-request-divider {
  position: relative;
  height: 1px;
  background: var(--border-subtle, #e5e7eb);
  margin: 14px 0 12px;
}
.seller-request-divider::before {
  content: 'OR';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface, #ffffff);
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
}
.seller-request-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.seller-request-upload input[type="file"] {
  padding: 6px 0;
  font-size: 0.9rem;
}
.seller-request-photo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seller-request-photo-list:empty { display: none; }
.seller-request-photo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: 8px;
  font-size: 0.85rem;
}
.seller-request-photo-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-request-photo-size {
  flex: 0 0 auto;
  color: var(--text-muted, #6b7280);
  font-size: 0.78rem;
}
.seller-request-photo-remove {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.seller-request-photo-remove:hover {
  background: var(--surface-alt, #f1f5f9);
  color: var(--danger-text);
}

/* Thumb strips — used by both the seller's own request history rows and
   the admin request queue. Same shape; different parent class so the
   per-context styling can diverge later without conflict. */
.seller-request-row-thumbs,
.request-uploaded-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.seller-request-row-thumb,
.request-uploaded-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-alt, #f1f5f9);
  border: 1px solid var(--border-subtle, #e5e7eb);
}
.seller-request-row-thumb img,
.request-uploaded-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.seller-request-row-thumbmore,
.request-uploaded-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--surface-alt, #f1f5f9);
  border: 1px dashed var(--border-subtle, #d1d5db);
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
}

html[data-theme="dark"] .seller-request-divider::before {
  background: rgba(15, 23, 42, 0.9);
}
html[data-theme="dark"] .seller-request-photo-item,
html[data-theme="dark"] .seller-request-row-thumb,
html[data-theme="dark"] .request-uploaded-thumb,
html[data-theme="dark"] .seller-request-row-thumbmore,
html[data-theme="dark"] .request-uploaded-more {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(148, 163, 184, 0.2);
}

/* Seller-side: their own past requests shown on each property card */
.seller-requests-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seller-request-row {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

.seller-request-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.seller-request-row-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-900);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seller-request-row-value {
  font-size: 0.88rem;
  color: var(--gray-700);
  margin-top: 2px;
}

.seller-request-row-notes {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-style: italic;
  margin-top: 2px;
}

.seller-request-row-reply {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--green-light);
  border: 1px solid var(--success-bg);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--gray-700);
}

/* 2026-05-31 review #2 — reply thread (seller view) */
.seller-request-row-thread {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--green-light);
  border: 1px solid var(--success-bg);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--gray-700);
}
.seller-request-row-thread-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-top: 1px dashed var(--success-bg);
}
.seller-request-row-thread-row:first-of-type { border-top: 0; padding-top: 4px; }
.seller-request-row-thread-meta {
  font-size: 0.72rem;
  color: var(--gray-500);
}
.seller-request-row-thread-msg { color: var(--gray-700); }

.seller-request-row-meta {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--gray-400);
}

/* Admin request-card addition: property address line */
.lead-property {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 2px;
}

/* ============================================
   SELLER REQUESTS — STATUS MANAGEMENT (admin)
   Session 4 (April 23, 2026)
   ============================================ */

.request-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--gray-700);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.filter-chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.filter-chip.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

.filter-chip-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius-full);
}

.filter-chip.active .filter-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Request cards — closed-state dimming */
.request-card.is-closed {
  opacity: 0.65;
}

.request-card.is-closed:hover {
  opacity: 1;
}

/* Source chip on request cards — small pill next to the title that
   tags each request as coming from a seller or a filler. Lets the
   unified Requests view read at a glance who submitted what. */
.request-source-chip {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: 2px;
}

.request-source-seller {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-bg);
}

.request-source-filler {
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--brand-primary-soft);
}

/* 2026-05-31 review #2 — property highlights row above the request body */
.request-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.request-highlight {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.75rem;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-700);
}
.request-chip-green { background: var(--green-light); border-color: var(--success-bg); color: var(--success-text); }
.request-chip-red   { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.request-chip-neutral { background: var(--gray-100); border-color: var(--gray-200); }

/* Admin's reply note on the card */
.request-admin-note {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--green-light);
  border: 1px solid var(--success-bg);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--gray-700);
}

/* 2026-05-31 review #2 — reply thread (admin view) */
.request-admin-thread {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--green-light);
  border: 1px solid var(--success-bg);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--gray-700);
}
.request-admin-thread-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  border-top: 1px dashed var(--success-bg);
}
.request-admin-thread-row:first-of-type { border-top: 0; padding-top: 4px; }
.request-admin-thread-meta {
  font-size: 0.72rem;
  color: var(--gray-500);
}
.request-admin-thread-msg { color: var(--gray-700); }

/* Action buttons */
.request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 8px;
}

.request-action-btn {
  width: auto !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

.auth-btn.danger-btn {
  background: var(--surface);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

.auth-btn.danger-btn:hover {
  background: var(--danger-bg);
  border-color: #f87171;
}

/* Inline response form */
.request-response-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}

.request-response-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--gray-900);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 48px;
}

.request-response-form textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.request-response-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.request-response-actions .auth-btn {
  width: auto;
  padding: 6px 14px;
  font-size: 0.82rem;
}

/* Status chip color variants */
.lead-status.status-pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}
.lead-status.status-in_progress {
  background: var(--info-bg);
  color: var(--info-text);
}
.lead-status.status-done {
  background: var(--green-light);
  color: var(--success-text);
}
.lead-status.status-declined {
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* ============================================
   RESPONSIVE — DASHBOARDS
   ============================================ */

@media (max-width: 768px) {
  .properties-grid {
    grid-template-columns: 1fr;
  }

  .lead-card {
    flex-direction: column;
    gap: 12px;
  }

  .lead-meta {
    flex-direction: row;
    align-items: center;
  }

  .agent-card {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .filters-bar .filter-group {
    flex-direction: column;
  }

  .pipeline-stages {
    gap: 2px;
  }

  .pipeline-stage {
    min-width: 60px;
  }

  .stage-marker {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }

  .seller-actions {
    flex-direction: column;
  }

  .public-hero h1 {
    font-size: 1.6rem;
  }
}

/* ============================================
   PUBLIC CARD — photo on top (Step 4)
   ============================================ */

.public-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
}

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

.public-card-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gray-400);
  font-size: 0.85rem;
}

.public-property-card .property-card-body {
  padding: 14px 18px 4px;
}

/* Interest modal textarea reset */
.modal-card textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--gray-800);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-card textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-light);
}

/* Pipeline-stage badges on property cards. Color-coded per stage so a
   glance across the property grid surfaces which deals are in motion.
   Only stages 4+ render (showing scheduled and beyond). */
.badge-stage {
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-stage-4 { background: var(--info-bg); color: var(--info-text); }   /* Showing scheduled — blue */
.badge-stage-5 { background: #ccfbf1; color: #115e59; }   /* Showing completed — teal */
.badge-stage-6 { background: var(--warning-bg); color: var(--warning-text); }   /* Offer received — amber */
.badge-stage-7 { background: #fed7aa; color: #9a3412; }   /* Down payment collected — orange */
.badge-stage-8 { background: #e9d5ff; color: #6b21a8; }   /* Paperwork executed — purple */
.badge-stage-9 { background: #bbf7d0; color: #14532d; }   /* Closed — dark green */

/* Dark-mode variants for the stage families that don't ride the shared
   status tokens (teal/orange/purple/green ramps). All pairs ≥8.5:1.
   2026-06-06 a11y sweep — stages 4 + 6 already flip via --info/--warning. */
html[data-theme="dark"] .badge-stage-5 { background: #0f2e2a; color: #5eead4; }
html[data-theme="dark"] .badge-stage-7 { background: #2e1a0a; color: #fdba74; }
html[data-theme="dark"] .badge-stage-8 { background: #2a1d4d; color: #d8b4fe; }
html[data-theme="dark"] .badge-stage-9 { background: #0d2c22; color: #86efac; }

/* "Coming up" showings on the agent dashboard — today + tomorrow.
   Compact rows with time on the left, address+buyer in the middle, and
   a mark-complete shortcut on the right. */
.coming-up-section {
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
}

.coming-up-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.coming-up-group { margin-top: 10px; }
.coming-up-group:first-of-type { margin-top: 0; }

.coming-up-group-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500, #6b7280);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.coming-up-group-count {
  background: var(--gray-100, #f3f4f6);
  color: var(--gray-700, #374151);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.coming-up-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.coming-up-row:hover { background: var(--gray-50, #f9fafb); }
.coming-up-row + .coming-up-row { border-top: 1px solid var(--gray-100, #f3f4f6); }

.coming-up-time {
  flex: 0 0 80px;
  font-weight: 600;
  color: var(--gray-900, #111827);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.coming-up-body { flex: 1; min-width: 0; }
.coming-up-address {
  font-size: 14px;
  color: var(--gray-900, #111827);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coming-up-buyer {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  margin-top: 2px;
}

.coming-up-action { flex-shrink: 0; }

/* Icon-only variant — used by the "Add to Google Calendar" button on
   each Coming-up row. Keeps the row tight so the address still gets
   most of the horizontal space. */
.coming-up-action-icon {
  padding: 6px 9px;
  min-width: 0;
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 600px) {
  .coming-up-row { flex-wrap: wrap; gap: 8px; }
  .coming-up-time { flex-basis: auto; }
  .coming-up-action { width: 100%; }
  /* On phones the icon button can stay small, sitting next to "Mark
     complete" instead of forcing its own row. */
  .coming-up-action-icon { width: auto; }
}

/* Past-due showings banner — yellow callout on the agent dashboard.
   Yellow rather than red so it's a nudge, not a panic. Click anywhere
   on the banner navigates to My Showings. */
.past-due-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 24px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.past-due-banner:hover {
  background: #fde68a;
}

.past-due-banner:active {
  transform: scale(0.998);
}

.past-due-banner:focus {
  outline: 2px solid var(--warning);
  outline-offset: 2px;
}

.past-due-icon {
  font-size: 22px;
  line-height: 1;
}

.past-due-text {
  flex: 1;
  color: var(--warning-text);
  font-size: 14px;
}

.past-due-text strong {
  color: var(--warning-text);
}

.past-due-cta {
  color: var(--warning-text);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* Comms kill-switch banner — admin/team-lead only. Same shape as the
   past-due banner but in a calmer slate tone (this is not a panic,
   it's a steady-state reminder while we're pre-launch). */
.comms-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 20px;
  background: var(--blue-light);
  border: 1px solid var(--blue);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.comms-banner:hover { filter: brightness(0.97); }
.comms-banner:active { transform: scale(0.998); }
.comms-banner:focus { outline: 2px solid var(--blue); outline-offset: 2px; }

.comms-banner-icon { font-size: 20px; line-height: 1; }
.comms-banner-text { flex: 1; color: var(--text); font-size: 14px; }
.comms-banner-text strong { color: var(--text); }
.comms-banner-cta {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* ============================================
   MOBILE QA pass (TGW mastermind 2026-04-29: 87% of users on mobile)
   ============================================ */
@media (max-width: 600px) {
  /* Property card footer — secondary actions go to a 2-column grid on
     narrow viewports so each button has room to breathe. Primary CTA
     (Schedule showing) keeps full width. */
  .property-card-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bulk share bar — respect iOS safe area, and give it more breathing
     room from the bottom edge. */
  .bulk-share-bar {
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 8px;
    right: 8px;
    transform: none;
    justify-content: space-between;
    border-radius: 14px;
  }

  /* Map view — very small viewports need a tighter floor than 600px,
     and the public hero plus filter bar can eat a lot of vertical space. */
  .map-view {
    min-height: 480px;
  }
  .map-view-public {
    height: calc(100vh - 160px);
  }

  /* Lead cards — the metadata grid (Where/Budget/Looking for) was getting
     cramped. Stack it. */
  .lead-card .lead-info p { line-height: 1.5; }

  /* Public hero — the headline was a touch too large on narrow phones,
     pushing the CTA below the fold. */
  .public-hero h1 { font-size: 1.6rem; }
  .public-hero p { font-size: 0.95rem; }
  .public-hero { padding: 24px 0 18px; }

  /* Property card multi-select checkbox — bump up the tap target on touch
     so it's easier to hit. */
  .property-card-select {
    width: 32px;
    height: 32px;
  }

  /* Map filters bar — let the inner toggle (Split/Map/List) sit on its
     own row instead of getting squeezed off-screen. */
  .map-view-toggle { margin-left: 0; }
}

/* Team leaderboard — small "top fillers this week" widget on the
   admin/team-lead dashboard. Same card chrome as the Coming-up section
   so the dashboard reads as one consistent stack of widgets. */
.team-leaderboard {
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 12px;
}

.leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
}

.leaderboard-row + .leaderboard-row {
  border-top: 1px solid var(--gray-100, #f3f4f6);
}

.leaderboard-medal {
  flex: 0 0 32px;
  font-size: 22px;
  text-align: center;
  line-height: 1;
}

.leaderboard-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700, #374151);
  font-variant-numeric: tabular-nums;
  background: var(--gray-100, #f3f4f6);
  padding: 4px 10px;
  border-radius: 12px;
}

/* ============================================
   PIPELINE MANAGER — Kanban board
   ============================================ */

/* ============================================
   STATE OF THE UNION — Tools section
   ============================================ */

.sou-tools {
  margin-top: 32px;
}

.sou-tool-card {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
}

.sou-tool-body {
  flex: 1 1 280px;
  min-width: 0;
}

.sou-tool-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900, #0f172a);
}

.sou-tool-desc {
  font-size: 12.5px;
  color: var(--gray-600, #475569);
  margin-top: 2px;
}

.sou-tool-result {
  font-size: 13px;
  margin-top: 10px;
  min-height: 1.2em;
}

.sou-tool-result-pending { color: var(--gray-500, #64748b); }
.sou-tool-result-ok      { color: var(--gray-800, #1e293b); }
.sou-tool-result-err     { color: var(--red, #dc2626); }
.sou-tool-result-muted   { color: var(--gray-500, #64748b); }

.sou-tool-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.sou-tool-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============================================
   ACTION ITEMS — daily-driver dashboard section
   ============================================ */

.action-items {
  margin: 20px 0;
}

.action-items-header {
  margin-bottom: 12px;
}

.action-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.action-card {
  background: var(--surface);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-left: 4px solid var(--gray-300, #cbd5e1);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.05s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  outline: none;
}

.action-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.action-card:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-primary-light, #e8effc);
}

.action-card-waiting { border-left-color: #f59e0b; }
.action-card-stale   { border-left-color: var(--danger-text); }
.action-card-stuck   { border-left-color: #8b5cf6; }

.action-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-card-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.action-card-titleblock {
  flex: 1;
  min-width: 0;
}

.action-card-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900, #0f172a);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.action-card-title {
  font-size: 13px;
  color: var(--gray-600, #475569);
  font-weight: 500;
  margin-top: 2px;
}

.action-card-preview {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--gray-700, #334155);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-card-preview li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 12px;
  position: relative;
}

.action-card-preview li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--gray-400, #94a3b8);
}

.action-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary, #1a56db);
  margin-top: auto;
}

@media (max-width: 600px) {
  .action-items-grid {
    grid-template-columns: 1fr;
  }
}

.pipeline-stuck-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: 10px;
  color: var(--warning-text);
  font-size: 13.5px;
  line-height: 1.4;
}

.pipeline-stuck-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.pipeline-stuck-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.pipeline-stuck-action {
  flex-shrink: 0;
  padding: 6px 14px;
  background: #f59e0b;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, transform 0.05s;
}

.pipeline-stuck-action:hover {
  background: #d97706;
}

.pipeline-stuck-action:active {
  transform: scale(0.97);
}

.pipeline-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.pipeline-search-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--gray-900, #0f172a);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pipeline-search-input:focus {
  outline: none;
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 3px var(--brand-primary-light, #e8effc);
}

.pipeline-filter-select {
  flex: 0 1 180px;
  padding: 8px 10px;
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--gray-700, #334155);
  cursor: pointer;
}

.pipeline-filter-select:focus {
  outline: none;
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 3px var(--brand-primary-light, #e8effc);
}

.pipeline-filter-clear {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 8px;
  font-size: 13px;
  color: var(--gray-700, #334155);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pipeline-filter-clear:hover {
  background: var(--gray-50, #f8fafc);
  border-color: var(--gray-400, #94a3b8);
}

.pipeline-filter-clear.hidden {
  display: none;
}

.pipeline-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: flex-start;
  scroll-snap-type: x proximity;
}

.kanban-column {
  flex: 0 0 280px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
  scroll-snap-align: start;
  transition: background 0.15s, border-color 0.15s;
}

.kanban-column-drop-target {
  background: var(--brand-primary-light, #e8effc);
  border-color: var(--brand-primary, #1a56db);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-800, #1e293b);
}

.kanban-stage-icon {
  font-size: 16px;
  line-height: 1;
}

.kanban-stage-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-stage-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  background: var(--gray-200, #e2e8f0);
  color: var(--gray-700, #334155);
  padding: 2px 8px;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}

.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}

.kanban-empty {
  color: var(--gray-400, #94a3b8);
  font-size: 12px;
  text-align: center;
  padding: 14px 8px;
  border: 1px dashed var(--gray-200, #e2e8f0);
  border-radius: 8px;
  background: var(--surface);
}

.kanban-card {
  background: var(--surface);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s, transform 0.05s, border-color 0.15s;
  user-select: none;
  outline: none;
}

.kanban-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  border-color: var(--brand-primary, #1a56db);
}

.kanban-card:focus-visible {
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 3px var(--brand-primary-light, #e8effc);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card-dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.kanban-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.kanban-time-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gray-100, #f1f5f9);
  color: var(--gray-600, #475569);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kanban-time-badge-stale {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.kanban-card-address {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900, #0f172a);
  line-height: 1.3;
  word-wrap: break-word;
}

.kanban-card-loc {
  font-size: 12px;
  color: var(--gray-500, #64748b);
  margin-top: 2px;
}

.kanban-card-price {
  font-size: 12px;
  color: var(--gray-700, #334155);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.kanban-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--gray-200, #e2e8f0);
}

.kanban-chevron {
  flex: 0 0 28px;
  width: 28px;
  height: 24px;
  padding: 0;
  background: var(--gray-100, #f1f5f9);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--gray-700, #334155);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.05s;
}

.kanban-chevron:hover {
  background: var(--brand-primary-light, #e8effc);
  border-color: var(--brand-primary, #1a56db);
  color: var(--brand-primary, #1a56db);
}

.kanban-chevron:active {
  transform: scale(0.95);
}

.kanban-chevron:focus-visible {
  outline: none;
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 2px var(--brand-primary-light, #e8effc);
}

.kanban-chevron-spacer {
  flex: 0 0 28px;
}

/* Tighter chrome on mobile — full-width stacked columns instead of horizontal scroll */
@media (max-width: 768px) {
  .pipeline-board {
    flex-direction: column;
    overflow-x: visible;
  }
  .kanban-column {
    flex: 1 1 auto;
    max-height: none;
    width: 100%;
  }
  .kanban-column-body {
    max-height: 320px;
  }
}

/* ============================================
   LEADERBOARD — full-page version of the dashboard teaser.
   Period selector + stat cards + sortable table. Top 10 by fillings
   are named; everyone else is anonymized. Viewer's row is highlighted.
   ============================================ */

.lb-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 8px 0 24px;
}

.lb-stat-card {
  background: var(--surface);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px;
}

.lb-stat-label {
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.lb-stat-value {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 700;
  color: var(--gray-900, #111827);
  line-height: 1.1;
}

.lb-table-wrap {
  background: var(--surface);
  border: 1px solid var(--gray-200, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  /* Allow the table to scroll horizontally on small screens without
     breaking the rounded corners of the wrapper. */
  overflow-x: auto;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.lb-th {
  position: sticky;
  top: 0;
  background: var(--gray-50, #f9fafb);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600, #4b5563);
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200, #e2e8f0);
  white-space: nowrap;
}

.lb-th-sortable {
  cursor: pointer;
  user-select: none;
}

.lb-th-sortable:hover {
  color: var(--gray-900, #111827);
  background: var(--gray-100, #f3f4f6);
}

.lb-th-active {
  color: var(--brand-primary, #2563eb);
}

.lb-th-arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
}

.lb-row {
  transition: background-color 0.12s ease;
}

.lb-row + .lb-row {
  border-top: 1px solid var(--gray-100, #f3f4f6);
}

.lb-row:hover {
  background: var(--gray-50, #f9fafb);
}

.lb-row-me {
  background: var(--info-bg); /* light blue */
  font-weight: 600;
}

.lb-row-me:hover {
  background: var(--info-bg);
}

.lb-row-anon .lb-td-name {
  color: var(--gray-500, #6b7280);
  font-style: italic;
}

.lb-td {
  padding: 10px 12px;
  vertical-align: middle;
}

.lb-td-rank {
  width: 44px;
  text-align: center;
  font-weight: 600;
  color: var(--gray-700, #374151);
}

.lb-td-name {
  text-align: left;
  color: var(--gray-900, #111827);
}

.lb-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--gray-800, #1f2937);
}

.lb-you {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--brand-primary, #2563eb);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lb-muted {
  color: var(--gray-400, #9ca3af);
}

.lb-footnote {
  margin-top: 16px;
  font-size: 12px;
  color: var(--gray-500, #6b7280);
  line-height: 1.5;
}

@media (max-width: 640px) {
  /* Hide the speed + conversion columns on phones — keep the headline
     fillings/leads/showings/$ columns. The horizontal scroll on the
     wrapper still lets users get to them if they care. */
  .lb-table .lb-th:nth-child(6),
  .lb-table .lb-th:nth-child(7),
  .lb-table .lb-td:nth-child(6),
  .lb-table .lb-td:nth-child(7) {
    display: none;
  }
}

/* ============================================
   MY PROFILE — entity profiles (personal / LLC / trust).
   List of entity cards + add/edit modal. Used by both sellers and
   fillers via the same view (see profile.js).
   ============================================ */

/* Seller dashboard header — the new layout splits the title from the
   "My Profile" link button. Wraps on small screens so the button drops
   below the heading rather than crashing into it. */
.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.seller-profile-link {
  flex-shrink: 0;
  white-space: nowrap;
}

.profile-back-link {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.profile-back-link:hover {
  color: var(--brand-primary, #1a56db);
}

.profile-actions {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0 20px;
}

.profile-entities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.profile-empty {
  grid-column: 1 / -1;
}

.profile-entity-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.profile-entity-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.profile-entity-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.profile-entity-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.profile-entity-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #1e293b);
  word-wrap: break-word;
}

.profile-entity-type {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.profile-entity-default-badge {
  background: var(--brand-primary-light, #e8effc);
  color: var(--brand-primary, #1a56db);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 12px;
  flex-shrink: 0;
}

.profile-entity-default-btn {
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.profile-entity-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.profile-entity-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border, #e2e8f0);
}

.profile-entity-row:last-child {
  border-bottom: none;
}

.profile-entity-row-label {
  color: var(--text-muted, #64748b);
  flex-shrink: 0;
}

.profile-entity-row-value {
  color: var(--text, #1e293b);
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.profile-entity-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border, #e2e8f0);
  padding-top: 12px;
}

/* "Missing for contract" warning on entity cards. Soft amber so it
   reads as a nudge, not an error. */
.profile-entity-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}

.profile-entity-warning strong {
  color: var(--warning-text);
  font-weight: 600;
  margin-right: 4px;
}

.profile-entity-warning-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: 999px;
  color: var(--warning-text);
}

/* ----- Modal ----- */

.profile-entity-modal {
  max-width: 560px;
  width: 92%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.profile-entity-modal h2 {
  margin: 0 0 4px;
  padding-right: 32px; /* room for the floating close button */
}

.profile-entity-modal-sub {
  margin: 0 0 16px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
}

.profile-entity-type-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.profile-entity-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s, background 0.12s;
  background: var(--surface, #ffffff);
}

.profile-entity-type-option:hover {
  border-color: var(--brand-primary, #1a56db);
}

.profile-entity-type-option.selected {
  border-color: var(--brand-primary, #1a56db);
  background: var(--brand-primary-light, #e8effc);
}

.profile-entity-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-entity-type-option input[type="radio"]:disabled ~ * {
  opacity: 0.6;
}

.profile-entity-type-icon {
  font-size: 22px;
  line-height: 1;
}

.profile-entity-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1e293b);
}

.profile-entity-type-desc {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.3;
}

.profile-entity-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-entity-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-entity-field > span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1e293b);
}

.profile-entity-field-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #64748b);
}

.profile-entity-field input,
.profile-entity-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface, #ffffff);
  color: var(--text, #1e293b);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-entity-field input:focus,
.profile-entity-field textarea:focus {
  outline: none;
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 3px var(--brand-primary-light, #e8effc);
}

.profile-entity-field textarea {
  resize: vertical;
  min-height: 60px;
}

.profile-entity-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* On narrow phones, drop the type picker to a single column so the
   description lines have room to breathe. */
@media (max-width: 480px) {
  .profile-entity-type-picker {
    grid-template-columns: 1fr;
  }
  .profile-entity-type-option {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 10px;
  }
  .profile-entity-type-desc {
    flex: 1;
  }
}

/* ============================================
   SELLER INTAKE — "+ New property" form (modal) and the pending /
   rejected status section on the seller dashboard.
   ============================================ */

.seller-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.seller-new-property-btn {
  white-space: nowrap;
}

.seller-intake-modal {
  max-width: 720px;
  width: 92%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.seller-intake-modal-narrow {
  max-width: 500px;
  width: 92%;
}

/* 2026-07-03 — these modal variants render content directly into
   .modal-card (no .modal-header/.modal-body wrappers, which is where the
   default padding lives), so text sat flush against the card edges.
   Shared breathing room for all of them. */
.seller-intake-modal,
.seller-intake-modal-narrow,
.offer-form-modal,
.profile-entity-modal,
.modal-card-form {
  padding: 26px 30px 28px;
}

.seller-intake-modal h2 {
  margin: 0 0 4px;
  padding-right: 32px;
}

.seller-intake-intro {
  margin: 0 0 18px;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  line-height: 1.5;
}

.seller-intake-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seller-intake-section {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 0;
}

.seller-intake-section > legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.seller-intake-optional {
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted, #64748b);
}

.seller-intake-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.seller-intake-section > .seller-intake-field:first-of-type,
.seller-intake-section > .seller-intake-row:first-of-type {
  margin-top: 0;
}

.seller-intake-field > span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1e293b);
}

.seller-intake-required {
  color: var(--danger-text);
  margin-left: 2px;
}

.seller-intake-hint {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.seller-intake-field input,
.seller-intake-field select,
.seller-intake-field textarea {
  padding: 9px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface, #ffffff);
  color: var(--text, #1e293b);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.seller-intake-field input:focus,
.seller-intake-field select:focus,
.seller-intake-field textarea:focus {
  outline: none;
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 3px var(--brand-primary-light, #e8effc);
}

.seller-intake-field textarea {
  resize: vertical;
  min-height: 70px;
}

.seller-intake-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.seller-intake-row .seller-intake-field {
  flex: 1;
  margin-top: 0;
}

.seller-intake-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.seller-intake-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
}

.seller-intake-radio:hover {
  border-color: var(--brand-primary, #1a56db);
}

.seller-intake-radio input[type="radio"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.seller-intake-radio em {
  color: var(--text-muted, #64748b);
  font-style: normal;
  font-size: 11px;
  display: block;
  margin-top: 2px;
}

/* Inline warning when the chosen owner entity is missing contract-required
   fields. Lives just under the entity select in the seller-intake form.
   Same amber palette as the profile-entity-warning so the two read as
   the same concept. Non-blocking — the seller can still submit. */
.seller-intake-entity-warning {
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  margin-top: 6px;
}

.seller-intake-entity-warning strong {
  display: block;
  color: var(--warning-text);
  font-weight: 600;
  margin-bottom: 4px;
}

.seller-intake-entity-gap-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: 999px;
  color: var(--warning-text);
}

.seller-intake-entity-gap-fix {
  margin-top: 6px;
}

/* Compact checkbox grid used by the Parking & yard section. Wraps to
   multiple rows on narrow screens; the garage-stalls dropdown inlines
   as another flex item using the same gap. */
.seller-intake-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 4px;
  align-items: center;
}

.seller-intake-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text, #1e293b);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--surface, #fff);
}

.seller-intake-checkbox:hover {
  border-color: var(--brand-primary, #1a56db);
}

.seller-intake-checkbox input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.seller-intake-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* ----- File upload fields (IL docs + property photos) — added 2026-05-23
   when paste-a-URL was replaced with direct uploads to Firebase Storage.
   Mirrors the look of seller-intake-field with a subtle dashed border so
   the affordance reads as "drop a file here" without needing a real
   drag-and-drop drop zone. ----- */
.seller-intake-file-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 8px;
  background: var(--surface-alt, #f8fafc);
}

.seller-intake-file-field > span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1e293b);
}

.seller-intake-file-input {
  font-size: 13px;
  color: var(--text-muted, #475569);
  padding: 6px 0;
}

.seller-intake-file-status {
  font-size: 12px;
  color: var(--text-muted, #475569);
  font-style: italic;
}

/* Progress / info tone for the error-box element when it's being reused
   to show "Uploading 2/5 file(s)…" during the upload phase. Tone the
   border to neutral so it doesn't read like an error. */
.auth-error.seller-intake-progress,
.seller-intake-progress {
  background: var(--surface-alt, #f1f5f9);
  border-color: var(--border, #cbd5e1);
  color: var(--text-muted, #475569);
}

/* ----- Address autocomplete dropdown — Nominatim-backed suggestions.
   Added 2026-05-23. The wrap is positioned relative so the absolutely-
   positioned suggestions list anchors below the input. ----- */
.seller-intake-autocomplete-wrap {
  position: relative;
}

.seller-intake-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  max-height: 260px;
  overflow-y: auto;
  z-index: 100;
}

.seller-intake-suggestion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--text, #0f172a);
}

.seller-intake-suggestion:last-child {
  border-bottom: none;
}

.seller-intake-suggestion:hover,
.seller-intake-suggestion.is-highlighted {
  background: var(--surface-alt, #f1f5f9);
}

.seller-intake-suggestion-street {
  font-weight: 500;
  color: var(--text, #0f172a);
}

.seller-intake-suggestion-locality {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

/* Google Places Autocomplete dropdown (pac-container) — rendered by the
   Google Maps JS SDK at document level (NOT inside our modal), so we
   override the SDK's default styling here so it visually matches the
   modal. z-index high enough to clear the modal overlay. */
.pac-container {
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  margin-top: 4px;
  font-family: inherit;
  background: var(--surface, #fff);
  z-index: 10000;
}

.pac-item {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle, #f1f5f9);
  cursor: pointer;
  font-size: 14px;
  color: var(--text, #0f172a);
}

.pac-item:first-child {
  border-top: none;
}

.pac-item:hover,
.pac-item-selected {
  background: var(--surface-alt, #f1f5f9);
}

.pac-icon {
  display: none; /* Google's default location-pin icon — we hide it for a cleaner list */
}

.pac-item-query {
  font-weight: 500;
  color: var(--text, #0f172a);
  font-size: 14px;
}

.pac-matched {
  font-weight: 600;
}

/* ----- Multi-property submission flow — added 2026-05-23. After a
   successful submit the modal swaps to a success card with a
   "+ Submit another property" CTA. ----- */
.seller-intake-success-card {
  text-align: center;
}

.seller-intake-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
  font-size: 28px;
  font-weight: 700;
  margin: 4px auto 12px;
}

/* ----- Trust badge for sellers in the Seller Manager + Property Intakes
   views. Trusted sellers' intake submissions are auto-approved by a
   Cloud Function. Visual treatment: pill with a checkmark in the same
   success palette as the modal's success card. ----- */
.seller-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
}

/* Seller-dashboard trust banner — appears below the header buttons when
   the signed-in seller has trusted=true. Helps them understand why their
   new submissions skipped the queue. */
.seller-trust-banner-slot:empty {
  display: none;
}

.seller-trust-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
  font-size: 13px;
  margin-top: 12px;
}

.seller-trust-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--success-text, #065f46);
  color: var(--success-bg, #d1fae5);
  font-weight: 700;
  flex-shrink: 0;
}

.seller-trust-banner-text {
  flex: 1;
  line-height: 1.4;
}

/* ============================================
   SELLERS & LISTINGS (2026-05-23, property-centric rebuild)
   Spreadsheet-style table of all properties with row click → edit.
   ============================================ */

.sl-table-wrap {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow-x: auto;
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sl-table thead {
  background: var(--surface-alt, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.sl-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.sl-table td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}

.sl-table tbody tr {
  cursor: pointer;
  transition: background 0.1s ease;
}

.sl-table tbody tr:hover {
  background: var(--surface-alt, #f8fafc);
}

.sl-table tbody tr:last-child td {
  border-bottom: none;
}

/* Column widths */
.sl-col-photo { width: 60px; }
.sl-col-status { width: 110px; }
.sl-col-stats { width: 160px; white-space: nowrap; color: var(--text-muted, #64748b); }
.sl-col-price { width: 220px; font-variant-numeric: tabular-nums; }
.sl-col-seller { width: 200px; }
.sl-col-actions { width: 140px; text-align: right; }

.sl-row-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-alt, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sl-row-thumb-empty {
  color: var(--text-muted, #94a3b8);
}

.sl-col-addr {
  font-weight: 500;
  color: var(--text, #0f172a);
}

.sl-no-seller {
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}

.sl-no-seller em {
  font-style: italic;
  font-size: 11px;
}

.sl-col-actions .text-btn {
  font-size: 12px;
  padding: 4px 10px;
  margin-left: 4px;
}

.sl-col-actions .text-btn.is-disabled,
.sl-col-actions .text-btn[disabled] {
  color: var(--text-muted, #94a3b8);
  cursor: not-allowed;
}

/* Manage Sellers panel — secondary, collapsible */
.sl-sellers-panel-inner {
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 8px 0 16px;
}

.sl-sellers-panel-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.sl-seller-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.sl-seller-mini:last-child {
  margin-bottom: 0;
}

/* ============================================
   (legacy class kept for now in case the old card UI is referenced
   elsewhere — safe to remove next pass)
   ============================================ */

.sl-seller-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.sl-seller-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  flex-wrap: wrap;
}

.sl-expand-btn {
  font-size: 13px;
  color: var(--brand-primary, #1a56db);
}

.sl-expand-btn.is-disabled,
.sl-expand-btn[disabled] {
  color: var(--text-muted, #94a3b8);
  cursor: not-allowed;
}

/* The expanded list of property mini-cards */
.sl-prop-list {
  background: var(--surface-alt, #f8fafc);
  padding: 8px 18px 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.sl-prop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 8px;
}

.sl-prop-row:last-child {
  margin-bottom: 0;
}

.sl-prop-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-alt, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.sl-prop-thumb-empty {
  color: var(--text-muted, #94a3b8);
}

.sl-prop-info {
  flex: 1;
  min-width: 0;
}

.sl-prop-addr {
  font-weight: 600;
  color: var(--text, #0f172a);
  font-size: 14px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-prop-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  flex-wrap: wrap;
}

.sl-prop-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-alt, #f1f5f9);
  color: var(--text, #334155);
}

.sl-prop-status-available {
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
}
.sl-prop-status-sold {
  background: var(--info-bg, #dbeafe);
  color: var(--info-text, #1e40af);
}
.sl-prop-status-off-market {
  background: var(--warning-bg, #fef3c7);
  color: var(--warning-text, #92400e);
}

.sl-prop-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.sl-prop-actions .text-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ============================================
   PROPERTY EDIT MODAL (2026-05-23)
   ============================================ */
.edit-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.edit-photo-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-alt, #f8fafc);
}

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

.edit-photo-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.edit-photo-delete:hover {
  background: var(--danger, #ef4444);
}

/* ============================================
   SELLER NOTIFICATIONS INBOX (2026-05-23)
   ============================================ */
.seller-notifications-slot:empty {
  display: none;
}

.seller-notifications-section {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 8px 0 16px;
}

.seller-notifications-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1e293b);
  display: flex;
  align-items: center;
  gap: 10px;
}

.seller-notifications-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--brand-primary, #1a56db);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.seller-notifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seller-notification-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-left: 3px solid transparent;
}

.seller-notification-row.is-unread {
  background: var(--info-bg, #dbeafe);
  border-left-color: var(--brand-primary, #1a56db);
}

.seller-notification-row.is-read {
  background: var(--surface-alt, #f8fafc);
  opacity: 0.7;
}

.seller-notification-row:hover {
  background: var(--surface-alt, #f1f5f9);
}

.seller-notification-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.seller-notification-body {
  flex: 1;
  min-width: 0;
}

.seller-notification-msg {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #0f172a);
  margin-bottom: 4px;
  line-height: 1.4;
}

.seller-notification-meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ----- Admin Property Intakes — photo thumbnail strip on each row.
   Renders when the seller uploaded photos via the file picker. ----- */
.intake-photo-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.intake-photo-strip strong {
  margin-right: 4px;
}

.intake-photo-thumb {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-alt, #f8fafc);
}

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

.intake-photo-overflow {
  font-size: 12px;
  color: var(--text-muted, #475569);
  background: var(--surface-alt, #f1f5f9);
  border-radius: 4px;
  padding: 2px 8px;
}

/* ============================================
   PROPERTY INTAKE CARD v2 (2026-05-23 redesign)
   Replaces the flat-label list with grouped sections + hero photo strip.
   Lots of small CSS, but each section serves a real visual hierarchy
   purpose. CSS variables degrade gracefully if a project palette doesn't
   define them.
   ============================================ */

.intake-card-v2 {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.15s ease;
}
.intake-card-v2:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.intake-card-v2-pending {
  border-left: 4px solid var(--warning, #f59e0b);
}
.intake-card-v2-approved {
  border-left: 4px solid var(--success-text, #10b981);
}
.intake-card-v2-rejected {
  border-left: 4px solid var(--danger, #ef4444);
}

/* ---------- HEADER */
.intake-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.intake-card-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.intake-card-address {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text, #0f172a);
  line-height: 1.3;
}

.intake-status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 10px;
  width: fit-content;
}

.intake-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- HERO PHOTO STRIP */
.intake-hero {
  padding: 14px 22px;
  background: var(--surface-alt, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.intake-hero-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.intake-hero-thumb {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  transition: transform 0.12s ease;
}
.intake-hero-thumb:hover {
  transform: scale(1.03);
}
.intake-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intake-hero-overflow {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  padding: 6px 10px;
  background: var(--surface, #fff);
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 8px;
}

.intake-hero-fallback {
  text-align: center;
  font-size: 14px;
  padding: 16px 22px;
}
.intake-hero-fallback a {
  color: var(--brand-primary, #1a56db);
  text-decoration: none;
}
.intake-hero-fallback a:hover {
  text-decoration: underline;
}

/* 2026-05-31: prominent album-link badge on intake-review cards.
   Sits above the photo thumbnails so admins always see "the seller
   shared an external album" first. */
.intake-album-badge {
  display: flex;
  justify-content: flex-start;
  padding: 0 4px 10px;
}
.intake-album-badge a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--surface-accent-soft, #eff6ff);
  color: var(--brand-primary, #1a56db);
  border: 1px solid var(--brand-primary-soft, #bfdbfe);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.05s ease;
}
.intake-album-badge a:hover {
  background: var(--brand-primary-soft, #dbeafe);
  transform: translateY(-1px);
}

/* 2026-05-31: parking / yard chip-row mini-label so "Driveway · Street only"
   doesn't float untagged below the bed/bath row. */
.intake-feature-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  margin-right: 6px;
  align-self: center;
}

/* 2026-05-31: IL disclosures rendered as a labeled grid so the
   freeform violations / liens text is visible at review time. */
.intake-il-grid {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: 6px 14px;
  margin-top: 8px;
}
.intake-il-row {
  display: contents;
}
.intake-il-row .intake-il-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}
.intake-il-row .intake-il-value {
  font-size: 13px;
  color: var(--text-primary, #111827);
  word-break: break-word;
}

/* ---------- BODY (sections container) */
.intake-card-body {
  padding: 4px 22px 6px;
  display: flex;
  flex-direction: column;
}

/* ---------- SECTION (Owner / Pricing / Property / IL / Notes) */
.intake-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.intake-section:last-child {
  border-bottom: none;
}

.intake-section-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
}

/* ---------- KV (Owner section uses dt/dd grid) */
.intake-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 6px;
  margin: 0;
  font-size: 14px;
}
.intake-kv dt {
  color: var(--text-muted, #64748b);
  font-weight: 500;
}
.intake-kv dd {
  margin: 0;
  color: var(--text, #0f172a);
}
.intake-kv-aside {
  color: var(--text-muted, #64748b);
  font-style: italic;
  font-size: 13px;
}

/* ---------- PRICING row (large numbers, 3 across) */
.intake-pricing-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 10px;
}

.intake-pricing-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-alt, #f8fafc);
  border-radius: 8px;
}

.intake-pricing-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #0f172a);
  font-variant-numeric: tabular-nums;
}

.intake-pricing-unit {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.intake-pricing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- CHIPS (used by Pricing meta + Property + IL) */
.intake-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #334155);
  background: var(--surface-alt, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  padding: 3px 10px;
  border-radius: 999px;
}

.intake-chip-pref {
  background: var(--info-bg, #dbeafe);
  color: var(--info-text, #1e40af);
  border-color: transparent;
}

.intake-chip-auto {
  background: var(--success-bg, #d1fae5);
  color: var(--success-text, #065f46);
  border-color: transparent;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intake-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.intake-chip-row:last-child {
  margin-bottom: 0;
}
.intake-chip-row-features .intake-chip {
  background: var(--surface, #fff);
}

/* ---------- IL section (red palette) */
.intake-section-il {
  margin: 8px -22px 8px;
  padding: 14px 22px;
  background: var(--danger-bg, #fef2f2);
  border-top: 1px solid var(--danger-border, #fecaca);
  border-bottom: 1px solid var(--danger-border, #fecaca);
}
.intake-section-il .intake-section-title {
  color: var(--danger-text, #991b1b);
}
.intake-il-body {
  font-size: 14px;
  color: var(--text, #0f172a);
  line-height: 1.5;
}
.intake-il-body a {
  color: var(--danger-text, #991b1b);
  font-weight: 500;
}

/* ---------- NOTES & ACCESS */
.intake-note-block {
  padding: 10px 12px;
  background: var(--surface-alt, #f8fafc);
  border-left: 3px solid var(--brand-primary, #1a56db);
  border-radius: 4px;
  margin-bottom: 10px;
}
.intake-note-block:last-child {
  margin-bottom: 0;
}
.intake-note-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  margin-bottom: 4px;
}
.intake-note-body {
  font-size: 14px;
  color: var(--text, #0f172a);
  line-height: 1.5;
}

.intake-lockbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 8px 12px;
  background: var(--warning-bg, #fef3c7);
  border-radius: 6px;
  margin-bottom: 10px;
}
.intake-lockbox:last-child {
  margin-bottom: 0;
}
.intake-lockbox code {
  background: var(--surface, #fff);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
}
.intake-lockbox-sep {
  margin: 0 4px;
  color: var(--text-muted, #64748b);
}

.intake-album-link {
  font-size: 13px;
}
.intake-album-link a {
  color: var(--brand-primary, #1a56db);
}

/* ---------- FOOTER */
.intake-card-footer {
  padding: 12px 22px;
  background: var(--surface-alt, #f8fafc);
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 12px;
  color: var(--text-muted, #64748b);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intake-footer-reject {
  color: var(--danger-text, #991b1b);
  font-size: 13px;
}

.intake-footer-approved {
  color: var(--success-text, #065f46);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.intake-footer-approved code {
  background: var(--surface, #fff);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12px;
}

.intake-card-when {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Responsive: stack Pricing row on narrow viewports */
@media (max-width: 700px) {
  .intake-pricing-row {
    grid-template-columns: 1fr;
  }
  .intake-card-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ----- Seller dashboard: pending submissions section ----- */

.seller-intake-status {
  margin: 8px 0 24px;
}

.seller-intake-status-section {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
}

.seller-intake-status-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1e293b);
}

.seller-intake-status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-intake-status-row {
  padding: 10px 12px;
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: 8px;
}

.seller-intake-status-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seller-intake-status-addr {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #1e293b);
  word-break: break-word;
}

.seller-intake-status-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.seller-intake-status-reason {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text, #1e293b);
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  padding: 6px 10px;
  border-radius: 6px;
}

/* Status badges, reusing the existing lead-status pill convention. */
.lead-status.status-pending {
  background: var(--warning-bg);
  color: var(--warning-text);
}
.lead-status.status-rejected {
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* ----- Seller dashboard: prominent pending-submission card ----- */
/* Sits in the same #seller-intake-status slot but renders as a soft
   amber reassurance card so the seller knows we received their intake
   and roughly when to expect it to go live. Stacks with the existing
   "Needs another look" rejected-list section below it. */

.seller-pending-card-section {
  margin: 0 0 16px;
}

.seller-pending-card {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: 12px;
  padding: 16px 18px;
}

.seller-pending-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.seller-pending-card-icon {
  font-size: 22px;
  line-height: 1.1;
  flex-shrink: 0;
}

.seller-pending-card-headline h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--warning-text);
}

.seller-pending-card-headline p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--warning-text);
}

.seller-pending-card-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-pending-item {
  background: var(--surface);
  border: 1px solid var(--warning);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seller-pending-item-addr {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #1e293b);
  word-break: break-word;
  flex: 1 1 220px;
  min-width: 0;
}

.seller-pending-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seller-pending-item-when {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

@media (max-width: 480px) {
  .seller-pending-card-head { gap: 10px; }
  .seller-pending-card-headline h2 { font-size: 15px; }
  .seller-pending-card-headline p { font-size: 12.5px; }
}

/* Dark-mode override — keep amber recognizable but desaturate the
   surface so it doesn't glow against the dark dashboard background. */
html[data-theme="dark"] .seller-pending-card {
  background: rgba(180, 83, 9, 0.12);
  border-color: rgba(252, 211, 77, 0.35);
}
html[data-theme="dark"] .seller-pending-card-headline h2 { color: #fde68a; }
html[data-theme="dark"] .seller-pending-card-headline p { color: #fcd34d; }
html[data-theme="dark"] .seller-pending-item {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(252, 211, 77, 0.25);
}

/* ============================================
   Seller dashboard — Compact / Full view toggle + compact grid
   (2026-05-31) Multi-property sellers default to a compact card grid
   so they can scan all properties at once. Toggle persists in
   localStorage and is exposed via SellerDashboard.setViewMode.
   Click on a compact card flips to Full + scrolls to that property.
   ============================================ */

.seller-view-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.seller-view-toggle-label {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

.seller-view-toggle-buttons {
  display: inline-flex;
  background: var(--surface-alt, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 2px;
}

.seller-view-toggle-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted, #64748b);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 120ms ease, color 120ms ease;
}

.seller-view-toggle-btn:hover {
  color: var(--text, #1e293b);
}

.seller-view-toggle-btn.is-active {
  background: var(--surface, #ffffff);
  color: var(--text, #1e293b);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Compact grid — responsive 1 / 2 / 3 columns. Cards are buttons so
   the whole tile is clickable + keyboard-focusable. */
.seller-properties-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.seller-property-compact-card {
  appearance: none;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.seller-property-compact-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  border-color: var(--primary, #4f46e5);
}

.seller-property-compact-card:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 2px;
}

.seller-compact-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt, #f1f5f9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

.seller-compact-thumb.is-empty {
  color: var(--text-muted, #94a3b8);
}

.seller-compact-thumb-fallback {
  font-size: 28px;
  opacity: 0.6;
}

/* 2026-05-31 review #2 — album-link overlay when the property only has an
   external photos URL. Stand-in for an actual photo so the card doesn't
   look broken. Stops propagation so clicking the album link doesn't also
   expand the card. */
.seller-compact-thumb-album {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  color: var(--text-muted, #475569);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.seller-compact-thumb-album:hover {
  background: var(--gray-100);
  color: var(--text-primary, #1e293b);
}
.seller-compact-thumb-album > span:first-child {
  font-size: 28px;
  opacity: 0.85;
}
.seller-compact-thumb-album-label { font-size: 11px; }

.seller-compact-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-compact-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.seller-compact-addr {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seller-compact-street {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #1e293b);
  line-height: 1.25;
  word-break: break-word;
}

.seller-compact-loc {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  line-height: 1.25;
}

.seller-compact-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1e293b);
}

.seller-compact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.seller-compact-stat {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.seller-compact-stat-pending {
  color: var(--warning-text);
  font-weight: 600;
}

@media (max-width: 480px) {
  .seller-properties-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .seller-compact-body { padding: 10px 12px 12px; }
}

/* Dark mode — softer surface; keep status badges as-is (their colors
   already account for dark via the existing property-badge rules). */
html[data-theme="dark"] .seller-view-toggle-buttons {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] .seller-view-toggle-btn.is-active {
  background: rgba(30, 41, 59, 0.9);
  color: #f1f5f9;
}
html[data-theme="dark"] .seller-property-compact-card {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="dark"] .seller-property-compact-card:hover {
  border-color: var(--primary, #818cf8);
}
html[data-theme="dark"] .seller-compact-thumb {
  background: rgba(15, 23, 42, 0.6);
}
html[data-theme="dark"] .seller-compact-stat-pending {
  color: #fcd34d;
}

/* ----- Admin intake review queue ----- */

.intake-card {
  /* Stacks more compactly than the agent-card default; allows the
     details column to wrap freely without crashing the action column. */
  align-items: flex-start;
}

.intake-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text, #1e293b);
  margin-top: 6px;
}

.intake-card-meta strong {
  font-weight: 600;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

.intake-card-meta code {
  font-size: 12px;
  background: var(--gray-100, #f1f5f9);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.intake-card-notes {
  background: var(--gray-50, #f8fafc);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 2px;
  line-height: 1.5;
}

.intake-card-reject-note {
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

.intake-card-when {
  margin-top: 4px;
  color: var(--text-muted, #64748b);
  font-size: 12px;
}

/* Tighter on phones — collapse the address/state/zip row + the
   pricing row to a single column so inputs don't get squeezed below
   readability. */
@media (max-width: 600px) {
  .seller-intake-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ============================================
   ADMIN: Change-role dropdown on user cards.
   Lives in Agent Manager + Seller Manager .agent-actions blocks.
   ============================================ */

.role-select {
  padding: 6px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  background: var(--surface, #ffffff);
  color: var(--text, #1e293b);
  cursor: pointer;
}

.role-select:hover {
  border-color: var(--brand-primary, #1a56db);
}

.role-select:focus {
  outline: none;
  border-color: var(--brand-primary, #1a56db);
  box-shadow: 0 0 0 2px var(--brand-primary-light, #e8effc);
}

.role-select-self {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-style: italic;
  padding: 4px 8px;
}

/* ============================================
   OFFER FORM — Make Offer modal triggered from property cards.
   Reuses .seller-intake-section / .seller-intake-field styles for
   consistency. Adds buyer-source picker + persons-array UI.
   ============================================ */

.offer-form-modal {
  max-width: 720px;
  width: 92%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.offer-form-modal h2 {
  margin: 0 0 4px;
  padding-right: 32px;
}

.offer-form-prop-summary {
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.offer-form-prop-addr {
  font-weight: 600;
  font-size: 15px;
  color: var(--text, #1e293b);
}

.offer-form-prop-loc {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  margin-top: 2px;
}

.offer-form-prop-terms {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.offer-buyer-type {
  margin-bottom: 12px;
}

.offer-entity-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed var(--border, #e2e8f0);
  padding-top: 12px;
}

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

.offer-person-row {
  background: var(--surface-sunken, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 12px 12px;
}

.offer-person-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.offer-remove-person-btn {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--danger-text);
}

.offer-add-person-btn {
  align-self: flex-start;
  font-size: 13px;
}

/* "Make Offer" button on property cards — give it a distinctive accent
   so it stands out from the row of secondary actions. */
.card-btn-make-offer {
  background: var(--brand-primary, #1a56db);
  color: #ffffff;
  border: 1px solid var(--brand-primary, #1a56db);
  font-weight: 600;
}

.card-btn-make-offer:hover {
  background: var(--brand-primary-hover, #1344b0);
  border-color: var(--brand-primary-hover, #1344b0);
}

/* 💰 Deposit button on property cards (2026-07-20) — money-moment accent
   so recording a deposit/down payment is one obvious click from the grid. */
.card-btn-deposit {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
  font-weight: 600;
}

.card-btn-deposit:hover {
  background: #a7f3d0;
  border-color: #6ee7b7;
}

/* ============================================
   SELLER-SIDE OFFERS — pending offers list inside each
   seller-property-card with Accept / Reject actions.
   ============================================ */

.seller-card-offers {
  /* Section header gets a subtle accent so the seller's eye lands here
     before anything else when a pending offer is in play. */
  border-left: 3px solid var(--brand-primary, #1a56db);
  padding-left: 12px;
  margin-left: -12px;
}

.seller-card-offers-badge {
  display: inline-block;
  margin-left: 8px;
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: 2px;
}

/* "Currently listed at" reference banner above the offers list — lets
   the seller compare each offer against the property's list price. */
.seller-offers-listed-at {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 7px 11px;
  background: var(--info-bg, #eef4fb);
  border: 1px solid var(--info-border, #c9ddf2);
  border-radius: 8px;
}

.seller-offers-listed-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.seller-offers-listed-terms {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1e293b);
  font-variant-numeric: tabular-nums;
}

.seller-offers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seller-offers-list-historic {
  opacity: 0.85;
}

.seller-offers-history {
  margin-top: 10px;
}

.seller-offers-history > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  user-select: none;
}

.seller-offer-row {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 10px 12px;
}

.seller-offer-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.seller-offer-buyer {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #1e293b);
}

.seller-offer-terms {
  font-size: 13px;
  color: var(--text, #1e293b);
  font-variant-numeric: tabular-nums;
}

.seller-offer-notes {
  font-size: 13px;
  color: var(--text-muted, #64748b);
  font-style: italic;
  margin-top: 4px;
}

.seller-offer-meta {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

.seller-offer-reject-note {
  font-size: 12px;
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 6px;
}

.seller-offer-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.seller-offer-actions .auth-btn {
  padding: 6px 14px;
  font-size: 13px;
}

/* Closing-date strip shown on accepted offer rows — target close +
   first payment + deposit progress all on one line on desktop, stacked
   on mobile. */
.seller-offer-closing-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--gray-100, #f1f5f9);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text, #1e293b);
}

.seller-offer-closing-strip strong {
  color: var(--text-muted, #64748b);
  font-weight: 600;
  margin-right: 4px;
}

/* Counter-offer history block (seller side + admin side). Collapsed by
   default via <details>; expanded shows a compact list of each counter
   exchange. */
.seller-offer-counter-history,
.admin-offer-counter-history {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.seller-offer-counter-history summary,
.admin-offer-counter-history summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text, #1e293b);
}

.seller-offer-counter-list,
.admin-offer-counter-history ol {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-offer-counter-row,
.admin-offer-counter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 4px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  align-items: baseline;
}

.seller-offer-counter-who,
.admin-offer-counter-row strong {
  font-weight: 600;
  color: var(--text, #1e293b);
}

.seller-offer-counter-terms {
  color: var(--text, #1e293b);
}

.seller-offer-counter-when,
.admin-offer-counter-when {
  color: var(--text-muted, #64748b);
  font-size: 11px;
}

.seller-offer-counter-note,
.admin-offer-counter-note {
  flex-basis: 100%;
  color: var(--text-muted, #64748b);
  font-style: italic;
  font-size: 11px;
}

.seller-offer-contract-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.seller-offer-contract-badge.contract-placeholder {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.seller-offer-contract-badge.contract-generating,
.seller-offer-contract-badge.contract-generated {
  background: var(--info-bg);
  color: var(--info-text);
}

.seller-offer-contract-badge.contract-sent_for_signature {
  background: var(--violet-bg);
  color: var(--violet-text);
}

.seller-offer-contract-badge.contract-signed {
  background: var(--success-bg);
  color: var(--success-text);
}

.seller-offer-contract-badge.contract-voided {
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* ============================================
   CONTRACT TEMPLATES — admin registry view.
   ============================================ */

.template-combo-section {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.template-combo-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1e293b);
  display: flex;
  align-items: center;
  gap: 10px;
}

.template-combo-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.template-combo-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  font-style: italic;
}

.template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surface-sunken, #f8fafc);
}

.template-row-main {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.template-state-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.template-state-default {
  background: var(--brand-primary-light, #e8effc);
  color: var(--brand-primary, #1a56db);
}

.template-state-override {
  background: #f3e8ff;
  color: var(--violet-text);
}

.template-row-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #1e293b);
}

.template-row-doc {
  font-size: 12px;
  margin-top: 2px;
}

.template-row-doc a {
  color: var(--brand-primary, #1a56db);
}

.template-row-notes {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin-top: 4px;
}

.template-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.card-btn-danger {
  background: var(--surface, #ffffff);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}

.card-btn-danger:hover {
  background: var(--danger-bg);
  border-color: #fca5a5;
}

/* ============================================
   EVENTS TAB — calendar agenda (2026-05-31 review #2)
   ============================================ */

.events-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.events-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.events-gcal-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
}
.events-gcal-chip-ready {
  background: var(--success-bg);
  color: var(--success-text);
  border-color: var(--success-bg);
}
.events-gcal-chip-off {
  background: var(--gray-100);
  color: var(--gray-500);
}

.events-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.events-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--gray-700);
  cursor: pointer;
}
.events-filter-chip:hover { background: var(--gray-200); }
.events-filter-chip.is-active {
  background: var(--accent, #0ea5e9);
  color: #fff;
  border-color: var(--accent, #0ea5e9);
}
.events-filter-count {
  display: inline-flex;
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 600;
}
.events-filter-chip.is-active .events-filter-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Layout — agenda left, detail panel right when an event is selected */
.events-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.events-layout.detail-open {
  grid-template-columns: 1fr 360px;
}
@media (max-width: 900px) {
  .events-layout.detail-open { grid-template-columns: 1fr; }
}

.events-agenda {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.events-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.events-day-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.events-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--gray-200);
  border-left-width: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.events-row:hover { background: var(--gray-50, #f8fafc); }
.events-row-blue   { border-left-color: var(--info-solid); }
.events-row-amber  { border-left-color: #f59e0b; }
.events-row-green  { border-left-color: #10b981; }
.events-row-purple { border-left-color: #8b5cf6; }

.events-row-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.events-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.events-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-row-sub {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-row-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.events-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
  border: 1px dashed var(--gray-200);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.events-empty-icon {
  font-size: 36px;
  margin: 0 0 12px;
  opacity: 0.7;
}
.events-empty-sub {
  font-size: 13px;
  margin-top: 6px;
  color: var(--gray-400);
}

/* Detail panel */
.events-detail {
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 84px;
  display: none;
}
.events-detail.is-open { display: block; }

/* Event detail as a centered modal (2026-06-23) — sits inside .modal-card.
   2026-07-03: the card itself has no built-in padding (that lives in
   modal-header/body which this modal doesn't use), so content was flush
   against the edges. Own padding + a wider card so it can breathe. */
.events-detail-modal {
  max-width: 560px;
  width: 100%;
  padding: 28px 32px 30px;
}
.events-detail-modal .events-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.events-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-right: 32px;
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 16px;
}
.events-detail-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.events-detail-icon-blue   { background: var(--info-bg); }
.events-detail-icon-amber  { background: var(--warning-bg); }
.events-detail-icon-green  { background: var(--success-bg); }
.events-detail-icon-purple { background: var(--violet-bg); }
.events-detail-headings h2 {
  font-size: 16px;
  margin: 0 0 2px;
  line-height: 1.25;
}
.events-detail-headings p {
  margin: 0;
  font-size: 12px;
  color: var(--gray-500);
}

.events-detail-body { font-size: 13px; }
.events-detail-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 12px;
  column-gap: 14px;
  margin: 0 0 16px;
}

/* Showing status chips (2026-07-03) */
.evt-status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full, 999px);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.evt-chip-scheduled { background: var(--info-bg, #dbeafe); color: #1e40af; }
.evt-chip-completed { background: var(--success-bg, #d1fae5); color: #065f46; }
.evt-chip-cancelled { background: #fee2e2; color: #991b1b; }

/* Offer status chips on activity rows (2026-07-03): awaiting = amber,
   seller opened it = blue "Seller reviewing", your move = red-amber. */
.myfeed-status-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  line-height: 1.5;
}
.chip-awaiting  { background: #fef3c7; color: #92400e; }
.chip-reviewing { background: var(--info-bg, #dbeafe); color: #1e40af; }
.chip-yourmove  { background: #fee2e2; color: #991b1b; }

/* My Offers cards are clickable → full offer detail modal (2026-07-03) */
.my-offer-card { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.my-offer-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); }
.offer-detail-muted { color: var(--text-muted); font-size: 0.85em; }

/* Hint shown in the complete-showing modal when "Submit an offer" is
   picked — the real offer form opens next (2026-07-03). */
.comp-offer-hint {
  background: var(--info-bg, #eff6ff);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-top: 4px;
}
.events-detail-grid dt {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}
.events-detail-grid dd {
  margin: 0;
  color: var(--text-primary, #1e293b);
  word-break: break-word;
}
.events-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--gray-100);
}
.events-detail-actions .text-btn.danger { color: var(--danger-text); }
.events-detail-callout {
  background: var(--violet-bg);
  border: 1px solid #ddd6fe;
  color: var(--violet-text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin: 0 0 12px;
}

/* Dark mode overrides */
html[data-theme="dark"] .events-row { background: var(--surface-elevated, #1e293b); }
html[data-theme="dark"] .events-row:hover { background: #243042; }
html[data-theme="dark"] .events-detail,
html[data-theme="dark"] .events-empty { background: var(--surface-elevated, #1e293b); }

/* ============================================
   BUYER ACTIVITY — quick-log + feed on lead cards (2026-05-31 review #2)
   ============================================ */
.lead-activity-bar {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-200);
}
.lead-activity-quickrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lead-activity-btn,
.lead-activity-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  background: var(--surface, #fff);
  color: var(--gray-700);
  cursor: pointer;
}
.lead-activity-btn:hover,
.lead-activity-toggle:hover {
  background: var(--gray-100);
}
.lead-activity-btn-sms:hover   { background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg); }
.lead-activity-btn-phone:hover { background: var(--info-bg); color: var(--info-text); border-color: var(--brand-primary-soft); }
.lead-activity-btn-email:hover { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.lead-activity-btn-note:hover  { background: #f5f3ff; color: var(--violet-text); border-color: #ddd6fe; }
.lead-activity-toggle { margin-left: auto; }

.lead-activity-form {
  margin-top: 8px;
  padding: 10px;
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}
.lead-activity-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.lead-activity-form-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}
.lead-activity-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--gray-300, #cbd5e1);
  border-radius: 4px;
  resize: vertical;
}
.lead-activity-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.lead-activity-feed {
  margin-top: 10px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.lead-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lead-activity-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 12px;
  color: var(--gray-700);
}
.lead-activity-item:last-child { border-bottom: 0; }
.lead-activity-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.lead-activity-item-type {
  font-weight: 600;
  color: var(--gray-800, #1e293b);
}
.lead-activity-item-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--gray-500);
}
.lead-activity-item-note {
  margin-top: 4px;
  color: var(--gray-700);
  white-space: pre-wrap;
}
.lead-activity-prop {
  margin-top: 2px;
  font-size: 11px;
  color: var(--gray-500);
}
.lead-activity-outcome {
  background: var(--info-bg);
  color: var(--info-text);
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.lead-activity-loading,
.lead-activity-empty {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--gray-500);
  text-align: center;
}

/* Color-tint per activity type — subtle left border */
.lead-activity-item-sms     { border-left: 3px solid var(--success-solid); }
.lead-activity-item-phone   { border-left: 3px solid #3b82f6; }
.lead-activity-item-email   { border-left: 3px solid var(--warning); }
.lead-activity-item-note    { border-left: 3px solid #8b5cf6; }
.lead-activity-item-showing_outcome { border-left: 3px solid #06b6d4; }

html[data-theme="dark"] .lead-activity-form { background: #1e293b; }
html[data-theme="dark"] .lead-activity-feed { background: var(--surface-elevated, #1e293b); }

/* ============================================
   FEED PAGE (2026-06-07)
   Live event stream — .feed-card rows with tone accents, type badges,
   photo thumbs and a fresh-arrival highlight. Uses semantic surface
   vars so dark mode works for free.
   ============================================ */
.feed-live-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-light);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: center;
  white-space: nowrap;
}
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
}
.feed-empty {
  color: var(--text-muted, var(--gray-500));
  background: var(--surface);
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
}
.feed-card {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, background .8s ease;
}
.feed-card:hover, .feed-card:focus-visible {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transform: translateY(-1px);
  outline: none;
}
.feed-tone-green  { border-left-color: var(--green); }
.feed-tone-gold   { border-left-color: var(--yellow); }
.feed-tone-red    { border-left-color: var(--red); }
.feed-tone-amber  { border-left-color: var(--brand-accent); }
.feed-tone-blue   { border-left-color: var(--blue); }
.feed-fresh { background: var(--surface-accent-soft, var(--blue-light)); }
.feed-card-photo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}
.feed-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--surface-alt, var(--gray-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex: 0 0 auto;
}
.feed-card-main { min-width: 0; flex: 1; }
.feed-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.feed-badge {
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.feed-badge-green { background: var(--green-light);  color: var(--green); }
.feed-badge-gold  { background: var(--yellow-light); color: var(--yellow); }
.feed-badge-red   { background: var(--red-light);    color: var(--red); }
.feed-badge-amber { background: var(--orange-light); color: var(--orange); }
.feed-badge-blue  { background: var(--blue-light);   color: var(--blue); }
.feed-when { font-size: 12px; color: var(--text-muted, var(--gray-500)); white-space: nowrap; }
.feed-card-addr { font-weight: 600; color: var(--text-strong, var(--gray-900)); }
.feed-row-detail { font-size: 13.5px; color: var(--text-muted, var(--gray-600)); margin-top: 3px; }
.feed-row-detail strong { color: var(--text-strong, var(--gray-900)); }
.feed-dim { color: var(--text-muted, var(--gray-400)); }
.feed-notes { white-space: pre-line; }
.feed-chip {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
}
.feed-chip-green { background: var(--green-light); color: var(--green); }
.feed-chip-red   { background: var(--red-light);   color: var(--red); }
.feed-thumb-strip { display: flex; gap: 6px; margin: 6px 0 4px; flex-wrap: wrap; }
.feed-thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}
@media (max-width: 640px) {
  .feed-card-photo, .feed-card-icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ============================================
   BUYER DETAIL / CRM PAGE (U19) — 2026-06-10
   Three independently scrollable columns + tabbed middle, modeled on the
   REI BlackBook contact page.
   ============================================ */
.lead-name-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.lead-name-link:hover { color: var(--brand-primary, #2563eb); text-decoration: underline; }
.lead-open-profile {
  background: none; border: none; padding: 0; margin: 2px 0 6px;
  font-size: 12px; color: var(--brand-primary, #2563eb); cursor: pointer;
}
.lead-open-profile:hover { text-decoration: underline; }
.lead-prior-history {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; margin: 2px 0;
  background: var(--warning-bg, #fdf3d7); color: var(--warning-text, #92670a);
}

/* ============================================
   PROPERTY MEDIA — video-first (U11) + lightbox (U10)
   ============================================ */
.modal-video-block { margin-bottom: 8px; background: #000; }
.modal-video-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: rgba(0,0,0,0.85);
}
.modal-video-label { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.modal-video-expand {
  background: rgba(255,255,255,0.15); color: #fff; border: none; cursor: pointer;
  font-size: 12px; padding: 3px 9px; border-radius: 6px;
}
.modal-video-expand:hover { background: rgba(255,255,255,0.28); }
.modal-video-player { width: 100%; max-height: 360px; display: block; background: #000; }
.modal-video-thumbs { display: flex; gap: 6px; padding: 6px 10px; background: rgba(0,0,0,0.85); flex-wrap: wrap; }
.modal-video-thumb {
  background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer;
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
}
.modal-video-thumb.active { background: var(--brand-primary, #2563eb); }

.modal-photo-img-clickable { cursor: zoom-in; }

.property-card-video-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,0.72); color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  pointer-events: none;
}
.property-card-hero { position: relative; }

.media-lightbox {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.media-lightbox-stage {
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.media-lightbox-media {
  max-width: 92vw; max-height: 88vh;
  border-radius: 10px; box-shadow: 0 10px 50px rgba(0,0,0,0.6);
  background: #000;
}
.media-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
  width: 40px; height: 40px; font-size: 22px; line-height: 1; cursor: pointer;
}
.media-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.85); border: none; border-radius: 50%;
  width: 48px; height: 48px; font-size: 28px; line-height: 1; cursor: pointer;
}
.media-lightbox-prev { left: 18px; }
.media-lightbox-next { right: 18px; }
.media-lightbox-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; background: rgba(0,0,0,0.5);
  padding: 4px 12px; border-radius: 12px;
}
@media (max-width: 640px) {
  .media-lightbox-arrow { width: 38px; height: 38px; font-size: 22px; }
  .media-lightbox { padding: 12px; }
}

.buyer-detail { display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 480px; }
.buyer-detail-topbar { margin-bottom: 10px; flex: 0 0 auto; }

.buyer-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0; /* allow children to scroll */
}
.buyer-col {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 14px;
  overflow-y: auto;       /* each column scrolls independently */
  min-height: 0;
}
.buyer-col-mid { padding: 0; display: flex; flex-direction: column; }

/* Left column */
.buyer-identity { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.buyer-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-primary, #2563eb); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; letter-spacing: 0.5px;
}
.buyer-identity-text h2 { margin: 0 0 3px; font-size: 17px; }
.buyer-identity-sub { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.buyer-added { font-size: 11px; color: var(--text-muted, #64748b); margin-top: 3px; }

.buyer-quick-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.buyer-quick-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 4px 9px; border-radius: 7px;
  background: var(--info-bg, #eef4fb); color: var(--text, #1e293b);
  border: 1px solid var(--info-border, #c9ddf2); text-decoration: none;
}
.buyer-log-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.buyer-log-form { margin-bottom: 10px; }

.buyer-idphoto {
  display: block; width: 100%; padding: 0; margin: 0 0 12px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px;
  overflow: hidden; background: transparent; cursor: zoom-in;
}
.buyer-idphoto img { width: 100%; height: 150px; object-fit: cover; display: block; }

.buyer-section { padding: 10px 0; border-top: 1px solid var(--border, #eef1f5); }
.buyer-section-title {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted, #64748b);
}
.buyer-fact { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.buyer-fact-label { color: var(--text-muted, #64748b); flex: 0 0 auto; }
.buyer-fact-val { color: var(--text, #1e293b); text-align: right; word-break: break-word; }
.buyer-fact-input { align-items: center; }
.buyer-fact-input input { font: inherit; padding: 3px 6px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px; }
.buyer-lifecycle-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Middle column tabs */
.buyer-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 8px 10px 0; flex: 0 0 auto;
}
.buyer-tab {
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 8px 12px; border-radius: 8px 8px 0 0;
  color: var(--text-muted, #64748b); border-bottom: 2px solid transparent;
}
.buyer-tab:hover { color: var(--text, #1e293b); background: var(--hover-bg, #f8fafc); }
.buyer-tab.active { color: var(--brand-primary, #2563eb); border-bottom-color: var(--brand-primary, #2563eb); font-weight: 600; }
.buyer-tab-body { padding: 14px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.buyer-tab-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.buyer-tab-count { font-size: 12px; color: var(--text-muted, #64748b); }

.buyer-activity-list { max-height: none; }
.buyer-prop-list, .buyer-showing-list, .buyer-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.buyer-prop-item, .buyer-showing-item, .buyer-file-item {
  border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 10px 12px;
}
.buyer-file-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.buyer-file-link { text-decoration: none; color: var(--brand-primary, #2563eb); font-size: 14px; }
.buyer-prop-addr, .buyer-showing-addr { font-weight: 600; font-size: 14px; }
.buyer-prop-subs { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.buyer-showing-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.buyer-showing-when { font-size: 13px; color: var(--text-muted, #64748b); margin-top: 4px; }
.buyer-showing-note { font-size: 13px; margin-top: 5px; }
.buyer-file-status { font-size: 12px; color: var(--text-muted, #64748b); margin-bottom: 8px; }
.buyer-chip {
  display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px;
  background: var(--info-bg, #eef4fb); color: var(--text, #334155);
}

/* Right column */
.buyer-right-block { margin-bottom: 16px; }
.buyer-stats { display: flex; gap: 8px; }
.buyer-stat {
  flex: 1; text-align: center; padding: 10px 6px;
  background: var(--info-bg, #eef4fb); border-radius: 10px;
}
.buyer-stat-num { display: block; font-size: 20px; font-weight: 700; color: var(--text, #1e293b); }
.buyer-stat-lbl { display: block; font-size: 11px; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: 0.03em; }
.buyer-laststamp { font-size: 12px; color: var(--text-muted, #64748b); margin-top: 8px; }
.buyer-match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.buyer-match-item {
  border: 1px solid var(--border, #e2e8f0); border-radius: 9px; padding: 8px 10px; cursor: pointer;
}
.buyer-match-item:hover { border-color: var(--brand-primary, #2563eb); background: var(--hover-bg, #f8fafc); }
.buyer-match-addr { font-size: 13px; font-weight: 600; }
.buyer-match-price { font-size: 12px; color: var(--text-muted, #64748b); font-variant-numeric: tabular-nums; }

/* Stack columns on narrow screens — each becomes its own scroll region */
@media (max-width: 1000px) {
  .buyer-detail { height: auto; }
  .buyer-detail-grid { grid-template-columns: 1fr; }
  .buyer-col { overflow-y: visible; max-height: none; }
  .buyer-tab-body { max-height: 520px; }
}

/* ============================================
   FA-202 — Access status chip + Access & Showing block (2026-06-13)
   ============================================ */
.badge-access {
  color: #fff;
}
.badge-access-ready { background: var(--green); }
.badge-access-warn { background: var(--orange); }
.badge-access-issue { background: var(--red); }
.badge-access-occupied { background: var(--gray-500); }

.modal-access-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.modal-access-verified {
  font-size: 0.78rem;
  color: var(--gray-500);
}
.modal-access-instructions,
.modal-access-notes {
  font-size: 0.85rem;
  color: var(--gray-700);
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.modal-access-notes-issue {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}
.modal-access-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ============================================
   MVP polish U1–U4 (2026-06-14)
   ============================================ */

/* U3 — uniform card address/location alignment across the grid.
   Reserve consistent vertical space so stats/price rows line up even
   when one card's street wraps to two lines or has no city line. */
.property-address {
  min-height: 2.5em;        /* up to ~2 lines of street */
  display: flex;
  align-items: flex-start;
}
.property-location {
  min-height: 1.1em;        /* always present (may be &nbsp;) for alignment */
}

/* U2 — primary action row: Schedule showing + Make Offer, equal width,
   no text truncation. */
.property-card-actions-primary {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.property-card-actions-primary .card-btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;      /* never truncate "Make Offer" mid-word */
  text-align: center;
}
/* Uniform secondary buttons (Details / Copy / Share / Email / Request edit) */
.property-card-actions .card-btn {
  white-space: nowrap;
}

/* U1 + U4 — filter action buttons (Clear filters, Legend) — distinct from
   the toggle chips so they don't read as on/off filters. */
.filter-group-actions {
  margin-left: auto;        /* push to the right edge of the filter bar */
}
.filter-action-btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  background: var(--surface);
  color: var(--gray-700);
  cursor: pointer;
}
.filter-action-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

/* U4 — legend modal */
.legend-intro {
  font-size: 0.82rem;
  color: var(--gray-500);
  margin: 0 0 18px;
}
.legend-section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
}
.legend-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.legend-heading {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-primary);
}
.legend-subhead {
  margin: 2px 0 8px !important;
}
.legend-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gray-700);
}
.legend-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legend-list-stages { flex-direction: row; flex-wrap: wrap; }
.legend-chip {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  color: var(--gray-800);
}
.legend-note {
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: 8px;
}

/* U13 — seller record page: section helper text */
.seller-card-section-hint {
  font-size: 0.82rem;
  color: var(--gray-500);
  margin: -2px 0 10px;
  line-height: 1.4;
}

/* FA-202b — appointment contact line in the Access & Showing block */
.modal-access-appt {
  font-size: 0.85rem;
  color: var(--gray-700);
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.modal-access-appt a { font-weight: 600; }

/* ============================================
   FA-101 — property Table view (2026-06-14)
   ============================================ */
.property-table-wrap { overflow-x: auto; }
.property-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.property-table thead th {
  text-align: left;
  padding: 8px 10px;
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 2px solid var(--gray-200);
  color: var(--gray-600);
  font-weight: 700;
  white-space: nowrap;
  z-index: 1;
}
.property-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.property-table tbody tr:hover { background: var(--gray-50); }
.property-table .pt-addr { font-weight: 600; color: var(--gray-900); }
.property-table .pt-num { white-space: nowrap; }
.property-table .table-muted { color: var(--gray-400); }
.property-table .pt-actions { white-space: nowrap; }
.property-table .pt-actions .card-btn { padding: 3px 8px; font-size: 0.78rem; }

/* ============================================
   U16 — Events calendar (month grid) view
   ============================================ */
.events-view-toggle { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); overflow: hidden; }
.events-view-btn { padding: 6px 14px; font-size: 0.82rem; font-weight: 600; background: var(--surface); color: var(--gray-600); border: none; cursor: pointer; }
.events-view-btn + .events-view-btn { border-left: 1px solid var(--gray-300); }
.events-view-btn.is-active { background: var(--brand-primary, #2E75B6); color: #fff; }

.cal-wrap { margin-top: 4px; }
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-nav-btn { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--gray-300); background: var(--surface); color: var(--gray-700); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.cal-nav-btn:hover { background: var(--gray-100); }
.cal-month-label { font-weight: 700; font-size: 1.05rem; color: var(--gray-900); min-width: 150px; text-align: center; }
.cal-today-btn { margin-left: 6px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--gray-300); background: var(--surface); color: var(--gray-700); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekdays { margin-bottom: 4px; }
.cal-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
.cal-cell { min-height: 92px; border: 1px solid var(--gray-200); border-radius: 8px; padding: 4px 5px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.cal-cell-empty { border: none; background: transparent; }
.cal-cell-today { border-color: var(--brand-primary, #2E75B6); box-shadow: inset 0 0 0 1px var(--brand-primary, #2E75B6); }
.cal-daynum { font-size: 0.78rem; font-weight: 600; color: var(--gray-600); }
.cal-cell-today .cal-daynum { color: var(--brand-primary, #2E75B6); }
.cal-events { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-event { display: block; width: 100%; text-align: left; border: none; border-radius: 4px; padding: 2px 5px; font-size: 0.68rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #fff; }
.cal-event-blue { background: #2E75B6; }
.cal-event-amber { background: #b7791f; }
.cal-event-green { background: #2f855a; }
.cal-event-purple { background: #6b46c1; }
.cal-more { font-size: 0.66rem; color: var(--gray-500); padding-left: 2px; }
@media (max-width: 640px) {
  .cal-cell { min-height: 64px; }
  .cal-event { font-size: 0.6rem; }
}

/* U9 — link-only media flag (nudge to upload to the server) */
.badge-link-only { background: var(--orange, #b7791f); color: #fff; }

/* U12 — info / tip box (price guardrail helper text) */
.info-box {
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 9px 11px;
  border-radius: 8px;
  margin: 4px 0 12px;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.info-box-tip {
  background: color-mix(in srgb, var(--blue, #2E75B6) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--blue, #2E75B6) 25%, var(--surface));
}

/* U12 (seller) — warning variant of the info box */
.info-box-warn {
  background: color-mix(in srgb, var(--red, #c0392b) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--red, #c0392b) 30%, var(--surface));
  color: var(--gray-800);
}

/* ============================================
   2026-06-14 — Public detail: thumbnail gallery + Condition & Systems
   ============================================ */
.public-detail-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 2px;
}
.public-detail-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--gray-100);
}
.public-detail-thumb.is-active { border-color: var(--blue, #2E75B6); }
.public-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.public-detail-condition { margin-top: 18px; }
.public-detail-condition h4 { margin: 0 0 4px; }
.public-detail-condition-note { font-size: 0.8rem; color: var(--gray-500); margin: 0 0 10px; line-height: 1.4; }
.public-detail-cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px 18px;
}
.public-detail-cond-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.85rem;
}
.public-detail-cond-label { color: var(--gray-500); }
.public-detail-cond-val { font-weight: 600; color: var(--gray-800); text-align: right; }
.public-detail-cond-unknown { color: var(--gray-400); font-weight: 400; }

/* Condition & Systems — agent property modal (filler view) */
.modal-condition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px 18px; }
.modal-condition-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gray-100); font-size: 0.85rem; }
.modal-condition-label { color: var(--gray-500); }
.modal-condition-val { font-weight: 600; color: var(--gray-800); text-align: right; }
.modal-condition-unknown { color: var(--gray-400); font-weight: 400; }
.modal-condition-note { font-size: 0.78rem; color: var(--gray-500); margin-top: 8px; }

/* ============================================================
   SELLER RECORD — three-column layout (2026-06-22 redesign)
   Modeled on the REI BlackBook contact record: seller identity +
   buyer-facing contact + entities (left), listed properties (center),
   notifications + offers + buyer demand (right). Collapses to one
   column on narrow screens. Reusable as a seller card on the buyer side.
   ============================================================ */
.seller-record-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 720px) minmax(300px, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}
.seller-rail { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.seller-rail-center { gap: 0; }

.seller-id-card,
.seller-rail-section {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
}
.seller-rail-section { padding: 14px 16px; }

.seller-id-head { display: flex; align-items: center; gap: 12px; }
.seller-id-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-primary-light, #e0e7ff);
  color: var(--brand-primary, #4f46e5);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.seller-id-name { font-size: 1.05rem; margin: 0; line-height: 1.2; }
.seller-id-status {
  display: inline-block; margin-top: 4px; font-size: 0.7rem;
  background: color-mix(in srgb, var(--green, #16a34a) 14%, transparent);
  color: var(--green, #16a34a);
  padding: 2px 9px; border-radius: var(--radius-full, 999px); font-weight: 600;
}
.seller-id-email {
  margin-top: 12px; font-size: 0.8rem; color: var(--text-muted, #64748b);
  word-break: break-all;
}
.seller-id-edit {
  margin-top: 12px; width: 100%; appearance: none; cursor: pointer;
  background: transparent; border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px); padding: 8px; font: inherit;
  color: var(--text, #0f172a); transition: background 120ms ease, border-color 120ms ease;
}
.seller-id-edit:hover { background: var(--surface-sunken, #f8fafc); border-color: var(--brand-primary, #4f46e5); }

.seller-rail-section-head { display: flex; align-items: center; justify-content: space-between; }
.seller-rail-section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #64748b); margin: 0 0 4px; font-weight: 700; }
.seller-rail-section-hint { font-size: 0.74rem; color: var(--text-muted, #94a3b8); margin: 0 0 10px; }
.seller-rail-add {
  appearance: none; cursor: pointer; border: 1px solid var(--border, #e2e8f0);
  background: transparent; border-radius: var(--radius-md, 8px);
  width: 24px; height: 24px; line-height: 1; font-size: 16px; color: var(--text-muted, #64748b);
}
.seller-rail-add:hover { border-color: var(--brand-primary, #4f46e5); color: var(--brand-primary, #4f46e5); }

.seller-contact-row { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; padding: 3px 0; }
.seller-contact-row a { color: var(--brand-primary, #4f46e5); text-decoration: none; word-break: break-all; }
.seller-contact-row a:hover { text-decoration: underline; }
.seller-contact-ic { opacity: 0.7; }
.seller-contact-empty { font-size: 0.8rem; color: var(--text-muted, #64748b); line-height: 1.5; margin: 0; }
.seller-inline-link {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand-primary, #4f46e5); text-decoration: underline;
}

.seller-entity-row {
  appearance: none; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  background: var(--surface-sunken, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px); padding: 10px 12px; margin-top: 8px;
  display: block; transition: border-color 120ms ease;
}
.seller-entity-row:hover { border-color: var(--brand-primary, #4f46e5); }
.seller-entity-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seller-entity-name { font-size: 0.88rem; font-weight: 600; }
.seller-entity-default { color: var(--orange, #f59e0b); }
.seller-entity-signer { font-size: 0.76rem; color: var(--text-muted, #64748b); margin-top: 3px; }
.seller-entity-flag { display: inline-block; margin-top: 7px; font-size: 0.68rem; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-full, 999px); }
.seller-entity-flag.is-ok { background: color-mix(in srgb, var(--green, #16a34a) 13%, transparent); color: var(--green, #16a34a); }
.seller-entity-flag.is-warn { background: color-mix(in srgb, var(--orange, #f59e0b) 16%, transparent); color: var(--orange, #b45309); }

.seller-row-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.seller-row-badge { font-size: 0.68rem; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-full, 999px); white-space: nowrap; }
.seller-row-badge.is-new { background: #e0edff; color: #1d4ed8; }
.seller-row-badge.is-dom { background: var(--surface-sunken, #f1f5f9); color: var(--text-muted, #64748b); }
.seller-row-badge.is-drop { background: #fef3c7; color: #b45309; }
.seller-row-badge.is-showing { background: #ede9fe; color: #6d28d9; }
.seller-row-badge.is-offer { background: #dcfce7; color: #15803d; }
html[data-theme="dark"] .seller-row-badge.is-new { background: rgba(37,99,235,0.22); color: #93c5fd; }
html[data-theme="dark"] .seller-row-badge.is-dom { background: rgba(148,163,184,0.16); color: #cbd5e1; }
html[data-theme="dark"] .seller-row-badge.is-drop { background: rgba(245,158,11,0.20); color: #fcd34d; }
html[data-theme="dark"] .seller-row-badge.is-showing { background: rgba(139,92,246,0.22); color: #c4b5fd; }
html[data-theme="dark"] .seller-row-badge.is-offer { background: rgba(22,163,74,0.22); color: #86efac; }

.seller-offer-summary-row {
  appearance: none; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  background: var(--surface-sunken, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px); padding: 9px 11px; margin-top: 8px; display: block;
  transition: border-color 120ms ease;
}
.seller-offer-summary-row:hover { border-color: var(--brand-primary, #4f46e5); }
.seller-offer-summary-addr { font-size: 0.84rem; font-weight: 600; }
.seller-offer-summary-terms { font-size: 0.76rem; color: var(--text-muted, #64748b); margin-top: 2px; }
.seller-offer-summary-status { display: inline-block; margin-top: 6px; font-size: 0.68rem; font-weight: 600; padding: 1px 8px; border-radius: var(--radius-full, 999px); }
.seller-offer-summary-status.is-action { background: color-mix(in srgb, var(--orange, #f59e0b) 16%, transparent); color: var(--orange, #b45309); }
.seller-offer-summary-status.is-ok { background: color-mix(in srgb, var(--green, #16a34a) 13%, transparent); color: var(--green, #16a34a); }

.seller-rail-center .seller-properties-compact { grid-template-columns: 1fr; }

@media (max-width: 1023px) {
  .seller-record-grid { grid-template-columns: 1fr; }
  .seller-rail-right { order: 3; }
  .seller-rail-left { order: 1; }
  .seller-rail-center { order: 2; }
  .seller-rail-left, .seller-rail-right { flex-direction: row; flex-wrap: wrap; }
  .seller-rail-left > *, .seller-rail-right > * { flex: 1 1 240px; }
}
@media (max-width: 640px) {
  .seller-rail-left, .seller-rail-right { flex-direction: column; }
}

/* ============================================================
   SELLER RECORD — independent column scroll + inline property rows
   (2026-06-22 follow-up to Cameron's feedback)
   ============================================================ */
/* Each column scrolls on its own (desktop three-col only); the page
   itself stays put because the rails cap their height to the viewport. */
@media (min-width: 1024px) {
  .seller-rail {
    max-height: calc(100vh - 172px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border, #cbd5e1) transparent;
  }
  .seller-rail::-webkit-scrollbar { width: 8px; }
  .seller-rail::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 8px; }
  .seller-rail::-webkit-scrollbar-track { background: transparent; }
}

/* Center column: compact cards become inline rows — small thumbnail on
   the left, details on the right (no full-width hero photo). */
.seller-rail-center .seller-properties-compact { gap: 10px; }
.seller-rail-center .seller-property-compact-card {
  flex-direction: row;
  align-items: stretch;
  border-radius: 10px;
}
.seller-rail-center .seller-compact-thumb {
  width: 92px;
  min-width: 92px;
  aspect-ratio: auto;
  align-self: stretch;
}
.seller-rail-center .seller-compact-thumb-fallback { font-size: 20px; }
.seller-rail-center .seller-compact-thumb-album > span:first-child { font-size: 20px; }
.seller-rail-center .seller-compact-thumb-album-label { font-size: 10px; }
.seller-rail-center .seller-compact-body { padding: 9px 12px; gap: 5px; flex: 1; min-width: 0; }
.seller-rail-center .seller-compact-street { font-size: 13px; }

/* ============================================================
   SELLER RECORD — lockbox chip, offer comparison, live feed
   (2026-06-22 follow-up #3)
   ============================================================ */
.seller-row-badge.is-lockbox { background: #fef3c7; color: #92400e; }
html[data-theme="dark"] .seller-row-badge.is-lockbox { background: rgba(245,158,11,0.20); color: #fcd34d; }

/* Offer summary tile — filler line + listing-vs-offer comparison */
.seller-offer-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seller-offer-summary-filler { font-size: 0.76rem; color: var(--text-muted, #64748b); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.seller-offer-filler-msg { margin-left: auto; color: var(--brand-primary, #4f46e5); text-decoration: none; font-weight: 600; }
.seller-offer-filler-name { font-weight: 600; color: var(--text, #1e293b); }
.seller-offer-filler-msg:hover { text-decoration: underline; }
.seller-offer-compare { margin-top: 8px; font-size: 0.76rem; line-height: 1.5; }
.seller-offer-compare-row { display: flex; gap: 6px; }
.seller-offer-compare-label { width: 44px; flex-shrink: 0; color: var(--text-muted, #94a3b8); }
.offer-val-changed { font-weight: 700; color: var(--brand-primary, #4f46e5); }
.seller-offer-delta { margin-top: 4px; font-size: 0.72rem; font-weight: 600; color: var(--orange, #b45309); }
.seller-offer-delta.is-match { color: var(--green, #16a34a); font-weight: 500; }

/* Live activity ticker */
.seller-feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.seller-feed-row { display: flex; align-items: flex-start; gap: 9px; }
.seller-feed-thumb { width: 46px; min-width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--surface-sunken, #f1f5f9); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-muted, #94a3b8); }
.seller-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seller-feed-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.seller-feed-line1 { display: flex; align-items: center; gap: 6px; }
.seller-feed-tag { font-size: 0.66rem; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-full, 999px); white-space: nowrap; }
.seller-feed-tag.is-new { background: #e0edff; color: #1d4ed8; }
.seller-feed-tag.is-sold { background: #fef3c7; color: #92400e; }
html[data-theme="dark"] .seller-feed-tag.is-new { background: rgba(37,99,235,0.22); color: #93c5fd; }
html[data-theme="dark"] .seller-feed-tag.is-sold { background: rgba(245,158,11,0.20); color: #fcd34d; }
.seller-feed-addr { color: var(--text, #1e293b); font-size: 0.8rem; min-width: 0; }
.seller-feed-detail { color: var(--text-muted, #64748b); font-size: 0.74rem; }
.seller-feed-when { margin-left: auto; color: var(--text-muted, #94a3b8); font-size: 0.7rem; white-space: nowrap; }

/* ============================================================
   SELLER RECORD — expandable buyer-demand map modal (2026-06-22)
   ============================================================ */
.seller-demand-expand {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px;
  padding: 3px 10px; font: inherit; font-size: 0.72rem; color: var(--text-muted, #64748b);
}
.seller-demand-expand:hover { border-color: var(--brand-primary, #4f46e5); color: var(--brand-primary, #4f46e5); }

.seller-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
}
.seller-modal {
  background: var(--surface, #fff); border-radius: 14px; padding: 20px;
  width: 100%; max-width: 900px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.seller-demand-modal { max-width: 980px; }
.seller-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.seller-modal-head h2 { margin: 0; font-size: 1.1rem; }
.seller-modal-close { appearance: none; cursor: pointer; background: transparent; border: none; font-size: 18px; color: var(--text-muted, #64748b); line-height: 1; padding: 4px; }
.seller-modal-close:hover { color: var(--text, #1e293b); }
.seller-demand-modal-map { height: 68vh; min-height: 380px; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-200, #e2e8f0); }

/* ============================================================
   SELLER RECORD — column titles, Active/Sold tabs, offer actions,
   staged offer chips, sold banner (2026-06-22 follow-up #5)
   ============================================================ */
.seller-col-head { padding: 0 2px 6px; margin-bottom: 4px; }
.seller-col-title { font-size: 1.02rem; margin: 0; font-weight: 700; color: var(--text, #1e293b); }

.seller-prop-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.seller-prop-tab {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.8rem;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border, #e2e8f0);
  background: transparent; color: var(--text-muted, #64748b);
}
.seller-prop-tab.is-active { background: var(--brand-primary, #4f46e5); border-color: var(--brand-primary, #4f46e5); color: #fff; }

.seller-offer-summary-click { cursor: pointer; }
.seller-offer-summary-actions { display: flex; gap: 6px; margin-top: 10px; }
.seller-offer-summary-actions .auth-btn { flex: 1; padding: 6px 4px; font-size: 0.78rem; min-width: 0; }

.seller-row-badge.is-offer-pending { background: #fef3c7; color: #92400e; }
.seller-row-badge.is-offer-accepted { background: #dcfce7; color: #15803d; }
html[data-theme="dark"] .seller-row-badge.is-offer-pending { background: rgba(245,158,11,0.20); color: #fcd34d; }
html[data-theme="dark"] .seller-row-badge.is-offer-accepted { background: rgba(22,163,74,0.22); color: #86efac; }

.seller-sold-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface-sunken, #f1f5f9); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 0.85rem; color: var(--text-muted, #64748b);
}
.seller-reactivate-btn { font-size: 0.8rem; padding: 6px 12px; }

/* ============================================================
   SELLER DASHBOARD — top bar, accordion collapse, showings,
   profile popup (2026-06-22 re-layout)
   ============================================================ */
.seller-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0 14px; }
.seller-topbar-titles h1 { margin: 0; font-size: 1.55rem; }
.seller-topbar .dashboard-subtitle { margin: 4px 0 0; }
.seller-topbar-actions { display: flex; align-items: center; gap: 10px; }
.seller-topbar-profile {
  appearance: none; cursor: pointer; background: transparent; border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 9px 14px; font: inherit; color: var(--text, #1e293b); display: inline-flex; align-items: center;
}
.seller-topbar-profile:hover { border-color: var(--brand-primary, #4f46e5); color: var(--brand-primary, #4f46e5); }
.seller-topbar #seller-trust-banner:not(:empty) { flex-basis: 100%; margin-top: 8px; }

/* Accordion collapse control on the expanded full card */
.seller-property-card { position: relative; }
.seller-card-collapse {
  position: absolute; top: 8px; right: 8px; z-index: 2; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 0.72rem; color: var(--text-muted, #64748b);
}
.seller-card-collapse:hover { border-color: var(--brand-primary, #4f46e5); color: var(--brand-primary, #4f46e5); }

/* Upcoming showings rows (left rail) */
.seller-showing-row {
  appearance: none; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  background: var(--surface-sunken, #f8fafc); border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 8px 11px; margin-top: 8px; display: flex; flex-direction: column; gap: 2px;
  transition: border-color 120ms ease;
}
.seller-showing-row:hover { border-color: var(--brand-primary, #4f46e5); }
.seller-showing-when { font-size: 0.82rem; font-weight: 600; color: var(--text, #1e293b); }
.seller-showing-addr { font-size: 0.76rem; color: var(--text-muted, #64748b); }

/* My-profile popup */
.seller-profile-modal { max-width: 560px; }
.seller-profile-modal #seller-profile-modal-body { display: flex; flex-direction: column; gap: 12px; }

/* ============================================
   SELLER CARD DRILL-IN (2026-07-22)
   Mobile: each section is a tappable row with a count badge — the
   property-file drill-in from Cameron's Slow Flips one-pager. Desktop
   keeps every section open and the toggles inert.
   ============================================ */
.seller-drill .drill-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.seller-drill .drill-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seller-drill .drill-count {
  background: var(--info-bg, #dbeafe);
  color: var(--info-text, #1e40af);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.seller-drill .drill-chevron {
  display: none;
  transition: transform 0.15s ease;
}

.seller-drill-subtitle {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.seller-showings-drill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seller-showing-row {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.seller-showing-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.seller-showing-row-meta {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  margin-top: 2px;
}

.seller-showing-row-outcome {
  margin-top: 4px;
  font-weight: 600;
}

.seller-showing-row-notes {
  margin-top: 3px;
  color: var(--text-secondary, #4b5563);
  font-style: italic;
}

.seller-card-lockbox-line {
  margin: 0 0 8px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .seller-drill .drill-toggle {
    cursor: pointer;
    padding: 10px 12px;
    margin: 0 -4px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--bg-subtle, #f9fafb);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .seller-drill .drill-chevron {
    display: inline-block;
  }

  .seller-drill .drill-body {
    display: none;
    padding-top: 10px;
  }

  .seller-drill.is-open .drill-body {
    display: block;
  }

  .seller-drill.is-open .drill-chevron {
    transform: rotate(180deg);
  }
}

@media (min-width: 769px) {
  /* Desktop: always open, toggles are just headings. */
  .seller-drill .drill-body {
    display: block !important;
  }

  .seller-drill .drill-toggle {
    cursor: default;
    pointer-events: none;
  }
}