/* posts.css — Posts view: filter bar, table, bulk bar, totals (desktop). */

.posts__filters { padding: var(--space-4); margin-bottom: var(--space-4); }
/* auto-fit rather than a hand-counted track list. The list was
   `1.4fr 1fr 1fr 1fr 1.6fr` and a sixth filter (Type post) dropped straight
   into an implicit row on its own — the same reason the KPI and account grids
   pack themselves. A seventh filter now needs no CSS edit at all. */
.posts__filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  align-items: end;
}
/* Two fields earn a second track: search, the only free-text field in the row,
   and the account pillbar, which holds four options and folds onto two lines
   inside a single one. */
.posts__search { grid-column: span 2; }
.posts__account-filter { grid-column: span 2; }
.posts__filter-toggle { display: none; }

/* Inline controls size to their content. `.field__select` is width:100% for
   form layouts; left alone, a status filter dropped into a card header stretched
   the full width of the card and pushed the rest of the toolbar onto its own row. */
.field__select--inline {
  min-height: 32px; padding: 4px 8px; font-size: var(--text-label);
  width: auto; max-width: 100%;
}
/* Same compact treatment for an editable date sitting inside a table row. */
.field__input--inline {
  min-height: 32px; padding: 4px 8px; font-size: var(--text-label);
  width: auto; font-variant-numeric: tabular-nums;
}

/* ---- Bulk action bar ---- */
.posts__bulk {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  background: var(--elke-light); border-radius: var(--radius-badge);
}
.posts__bulk[hidden] { display: none; }
.posts__bulk-count { font-weight: 600; font-size: var(--text-label); color: var(--elke-text); }

/* ---- Table ---- */
.posts__table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm);
}
.posts__table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
/* Cells carry inline selects and date inputs, which are taller than text and
   were sitting flush against their neighbours at the old 10px/12px. */
.posts__table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 12px var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-2);
  white-space: nowrap;
}
.posts__table td { padding: 12px var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.posts__table tr:last-child td { border-bottom: none; }
.posts__row { transition: background var(--duration-fast) var(--ease); }
.posts__row:hover { background: var(--surface-2); }

/* left accent per account */
.posts__row td:first-child { position: relative; }
.account-accent-elke td:first-child::before,
.account-accent-sunkissed td:first-child::before,
.account-accent-mood td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.account-accent-elke td:first-child::before { background: var(--elke); }
.account-accent-sunkissed td:first-child::before { background: var(--sunkissed); }
.account-accent-mood td:first-child::before { background: var(--mood); }

.col-check { width: 36px; }
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
/* A money column's heading belongs above its digits, not off at the left edge.
   `.posts__table th` sets text-align:left and out-specifies the bare `.col-num`
   class, so it has to be said again with enough weight to win. One rule covers
   the posts, invoice and rapport tables, which all reuse this table. */
.posts__table th.col-num { text-align: right; }
.col-actions { white-space: nowrap; text-align: right; }
.col-briefing { white-space: nowrap; }

.posts__title { display: block; font-weight: 500; }
.posts__company { display: block; font-size: 12px; }

.status-select { border: none; background: transparent; font-weight: 600; cursor: pointer; max-width: 170px; }
.status-select.status-proposed { color: var(--status-proposed); }
.status-select.status-not_selected { color: var(--status-not-selected); }
.status-select.status-planned { color: var(--status-planned); }
.status-select.status-posted { color: var(--status-posted); }
.status-select.status-can_be_invoiced { color: var(--status-can-be-invoiced); }
.status-select.status-invoiced { color: var(--status-invoiced); }
.status-select.status-statistics_shared { color: var(--status-statistics-shared); }
.status-select.status-paid { color: var(--status-paid); }

.iconbtn {
  width: 32px; height: 32px; border-radius: var(--radius-badge);
  font-size: 15px; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---- Totals ---- */
.posts__totals {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-top: var(--space-3);
  font-size: var(--text-label); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.posts__totals strong { color: var(--text); }

/* Value cell: cash and barter each on their own unbreakable line. A single
   string wrapped wherever the column ran out, and because emoji allow a break
   after them it stranded "+ 🤝" on a line by itself. */
.posts__value-part { display: block; white-space: nowrap; }
.posts__value-part--barter { color: var(--deal-barter); }
.posts__value-part--counter-invoice { color: var(--deal-counter-invoice); }