html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.toast-container {
    z-index: 2000 !important;
}

.admin-table-card {
    width: 100%;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
    margin-bottom: 1rem;
}

.admin-table-card .add-button {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    background: #f7f8fa;
    border-bottom: 1px solid #e6e8eb;
}

.admin-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.admin-table-card .admin-grid,
.admin-table-card table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table-card th,
.admin-table-card td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.admin-table-card thead th {
    background: #f0f2f5;
    color: #344054;
    font-weight: 600;
    border-bottom: 2px solid #e0e3e8;
    white-space: normal;
    vertical-align: bottom;
}

.admin-table-card tbody tr {
    border-bottom: 1px solid #eef0f2;
}

.admin-table-card tbody tr:nth-child(even) {
    background: #fafbfc;
}

.admin-table-card tbody tr:hover {
    background: #f0f4ff;
}

.admin-table-card tbody tr.student-row-incomplete,
.admin-table-card tbody tr.student-row-incomplete:nth-child(even) {
    background: #fff4e5;
    box-shadow: inset 3px 0 0 #f59e0b;
}

.admin-table-card tbody tr.student-row-incomplete:hover {
    background: #ffead0;
}

.admin-table-card tbody tr.student-row-phone-pending,
.admin-table-card tbody tr.student-row-phone-pending:nth-child(even) {
    background: #e7f6df;
    box-shadow: inset 3px 0 0 #72b65a;
}

.admin-table-card tbody tr.student-row-phone-pending:hover {
    background: #d8efcd;
}

.student-account-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.375rem;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.student-account-status-incomplete {
    color: #9a4d00;
    background: #ffe1b8;
}

.student-account-status-phone-pending {
    color: #356d24;
    background: #d8efcd;
}

.student-account-status-verified {
    color: #176b3a;
    background: #d9f4e4;
}

.admin-table-card tbody tr:last-child {
    border-bottom: none;
}

.admin-table-card .grid-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid #e6e8eb;
}

.admin-table-card .add-button button,
.admin-table-card td button {
    background: #4969ee;
    color: #fff;
    border: none;
    padding: 0.35rem 0.9rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    cursor: pointer;
    margin: 0.15rem 0.25rem;
    transition: background-color 0.15s ease;
}

.admin-table-card .add-button button:hover,
.admin-table-card td button:hover {
    background: #6884f9;
}

.admin-table-card .add-button button:active,
.admin-table-card td button:active {
    background: #192e86;
}

.admin-table-card td button.btn-delete,
.btn-delete {
    background: #e5484d;
    color: #fff;
    border: none;
    padding: 0.35rem 0.9rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.admin-table-card td button.btn-delete:hover,
.btn-delete:hover {
    background: #cf3a3f;
}

.admin-table-card td button.btn-delete:active,
.btn-delete:active {
    background: #b02e33;
}

.admin-table-card .filter-header {
    margin-bottom: 0.35rem;
}

.admin-table-card .cell-content {
    padding: 0.25rem 0;
}

.admin-table-card .grid-filter-select,
.admin-table-card .filter-select {
    width: 100%;
    min-width: 120px;
    max-width: 260px;
}

.admin-table-card tbody tr:not(:has(td:not(:empty))) {
    display: none;
}

/* Email administration. Tokens are scoped here so the existing admin theme is unchanged. */
.email-page-header,
.email-card,
.email-analytics {
    --sm-admin-primary: #2f6fed;
    --sm-admin-primary-container: #e8f1ff;
    --sm-admin-on-primary-container: #174ea6;
    --sm-admin-on-surface: #1f2937;
    --sm-admin-on-surface-variant: #667085;
    --sm-admin-outline-variant: #d9dee7;
    --sm-admin-surface-container-lowest: #fff;
    --sm-admin-surface-container-low: #f7f8fa;
    --sm-admin-surface-container-high: #eef1f5;
    --sm-admin-success-container: #dcfae6;
    --sm-admin-on-success-container: #067647;
    --sm-admin-warning-container: #fff3d6;
    --sm-admin-on-warning-container: #93370d;
    --sm-admin-error-container: #fee4e2;
    --sm-admin-on-error-container: #b42318;
    --sm-admin-space-1: .25rem;
    --sm-admin-space-2: .5rem;
    --sm-admin-space-3: .75rem;
    --sm-admin-space-4: 1rem;
    --sm-admin-space-5: 1.25rem;
    --sm-admin-space-6: 1.5rem;
    --sm-admin-space-12: 3rem;
    --sm-admin-radius-sm: .5rem;
    --sm-admin-radius-md: .75rem;
    --sm-admin-radius-pill: 999px;
    --sm-admin-font-size-label: .78rem;
    --sm-admin-font-size-body-small: .875rem;
    --sm-admin-font-size-title: 1.15rem;
    --sm-admin-elevation-1: 0 1px 3px rgba(16, 24, 40, .08);
}

.email-page-header,
.email-card-header,
.email-preview-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.email-page-header h1,
.email-card h2 {
    margin: 0;
}

.email-page-header p,
.email-card-header p,
.email-preview-heading p {
    margin: .25rem 0 0;
    color: #667085;
}

.email-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1.25rem 0;
    padding: .25rem;
    border: 1px solid #d9dee7;
    border-radius: .75rem;
    background: #f2f4f7;
}

.email-tab {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: .5rem;
    padding: .55rem 1rem;
    color: #475467;
    font-weight: 700;
    text-decoration: none;
}

.email-tab:hover {
    border-color: #d0d5dd;
    background: #fff;
    color: #175cd3;
}

.email-tab.active {
    border-color: #2f6fed;
    background: #2f6fed;
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.email-card {
    padding: 1.25rem;
    border: 1px solid #d9dee7;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

.email-card-header {
    align-items: flex-start;
    margin-bottom: 1rem;
}

.email-campaign-layout {
    display: grid;
    grid-template-columns: minmax(500px, .9fr) minmax(480px, 1.1fr);
    gap: 1.25rem;
    align-items: start;
}

.email-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.email-multiselect {
    position: relative;
}

.email-multiselect > summary {
    overflow: hidden;
    cursor: pointer;
    list-style: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-multiselect > summary::-webkit-details-marker {
    display: none;
}

.email-multiselect[open] > summary {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.email-multiselect-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .375rem);
    right: 0;
    left: 0;
    min-width: 280px;
    padding: .75rem;
    border: 1px solid #d9dee7;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}

.email-multiselect-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.email-multiselect-toolbar .btn-link {
    flex: none;
    padding-right: 0;
    padding-left: 0;
    white-space: nowrap;
}

.email-multiselect-options {
    max-height: 240px;
    overflow-y: auto;
    border-top: 1px solid #eef1f5;
}

.email-multiselect-option {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .625rem .25rem;
    border-bottom: 1px solid #eef1f5;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.3;
}

.email-multiselect-option:hover {
    background: #f7f8fa;
}

.email-multiselect-option .form-check-input {
    flex: none;
    margin-top: .1rem;
}

.email-multiselect-empty {
    padding: 1rem .25rem;
    color: #667085;
    font-size: .875rem;
    text-align: center;
}

.email-audience-estimate {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: #e8f1ff;
    color: #174ea6;
}

.email-audience-estimate strong {
    font-size: 1.15rem;
}

.email-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.email-code-editor {
    min-height: 450px;
    resize: vertical;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    tab-size: 2;
}

.email-send-note {
    margin: .75rem 0 0;
    color: #667085;
    font-size: .875rem;
}

.email-preview-panel {
    min-height: 590px;
}

.email-preview-frame {
    display: block;
    width: 100%;
    min-height: 500px;
    border: 1px solid #d9dee7;
    border-radius: .5rem;
    background: #fff;
}

.email-preview-frame--noninteractive {
    pointer-events: none;
}

.email-preview-badge {
    padding: .25rem .75rem;
    border: 1px solid #d9dee7;
    border-radius: 999px;
    color: #667085;
    font-size: .78rem;
}

.email-analytics {
    margin-top: 1.25rem;
}

.email-table-wrap {
    overflow-x: auto;
}

.email-grid {
    width: 100%;
}

.email-grid th,
.email-grid td {
    padding: .75rem;
    border-bottom: 1px solid #d9dee7;
    vertical-align: middle;
}

.email-grid th {
    color: #667085;
    font-size: .78rem;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.email-empty,
.email-loading {
    padding: 3rem 1rem;
    color: #667085;
    text-align: center;
}

.email-status {
    display: inline-flex;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #e8f1ff;
    color: #174ea6;
    font-size: .78rem;
    font-weight: 700;
}

.email-status.sent { background: #e8f1ff; color: #175cd3; }
.email-status.delivered { background: #dcfae6; color: #067647; }
.email-status.partially_delivered { background: #fff3d6; color: #93370d; }
.email-status.sent_with_errors,
.email-status.failed { background: #fee4e2; color: #b42318; }
.email-status.no_recipients { background: #eef1f5; color: #667085; }

.email-number {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.email-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
}

.email-metric {
    padding: .75rem;
    border-radius: .5rem;
    background: #f7f8fa;
}

.email-metric span {
    display: block;
    color: #667085;
    font-size: .78rem;
}

.email-metric strong {
    display: block;
    margin-top: .25rem;
    color: #1f2937;
    font-size: 1.15rem;
}

.email-confirm-summary {
    margin: 0;
    padding-left: 1.25rem;
}

.email-confirm-summary li {
    margin-bottom: .5rem;
}

.email-scheduled-section {
    margin-top: 1.25rem;
}

.email-scheduled-list {
    display: grid;
    gap: 1.25rem;
}

.email-scheduled-card {
    display: grid;
    grid-template-columns: minmax(420px, 1.35fr) minmax(280px, .65fr);
    overflow: hidden;
    border: 1px solid #d9dee7;
    border-radius: .75rem;
    background: #f8f9fb;
}

.email-scheduled-preview {
    min-width: 0;
    padding: 1rem;
    border-right: 1px solid #d9dee7;
    background: #fff;
}

.email-scheduled-preview h3 {
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-preview-frame--scheduled {
    min-height: 360px;
    max-height: 420px;
}

.email-scheduled-details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
}

.email-scheduled-details > div:not(.email-scheduled-actions) {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.email-scheduled-label,
.email-scheduled-timezone,
.email-scheduled-audience {
    color: #667085;
    font-size: .82rem;
}

.email-scheduled-time {
    color: #101828;
    font-size: 1.2rem;
}

.email-scheduled-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: auto;
}

@media (max-width: 1100px) {
    .email-campaign-layout { grid-template-columns: 1fr; }
    .email-preview-panel { min-height: auto; }
    .email-scheduled-card { grid-template-columns: 1fr; }
    .email-scheduled-preview { border-right: 0; border-bottom: 1px solid #d9dee7; }
}

@media (max-width: 700px) {
    .email-page-header,
    .email-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .email-filter-grid,
    .email-details-grid { grid-template-columns: 1fr; }
    .email-preview-panel { margin-top: 1rem; }
}