/* ============================================================================
   antwerp-house-agent — app shell design system
   ----------------------------------------------------------------------------
   Extends the report's "Refined Instrument" language (report.css, loaded first)
   to the app-shell surfaces: masthead + nav, the research form, the progress
   page + live per-portal table, and the listings table. Same tokens (--paper,
   --ink, --line, --accent, --sans, --mono, signal red/amber/green), same
   restraint: hairline-driven, tabular-mono figures, no shadows / glows /
   gradients / bounce. The map keeps its own dark map.css.
   ========================================================================== */

/* ── layout ─────────────────────────────────────────────────────────────── */
body { padding: 0; }             /* report.css sets paper/ink/type; own our chrome */
.shell { max-width: 1080px; margin: 0 auto; padding: 1.9rem 1.4rem 4.5rem; }

/* ── masthead + nav ─────────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 1.75rem; flex-wrap: wrap;
  padding-bottom: 1.05rem; margin-bottom: 2.1rem;
  border-bottom: 1px solid var(--line);
}
.masthead__brand {
  margin: 0; font-size: 1.02rem; font-weight: 500; letter-spacing: .01em;
  color: var(--muted); display: flex; align-items: baseline; gap: .55rem;
}
.masthead__brand b {
  color: var(--ink); font-weight: 700;
  font-size: 1.06rem; letter-spacing: .13em; text-transform: uppercase;
}
.masthead__brand::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); align-self: center; margin-right: .1rem; flex: none;
}
a.masthead__brand { color: inherit; text-decoration: none; }

/* ── page heading ───────────────────────────────────────────────────────── */
.page-head { margin: 0 0 1.7rem; }
.page-head h1 {
  margin: 0; font-size: 1.55rem; font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
}
.page-head .sub { margin: .35rem 0 0; color: var(--muted); font-size: .93rem; max-width: 62ch; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: .72rem 1.4rem; min-height: 44px; cursor: pointer;
  letter-spacing: .01em; transition: background .18s var(--ease);
}
.btn:hover { background: #16304f; }        /* one shade deeper than --accent */
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── research form ──────────────────────────────────────────────────────── */
.research-form { max-width: 780px; }
.research-form fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 1.25rem 1.4rem 1.45rem; margin: 0 0 1.15rem;
}
.research-form legend {
  padding: 0 .5rem; margin-left: -.25rem;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
}
.research-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.1rem;
}
.research-form label { display: block; margin: 0; font-size: .82rem; color: var(--muted); }
.research-form fieldset > label { margin: .3rem 0; }
.research-form input[type="number"],
.research-form input[type="text"],
.research-form select {
  display: block; width: 100%; margin-top: .3rem;
  font-family: var(--mono); font-size: .92rem; font-variant-numeric: tabular-nums;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: .55rem .65rem; min-height: 44px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.research-form input:focus, .research-form select:focus {
  border-color: var(--accent); background: var(--surface);
}
/* keep the system :focus-visible ring for keyboard users; drop it only for
   pointer focus (where the border+bg emphasis above is enough). */
.research-form input:focus:not(:focus-visible),
.research-form select:focus:not(:focus-visible) { outline: none; }
/* checkbox rows (type, outdoor) */
.research-form fieldset > label:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: .55rem; min-height: 34px;
  font-family: var(--sans); font-size: .92rem; color: var(--ink-2);
}
.research-form input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }

.price-context-toggle {
  display: block;
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.price-context-label {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.35;
  color: #344054;
  white-space: nowrap;
  width: max-content;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.price-context-label .pc-head {
  font-weight: 600;
  color: #101828;
}
.price-context-label .pc-ask {
  color: #175cd3;
}
.price-context-label .pc-sold {
  color: #667085;
}
/* The provenance suffix ("ons aanbod" / "Statbel") is deliberately quieter
   than the number but must stay readable — it is the whole point of the
   label, not decoration. */
.price-context-label .pc-src {
  color: #98a2b3;
  font-size: 9.5px;
}
.pz-toggles .pz-src {
  color: #98a2b3;
  font-size: 10px;
}
#draw-map {
  height: 440px; margin-top: .3rem;
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden;
}
.leaflet-container { font-family: var(--sans); }
.muted { color: var(--muted); font-size: .85rem; }
#region-hint { margin: .7rem 0 0; }
#research-submit { margin-top: 1.35rem; }

/* ── progress page ──────────────────────────────────────────────────────── */
.prog-status { margin-top: .3rem; }
.prog-status > p { font-size: 1rem; color: var(--ink-2); margin: 0 0 1.1rem; }
.spinner { display: inline-block; }
.result-links { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.result-links a {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .01em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-sm); padding: .55rem .85rem; min-height: 44px;
  display: inline-flex; align-items: center;
}
.result-links a:hover { text-decoration: none; background: #e2e9f1; }

/* live per-portal table (Item 4) */
.portal-progress {
  width: 100%; border-collapse: collapse; margin-top: 1.3rem;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.portal-progress thead th {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
  text-align: left; padding: .6rem .9rem; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.portal-progress td {
  padding: .58rem .9rem; font-size: .9rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.portal-progress tr:last-child td { border-bottom: 0; }
.portal-progress td:first-child { font-family: var(--mono); color: var(--ink); }
.portal-progress td:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.portal-done   td:nth-child(2) { color: var(--green); font-weight: 600; }
.portal-error  td:nth-child(2) { color: var(--red);   font-weight: 600; }
.portal-error  td:last-child   { color: var(--red-2); }
.portal-running td:nth-child(2) { color: var(--muted); }

/* ── listings tables ────────────────────────────────────────────────────────
   .ltable is shared by #hits-table (the selected run's map hits) and
   #listings-table (every listing) — one rule set, two tables. */
.listings-intro { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; }
.ltable {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.ltable thead th {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--faint);
  text-align: left; padding: .65rem .85rem; background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ltable tbody td {
  padding: .68rem .85rem; font-size: .88rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line); vertical-align: baseline;
}
.ltable tbody tr:last-child td { border-bottom: 0; }
.ltable tbody tr:hover td { background: var(--surface-2); }
/* mono, tabular figures for the numeric columns (price / beds / m² / EPC) */
.ltable td:nth-child(3),
.ltable td:nth-child(4),
.ltable td:nth-child(5),
.ltable td:nth-child(6),
.ltable td:nth-child(7) {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.ltable td:nth-child(4) { color: var(--ink); font-weight: 600; }  /* price */
/* card-market-facts: age badge (Adres cell) + EUR/m2 (Prijs cell). Muted and
   inline with the existing chips so a phone card gains no extra line. */
.ltable .mktage, .ltable .eurm2 {
  font-size: .72rem; font-weight: 400; color: var(--muted);
  white-space: nowrap; margin-left: .25rem;
}
.ltable .mktage { font-family: var(--mono); }
.ltable td:first-child {
  font-family: var(--mono); font-size: .76rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}

/* A row that the selected run puts on the map. Background tint only — a
   left/side accent border is an AI-slop tell the report design system bans
   (report.css header), and the "op kaart" pill already names the state. */
.ltable tbody tr.is-run-hit td { background: var(--accent-soft); }
.ltable tbody tr.is-run-hit:hover td { background: #e3e9f1; }
.statuspill--onmap {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}

/* ── run picker (Lijst) ─────────────────────────────────────────────────── */
.runpick { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.3rem; flex-wrap: wrap; }
.runpick__label {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--faint);
}
.runpick__select {
  /* min-width: 0 is load-bearing — a flex item defaults to min-width: auto,
     and a <select>'s intrinsic width is its LONGEST option. The run labels
     ("za 25 jul 2026, 20:09 · huis, villa, herenhuis · …") pushed the control
     to 1053px and gave the whole page a horizontal scrollbar on a phone. */
  flex: 1 1 22rem; min-width: 0; max-width: 46rem; min-height: 40px;
  font-family: var(--sans); font-size: .88rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: .45rem .7rem;
}
.runpick__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Panden filterbalk (feedback 2026-07-28 #2) ─────────────────────────── */
.filterbar {
  display: flex; flex-wrap: wrap; gap: .55rem .9rem; align-items: flex-end;
  margin: 0 0 1.3rem; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: 8px;
}
.filterbar label {
  display: flex; flex-direction: column; gap: .25rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.filterbar input, .filterbar select {
  font-family: var(--sans); font-size: .88rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .35rem .5rem; min-height: 36px; background: var(--paper);
}
.filterbar input[type="number"] { width: 6.2rem; }
.filterbar input[type="text"] { width: 8.5rem; }
/* listing-status filter checkboxes — row layout overrides the column
   layout every other .filterbar label uses (text label + text/select
   input stacked); a checkbox reads left of its label instead. */
.filterbar__check {
  flex-direction: row !important; align-items: center; gap: .4rem !important;
  text-transform: none; letter-spacing: normal; font-size: .82rem !important;
}
.filterbar__check input[type="checkbox"] { min-height: auto; width: auto; }

/* ── cross-link strip (draw-in-app FR-5): plain text links under a filter bar ── */
.linkstrip {
  display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: -.6rem 0 1.1rem;
}
.linkstrip__a, .linkstrip__note {
  display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem;
}
.linkstrip__a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.linkstrip__a:hover { color: var(--ink); }
.linkstrip__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.linkstrip__note, .scopebar__note { color: var(--muted); }
.scopebar__note { margin: -.6rem 0 .9rem; font-size: .88rem; }
.linkstrip--off { display: none; }

/* ── scope bar: the three counts that used to be invisible ──────────────── */
.scopebar {
  margin: 0 0 1.4rem; padding: .6rem .85rem;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .84rem; color: var(--muted); line-height: 1.5;
}
.scopebar__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink);
}

/* ── list sections ──────────────────────────────────────────────────────── */
.listsec { margin: 0 0 2.2rem; }
.listsec__title {
  margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
}
.listsec__sub { margin: 0 0 .8rem; color: var(--muted); font-size: .85rem; max-width: 62ch; }
.listsec__none { margin: 0 0 2rem; }
/* Origin pills on the Runs page — quiet, same hairline family as the rest. */
.listsec__title .statuspill { margin-left: .45rem; vertical-align: .08em; }
.statuspill--recurring { color: var(--green-2); border-color: var(--green); background: var(--green-soft); }
.statuspill--oneshot { color: var(--muted); border-color: var(--line-2); background: var(--surface-2); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .research-grid { grid-template-columns: 1fr; }
  .masthead { gap: .6rem 1rem; }
  .shell { padding: 1.4rem 1rem 3.5rem; }

  /* Tables restack as cards. The previous rule was `overflow-x: auto`, i.e.
     scroll 8 columns sideways on a 390px screen; each cell now shows its own
     header from data-label instead. Applies to every data table in the app. */
  .ltable,
  #runs-table,
  #runs-table-recurring,
  #queue-table,
  #recurring-table {
    display: block; border: 0; border-radius: 0;
  }
  .ltable thead,
  #runs-table thead,
  #runs-table-recurring thead,
  #queue-table thead,
  #recurring-table thead { display: none; }
  .ltable tbody, .ltable tr,
  #runs-table tbody, #runs-table tr,
  #runs-table-recurring tbody, #runs-table-recurring tr,
  #queue-table tbody, #queue-table tr,
  #recurring-table tbody, #recurring-table tr {
    display: block; width: 100%;
  }
  .ltable tr,
  #runs-table tbody tr,
  #runs-table-recurring tbody tr,
  #queue-table tbody tr,
  #recurring-table tbody tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .55rem;
    overflow: hidden;
  }
  .ltable td,
  #runs-table tbody td,
  #runs-table-recurring tbody td,
  #queue-table tbody td,
  #recurring-table tbody td {
    display: grid; grid-template-columns: 7.5em 1fr; gap: .55rem;
    align-items: baseline;
    padding: .5rem .7rem; border-bottom: 1px solid var(--line);
  }
  .ltable td::before,
  #runs-table tbody td::before,
  #runs-table-recurring tbody td::before,
  #queue-table tbody td::before,
  #recurring-table tbody td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: .66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
  }
  /* A cell with no data-label (an action button column) spans full width. */
  .ltable td:not([data-label]),
  #runs-table tbody td:not([data-label]),
  #runs-table-recurring tbody td:not([data-label]),
  #queue-table tbody td:not([data-label]),
  #recurring-table tbody td:not([data-label]) {
    grid-template-columns: 1fr;
  }
  .ltable td:last-child,
  #runs-table tbody td:last-child,
  #runs-table-recurring tbody td:last-child,
  #queue-table tbody td:last-child,
  #recurring-table tbody td:last-child { border-bottom: 0; }
  /* Hover tinting is meaningless on touch and fights the hit tint. */
  .ltable tbody tr:hover td { background: transparent; }
  /* card-market-facts: every element child of a card cell is a grid item, so
     the EUR/m2 span would drop under the label column. Give the Prijs cell a
     third track so it sits beside the price; the age badge aligns with the
     value column instead of the label column. */
  .ltable td[data-label="Prijs"] { grid-template-columns: 7.5em auto 1fr; }
  .ltable .mktage { grid-column: 2; margin-left: 0; }
  .ltable tbody tr.is-run-hit td,
  .ltable tbody tr.is-run-hit:hover td { background: var(--accent-soft); }

  .runpick { gap: .35rem; }
  .runpick__label { flex: 1 1 100%; }
  /* 16px floor: iOS Safari force-zooms the page on focus below it. */
  .runpick__select { flex: 1 1 100%; width: 100%; max-width: 100%; font-size: 16px; min-height: 44px; }

  .scopebar { font-size: .8rem; }
}

/* ── full-width zoekpagina (feat/search-fullwidth-price-zones) ─────────── */
.shell--full { max-width: none; padding: 1.2rem 1.4rem 1.6rem; }
.research-layout {
  display: grid; grid-template-columns: minmax(340px, 400px) 1fr;
  gap: 1.4rem; align-items: start;
}
.research-panel { max-height: calc(100vh - 130px); overflow-y: auto; padding-right: .3rem; }
.research-layout .research-form { max-width: none; }
.research-map { position: sticky; top: 1rem; }
.research-layout #draw-map { height: calc(100vh - 150px); min-height: 480px; margin-top: 0; }
@media (max-width: 900px) {
  .research-layout { grid-template-columns: 1fr; }
  .research-panel { max-height: none; overflow: visible; }
  .research-map { position: static; }
  .research-layout #draw-map { height: 60vh; min-height: 380px; }
}

/* ── prijszones choropleth ─────────────────────────────────────────────── */
.pz-legend, .pz-toggles {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d0d5dd; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.14);
  padding: 8px 11px; font-size: 12px; line-height: 1.7; color: #344054;
}
.pz-legend h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #667085; }
.pz-legend i {
  width: 18px; height: 12px; display: inline-block; margin-right: 6px;
  border-radius: 2px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.08);
}
.pz-kind { margin-top: 5px; border-top: 1px solid #eaecf0; padding-top: 5px; }
.pz-kind label { margin-right: 8px; cursor: pointer; display: inline-block; }
.pz-method {
  margin-top: 5px; padding-top: 5px; border-top: 1px solid #eaecf0;
  max-width: 230px; font-size: 10px; line-height: 1.45; color: #98a2b3;
}
.pz-toggles label { display: block; cursor: pointer; }
.pz-method summary { cursor: pointer; color: #667085; }
.pz-legend .pz-method { max-width: 230px; }
.pz-tooltip { font-size: 12px; line-height: 1.5; }
.pz-tooltip .pz-src { color: #98a2b3; font-size: 10px; }

.pz-tooltip .pz-hint { color: #16a34a; font-size: 10px; }

/* ── vastgepind paneel: geselecteerde zones ────────────────────────────── */
.pz-panel {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #d0d5dd; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.14);
  padding: 8px 11px; font-size: 12px; line-height: 1.6; color: #344054;
  max-width: 300px; max-height: 220px; overflow-y: auto;
}
.pz-panel h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #667085; }
.pz-panel__row { display: flex; align-items: baseline; gap: 6px; }
.pz-panel__name { font-weight: 600; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.pz-panel__prices { margin-left: auto; white-space: nowrap; color: #175cd3; }
.pz-panel__remove {
  border: 0; background: none; color: #98a2b3; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.pz-panel__remove:hover { color: #d92d20; }

/* ── straatprijzen: waardelabel per straat ────────────────────────────── */
.pz-street { background: none; border: 0; }
.pz-street span {
  display: inline-block; transform: translate(-50%, -50%);
  padding: 1px 6px; border-radius: 9px; border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}

/* Geen prijs-tooltips terwijl een Geoman-modus actief is (teken-UX). */
.pz-no-tooltips .pz-tooltip { display: none !important; }

/* ── inline error banners (run_detail.html, queue.html) ─────────────────── */
.run-error { color: var(--red-2); background: var(--red-soft); border-radius: var(--radius-sm); padding: .55rem .85rem; margin: 0 0 1rem; font-size: .9rem; }

/* ── planning-formulier op /queue (feedback 2026-07-28 #3) ─────────────── */
.schedform { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.schedform input[type="time"], .schedform select {
  font-family: var(--sans); font-size: .85rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .3rem .45rem; min-height: 36px; background: var(--paper);
}

/* ── vrije zoekfilter: historiek + rijplafond (handover 07-09) ──────────── */
.ltable tbody tr.is-inactive td, .ltable tbody tr.is-inactive td a { color: var(--muted); }
.statuspill--verdwenen { color: var(--muted); border-color: var(--line-2); background: var(--surface-2); }
.btn--inline {
  padding: .2rem .7rem; min-height: auto; font-size: .8rem;
  vertical-align: baseline; margin-left: .35rem;
}