/* 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; }
}