/* ============================================================================
   V4 reviews list and review detail (W10)
   ----------------------------------------------------------------------------
   Page additions on top of v4.css for business/locations/v4/_reviews and
   _show. Mockups: webapp-v4/seiten/03-bewertungen (prefix bewertungen-) and
   04-bewertung-detail (prefix detail-), renamed to bl-…. Same scope rule as
   v4.css: every rule needs .bl-v4 on an ancestor (the V4 layout's <body>),
   so nothing here touches a page while the v4_design switch is off.
   ========================================================================= */

/* ---------- Head and overview ---------- */
.bl-v4 .bl-reviews-title { min-width: 0; }
.bl-v4 .bl-reviews-title .bl-page-title { overflow-wrap: anywhere; }
.bl-v4 .bl-inline-form { display: inline; margin: 0; }
.bl-v4 .bl-ov-grid--single { grid-template-columns: minmax(0, 1fr); }
/* Plan pill in the live colours: Free grey, Business accent (v4.css), Premium amber */
.bl-v4 .bl-plan--free { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.bl-v4 .bl-plan--premium { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.bl-v4 .bl-spin { animation: bl-spin 1.2s linear infinite; }
.bl-v4 .bl-overview > .bl-note + .bl-note { margin-top: 10px; }
.bl-v4 .bl-lock-ic { color: var(--muted); }
/* ---------- Filters (review_filters_controller.js toggles .hidden and data-active) ---------- */
.bl-v4 .bl-list.hidden,
.bl-v4 .bl-rev.hidden { display: none; }
.bl-v4 .bl-chip:has(input:checked),
.bl-v4 .bl-chip[data-active="true"] { background: var(--btn-bg); border-color: transparent; color: var(--btn-ink); }
.bl-v4 .bl-chip:has(input:checked):hover,
.bl-v4 .bl-chip[data-active="true"]:hover { color: var(--btn-ink); filter: brightness(1.08); }
.bl-v4 .bl-chip:has(input:checked) i,
.bl-v4 .bl-chip[data-active="true"] b { color: inherit; opacity: .8; }

/* ---------- Selection bar ---------- */
.bl-v4 .bl-listhead form { margin: 0; }

/* ---------- Review card ---------- */
.bl-v4 .bl-av-img { padding: 0; object-fit: cover; }
.bl-v4 .bl-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-v4 .bl-thumb-more { display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); }
.bl-v4 .ai-reply-controls { display: flex; flex-direction: column; gap: 10px; }
.bl-v4 .bl-compose .reply-submit-form { margin: 0; }

/* Owner reply with the K7 slots (status pill, edge colour, reason) */
.bl-v4 .bl-owner-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.bl-v4 .bl-owner.bl-owner--pending { border-left-color: var(--warn); }
.bl-v4 .bl-owner.bl-owner--rejected { border-left-color: var(--bad); }
.bl-v4 .bl-owner--rejected .bl-owner-text { color: var(--muted); }
.bl-v4 .bl-owner .bl-reject-note { margin-top: 12px; background: var(--surface); }
.bl-v4 .bl-reject-ic { color: var(--bad); flex: none; }
.bl-v4 .bl-mod-banner { margin-top: 16px; }

/* ---------- No reviews: loading, duplicate listing, none ---------- */
.bl-v4 .bl-nodata { margin-top: 16px; }
.bl-v4 .bl-nodata .bl-empty { margin-top: 0; padding: 64px 24px; }
.bl-v4 .bl-nodata .bl-empty-title,
.bl-v4 .bl-reviews > .bl-empty .bl-empty-title { font-size: 18px; letter-spacing: -.01em; }
.bl-v4 .bl-nodata .bl-empty-sub { max-width: 46ch; line-height: 1.55; }
.bl-v4 .bl-nodata .bl-spinner--lg { margin-bottom: 4px; }
.bl-v4 .bl-empty-ic--lg { width: 32px; height: 32px; stroke-width: 1.4; }
.bl-v4 .bl-swap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 20px; }
.bl-v4 .bl-swap form { margin: 0; }
.bl-v4 .bl-swap .bl-btn { margin-top: 0; }

/* ---------- Dialogs ---------- */
.bl-v4 .bl-confirm-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bl-v4 .bl-tag--covered { height: 20px; padding: 0 8px; font-size: 10.5px; font-weight: 700; background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); flex: none; }
.bl-v4 .bl-upsell { max-width: 440px; }
.bl-v4 .bl-upsell-title { display: flex; align-items: center; gap: 12px; }
.bl-v4 .bl-upsell-title h3 { padding-top: 0; }
.bl-v4 .bl-upsell-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex: none; }
.bl-v4 .bl-upsell-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
.bl-v4 .bl-upsell-foot .bl-btn { width: 100%; }

/* ---------- Review detail ---------- */
.bl-v4 .bl-detail { max-width: 840px; }
.bl-v4 .bl-detail-card { padding: 32px; }
.bl-v4 .bl-detail-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; }
.bl-v4 .bl-detail-av { width: 56px; height: 56px; font-size: 20px; background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.bl-v4 .bl-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; min-height: 56px; }
.bl-v4 .bl-detail-who { min-width: 0; padding-top: 4px; }
.bl-v4 .bl-detail-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-v4 .bl-detail-date { margin-top: 4px; font-size: 13px; color: var(--muted); }
.bl-v4 .bl-detail-stars { padding-top: 8px; font-size: 18px; flex: none; }
.bl-v4 .bl-detail-body { grid-column: 2; min-width: 0; }
.bl-v4 .bl-detail-text { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 68ch; overflow-wrap: anywhere; }
.bl-v4 .bl-detail-foot { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.bl-v4 .bl-detail-owner { padding: 16px 18px; }
.bl-v4 .bl-detail-owner .bl-owner-head { align-items: flex-start; }
.bl-v4 .bl-detail-owner .bl-owner-meta { min-height: 34px; }
.bl-v4 .bl-detail-owner .bl-owner-text { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.bl-v4 .bl-detail-posted { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.bl-v4 .bl-detail-form { margin: 0; }
.bl-v4 .bl-detail-form-title { font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
.bl-v4 .bl-detail-form .bl-textarea { min-height: 132px; font-size: 15px; }
.bl-v4 .bl-detail-form-foot { display: flex; align-items: center; gap: 16px; }
.bl-v4 .bl-detail-empty { padding: 72px 24px; }
.bl-v4 .bl-detail-empty .bl-empty-title { font-size: 20px; letter-spacing: -.01em; }
.bl-v4 .bl-detail-empty .bl-empty-sub { max-width: 40ch; line-height: 1.55; }

/* ---------- Dark mode: undo the global `.dark input/textarea/select { … !important }`
   of the old look (app/assets/tailwind/application.css) inside these V4 fields ---------- */
.dark .bl-v4 :is(.bl-reviews, .bl-detail) .bl-search input,
.dark .bl-v4 :is(.bl-reviews, .bl-detail) .bl-field select { background-color: transparent !important; border-color: transparent !important; color: var(--ink) !important; }
.dark .bl-v4 :is(.bl-reviews, .bl-detail) textarea.bl-textarea { background-color: var(--surface) !important; border-color: var(--line-strong) !important; color: var(--ink) !important; }
.dark .bl-v4 :is(.bl-reviews, .bl-detail) textarea.bl-textarea:focus { border-color: var(--accent) !important; }

/* ---------- Phone and narrow windows ---------- */
@media (max-width: 1023.98px) {
  .bl-v4 .bl-owner-meta { gap: 6px 8px; }
  .bl-v4 .bl-owner .bl-owner-head { align-items: flex-start; }
  .bl-v4 .bl-nodata .bl-empty { padding: 48px 20px; }
  .bl-v4 .bl-swap { align-self: stretch; }
  .bl-v4 .bl-swap form,
  .bl-v4 .bl-swap .bl-btn { width: 100%; }
  .bl-v4 .bl-swap .bl-btn { height: 44px; }
  .bl-v4 .bl-upsell { max-width: none; }
  .bl-v4 .bl-upsell-foot .bl-btn { height: 44px; }

  .bl-v4 .bl-detail { max-width: none; }
  .bl-v4 .bl-detail-card { padding: 20px; }
  .bl-v4 .bl-detail-grid { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; }
  .bl-v4 .bl-detail-av { width: 44px; height: 44px; font-size: 17px; }
  .bl-v4 .bl-detail-head { flex-direction: column; gap: 6px; min-height: 0; }
  .bl-v4 .bl-detail-who { padding-top: 0; }
  .bl-v4 .bl-detail-name { font-size: 18px; white-space: normal; }
  .bl-v4 .bl-detail-stars { padding-top: 0; font-size: 16px; }
  .bl-v4 .bl-detail-body { grid-column: 1 / -1; }
  .bl-v4 .bl-detail-text { margin-top: 14px; font-size: 15.5px; }
  .bl-v4 .bl-detail-foot { margin-top: 20px; padding-top: 20px; }
  /* Phone: read first, then act. "Antwort entfernen" moves below the reply. */
  .bl-v4 .bl-detail-owner { padding: 14px; display: flex; flex-direction: column; align-items: flex-start; }
  .bl-v4 .bl-detail-owner > * { max-width: 100%; }
  .bl-v4 .bl-detail-owner .bl-owner-head { display: contents; }
  .bl-v4 .bl-detail-owner .bl-owner-meta { min-height: 0; }
  .bl-v4 .bl-detail-owner .bl-owner-head form { order: 10; margin-top: 14px; }
  .bl-v4 .bl-detail-form-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .bl-v4 .bl-detail-form-foot .bl-btn { height: 44px; }
  .bl-v4 .bl-detail-empty { padding: 48px 20px; }
  .bl-v4 .bl-detail-empty .bl-btn { height: 44px; }
}