:root {
  --border: #dcdfe4;
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --text: #1c1f24;
  --text-muted: #6b7280;
  --accent: #2563eb;
  --header-bg: #f1f3f5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.topbar h1 { font-size: 16px; margin: 0; }
.topbar-status { color: var(--text-muted); font-size: 12px; }
.nav-link { font-size: 12px; color: var(--accent); text-decoration: none; margin-right: 14px; }
.nav-link:hover { text-decoration: underline; }
.export-link { color: #166534; font-weight: 600; }
.language-picker { font-size: 12px; color: var(--text-muted); margin-right: 14px; }
.language-picker select { font-size: 12px; margin-left: 4px; padding: 1px 2px; }
.selection-count { margin-left: 10px; color: var(--accent); font-weight: 600; }
.hint { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }

/* Mode selector — "changes the view, never the data", so it's styled
   distinctly from both the blue search form and the amber free filter
   rail: neutral dark, since it's neither spending money nor re-slicing —
   it's just a lens over the same rows. */
.mode-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #1c1f24;
  flex-wrap: wrap;
}
.mode-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border: 1px solid #3a3f4a;
  border-radius: 6px;
  background: transparent;
  color: #d1d5db;
  cursor: pointer;
}
.mode-btn:hover { background: #2a2f3a; }
.mode-btn.active { background: #fff; color: #1c1f24; border-color: #fff; }
.mode-bar-hint { font-size: 11px; color: #9ca3af; margin-left: 4px; }
.risk-direction-toggle { display: flex; gap: 12px; margin-left: 10px; }
.risk-direction-toggle .cb-inline { color: #d1d5db; font-size: 11px; }
#comparativeBtnWrap { margin-left: auto; }
#comparativeBtn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  background: #6d28d9;
  color: #fff;
  cursor: pointer;
}
#comparativeBtn:disabled { opacity: 0.6; cursor: default; }
.comparative-result {
  flex: 0 0 auto;
  background: #f5f3ff;
  border-bottom: 1px solid #ddd6fe;
  padding: 10px 16px;
  font-size: 12px;
}
.comparative-result h3 { margin: 0 0 6px; font-size: 12px; }
.comparative-result .pick { margin-bottom: 6px; }
.comparative-result .pick strong { color: #5b21b6; }

.layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.table-wrap {
  flex: 1 1 auto;
  overflow: auto;
}

/* Distinct amber tint on purpose (non-negotiable #10): this re-slices
   already-fetched data client-side, it never spends Apify credit or
   changes the search — visually different from the blue-accented search
   form so the two are never confused. */
.filter-rail {
  flex: 0 0 220px;
  background: #fffbeb;
  border-right: 1px solid #fde68a;
  overflow-y: auto;
  padding: 14px;
}

.filter-rail h2 { font-size: 13px; margin: 0 0 4px; }
.filter-rail .hint { font-size: 11px; color: var(--text-muted); margin: 4px 0 14px; }

.filter-group { margin-bottom: 16px; }
.filter-group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 6px;
}

/* phase2 Part 6: purple, matching search.html's NL-fill section — a third,
   distinct input mode from the blue search form and the amber filter rail
   it lives inside (still zero-cost like the rest of the rail, just phrased
   as a sentence instead of individual fields). */
.nl-filter-group { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 6px; padding: 8px; }
.nl-filter-group textarea {
  width: 100%;
  font: inherit;
  font-size: 12px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  resize: vertical;
  margin-bottom: 6px;
}
#nlFilterBtn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  background: #6d28d9;
  color: #fff;
  cursor: pointer;
}
#nlFilterBtn:disabled { opacity: 0.6; cursor: default; }
.nl-unmapped { margin: 6px 0 0; padding-left: 16px; font-size: 10px; color: #92400e; }
.nl-filter-summary {
  margin-top: 6px;
  font-size: 11px;
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 4px;
  padding: 4px 6px;
}
.nl-filter-summary button {
  font: inherit;
  font-size: 10px;
  margin-left: 6px;
  border: none;
  background: none;
  color: #5b21b6;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.filter-checkboxes { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.filter-checkboxes label { display: flex; align-items: center; gap: 5px; }
.cb-inline { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.4; }

.flagged-row { opacity: 0.7; }
.flag-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  margin-left: 4px;
}

/* phase2 Part 3: marks a value as AI-derived from the description text
   rather than the portal's own structured data — hover shows the quote. */
.ai-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 6px;
  background: #ede9fe;
  color: #6d28d9;
  margin-left: 4px;
  cursor: help;
  vertical-align: middle;
}

/* phase2 Part 4: risk flags — red on purpose, these are dealbreakers. */
.risk-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  margin-left: 4px;
  cursor: help;
}

.risk-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12px;
}

.risk-banner-item { color: #991b1b; margin-bottom: 4px; }
.risk-banner-item:last-child { margin-bottom: 0; }
.risk-banner-item .flag-meta { display: block; font-size: 11px; color: #7f1d1d; margin-top: 2px; }

/* Mode 3 (Risk review) severity tiers — see PropertyMetrics.js RISK_TIERS. */
.risk-chip.tier-dealbreaker { background: #fee2e2; color: #991b1b; }
.risk-chip.tier-costly { background: #fef3c7; color: #92400e; }
.risk-chip.tier-negotiable { background: #dbeafe; color: #1e40af; }
.severity-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 8px;
}
.severity-pill.tier-dealbreaker { background: #fee2e2; color: #991b1b; }
.severity-pill.tier-costly { background: #fef3c7; color: #92400e; }
.severity-pill.tier-negotiable { background: #dbeafe; color: #1e40af; }

/* Mode 1 (Bargain). */
.motivated-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: #dcfce7;
  color: #166534;
  margin-left: 4px;
}
.motivation-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #ecfccb;
  color: #3f6212;
  margin: 2px 4px 0 0;
}

/* Mode 2 (Renovation). */
.walkup-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  margin-left: 4px;
}
.blocker-chip {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  margin: 2px 4px 0 0;
}

/* Column visibility per mode — see app.js applyModeColumns(). */
.col-mode-hidden { display: none; }

/* phase2 Part 5: Swedish two-sentence triage summary, shown under the
   portal title in the detail panel (and replaces it in the table). */
.ai-summary {
  font-size: 12px;
  color: var(--text);
  background: #f5f3ff;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 10px;
}

.filter-row { display: flex; gap: 6px; }
.filter-row input {
  width: 0;
  flex: 1 1 auto;
  font: inherit;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.filter-group select {
  width: 100%;
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
}

#clearFilters {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
#clearFilters:hover { background: var(--bg-alt); }

table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  z-index: 1;
}

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: #e7e9ec; }
th.sortable.sort-asc::after { content: " \25B2"; font-size: 9px; }
th.sortable.sort-desc::after { content: " \25BC"; font-size: 9px; }

th.col-num, td.col-num { text-align: right; }
th.col-check, td.col-check { width: 28px; text-align: center; }
th.col-thumb, td.col-thumb { width: 52px; }

tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

tbody tr:nth-child(even) { background: var(--bg-alt); }
tbody tr:hover { background: #eaf1ff; }
tbody tr.selected-row { background: #dbe8ff; }

td { padding: 5px 8px; }

.thumb {
  width: 40px;
  height: 30px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--bg-alt);
}

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

.status-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  background: #e5e7eb;
  color: #374151;
}

.loading, .empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
}

.detail-panel {
  flex: 0 0 340px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
  position: relative;
}

.detail-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.detail-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; padding-right: 20px; }
.detail-sub { color: var(--text-muted); margin-bottom: 12px; }
.detail-price { font-size: 20px; font-weight: 700; margin-bottom: 12px; }

.detail-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}

.detail-grid dt { color: var(--text-muted); }
.detail-grid dd { margin: 0; }

.detail-section {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-bottom: 12px;
}
.detail-section h3 { font-size: 12px; margin: 0 0 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.detail-section .detail-grid { margin-bottom: 6px; }

.amenity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.amenity {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #ecfdf3;
  color: #166534;
}

.amenity.no { background: #f3f4f6; color: #9ca3af; }

.detail-desc {
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-bottom: 12px;
}

.detail-links a {
  display: inline-block;
  margin-right: 10px;
  font-size: 12px;
  color: var(--accent);
}

/* phase2 Part 7: cross-portal duplicate resolution. */
.dup-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 8px;
  background: #dbeafe;
  color: #1e40af;
}
.dup-spread { color: #1e40af; }