/* ==========================================================================
   Reviorum — pages/complaints.css
   complaints.html (archive) + complaint.html (single complaint).
   Status colours are neutral/accent/warm tints on purpose: green/orange/red
   are reserved for ratings.
   ========================================================================== */

/* ---------- Status pill ---------- */
.rv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--rv-r-pill);
  font-size: var(--rv-fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.rv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.rv-status--open       { background: var(--rv-warm); color: #7c2d12; }
.rv-status--progress   { background: var(--rv-accent-soft); color: #3730a3; }
.rv-status--resolved   { background: var(--rv-hue-apps); color: #115e59; }
.rv-status--unresolved { background: #e4e7ee; color: var(--rv-ink-2); }
.rv-status--lg { min-height: 28px; font-size: var(--rv-fs-sm); }

/* ---------- Archive hero ---------- */
.rv-complaints-hero { position: relative; overflow: hidden; background: var(--rv-hue-casino); }
.rv-complaints-hero__art { position: absolute; right: 60px; top: 10px; width: 360px; height: 280px; }
.rv-complaints-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
}
.rv-complaints-hero .rv-breadcrumbs { padding-bottom: 0; }
.rv-complaints-hero__title { max-width: 680px; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; }
.rv-complaints-hero__lead { max-width: 600px; color: var(--rv-ink-2); line-height: 1.6; }
.rv-complaints-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-body .rv-btn--complaint { background: var(--rv-hue-casino-strong); color: #fff; }
.rv-body .rv-btn--complaint:hover { background: #9d174d; color: #fff; }
.rv-complaints-hero__stats { display: none; margin: 0; }

/* ---------- Status filter (radio chips, real GET form) ---------- */
.rv-complaints-filter__bar { background: rgba(255, 255, 255, 0.55); }
.rv-complaints-status {
  display: flex;
  gap: 4px;
  min-width: 0; /* fieldsets default to min-content */
  margin: 0;
  padding: var(--rv-s-2) 0;
  border: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.rv-complaints-status::-webkit-scrollbar { display: none; }
.rv-complaints-status__opt { position: relative; flex: none; }
.rv-complaints-status__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-complaints-status__opt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--rv-r-md);
  color: var(--rv-ink-2);
  font-size: var(--rv-fs-md);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.rv-complaints-status__opt small { color: var(--rv-muted); font-size: var(--rv-fs-xs); font-weight: 500; }
.rv-complaints-status__opt span:hover { background: rgba(255, 255, 255, 0.7); }
.rv-complaints-status__opt input:checked + span { background: var(--rv-surface); color: var(--rv-accent); box-shadow: 0 1px 2px rgba(14, 19, 32, 0.08); }
.rv-complaints-status__opt input:focus-visible + span { box-shadow: var(--rv-focus); }

.rv-complaints-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--rv-s-8);
  align-items: start;
  padding-block: var(--rv-s-6) 3.5rem;
}
.rv-complaints-list-wrap { display: flex; flex-direction: column; gap: var(--rv-s-3); min-width: 0; }
.rv-complaints-toolbar { display: flex; align-items: center; gap: 10px; }
.rv-complaints-toolbar .rv-search__field { flex: 1; background: var(--rv-surface); }
.rv-complaints-toolbar .rv-select { width: auto; min-height: 42px; border-width: 1px; border-color: var(--rv-line); border-radius: var(--rv-r-md); font-size: var(--rv-fs-md); font-weight: 500; }
.rv-complaints-apply { display: none; }
.rv-no-js .rv-complaints-apply { display: inline-flex; }

.rv-complaints-list { display: flex; flex-direction: column; gap: var(--rv-s-3); margin: 0; padding: 0; list-style: none; }

/* ---------- Complaint card ---------- */
.rv-complaint-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--rv-s-4);
  align-items: start;
  padding: var(--rv-s-5);
}
.rv-complaint-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-complaint-card__company { color: var(--rv-ink); font-weight: 700; }
.rv-complaint-card__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.rv-complaint-card__text { color: var(--rv-ink-2); font-size: var(--rv-fs-md); line-height: 1.5; }
.rv-complaint-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--rv-s-2); text-align: right; }
.rv-complaint-card__due { font-size: var(--rv-fs-xs); }

/* ---------- Aside ---------- */
.rv-complaints-aside { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-complaints-aside__card { display: flex; flex-direction: column; gap: 14px; padding: var(--rv-s-5); }
.rv-complaints-aside__title { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-complaints-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.rv-complaints-stats div { padding: 14px; border-radius: 12px; background: var(--rv-accent-soft); }
.rv-complaints-stats div:first-child { background: var(--rv-hue-apps); }
.rv-complaints-stats dt { color: var(--rv-muted); font-size: var(--rv-fs-xs); }
.rv-complaints-stats dd { order: -1; margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--rv-accent); }
.rv-complaints-stats div:first-child dd { color: #0f766e; }
.rv-complaints-stats div { display: flex; flex-direction: column; }

.rv-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: rv-step; }
.rv-steps li { display: flex; gap: var(--rv-s-3); color: var(--rv-ink-2); font-size: var(--rv-fs-md); line-height: 1.45; counter-increment: rv-step; }
.rv-steps li::before {
  content: counter(rv-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--rv-hue-casino);
  color: var(--rv-hue-casino-strong);
  font-size: var(--rv-fs-sm);
  font-weight: 800;
}

/* ==========================================================================
   Single complaint
   ========================================================================== */
.rv-complaint-head { background: var(--rv-surface); border-bottom: 1px solid var(--rv-line); }
.rv-complaint-head__inner { display: flex; flex-direction: column; gap: 14px; padding-bottom: var(--rv-s-6); }
.rv-complaint-head .rv-breadcrumbs { padding-bottom: 0; }
.rv-complaint-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--rv-s-4); }
.rv-complaint-head__main { display: flex; flex-direction: column; gap: var(--rv-s-2); max-width: 820px; }
.rv-complaint-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-s-2); }
.rv-complaint-head__title { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; }
.rv-complaint-company { display: flex; align-items: center; gap: var(--rv-s-3); padding: 12px 14px; }
.rv-complaint-company strong { display: block; }

/* Progress */
.rv-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-progress__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 22px;
  color: var(--rv-muted);
  font-size: var(--rv-fs-sm);
  font-weight: 600;
}
.rv-progress__step::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: var(--rv-line); }
.rv-progress__step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 3px solid #cbd0db;
  border-radius: 50%;
  background: var(--rv-surface);
}
.rv-progress__step.is-done { color: var(--rv-ink); }
.rv-progress__step.is-done::before { background: var(--rv-accent); }
.rv-progress__step.is-done::after { border-color: var(--rv-accent); background: var(--rv-accent); }
.rv-progress__step[aria-current="step"]::after { box-shadow: 0 0 0 4px var(--rv-accent-soft); }
.rv-progress__date { color: var(--rv-muted); font-size: var(--rv-fs-xs); font-weight: 400; }

/* Thread */
.rv-complaint-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--rv-s-8);
  align-items: start;
  padding-block: 28px 3.5rem;
}
.rv-thread { display: flex; flex-direction: column; gap: var(--rv-s-5); min-width: 0; }
.rv-thread__title { font-size: var(--rv-fs-h3); font-weight: 700; }
.rv-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.rv-msg .rv-avatar,
.rv-msg .rv-logo { width: 40px; height: 40px; border-radius: 50%; }
.rv-msg__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rv-msg__name { color: var(--rv-ink); font-weight: 700; }
.rv-msg__badge { padding: 2px 7px; border-radius: 5px; background: var(--rv-accent-soft); color: var(--rv-accent); font-size: 0.6875rem; font-weight: 700; }
.rv-msg__bubble {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--rv-line);
  border-radius: var(--rv-r-lg);
  background: var(--rv-surface);
  color: var(--rv-ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.rv-msg--company .rv-msg__bubble { background: #f7f7fe; border-color: #dcddfb; }
.rv-msg__files { display: flex; flex-wrap: wrap; gap: var(--rv-s-2); margin: 2px 0 0; padding: 0; list-style: none; }
.rv-msg__files li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--rv-r-sm); background: #f1f3f7; color: var(--rv-ink-2); font-size: var(--rv-fs-xs); font-weight: 600; }

.rv-resolve { display: flex; flex-direction: column; gap: var(--rv-s-3); padding: 18px; background: #fafbfd; }
.rv-resolve__title { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-resolve__actions { display: flex; flex-wrap: wrap; gap: var(--rv-s-2); }
.rv-resolve__reply { display: flex; flex-direction: column; gap: var(--rv-s-3); padding-top: var(--rv-s-2); }
.rv-resolve__reply .rv-btn { align-self: flex-start; }
.rv-resolve__actions form { display: contents; }
/* Without JS the reply form is simply shown and its toggle is not needed */
.rv-no-js .rv-resolve__reply[hidden] { display: flex; }
.rv-no-js .rv-resolve__toggle { display: none; }
.rv-kv dl { margin: 0; }

/* Aside */
.rv-complaint-aside { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-kv { margin: 0; padding: var(--rv-s-5); }
.rv-kv__title { margin-bottom: 4px; font-size: var(--rv-fs-base); font-weight: 700; }
.rv-kv__row { display: flex; justify-content: space-between; gap: var(--rv-s-4); padding: 10px 0; border-bottom: 1px solid var(--rv-line); font-size: var(--rv-fs-md); }
.rv-kv__row:last-child { border-bottom: 0; }
.rv-kv__row dt { color: var(--rv-muted); }
.rv-kv__row dd { margin: 0; text-align: right; font-weight: 500; }
.rv-complaint-rule { padding: 18px; border-color: #f6ddbb; background: var(--rv-warm); color: var(--rv-ink-2); font-size: var(--rv-fs-sm); line-height: 1.55; }
.rv-complaint-related { display: flex; flex-direction: column; gap: 10px; padding: var(--rv-s-5); }
.rv-complaint-related ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--rv-fs-md); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rv-complaints-hero__art { right: -40px; opacity: 0.6; }
  .rv-complaints-layout,
  .rv-complaint-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Mobile design: warm band, compact stats row */
  .rv-complaints-hero { background: var(--rv-warm); }
  .rv-complaints-hero__art { display: none; }
  .rv-complaints-hero__lead { color: #7c2d12; font-size: var(--rv-fs-md); }
  .rv-body .rv-btn--complaint { background: #c2410c; }
  .rv-complaints-hero__actions .rv-btn { flex: 1; }
  .rv-complaints-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rv-s-2); }
  .rv-complaints-hero__stats div { display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: var(--rv-surface); }
  .rv-complaints-hero__stats dd { order: -1; margin: 0; font-size: var(--rv-fs-lg); font-weight: 800; }
  .rv-complaints-hero__stats dt { color: var(--rv-muted); font-size: 0.6875rem; }
  .rv-complaints-filter__bar { background: transparent; }
  .rv-complaints-status { padding-top: 0; }
  .rv-complaints-status__opt span { min-height: 36px; border: 1px solid #f6ddbb; border-radius: var(--rv-r-pill); background: rgba(255, 255, 255, 0.6); }
  .rv-complaints-status__opt input:checked + span { border-color: var(--rv-ink); background: var(--rv-ink); color: #fff; }
  .rv-complaints-status__opt input:checked + span small { color: #c9cbe8; }

  .rv-complaints-layout { padding-top: var(--rv-s-4); gap: var(--rv-s-5); }
  .rv-complaints-toolbar { flex-wrap: wrap; }
  .rv-complaints-toolbar .rv-search__field { flex-basis: 100%; }
  .rv-complaints-toolbar .rv-select { flex: 1; }
  .rv-complaints-aside__card--stats { display: none; }

  .rv-complaint-card { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .rv-complaint-card .rv-logo { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
  .rv-complaint-card__side { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: space-between; align-items: center; padding-top: var(--rv-s-2); border-top: 1px solid var(--rv-line); text-align: left; }
  .rv-complaint-card__title { font-size: var(--rv-fs-base); }

  /* Single complaint */
  .rv-complaint-head { background: var(--rv-warm); border-bottom: 0; }
  .rv-complaint-company { padding: 10px 12px; }
  .rv-progress__step { font-size: var(--rv-fs-xs); }
  .rv-progress__date { font-size: 0.6875rem; }
  .rv-msg { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .rv-msg .rv-avatar,
  .rv-msg .rv-logo { width: 32px; height: 32px; font-size: 11px; }
  .rv-msg__bubble { padding: 14px; font-size: var(--rv-fs-md); }
  .rv-resolve { border: 2px dashed #cbd0db; background: var(--rv-surface); }
  .rv-resolve__actions .rv-btn { flex: 1; }
}

@media (max-width: 380px) {
  .rv-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--rv-s-4); }
}

/* ==========================================================================
   WordPress additions: closed status, moderator messages, filing form
   ========================================================================== */
.rv-status--closed { background: #eef0f4; color: var(--rv-muted); }

.rv-msg__mod { display: grid; place-items: center; width: 40px; height: 40px; }
.rv-msg__mod-mark { width: 40px; height: 40px; }
.rv-msg--moderator .rv-msg__bubble { background: var(--rv-surface-2); border-style: dashed; }

.rv-complaint-login { margin-top: var(--rv-s-2); }

.rv-complaint-file { padding-bottom: 0; scroll-margin-top: calc(var(--rv-top-offset) + var(--rv-header-h)); }
.rv-complaint-file__card { display: flex; flex-direction: column; gap: var(--rv-s-4); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.rv-complaint-file__form { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-complaint-file__form .rv-notice ul { margin: 6px 0 0; padding-left: 1.2em; }
.rv-complaint-file__amount { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rv-s-2); }
.rv-complaint-file__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--rv-s-3); margin: 0; }
.rv-complaint-file .rv-write-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-s-4); }

@media (max-width: 640px) {
  .rv-msg__mod,
  .rv-msg__mod-mark { width: 32px; height: 32px; }
  .rv-complaint-file .rv-write-two { grid-template-columns: minmax(0, 1fr); }
  .rv-complaint-file__actions .rv-btn { flex: 1 1 auto; }
}