/* Admin -> SMS Reporting.
   The badge colours are fixed by the brief and are load-bearing: an administrator scanning this
   table is looking for red, and a red that drifts towards orange in a later redesign makes the one
   row that matters harder to find. */

.wr-smsrep__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.wr-smsrep__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 10px;
    background: #fff;
}

.wr-smsrep__card.is-green  { border-left-color: #16a34a; }
.wr-smsrep__card.is-red    { border-left-color: #dc2626; }
.wr-smsrep__card.is-yellow { border-left-color: #ca8a04; }
.wr-smsrep__card.is-blue   { border-left-color: #2563eb; }

.wr-smsrep__cardnum {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.wr-smsrep__cardlabel { font-size: .85rem; color: #64748b; }

.wr-smsrep__filters { margin-bottom: 16px; }

.wr-smsrep__filterrow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.wr-smsrep__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
    flex: 1 1 150px;
}

.wr-smsrep__field > label { font-size: .8rem; font-weight: 600; color: #475569; }

/* ---- badges ----
   Text as well as colour. A status conveyed only by colour is invisible to a colour-blind
   administrator and to a black-and-white print of a compliance report. */
.wr-smsrep__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.wr-smsrep__badge.is-green  { background: #dcfce7; color: #166534; }
.wr-smsrep__badge.is-red    { background: #fee2e2; color: #991b1b; }
.wr-smsrep__badge.is-gray   { background: #f1f5f9; color: #475569; }
.wr-smsrep__badge.is-yellow { background: #fef9c3; color: #854d0e; }
.wr-smsrep__badge.is-blue   { background: #dbeafe; color: #1e40af; }

.wr-smsrep__table { width: 100%; }
.wr-smsrep__table code { font-size: .82rem; }
.wr-smsrep__sid { color: #64748b; word-break: break-all; }

.wr-smsrep__owner { display: block; font-weight: 600; color: #0f172a; }
.wr-smsrep__ownerkind { display: block; font-size: .78rem; color: #94a3b8; }

.wr-smsrep__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    font-size: .88rem;
    color: #475569;
}

.wr-smsrep__empty { text-align: center; padding: 40px 20px; color: #64748b; }
.wr-smsrep__empty i { font-size: 2rem; color: #cbd5e1; margin-bottom: 10px; }
.wr-smsrep__empty h3 { margin: 0 0 6px; color: #0f172a; font-size: 1.05rem; }
.wr-smsrep__loading { padding: 28px; text-align: center; color: #64748b; }

/* ---- the status line on an agent / lead / owner record ---- */
.wr-smsstatus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
}

.wr-smsstatus__note { color: #64748b; }

@media (max-width: 720px) {
    .wr-smsrep__filterrow { flex-direction: column; align-items: stretch; }
    .wr-smsrep__table { display: block; overflow-x: auto; }
}

/* ---- Admin -> Email Reports ----
   Shares the badge palette with SMS reporting on purpose: an administrator moving between the two
   compliance screens should not have to relearn what red means. */

.wr-emlrep__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.wr-emlrep__card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8;
    border-radius: 10px; background: #fff;
}

.wr-emlrep__card.is-green  { border-left-color: #16a34a; }
.wr-emlrep__card.is-red    { border-left-color: #dc2626; }
.wr-emlrep__card.is-yellow { border-left-color: #ca8a04; }
.wr-emlrep__card.is-blue   { border-left-color: #2563eb; }
.wr-emlrep__card.is-gray   { border-left-color: #94a3b8; }

.wr-emlrep__cardnum { font-size: 1.5rem; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.wr-emlrep__cardlabel { font-size: .8rem; color: #64748b; }

/* The banner that stops "0 delivered" being read as "nothing arrived". */
.wr-emlrep__notice {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 16px;
    border: 1px solid #fde68a; border-left: 4px solid #ca8a04;
    border-radius: 10px; background: #fffbeb; color: #78350f; font-size: .9rem;
}

.wr-emlrep__notice code { background: #fef3c7; padding: 1px 5px; border-radius: 4px; }

.wr-emlrep__filters { margin-bottom: 16px; }
.wr-emlrep__filterrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.wr-emlrep__field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.wr-emlrep__field > label { font-size: .8rem; font-weight: 600; color: #475569; }

.wr-emlrep__badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .76rem; font-weight: 600; white-space: nowrap;
    background: #f1f5f9; color: #475569;
}

.wr-emlrep__badge.is-green  { background: #dcfce7; color: #166534; }
.wr-emlrep__badge.is-red    { background: #fee2e2; color: #991b1b; }
.wr-emlrep__badge.is-yellow { background: #fef9c3; color: #854d0e; }
.wr-emlrep__badge.is-blue   { background: #dbeafe; color: #1e40af; }
.wr-emlrep__badge.is-gray   { background: #f1f5f9; color: #475569; }

.wr-emlrep__table { width: 100%; font-size: .88rem; }
.wr-emlrep__table code { font-size: .8rem; }
.wr-emlrep__sid { color: #64748b; word-break: break-all; }
.wr-emlrep__subject, .wr-emlrep__reason { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.wr-emlrep__timeline { margin-bottom: 16px; }
.wr-emlrep__timeline h2 { margin-top: 0; font-size: 1.05rem; }
.wr-emlrep__timeline ol { list-style: none; margin: 0; padding: 0; }
.wr-emlrep__timeline li {
    display: flex; gap: 14px; padding: 8px 0 8px 22px; position: relative;
    border-left: 2px solid #e2e8f0; margin-left: 6px;
}
.wr-emlrep__timeline li::before {
    content: ''; position: absolute; left: -7px; top: 14px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid #cbd5e1;
}
.wr-emlrep__timeline li.is-done::before { background: #16a34a; border-color: #16a34a; }
.wr-emlrep__tlabel { min-width: 200px; font-weight: 600; color: #0f172a; font-size: .88rem; }
.wr-emlrep__tvalue { color: #64748b; font-size: .88rem; }

.wr-emlrep__detailhead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.wr-emlrep__detailhead h2 { margin: 0; font-size: 1.05rem; }
.wr-emlrep__detailactions { display: flex; gap: 8px; flex-wrap: wrap; }

.wr-emlrep__empty { text-align: center; padding: 40px 20px; color: #64748b; }
.wr-emlrep__empty i { font-size: 2rem; color: #cbd5e1; margin-bottom: 10px; }
.wr-emlrep__empty h3 { margin: 0 0 6px; color: #0f172a; font-size: 1.05rem; }
.wr-emlrep__loading { padding: 28px; text-align: center; color: #64748b; }

.wr-eng2__msglink { margin-left: 10px; font-weight: 600; }

@media (max-width: 900px) {
    .wr-emlrep__table { display: block; overflow-x: auto; }
    .wr-emlrep__timeline li { flex-direction: column; gap: 2px; }
}

/* The delivery panel sits above the consent table: after a configuration change it is the first
   thing an administrator looks for, and it answers a different question from consent. */
.wr-smsrep__deliveries { margin-bottom: 16px; }
.wr-smsrep__deliveries h2 { margin: 0 0 12px; font-size: 1.05rem; color: #0f172a; }

/* Machine opens are de-emphasised: they are reported for completeness, not for judging engagement. */
.wr-emlrep__machine { color: #94a3b8; }

/* =================================================================================================
   ADMIN → SMS REPORTS — the activity table (.wr-smsact__*).

   Replaces the campaign-level Twilio diagnostic that used .wr-smsrep2__* (still in
   engagement-v3.css; the service methods it was built on are still there too, so the old view can
   be restored without rewriting either). The badge palette below is deliberately the SAME as that
   block's: an administrator scanning for red is looking for the same red they already know.

   THE TWO LONG-TEXT COLUMNS ARE THE WHOLE LAYOUT PROBLEM. Message and Reply both hold free text of
   unbounded length, and letting either size its column pushes Status and Consent off the right of
   the screen. Both are clamped to two lines with -webkit-line-clamp and given a fixed proportion
   of the table; expanding one un-clamps just that cell.
   ================================================================================================= */

.wr-smsact__notice {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 16px;
    margin-bottom: 16px;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    background: #fffbeb;
    color: #78350f;
    font-size: 0.88rem;
    line-height: 1.5;
}
.wr-smsact__notice i { margin-top: 2px; color: #d97706; }
.wr-smsact__notice code { font-size: 0.82rem; }

/* ---------------------------------------------------------------- summary cards */

.wr-smsact__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.wr-smsact__card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-left: 3px solid #94a3b8;
    border-radius: 12px;
    background: #fff;
}
.wr-smsact__card.is-ok   { border-left-color: #16a34a; }
.wr-smsact__card.is-info { border-left-color: #2563eb; }
.wr-smsact__card.is-warn { border-left-color: #d97706; }
.wr-smsact__card.is-bad  { border-left-color: #dc2626; }

.wr-smsact__num {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.wr-smsact__lbl { font-size: 0.8rem; color: #64748b; }

/* ---------------------------------------------------------------- filters */

.wr-smsact__filters { margin-bottom: 16px; }

.wr-smsact__filterrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.wr-smsact__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wr-smsact__field--grow { flex: 1 1 260px; }
.wr-smsact__field label { font-size: 0.76rem; font-weight: 600; color: #475569; }

.wr-smsact__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 8px;
    font-size: 0.84rem;
    color: #334155;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- table */

.wr-smsact__scroll { overflow-x: auto; }

.wr-smsact__table { width: 100%; min-width: 1040px; }
.wr-smsact__table td { vertical-align: top; }

/* Proportions, not pixels: Message and Reply take the space, the short columns keep only what
   they need so neither long-text column can crowd the other out. */
.wr-smsact__table th:nth-child(1), .wr-smsact__table td:nth-child(1) { width: 15%; }
.wr-smsact__table th:nth-child(2), .wr-smsact__table td:nth-child(2) { width: 12%; }
.wr-smsact__table th:nth-child(3), .wr-smsact__table td:nth-child(3) { width: 27%; }
.wr-smsact__table th:nth-child(4), .wr-smsact__table td:nth-child(4) { width: 11%; }
.wr-smsact__table th:nth-child(5), .wr-smsact__table td:nth-child(5) { width: 10%; }
.wr-smsact__table th:nth-child(6), .wr-smsact__table td:nth-child(6) { width: 17%; }
.wr-smsact__table th:nth-child(7), .wr-smsact__table td:nth-child(7) { width: 8%; }

.wr-smsact__name { display: block; color: #0f172a; font-size: 0.9rem; }
.wr-smsact__org { display: block; font-size: 0.78rem; color: #64748b; }
.wr-smsact__unknown { color: #94a3b8; font-size: 0.82rem; }

.wr-smsact__phone {
    font-size: 0.86rem;
    color: #334155;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- the two free-text cells ---- */

.wr-smsact__msg,
.wr-smsact__reply {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #334155;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Long pasted URLs and unbroken strings must not widen the column. */
    overflow-wrap: anywhere;
}

.wr-smsact__msg.is-open,
.wr-smsact__reply.is-open {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.wr-smsact__reply { color: #0f172a; font-style: italic; }

.wr-smsact__replywhen {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    color: #64748b;
    white-space: nowrap;
}

.wr-smsact__more {
    margin-top: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wr3-blue, #1d4ed8);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
}
.wr-smsact__more:hover { text-decoration: underline; }

.wr-smsact__when strong { display: block; font-size: 0.84rem; color: #0f172a; white-space: nowrap; }
.wr-smsact__when span { display: block; font-size: 0.78rem; color: #64748b; white-space: nowrap; }

/* ---- badges: same palette as the campaign view they replace ---- */

.wr-smsact__badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Green is reserved for a delivery the carrier actually confirmed. */
.wr-smsact__badge.is-ok   { background: #dcfce7; color: #166534; }
.wr-smsact__badge.is-info { background: #dbeafe; color: #1e40af; }
.wr-smsact__badge.is-wait { background: #f1f5f9; color: #64748b; }
.wr-smsact__badge.is-bad  { background: #fee2e2; color: #991b1b; }

.wr-smsact__consent {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    background: #f1f5f9;
    color: #64748b;
}
.wr-smsact__consent.is-in  { background: #dcfce7; color: #166534; }
.wr-smsact__consent.is-out { background: #fee2e2; color: #991b1b; }

.wr-smsact__why {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.35;
}

/* ---------------------------------------------------------------- empty + pager */

.wr-smsact__empty { padding: 44px 20px; text-align: center; color: #64748b; }
.wr-smsact__empty i { font-size: 1.8rem; color: #cbd5e1; }
.wr-smsact__empty h3 { margin: 12px 0 5px; font-size: 1rem; color: #0f172a; }
.wr-smsact__empty p { margin: 0; font-size: 0.88rem; }

.wr-smsact__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--wr3-border, #e4e8f0);
    font-size: 0.82rem;
    color: #64748b;
}
.wr-smsact__pagerbtns { display: flex; gap: 8px; }

@media (max-width: 720px) {
    .wr-smsact__filterrow { gap: 10px; }
    .wr-smsact__field--grow { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------------------------
   THE AUDIENCE CHIP — "Agent · ABC Realty" / "Vendor · ABC Home Inspections"

   Agents and vendors must not look alike at a glance; the whole separation exists because they
   were previously indistinguishable. "Unknown" is its own muted tone rather than borrowing one of
   the other two, because a message sent before audiences were recorded is genuinely neither.
   -------------------------------------------------------------------------------------------- */

.wr-smsact__aud {
    display: inline-flex;
    align-items: center;
    margin-top: .3rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-smsact__aud.is-agent   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.wr-smsact__aud.is-vendor  { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.wr-smsact__aud.is-unknown { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* ==================================================================================================
   CLICKABLE SUMMARY CARDS + THE OPT-OUT REPORT

   The cards were <div>s showing figures nobody could open. They are <button>s now, which means they
   need the affordances a button owes a user: a hover state, a visible focus ring and a clear
   "this one is open" state.
   ================================================================================================== */

button.wr-smsact__card {
    appearance: none;
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

button.wr-smsact__card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

button.wr-smsact__card:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

button.wr-smsact__card.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .18);
}

.wr-smsact__viewing {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .6rem .9rem;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    font-size: .88rem;
    color: #1e40af;
}

.wr-smsact__linkbtn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: #1d4ed8;
    text-decoration: underline;
    cursor: pointer;
}

.wr-smsact__linkbtn:hover { color: #0f172a; }

/* ---- the opt-out report ---- */

.wr-smsopt__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.wr-smsopt__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.wr-smsopt__sub {
    margin: .2rem 0 0;
    font-size: .86rem;
    color: #64748b;
}

.wr-smsopt__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid #e2e8f0;
}

.wr-smsopt__tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font-size: .86rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.wr-smsopt__tab:hover { background: #f8fafc; color: #0f172a; }
.wr-smsopt__tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.wr-smsopt__tab.is-on {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.wr-smsopt__tabn {
    padding: .05rem .4rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.wr-smsopt__tab.is-on .wr-smsopt__tabn { background: #dbeafe; }

.wr-smsopt__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 1rem;
}

/* The application chip. Ours, someone else's, and an open question must not look alike — telling
   them apart at a glance is the entire point of the report. */
.wr-smsopt__app {
    display: inline-flex;
    align-items: center;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.5;
}

.wr-smsopt__app.is-ours    { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.wr-smsopt__app.is-other   { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.wr-smsopt__app.is-unknown { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }

.wr-smsopt__kw,
.wr-smsopt__sid {
    display: inline-block;
    padding: .08rem .4rem;
    border-radius: 6px;
    background: #f1f5f9;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    color: #334155;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.wr-smsopt__table td { vertical-align: top; }

@media (max-width: 767.98px) {
    .wr-smsopt__head { flex-direction: column; }
    .wr-smsopt__tabs { gap: .35rem; }
    .wr-smsopt__tab { font-size: .8rem; padding: .4rem .7rem; }
}

.wr-smsopt__headbtns {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}