/* Quality and customer feedback (module 31). Prefix qa- (staff, portal) and qas- (public survey page). */
.qa-saved { margin: 0; }
.qa-inline { display: inline-flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.ct-form.qa-inline { display: grid; gap: 8px; margin-top: 10px; }
.qa-btnrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.qa-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid #e0e7ed; background: #fafcfe; }
.qa-bulk select, .qa-bulk input { max-width: 280px; min-width: 0; }
.qa-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.qa-grid2 > * { min-width: 0; }
.qa-grid2 > div:last-child:not(.ct-field) { grid-column: 1 / -1; }
.qa-fieldset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.qa-fieldset legend { font-weight: 700; font-size: 12.5px; margin-bottom: 6px; color: #334e68; }
.qa-fieldset .hint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.qa-fieldset .err { display: block; color: #b4283c; font-size: 12px; margin-top: 4px; }
.qa-fieldset .req { font-size: 11px; font-weight: 600; color: #b4283c; margin-left: 4px; }
.qa-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.qa-scroll { max-height: 220px; overflow: auto; position: relative; flex-direction: column; flex-wrap: nowrap; }
.qa-help { color: var(--muted); font-size: 12.5px; margin: 0; line-height: 1.5; }
.qa-note { margin-top: 4px; color: #334e68; overflow-wrap: anywhere; white-space: pre-line; }
.qa-wrap { white-space: normal !important; overflow-wrap: anywhere; min-width: 160px; }
.qa-ref, .qa-ref b, .qa-ref a { white-space: nowrap; }
.qa-clip { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-late { color: #b4283c !important; font-weight: 700; }
.qa-steps { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 13px; line-height: 1.5; }
.qa-h4 { margin: 14px 0 6px; font-size: 13px; }
.qa-feedback { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.qa-segrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qa-seg { max-width: 100%; }

/* Score pills */
.qa-score { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; padding: 2px 8px; border-radius: 9px; font-size: 12px; background: #eef2f6; color: #334e68; }
.qa-score.ok { background: #dff3ea; color: #0b6b4d; }
.qa-score.warn { background: #fdf0d5; color: #8a5b00; }
.qa-score.bad { background: #fbe3e7; color: #a3203a; }
.qa-spread { font-weight: 700; }
.qa-spread.wide { color: #b4283c; }

/* Review page */
.qa-sumbar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: center; background: #fff; border: 1px solid #cbd7e2; border-radius: 4px; padding: 14px 16px; }
.qa-sumbar > * { min-width: 0; }
.qa-big { display: flex; flex-direction: column; justify-content: center; min-width: 150px; padding: 10px 16px; border-radius: 6px; background: linear-gradient(135deg, #2083ee, #0962d3); color: #fff; }
.qa-big.ok { background: linear-gradient(135deg, #13b985, #04955d); }
.qa-big.warn { background: linear-gradient(135deg, #f5a524, #e08a00); }
.qa-big.bad { background: linear-gradient(135deg, #e8365d, #c01d47); }
.qa-big.neutral { background: linear-gradient(135deg, #97a6b8, #71849a); }
.qa-big .v { font-size: 30px; font-weight: 800; line-height: 1.1; }
.qa-big .l { font-size: 12px; opacity: .92; }
.qa-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; }
.qa-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.qa-facts dd { margin: 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.qa-catbars { display: grid; gap: 4px; }
.qa-convo .ct-pbody { padding: 0; }
.qa-thread { display: grid; gap: 8px; padding: 12px; max-height: 760px; overflow: auto; position: relative; background: #f7f9fb; }
.qa-msg { max-width: 88%; border: 1px solid #d6e0e9; border-radius: 8px; padding: 8px 10px; background: #fff; min-width: 0; }
.qa-msg.agent { justify-self: end; background: #eef6ff; border-color: #c4dcf6; }
.qa-msg.note { justify-self: end; background: #fff8e6; border-color: #f0dca3; }
.qa-msg .who { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.qa-msg .who span { color: var(--muted); }
.qa-msg .body { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.qa-msg .subj { display: block; margin-bottom: 4px; }
.qa-evt { font-size: 12px; color: #52667a; text-align: center; overflow-wrap: anywhere; }
.qa-evt span { color: var(--muted); }
.qa-side .ct-panel { min-width: 0; }
.qa-scoreform { gap: 10px; }
.qa-cat { border: 1px solid #dfe7ee; border-radius: 6px; padding: 8px 10px 4px; margin: 0; min-width: 0; }
.qa-cat legend { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #1d3650; padding: 0 4px; }
.qa-item { padding: 8px 0; border-bottom: 1px dashed #e3eaf0; }
.qa-item:last-child { border-bottom: 0; }
.qa-item.crit { background: linear-gradient(90deg, #fff5f6, transparent 40%); margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
.qa-item-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.qa-item-h .w { color: var(--muted); font-weight: 400; font-size: 12px; white-space: nowrap; }
.qa-guid { margin: 2px 0 6px; font-size: 12px; color: var(--muted); }
.qa-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.qa-ch { position: relative; }
.qa-ch input { position: absolute; opacity: 0; pointer-events: none; }
.qa-ch span { display: inline-flex; min-width: 38px; justify-content: center; padding: 5px 10px; border: 1px solid #b9c8d6; border-radius: 4px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: #fff; color: #2f4559; }
.qa-ch input:focus-visible + span { outline: 2px solid #1a7fe0; outline-offset: 1px; }
.qa-ch input:checked + span { background: #1a7fe0; border-color: #1a7fe0; color: #fff; }
.qa-ch.yes input:checked + span { background: #12a079; border-color: #12a079; }
.qa-ch.no input:checked + span { background: #d6334b; border-color: #d6334b; }
.qa-ch.na input:checked + span { background: #8a9bb0; border-color: #8a9bb0; }
.qa-cm { width: 100%; font-size: 12.5px; }
.qa-scoretbl .qa-cathead td { background: #f3f7fb; font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.qa-scoretbl tr.qa-bad td { background: #fdf2f4; }
.qa-cmt { white-space: normal; font-style: italic; }
.qa-hints { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qa-hints li { border-left: 3px solid #1a7fe0; padding: 4px 0 4px 10px; font-size: 12.5px; }
.qa-hints li b { display: block; }
.qa-hints li span { color: #52667a; }
.qa-hints li.warn { border-color: #d99a06; }
.qa-hints li.ok { border-color: #12a079; }
.qa-mini { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e0e7ed; color: inherit; text-decoration: none; font-size: 13px; flex-wrap: wrap; min-width: 0; }
.qa-mini:hover { background: #f5f9fd; }
.qa-mini span { color: var(--muted); font-size: 12px; }
.qa-pad { padding: 9px 12px; border-bottom: 1px solid #e0e7ed; }
.qa-padstats { padding: 10px 12px; }

/* Scorecards, flags, calibration */
.qa-rulechips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #cbd7e2; border-radius: 14px; background: #fff; font-size: 12px; color: #2f4559; text-decoration: none; }
.qa-chip b { background: #fdf0d5; color: #8a5b00; border-radius: 8px; padding: 0 6px; }
.qa-chip.on { border-color: #1a7fe0; box-shadow: 0 0 0 2px #e3f0fd; }
.qa-chip.off { opacity: .55; }
.qa-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.qa-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: center; border: 1px solid #e0e7ed; border-radius: 6px; padding: 8px 10px; }
.qa-person i { grid-row: span 2; font-size: 18px; color: #d99a06; }
.qa-person.done i { color: #12a079; }
.qa-person span { font-size: 12px; color: var(--muted); }
.qa-caltbl tr.qa-total td { border-top: 2px solid #c9d6e3; background: #f7fafc; }

/* Quizzes */
.qa-q { border: 0; border-bottom: 1px solid #e3eaf0; margin: 0; padding: 10px 0; min-width: 0; }
.qa-q-h { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.qa-opts { margin: 6px 0 4px; padding-left: 22px; font-size: 13px; display: grid; gap: 3px; }
.qa-opts li.ok { color: #0b6b4d; font-weight: 700; }
.qa-opt { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.qa-focus { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* Feedback */
.qa-words { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.qa-word { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.qa-word.pos { background: #dff3ea; color: #0b6b4d; }
.qa-word.neg { background: #fbe3e7; color: #a3203a; }
.qa-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.qa-wordlists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.qa-wl { padding: 10px 12px; border-right: 1px solid #e0e7ed; min-width: 0; }
.qa-wl:last-child { border-right: 0; }
.qa-wl h4 { margin: 0 0 4px; font-size: 13px; }
.qa-bq { margin: 0 0 6px; padding: 10px 14px; border-left: 4px solid #1a7fe0; background: #f5f9fd; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.qa-quote { padding: 9px 12px; border-bottom: 1px solid #e0e7ed; font-size: 13px; border-left: 3px solid #12a079; overflow-wrap: anywhere; }
.qa-quote.bad { border-left-color: #d6334b; } .qa-quote.warn { border-left-color: #d99a06; }
.qa-quote span { display: block; color: var(--muted); font-size: 12px; }
.qa-cmtcell { max-width: 320px; }
.qa-lang { border: 1px solid #e0e7ed; border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; }
.qa-lang summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.qa-preview { display: grid; gap: 10px; padding: 12px; border: 1px dashed #c4d3e1; border-radius: 6px; background: #fbfdff; }
.qa-nps { display: flex; flex-wrap: wrap; gap: 4px; }
.qa-nps span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b9c8d6; border-radius: 4px; font-weight: 700; font-size: 12.5px; }
.qa-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.qa-gb { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-gb span { padding: 6px 12px; border-radius: 4px; font-weight: 700; font-size: 13px; }
.qa-gb .g { background: #dff3ea; color: #0b6b4d; } .qa-gb .b { background: #fbe3e7; color: #a3203a; }
.qa-tpanel { display: grid; gap: 6px; }
.qa-tp-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.qa-tp-row .sub { flex-basis: 100%; }
.qa-orgstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.qa-orgstats div { border: 1px solid #e0e7ed; border-radius: 6px; padding: 8px 10px; }
.qa-orgstats b { display: block; font-size: 20px; }
.qa-orgstats span { font-size: 12px; color: var(--muted); }

/* Portal rating */
.qa-rated { margin: 0; line-height: 1.5; }
.qa-rated i { color: #12a079; }
.qa-gbpick, .qa-scale { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-gbpick label, .qa-sc { position: relative; cursor: pointer; }
.qa-gbpick input, .qa-sc input { position: absolute; opacity: 0; }
.qa-gbpick span, .qa-sc span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #b9c8d6; border-radius: 6px; font-weight: 700; background: #fff; }
.qa-sc span { width: 42px; justify-content: center; padding: 8px 0; }
.qa-gbpick .g input:checked + span { background: #12a079; border-color: #12a079; color: #fff; }
.qa-gbpick .b input:checked + span { background: #d6334b; border-color: #d6334b; color: #fff; }
.qa-sc input:checked + span { background: #1a7fe0; border-color: #1a7fe0; color: #fff; }
.qa-gbpick input:focus-visible + span, .qa-sc input:focus-visible + span { outline: 2px solid #1a7fe0; outline-offset: 2px; }

/* Public survey page */
.qas { --qs: var(--brand-primary, #1a7fe0); background: #f3f6f9; min-height: 100vh; }
.qas-top { background: #fff; border-bottom: 3px solid var(--qs); }
.qas-wrap { max-width: 720px; margin: 0 auto; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.qas-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.qas-brand img { max-height: 34px; }
.qas-mark { width: 32px; height: 32px; border-radius: 6px; background: var(--qs); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.qas-lang { display: flex; gap: 4px; flex-wrap: wrap; }
.qas-lang a { font-size: 12.5px; padding: 3px 8px; border-radius: 12px; color: #2f4559; text-decoration: none; border: 1px solid transparent; }
.qas-lang a.on { border-color: var(--qs); color: var(--qs); font-weight: 700; }
.qas-main { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.qas-card { background: #fff; border: 1px solid #d6e0e9; border-radius: 10px; padding: 22px; box-shadow: 0 4px 18px rgba(16, 42, 67, .06); }
.qas-card h1 { margin: 0 0 6px; font-size: 22px; }
.qas-sub { color: #627d98; font-size: 13px; margin: 0 0 12px; }
.qas-form fieldset { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.qas-form legend { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.qas-nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.qas-nps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qas-nps label, .qas-gb label { position: relative; cursor: pointer; }
.qas-nps input, .qas-gb input { position: absolute; opacity: 0; }
.qas-nps span { display: flex; align-items: center; justify-content: center; height: 42px; border: 1px solid #b9c8d6; border-radius: 6px; font-weight: 800; background: #fff; }
.qas-nps input:checked + span { background: var(--qs); border-color: var(--qs); color: #fff; }
.qas-nps input:focus-visible + span, .qas-gb input:focus-visible + span { outline: 2px solid var(--qs); outline-offset: 2px; }
.qas-ends { display: flex; justify-content: space-between; font-size: 12px; color: #627d98; margin-top: 4px; }
.qas-gb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qas-gb span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border: 2px solid #d6e0e9; border-radius: 8px; font-weight: 700; text-align: center; background: #fff; }
.qas-gb span i { font-size: 26px; }
.qas-gb .g input:checked + span { border-color: #12a079; background: #e9f8f1; color: #0b6b4d; }
.qas-gb .b input:checked + span { border-color: #d6334b; background: #fdeef1; color: #a3203a; }
.qas-l { display: block; font-weight: 600; margin-bottom: 6px; }
.qas-form textarea { width: 100%; border: 1px solid #b9c8d6; border-radius: 6px; padding: 10px; font: inherit; box-sizing: border-box; }
.qas-btn { margin-top: 14px; display: inline-flex; padding: 11px 22px; border: 0; border-radius: 6px; background: var(--qs); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; }
.qas-btn.ghost { background: #fff; color: var(--qs); border: 1px solid var(--qs); }
.qas-err { color: #b4283c; font-weight: 600; }
.qas-done { text-align: center; padding: 20px 0 6px; }
.qas-done i { font-size: 46px; color: #12a079; }
.qas-done.exp i { color: #8a9bb0; }
.qas-done p { font-size: 16px; }
.qas-foot { text-align: center; color: #829ab1; font-size: 12px; margin-top: 16px; }

@media (max-width: 900px) {
    .qa-sumbar { grid-template-columns: minmax(0, 1fr); }
    .qa-wordlists { grid-template-columns: minmax(0, 1fr); }
    .qa-wl { border-right: 0; border-bottom: 1px solid #e0e7ed; }
}
@media (max-width: 560px) {
    .qa-grid2 { grid-template-columns: minmax(0, 1fr); }
    .qa-facts { grid-template-columns: minmax(0, 1fr); }
    .qa-msg { max-width: 100%; }
    .qa-clip { max-width: 180px; }
    .qas-nps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .qa-bulk select, .qa-bulk input { max-width: 100%; flex: 1 1 100%; }
}