/* ==============================================================================================
   AGENT ENGAGEMENT CENTER  (/admin/agent-engagement)

   A guided three-step tool, so the page is laid out as a sequence rather than a dashboard. Each
   step is a bordered block with a numbered heading, and the numerals encode real order: you cannot
   usefully do step 3 before step 2.

   The previous stylesheet supported nineteen tiles, thirty chips and a 1600px-wide table. What
   replaced it is deliberately smaller in every dimension — four cards, one dropdown, a table that
   fits the content column — because the page never had a styling problem. It had a quantity one.
   ============================================================================================== */

.wr-eng2__loading { padding: 28px; color: var(--wr3-ink-2, #475569); }

/* ---------- Blocked sender ---------- */

.wr-eng2__warning {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-left: 4px solid #d94b4b;
    background: rgba(217, 75, 75, 0.05);
}

.wr-eng2__warning h2 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 800; color: #a5312f; }
.wr-eng2__warning p { margin: 0 0 8px; font-size: 0.87rem; }
.wr-eng2__warning ul { margin: 0; padding-left: 20px; font-size: 0.86rem; line-height: 1.6; }

/* ---------- Four cards ---------- */

.wr-eng2__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.wr-eng2__card {
    padding: 16px 18px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 13px;
    background: #fff;
}

.wr-eng2__card strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__card span {
    display: block;
    margin-top: 4px;
    font-size: 0.76rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

/* The audience card is the one that changes as the administrator works, so it is the one that
   signals it is carrying a live value. */
.wr-eng2__card.is-active {
    border-color: var(--wr3-blue, #1d5ff5);
    background: var(--wr3-blue-soft, #e8f0ff);
}

.wr-eng2__card.is-active strong { color: var(--wr3-blue-ink, #12408f); }

/* ---------- Expandables ---------- */

.wr-eng2__stats {
    margin-bottom: 18px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: #fff;
}

.wr-eng2__stats > summary {
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
}

.wr-eng2__stats[open] > summary { border-bottom: 1px solid var(--wr3-border, #eef1f5); }

.wr-eng2__statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 20px;
    padding: 14px 16px;
}

.wr-eng2__statgrid > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; }
.wr-eng2__statgrid dt { color: var(--wr3-ink-2, #475569); }
.wr-eng2__statgrid dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.wr-eng2__note {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--wr3-ink-2, #475569);
    max-width: 90ch;
}

.wr-eng2__checks { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.wr-eng2__checks li { display: flex; gap: 10px; font-size: 0.84rem; line-height: 1.55; }
.wr-eng2__checks li.is-ok i { color: #2fa66a; }
.wr-eng2__checks li.is-unknown i { color: var(--wr3-ink-3, #7c8798); }

/* ---------- Steps ---------- */

.wr-eng2__step {
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 16px;
    background: #fff;
}

.wr-eng2__step > h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wr3-blue, #1d5ff5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
}

/* ---------- Step 1 ---------- */

.wr-eng2__field { display: flex; flex-direction: column; gap: 7px; max-width: 560px; }
.wr-eng2__field > span { font-size: 0.88rem; font-weight: 700; color: var(--wr3-ink, #0f172a); }

.wr-eng2__select,
.wr-eng2__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.88rem;
    color: var(--wr3-ink, #0f172a);
}

.wr-eng2__select:focus,
.wr-eng2__input:focus {
    outline: none;
    border-color: var(--wr3-blue, #1d5ff5);
    box-shadow: 0 0 0 3px rgba(29, 95, 245, 0.16);
}

.wr-eng2__count { margin: 14px 0 4px; font-size: 1rem; color: var(--wr3-ink, #0f172a); }
.wr-eng2__desc { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--wr3-ink-2, #475569); max-width: 84ch; }

.wr-eng2__filters {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-eng2__filterhint {
    display: flex;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__filterhint i { color: var(--wr3-blue, #1d5ff5); }

.wr-eng2__filtergrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.wr-eng2__filtergrid label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 700; }

.wr-eng2__filtergrid select {
    padding: 9px 10px;
    border: 1px solid var(--wr3-border-strong, #d3d9e5);
    border-radius: 9px;
    font: inherit;
    font-size: 0.85rem;
    background: #fff;
}

.wr-eng2__filteractions { display: flex; gap: 9px; margin-top: 14px; }

/* ---------- Step 2 ---------- */

.wr-eng2__empty {
    margin: 0;
    padding: 20px;
    border-radius: 11px;
    background: var(--wr3-surface-2, #f7f9fc);
    font-size: 0.88rem;
    color: var(--wr3-ink-2, #475569);
    text-align: center;
}

.wr-eng2__tabletop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.wr-eng2__search { max-width: 340px; }

.wr-eng2__selectctl { display: flex; flex-wrap: wrap; gap: 14px; }

.wr-eng2__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wr3-blue, #1d5ff5);
    cursor: pointer;
}

.wr-eng2__link:hover { text-decoration: underline; }

.wr-eng2__link:focus-visible {
    outline: 2px solid var(--wr3-blue, #1d5ff5);
    outline-offset: 2px;
    border-radius: 4px;
}

.wr-eng2__selcount {
    margin: 0 0 10px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--wr3-blue-soft, #e8f0ff);
    font-size: 0.85rem;
    color: var(--wr3-blue-ink, #12408f);
}

.wr-eng2__selcount .wr-eng2__link { margin-left: 9px; }

.wr-eng2__exclusions {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.84rem;
}

.wr-eng2__exclusions li { padding: 7px 11px; border-radius: 8px; background: var(--wr3-surface-2, #f7f9fc); }
.wr-eng2__exclusions strong { font-variant-numeric: tabular-nums; margin-right: 6px; }

/* No min-width and no horizontal scroll: eight columns fit the content column, which is the
   entire reason the twenty-two-column version was replaced. */
.wr-eng2__tablewrap { width: 100%; }

.wr-eng2__table { width: 100%; font-size: 0.84rem; table-layout: auto; }
.wr-eng2__table th { white-space: nowrap; }
.wr-eng2__table tr.is-selected td { background: var(--wr3-blue-soft, #e8f0ff); }

.wr-eng2__check { width: 34px; }
.wr-eng2__actions { width: 84px; white-space: nowrap; text-align: right; }

.wr-eng2__name { display: block; font-weight: 700; color: var(--wr3-ink, #0f172a); }
.wr-eng2__context { display: block; font-size: 0.78rem; color: var(--wr3-ink-2, #475569); }
.wr-eng2__email { overflow-wrap: anywhere; }

.wr-eng2__pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--wr3-surface-2, #f1f5f9);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.wr-eng2__pill--ok { background: #dcfce7; color: #15803d; }
.wr-eng2__pill--warn { background: #fef3c7; color: #b45309; }
.wr-eng2__pill--blocked { background: #fee2e2; color: #b3352f; }

.wr-eng2__iconbtn {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 8px;
    background: #fff;
    color: var(--wr3-ink-2, #475569);
    cursor: pointer;
}

.wr-eng2__iconbtn:hover { border-color: var(--wr3-blue, #1d5ff5); color: var(--wr3-blue, #1d5ff5); }
.wr-eng2__iconbtn:focus-visible { outline: 2px solid var(--wr3-blue, #1d5ff5); outline-offset: 2px; }

.wr-eng2__menu { position: relative; display: inline-block; }

.wr-eng2__menulist {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    min-width: 230px;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    text-align: left;
}

.wr-eng2__menulist button {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    color: var(--wr3-ink, #0f172a);
    cursor: pointer;
}

.wr-eng2__menulist button:hover { background: var(--wr3-blue-soft, #e8f0ff); }

.wr-eng2__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--wr3-ink-2, #475569);
}

/* ---------- Step 3 ---------- */

.wr-eng2__composegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 13px;
    margin-bottom: 13px;
}

.wr-eng2__compose label,
.wr-eng2__full { display: flex; flex-direction: column; gap: 5px; font-size: 0.79rem; font-weight: 700; }
.wr-eng2__full { margin-bottom: 13px; }

.wr-eng2__editor { font-family: inherit; line-height: 1.6; resize: vertical; }

/* Read-only rather than disabled: the sender must stay legible, and a disabled control reads as
   broken rather than as fixed by configuration. */
.wr-eng2__compose input[readonly] {
    background: var(--wr3-surface-2, #f7f9fc);
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__sending {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 12px;
    background: var(--wr3-surface-2, #f7f9fc);
}

.wr-eng2__sending legend {
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__estimate { margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--wr3-ink, #0f172a); }

.wr-eng2__composeactions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wr-eng2__gatehint { font-size: 0.8rem; color: var(--wr3-ink-2, #475569); }

.wr-eng2__msg { margin: 14px 0 0; font-size: 0.87rem; color: var(--wr3-ink, #0f172a); }

/* ---------- Sticky bar ---------- */

.wr-eng2__sticky {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--wr3-navy, #0c1a3a);
    color: #fff;
    font-size: 0.86rem;
    box-shadow: 0 12px 30px rgba(12, 26, 58, 0.3);
}

.wr-eng2__sticky > div { display: flex; gap: 8px; }

/* ---------- Preview modal ---------- */

.wr-eng2__backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(12, 26, 58, 0.5); }

.wr-eng2__modal {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 32px));
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(12, 26, 58, 0.26);
    overflow: hidden;
}

.wr-eng2__modal > header,
.wr-eng2__modal > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 20px;
}

.wr-eng2__modal > header { border-bottom: 1px solid var(--wr3-border, #e4e8f0); }
.wr-eng2__modal > footer { border-top: 1px solid var(--wr3-border, #e4e8f0); justify-content: flex-end; }
.wr-eng2__modal h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.wr-eng2__modal h3 {
    margin: 18px 0 8px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--wr3-ink-2, #475569);
}

.wr-eng2__modalbody { overflow-y: auto; padding: 16px 20px 20px; }

.wr-eng2__previewstats { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.wr-eng2__previewstats > div { display: flex; gap: 12px; font-size: 0.86rem; }
.wr-eng2__previewstats dt { flex: 0 0 120px; font-weight: 700; color: var(--wr3-ink-2, #475569); }
.wr-eng2__previewstats dd { margin: 0; overflow-wrap: anywhere; }

.wr-eng2__samplemail {
    padding: 14px;
    border: 1px solid var(--wr3-border, #e4e8f0);
    border-radius: 11px;
    background: var(--wr3-surface-2, #f7f9fc);
    font-size: 0.85rem;
}

.wr-eng2__samplemail p { margin: 0 0 6px; }

.wr-eng2__samplemail pre {
    margin: 10px 0 0;
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.6;
    color: var(--wr3-ink-2, #475569);
}

/* ---------- Responsive ----------

   Below 900px the table becomes cards. Eight columns on a phone is a horizontal scroll, and
   removing horizontal scrolling is one of the things this redesign exists for. The checkbox and
   the email button stay pinned on each card because those are the two actions the table is for. */

@media (max-width: 1100px) {
    .wr-eng2__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .wr-eng2__table thead { display: none; }

    .wr-eng2__table,
    .wr-eng2__table tbody,
    .wr-eng2__table tr,
    .wr-eng2__table td { display: block; width: 100%; }

    .wr-eng2__table tr {
        position: relative;
        margin-bottom: 10px;
        padding: 12px 14px 12px 42px;
        border: 1px solid var(--wr3-border, #e4e8f0);
        border-radius: 12px;
    }

    .wr-eng2__table td { padding: 2px 0; border: 0; }

    .wr-eng2__check { position: absolute; left: 12px; top: 14px; width: auto; }
    .wr-eng2__actions { position: absolute; right: 10px; top: 10px; width: auto; text-align: right; }

    .wr-eng2__step { padding: 16px; }
    .wr-eng2__tabletop { flex-direction: column; align-items: stretch; }
    .wr-eng2__search { max-width: 100%; }

    .wr-eng2__composeactions .wr-btn { width: 100%; justify-content: center; }

    .wr-eng2__sticky {
        left: 12px;
        right: 12px;
        transform: none;
        border-radius: 14px;
        justify-content: space-between;
    }
}