/* ---------------------------------------------------------------------------
   Листинг: филтърна лента + плътна таблица.
   Визия „финансов инструмент“: числата доминират, снимки няма, редовете са
   плътни. Ползва променливите от app.css — тук няма втора палитра.
   --------------------------------------------------------------------------- */

:root {
  --dev-below: #1a7f4b;   /* под медианата — добра сделка */
  --dev-above: #b3261e;   /* над медианата */
  --num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- Филтърна лента ------------------------------------------------------ */

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

.fb-field { position: relative; min-width: 0; }
.fb-field > label {
  display: block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 5px;
}
.fb-field input[type="text"],
.fb-field input[type="number"],
.fb-field select {
  width: 100%;
  padding: 8px 10px;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fb-field input[type="number"] { font-family: var(--num); text-align: right; }
.fb-field input:focus, .fb-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.fb-row { display: flex; gap: 8px; }
.fb-row input { min-width: 0; }

.fb-quick { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.fb-chip {
  font: inherit;
  font-size: .78rem;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.fb-chip:hover { border-color: var(--accent); color: var(--accent); }
.fb-chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.fb-actions { display: flex; gap: 8px; align-items: center; }

/* Typeahead — прогресивно подобрение, скрит без JS. */
.fb-suggest {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: 100%;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
}
.fb-suggest li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: .92rem;
}
.fb-suggest li:hover, .fb-suggest li.is-active { background: var(--bg); }
.fb-suggest .s-count { color: var(--muted); font-family: var(--num); font-size: .82rem; }

/* --- Резултати ----------------------------------------------------------- */

.result-count { color: var(--muted); margin: 0 0 10px; font-size: .95rem; }
.result-count b { color: var(--ink); font-family: var(--num); }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

table.listing { width: 100%; border-collapse: collapse; font-size: .95rem; }

table.listing thead th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  white-space: nowrap;
}
table.listing thead th.c-num { text-align: right; }

table.listing tbody tr { border-bottom: 1px solid var(--line); }
table.listing tbody tr:last-child { border-bottom: 0; }
table.listing tbody tr:hover { background: #fafbfc; }

table.listing td { padding: 9px 14px; vertical-align: middle; }

/* Числата: моноширинни и подравнени вдясно. */
td.c-num { text-align: right; font-family: var(--num); white-space: nowrap; font-variant-numeric: tabular-nums; }
td.c-price { font-weight: 600; }
.nil { color: var(--dead); }

td.c-what a { font-weight: 600; }
td.c-what .c-city { display: block; font-size: .82rem; color: var(--muted); }

/* Отклонението е най-видимият елемент в реда. */
.c-dev { width: 1%; }
.dev {
  display: inline-block;
  min-width: 74px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .95rem;
}
.dev.is-below { color: var(--dev-below); background: rgba(26,127,75,.10); }
.dev.is-above { color: var(--dev-above); background: rgba(179,38,30,.09); }

/* --- Празен резултат ----------------------------------------------------- */

.empty-filtered .empty-zero { font-size: 1.15rem; margin-bottom: 6px; }
.alt-list { list-style: none; padding: 0; margin: 8px auto 0; max-width: 420px; }
.alt-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px;
}
.alt-count { color: var(--muted); font-family: var(--num); }

/* --- Търсачка в хедъра --------------------------------------------------- */

.header-search { position: relative; margin-left: auto; flex: 0 1 280px; min-width: 0; }
.header-search input {
  width: 100%;
  padding: 8px 12px;
  font-size: .92rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
}
.header-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff; }
.header-search .fb-suggest { left: 0; right: 0; }

/* --- Мобилно: редът се сгъва на две линии, без хоризонтален скрол --------- */

@media (max-width: 720px) {
  .table-wrap { border-radius: var(--radius); }
  table.listing thead { display: none; }
  table.listing, table.listing tbody, table.listing tr { display: block; width: 100%; }
  table.listing td { display: block; width: auto; }

  table.listing tbody tr { padding: 11px 14px; }
  table.listing td { padding: 0; }

  /* Линия 1: какво + отклонение. Линия 2: числата в редица.
     Flex, а не grid: няколко клетки в един grid-area биха се застъпили.
     Празният ::after с flex-basis:100% е принудителният пренос между линиите. */
  table.listing tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
  }
  td.c-what { order: 1; flex: 1 1 auto; min-width: 0; }
  td.c-dev  { order: 2; flex: 0 0 auto; margin-left: auto; text-align: right; }

  table.listing tbody tr::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }

  td.c-num:not(.c-dev) {
    order: 4;
    flex: 0 0 auto;
    text-align: left;
    font-size: .86rem;
    color: var(--muted);
  }
  /* Разделител между числата на втория ред. */
  td.c-num:not(.c-dev):not(:last-child)::after { content: " ·"; color: var(--dead); }

  .header-search { flex-basis: 100%; margin: 8px 0 0; order: 3; }
  .site-header .container { flex-wrap: wrap; }
}