:root {
    --sa-email-row-columns: repeat(12, minmax(var(--sa-email-zero), 1fr));
    --sa-email-single-column: minmax(var(--sa-email-zero), 1fr);
    --sa-email-history-timestamp-columns: repeat(3, minmax(var(--sa-email-zero), 1fr));
    --sa-email-row-gap: var(--sa-space-xs);
    --sa-email-cell-gap: 0.125rem;
    --sa-email-screen-reader-size: 0.0625rem;
    --sa-email-screen-reader-inset: 50%;
    --sa-email-recipient-identifier-area: 1 / 5 / 2 / 8;
    --sa-email-recipient-identity-area: 1 / 1 / 2 / 5;
    --sa-email-recipient-status-area: 1 / 8 / 2 / 10;
    --sa-email-recipient-sends-area: 1 / 10 / 2 / 11;
    --sa-email-recipient-deliveries-area: 1 / 11 / 2 / 13;
    --sa-email-recipient-human-area: 2 / 1 / 3 / 3;
    --sa-email-recipient-automated-area: 2 / 3 / 3 / 5;
    --sa-email-recipient-sent-area: 2 / 5 / 3 / 9;
    --sa-email-recipient-opened-area: 2 / 9 / 3 / 13;
    --sa-email-history-identifier-area: 1 / 1 / 2 / 4;
    --sa-email-history-identity-area: 1 / 4 / 2 / 7;
    --sa-email-history-subject-area: 1 / 7 / 2 / 10;
    --sa-email-history-status-area: 1 / 10 / 2 / 13;
    --sa-email-history-flow-area: 2 / 1 / 3 / 7;
    --sa-email-history-first-area: 2 / 7 / 3 / 9;
    --sa-email-history-last-area: 2 / 9 / 3 / 11;
    --sa-email-history-opens-area: 2 / 11 / 3 / 13;
    --sa-email-mobile-recipient-identity-area: 1 / 1 / 2 / 13;
    --sa-email-mobile-recipient-identifier-area: 2 / 1 / 3 / 7;
    --sa-email-mobile-recipient-status-area: 2 / 7 / 3 / 13;
    --sa-email-mobile-recipient-sends-area: 3 / 1 / 4 / 7;
    --sa-email-mobile-recipient-deliveries-area: 3 / 7 / 4 / 13;
    --sa-email-mobile-recipient-human-area: 4 / 1 / 5 / 7;
    --sa-email-mobile-recipient-automated-area: 4 / 7 / 5 / 13;
    --sa-email-mobile-recipient-sent-area: 5 / 1 / 6 / 7;
    --sa-email-mobile-recipient-opened-area: 5 / 7 / 6 / 13;
    --sa-email-mobile-history-identity-area: 1 / 1 / 2 / 7;
    --sa-email-mobile-history-status-area: 1 / 7 / 2 / 13;
    --sa-email-mobile-history-subject-area: 2 / 1 / 3 / 13;
    --sa-email-mobile-history-identifier-area: 3 / 1 / 4 / 13;
    --sa-email-mobile-history-flow-area: 4 / 1 / 5 / 13;
    --sa-email-mobile-history-first-area: 5 / 1 / 6 / 7;
    --sa-email-mobile-history-last-area: 5 / 7 / 6 / 13;
    --sa-email-mobile-history-opens-area: 6 / 1 / 7 / 13;
}

.superadmin-email-privacy {
    display: flex;
    align-items: flex-start;
    gap: var(--sa-email-content-gap);
    margin: var(--sa-email-section-padding) var(--sa-email-panel-padding-inline);
    padding: var(--sa-email-content-gap) var(--sa-email-section-padding);
    color: var(--sa-email-warning);
    background: var(--sa-email-warning-soft);
    border: var(--sa-email-border);
    border-color: var(--sa-email-warning-soft);
    border-radius: var(--sa-radius-sm);
}

.superadmin-email-privacy > i {
    flex: var(--sa-email-flex-static);
    font-size: var(--sa-email-icon-font-size);
}

.superadmin-email-privacy h3,
.superadmin-email-privacy p {
    margin: var(--sa-email-zero);
}

.superadmin-email-privacy h3 {
    font-size: var(--sa-font-size-xs);
}

.superadmin-email-privacy p {
    margin-top: var(--sa-email-compact-gap);
    font-size: var(--sa-font-size-xs);
}

.superadmin-email-timeline {
    display: grid;
    margin: var(--sa-email-zero);
    padding: var(--sa-email-zero) var(--sa-email-panel-padding-inline) var(--sa-email-section-padding);
    list-style: none;
}

.superadmin-email-timeline__item {
    display: grid;
    grid-template-columns: var(--sa-email-timeline-columns);
    gap: var(--sa-email-content-gap);
    min-width: var(--sa-email-zero);
    padding-block: var(--sa-email-content-gap);
    border-bottom: var(--sa-email-border);
}

.superadmin-email-timeline__item:last-child {
    border-bottom: var(--sa-email-zero);
}

.superadmin-email-timeline__icon {
    display: grid;
    place-items: center;
    width: var(--sa-email-timeline-icon-size);
    height: var(--sa-email-timeline-icon-size);
    color: var(--sa-email-info);
    background: var(--sa-email-info-soft);
    border-radius: var(--sa-email-status-radius);
    font-size: var(--sa-font-size-xs);
}

.superadmin-email-timeline__icon--automated {
    color: var(--sa-email-warning);
    background: var(--sa-email-warning-soft);
}

.superadmin-email-timeline__body {
    display: grid;
    gap: var(--sa-email-compact-gap);
    min-width: var(--sa-email-zero);
}

.superadmin-email-timeline__heading,
.superadmin-email-timeline__meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--sa-email-compact-gap) var(--sa-email-content-gap);
    min-width: var(--sa-email-zero);
}

.superadmin-email-timeline__heading {
    justify-content: space-between;
}

.superadmin-email-timeline__heading > div {
    display: grid;
    min-width: var(--sa-email-zero);
}

.superadmin-email-timeline__heading span,
.superadmin-email-timeline__heading time {
    color: var(--sa-email-muted);
    font-size: var(--sa-font-size-xs);
    overflow-wrap: anywhere;
}

.superadmin-email-timeline__heading time {
    flex: var(--sa-email-flex-static);
    font-variant-numeric: tabular-nums;
}

.superadmin-email-timeline__reason {
    display: flex;
    align-items: flex-start;
    gap: var(--sa-email-compact-gap);
    margin: var(--sa-email-zero);
    color: var(--sa-email-muted);
    font-size: var(--sa-font-size-xs);
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    :root {
        --sa-email-kpi-columns: repeat(2, minmax(var(--sa-email-zero), 1fr));
        --sa-email-limit-columns: minmax(var(--sa-email-zero), 1.2fr) minmax(8rem, 1fr) auto;
        --sa-email-history-flow-columns: minmax(var(--sa-email-zero), 1fr);
        --sa-email-recipient-id-width: var(--sa-email-full);
        --sa-email-recipient-identity-width: var(--sa-email-full);
        --sa-email-recipient-status-width: var(--sa-email-full);
        --sa-email-recipient-count-width: var(--sa-email-full);
        --sa-email-recipient-time-width: var(--sa-email-full);
        --sa-email-history-id-width: var(--sa-email-full);
        --sa-email-history-identity-width: var(--sa-email-full);
        --sa-email-history-subject-width: var(--sa-email-full);
        --sa-email-history-status-width: var(--sa-email-full);
        --sa-email-history-flow-width: var(--sa-email-full);
        --sa-email-history-time-width: var(--sa-email-full);
        --sa-email-history-opens-width: var(--sa-email-full);
    }

    .superadmin-email-panel .superadmin-table-wrap {
        overflow: hidden;
    }

    .superadmin-email-table,
    .superadmin-email-table tbody {
        display: block;
        width: var(--sa-email-full);
        min-width: var(--sa-email-zero);
    }

    .superadmin-email-table thead {
        position: absolute;
        display: table-header-group;
        width: var(--sa-email-screen-reader-size);
        height: var(--sa-email-screen-reader-size);
        overflow: hidden;
        clip-path: inset(var(--sa-email-screen-reader-inset));
        white-space: nowrap;
    }

    .superadmin-email-table tbody {
        display: grid;
        gap: var(--sa-email-zero);
        padding: var(--sa-email-zero);
    }

    .superadmin-email-table tr {
        display: grid;
        grid-template-columns: var(--sa-email-row-columns);
        gap: var(--sa-email-row-gap);
        min-width: var(--sa-email-zero);
        padding: var(--sa-email-table-row-padding-block) var(--sa-email-table-row-padding-inline);
        background: var(--sa-email-surface);
        border-bottom: var(--sa-email-border);
    }

    .superadmin-email-table tbody tr:last-child {
        border-bottom: var(--sa-email-zero);
    }

    .superadmin-email-table th,
    .superadmin-email-table td,
    .superadmin-email-table td:first-child {
        width: var(--sa-email-auto);
        min-width: var(--sa-email-zero);
        padding: var(--sa-email-zero);
        border-bottom: var(--sa-email-zero);
    }

    .superadmin-email-table td {
        display: grid;
        grid-template-columns: var(--sa-email-single-column);
        align-content: start;
        gap: var(--sa-email-cell-gap);
        max-width: var(--sa-email-full);
        overflow-wrap: anywhere;
    }

    .superadmin-email-table td::before {
        display: block;
        content: attr(data-label);
        color: var(--sa-email-muted);
        font-size: var(--sa-font-size-xs);
        font-weight: var(--sa-email-font-weight-bold);
        letter-spacing: var(--sa-email-label-spacing);
        line-height: var(--sa-line-height-compact);
        text-transform: uppercase;
    }

    .superadmin-email-recipients td:nth-child(1) { grid-area: var(--sa-email-recipient-identifier-area); }
    .superadmin-email-recipients td:nth-child(2) { grid-area: var(--sa-email-recipient-identity-area); }
    .superadmin-email-recipients td:nth-child(3) { grid-area: var(--sa-email-recipient-status-area); }
    .superadmin-email-recipients td:nth-child(4) { grid-area: var(--sa-email-recipient-sends-area); }
    .superadmin-email-recipients td:nth-child(5) { grid-area: var(--sa-email-recipient-deliveries-area); }
    .superadmin-email-recipients td:nth-child(6) { grid-area: var(--sa-email-recipient-human-area); }
    .superadmin-email-recipients td:nth-child(7) { grid-area: var(--sa-email-recipient-automated-area); }
    .superadmin-email-recipients td:nth-child(8) { grid-area: var(--sa-email-recipient-sent-area); }
    .superadmin-email-recipients td:nth-child(9) { grid-area: var(--sa-email-recipient-opened-area); }
    .superadmin-email-history td:nth-child(1) { grid-area: var(--sa-email-history-identifier-area); }
    .superadmin-email-history td:nth-child(2) { grid-area: var(--sa-email-history-identity-area); }
    .superadmin-email-history td:nth-child(3) { grid-area: var(--sa-email-history-subject-area); }
    .superadmin-email-history td:nth-child(4) { grid-area: var(--sa-email-history-status-area); }
    .superadmin-email-history td:nth-child(5) { grid-area: var(--sa-email-history-flow-area); }
    .superadmin-email-history td:nth-child(6) { grid-area: var(--sa-email-history-first-area); }
    .superadmin-email-history td:nth-child(7) { grid-area: var(--sa-email-history-last-area); }
    .superadmin-email-history td:nth-child(8) { grid-area: var(--sa-email-history-opens-area); }

    .superadmin-email-history__timestamps {
        grid-template-columns: var(--sa-email-history-timestamp-columns);
    }
}

@media (max-width: 720px) {
    :root {
        --sa-email-section-gap: var(--sa-space-sm);
        --sa-email-panel-padding-inline: var(--sa-space-sm);
        --sa-email-limit-columns: minmax(var(--sa-email-zero), 1fr);
        --sa-email-row-gap: var(--sa-space-xs);
    }

    .superadmin-email-marketing__generated {
        justify-self: start;
    }

    .superadmin-email-section__heading,
    .superadmin-email-panel .superadmin-panel__header {
        align-items: flex-start;
    }

    .superadmin-email-section__heading > p {
        max-width: var(--sa-email-full);
        text-align: left;
    }

    .superadmin-email-limit__facts {
        justify-content: flex-start;
        white-space: var(--sa-email-white-space-normal);
    }

    .superadmin-email-table tr {
        padding: var(--sa-email-section-padding);
    }

    .superadmin-email-recipients td:nth-child(1) { grid-area: var(--sa-email-mobile-recipient-identifier-area); }
    .superadmin-email-recipients td:nth-child(2) { grid-area: var(--sa-email-mobile-recipient-identity-area); }
    .superadmin-email-recipients td:nth-child(3) { grid-area: var(--sa-email-mobile-recipient-status-area); }
    .superadmin-email-recipients td:nth-child(4) { grid-area: var(--sa-email-mobile-recipient-sends-area); }
    .superadmin-email-recipients td:nth-child(5) { grid-area: var(--sa-email-mobile-recipient-deliveries-area); }
    .superadmin-email-recipients td:nth-child(6) { grid-area: var(--sa-email-mobile-recipient-human-area); }
    .superadmin-email-recipients td:nth-child(7) { grid-area: var(--sa-email-mobile-recipient-automated-area); }
    .superadmin-email-recipients td:nth-child(8) { grid-area: var(--sa-email-mobile-recipient-sent-area); }
    .superadmin-email-recipients td:nth-child(9) { grid-area: var(--sa-email-mobile-recipient-opened-area); }
    .superadmin-email-history td:nth-child(1) { grid-area: var(--sa-email-mobile-history-identifier-area); }
    .superadmin-email-history td:nth-child(2) { grid-area: var(--sa-email-mobile-history-identity-area); }
    .superadmin-email-history td:nth-child(3) { grid-area: var(--sa-email-mobile-history-subject-area); }
    .superadmin-email-history td:nth-child(4) { grid-area: var(--sa-email-mobile-history-status-area); }
    .superadmin-email-history td:nth-child(5) { grid-area: var(--sa-email-mobile-history-flow-area); }
    .superadmin-email-history td:nth-child(6) { grid-area: var(--sa-email-mobile-history-first-area); }
    .superadmin-email-history td:nth-child(7) { grid-area: var(--sa-email-mobile-history-last-area); }
    .superadmin-email-history td:nth-child(8) { grid-area: var(--sa-email-mobile-history-opens-area); }

    .superadmin-email-privacy {
        margin: var(--sa-email-section-padding);
    }

    .superadmin-email-timeline {
        padding-inline: var(--sa-email-section-padding);
    }

    .superadmin-email-timeline__heading {
        display: grid;
        justify-content: stretch;
    }
}

@media (max-width: 480px) {
    :root {
        --sa-email-kpi-columns: repeat(2, minmax(var(--sa-email-zero), 1fr));
        --sa-email-kpi-template: "icon label value" "icon detail detail";
    }

    .superadmin-email-section__heading,
    .superadmin-email-limit__header,
    .superadmin-email-limit__facts,
    .superadmin-email-panel .superadmin-panel__header {
        display: grid;
        justify-content: stretch;
    }

    .superadmin-email-history__timestamps {
        grid-template-columns: var(--sa-email-single-column);
    }

    .superadmin-email-history__timestamps div {
        grid-template-columns: var(--sa-email-history-flow-columns);
    }

    .superadmin-email-privacy {
        display: grid;
    }
}