/* The ratings after a support ticket (V1.44): the five scores (Apps\Support\RatingPicker.razor), the "4/5" pill (RatingBadge),
   the ticket's and the request's rating panels, Support > Satisfaction (SupportSatisfactionPage) and the page of a closing
   email's link (Pages\RateTicket.razor, on signin.css's card). The theme's variables only: light and dark both work. */

/* ---- The five scores: big enough for a thumb (44 px) ---- */
.rate-picker { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.rate-scores { display: flex; gap: 8px; }
.rate-score {
  flex: 1 1 0; min-width: 44px; min-height: 48px; max-width: 72px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--field); color: var(--text);
  font: inherit; font-size: 1.25rem; font-weight: 800; cursor: pointer;
}
.rate-score:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.rate-score:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.rate-score:disabled { cursor: default; opacity: 0.65; }
.rate-score.on { border-width: 2px; opacity: 1; }
.rate-score.on.low { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.rate-score.on.mid { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.rate-score.on.high { border-color: var(--good-text); background: var(--good-soft); color: var(--good-text); }
.rate-ends { display: flex; justify-content: space-between; max-width: calc(5 * 72px + 4 * 8px); color: var(--muted); font-size: 0.78rem; }

/* ---- "4/5" ---- */
.rate-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.rate-badge.low { background: var(--bad-soft); color: var(--bad); }
.rate-badge.mid { background: var(--warn-soft); color: var(--warn); }
.rate-badge.high { background: var(--good-soft); color: var(--good-text); }

/* ---- The panels of a ticket (employees) and of a request (client section) ---- */
.rate-panel .rate-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rate-panel .rate-comment { margin-top: 6px; }
.rate-switch { display: flex; align-items: center; gap: 8px; margin: 6px 0; }

/* ---- The page of an email's link ---- */
.rate-card .rate-picker { width: 100%; align-self: stretch; }
.rate-card .rate-scores { justify-content: center; }
.rate-card .rate-ends { margin: 0 auto; width: 100%; }
.rate-card .rate-text { min-height: 90px; }
.rate-thanks { text-align: center; }

/* ---- Support > Satisfaction ---- */
.sat-toolbar { flex-wrap: wrap; }
.sat-table td, .sat-table th { white-space: nowrap; }
.sat-table .sat-overall td { font-weight: 800; background: var(--head-bg); }
.sat-comment { white-space: pre-wrap; overflow-wrap: anywhere; }
.sat-low .sat-comment { max-width: 420px; }
.sat-comments { list-style: none; margin: 0; padding: 0; }
.sat-comments li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sat-comments li:last-child { border-bottom: 0; }
.sat-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }

@media (max-width: 600px) {
  .rate-scores { gap: 6px; }
  .rate-score { min-height: 52px; }
  .sat-low .sat-comment { max-width: none; min-width: 180px; }
}