/* ============================================================
   Host-portal-only styles. Anything general enough for the admin
   or city portal belongs in pz.css instead — pz.css is shared
   verbatim across all four surfaces and fixes go upstream.
   ============================================================ */

/* ---------- Bulk action bar (04 §3.2) ----------
   Sticks under the topline so the selection controls stay reachable while
   scrolling a long listing table. */
.hp-bulkbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--pz-blue-soft);
  border: 1px solid var(--pz-line); border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow);
}
.hp-bulkbar .count {
  font-weight: 700; font-size: 13.5px; color: var(--pz-blue-deep); margin-right: 4px;
}
@media (max-width: 620px) {
  .hp-bulkbar { position: static; }
  .hp-bulkbar .count { flex: 1 0 100%; }
}

/* ---------- Listing table furniture ---------- */
.hp-pick { width: 34px; }
.hp-features { white-space: nowrap; color: var(--pz-ink-soft); }
.hp-features .mi { margin-right: 3px; }
.hp-actions { white-space: nowrap; text-align: right; }
.hp-actions > * { margin-left: 4px; }

/* ---------- Inline rate matrix (04 §3.4) ----------
   Save-on-blur with a green flash. The flash is an animation rather than a
   lingering class so a second edit re-triggers it cleanly. */
.hp-cell { padding: 6px 8px; }
.hp-rate {
  width: 92px; text-align: right; padding: 6px 8px;
  font-variant-numeric: tabular-nums;
}
.hp-rate::placeholder { color: var(--pz-grey); font-style: italic; }
.hp-rate.saved { animation: hp-saved 1.1s var(--pz-ease-out); }
@keyframes hp-saved {
  0%   { background: var(--pz-green-bg); border-color: var(--pz-green); }
  70%  { background: var(--pz-green-bg); border-color: var(--pz-green); }
  100% { background: var(--pz-surface); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-rate.saved { animation: none; background: var(--pz-green-bg); }
}

/* ---------- Weekly payout trend (04 §3.1) ----------
   Eight flex-column bars. Deliberately not a chart library: the content is
   eight numbers and the "no build step" rule outranks the polish. */
.hp-trend {
  display: flex; align-items: flex-end; gap: 10px;
  height: 190px; padding-top: 6px;
}
.hp-bar {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 6px;
}
.hp-bar .bar {
  width: 100%; max-width: 54px; border-radius: 6px 6px 0 0;
  background: var(--pz-grad-brand);
  transition: filter .18s var(--pz-ease-out);
}
.hp-bar:hover .bar { filter: brightness(1.08); }
.hp-bar .v {
  font-size: 11.5px; font-weight: 700; color: var(--pz-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hp-bar .k {
  font-size: 11px; color: var(--pz-ink-soft); white-space: nowrap;
}
@media (max-width: 700px) {
  .hp-trend { height: 150px; gap: 5px; }
  .hp-bar .v { display: none; }        /* the tooltip still carries the number */
}

/* ---------- Inline forms (inventory builder) ---------- */
.hp-form {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.hp-form .pz-field { margin: 0; flex: 1 1 150px; min-width: 130px; }
.hp-form button { flex: 0 0 auto; }
@media (max-width: 620px) {
  .hp-form { display: grid; }
  .hp-form button { width: 100%; }
}

.hp-formerror { margin-top: 14px; }