/* Email area (Pages/Admin/Email): one stylesheet for every page of the module, prefixed em-. Colours come
   only from the DWS theme variables (--primary for header bars, --surface for panels, --table-* for
   lists), so light and dark themes both work. Status colours always come with a word in the markup. */

.em-page {
    --em-muted: color-mix(in srgb, var(--text) 62%, transparent);
    --em-line: color-mix(in srgb, var(--text) 14%, transparent);
    --em-radius: 6px;
    /* --control-background stays white in the dark theme and --table-highlight is a light blue there, so
       both are derived from colours that do follow the theme. */
    --em-field-bg: var(--background);
    --em-hover: color-mix(in srgb, var(--primary) 28%, var(--surface));
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 2rem;
    min-width: 0;
    color: var(--text);
}

.em-page a:focus-visible,
.em-page button:focus-visible,
.em-page select:focus-visible,
.em-page input:focus-visible,
.em-page textarea:focus-visible,
.em-page [tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.em-muted { color: var(--em-muted); }
.em-mono { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 0.82em; }
.em-nowrap { white-space: nowrap; }
.em-grow { flex: 1 1 auto; }
.em-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- module navigation ------------------------------------------------------------------------------ */

.em-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    border-bottom: 1px solid var(--em-line);
}

.em-nav__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 0.75rem;
}

.em-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.em-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.8rem;
    border-bottom: 3px solid transparent;
    color: var(--em-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.em-nav__tab:hover { color: var(--text); background: var(--primary-hover); }

.em-nav__tab--current {
    color: var(--text);
    border-bottom-color: var(--primary);
}

.em-nav__sep {
    width: 1px;
    align-self: stretch;
    margin: 0.5rem 0.25rem;
    background: var(--em-line);
}

/* ---- page head and toolbars ----------------------------------------------------------------------- */

.em-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.em-head__title { margin: 0; font-size: 1.35rem; font-weight: 700; }
.em-head__subtitle { margin: 0.2rem 0 0; color: var(--em-muted); font-size: 0.875rem; max-width: 72rem; }
.em-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.em-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* Search: a DwsInput with a leading search icon; it grows in the toolbar and takes the full row on phones. */
.em-search-field { flex: 1 1 18rem; min-width: min(16rem, 100%); max-width: 28rem; }

.em-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

/* ---- tables (screenshot style: slate header, zebra rows, highlight on hover) ----------------------- */

.em-table-wrap {
    overflow-x: auto;
    border-radius: var(--em-radius);
    border: 1px solid var(--em-line);
    background: var(--table-bg, var(--surface));
}

.em-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.em-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--primary);
    color: var(--primary-text);
    text-align: left;
    font-weight: 700;
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
}

.em-table thead th button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.em-table thead th button:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; border-radius: 2px; }

.em-table tbody td {
    padding: 0.55rem 0.75rem;
    border-top: 1px solid var(--em-line);
    vertical-align: middle;
}

.em-table tbody tr.em-row:nth-of-type(4n+3) td,
.em-table--plain tbody tr:nth-child(even) td { background: var(--table-bg-alternate); }

.em-table tbody tr.em-row { cursor: pointer; }
.em-table tbody tr.em-row:hover td { background: var(--em-hover); }
.em-table tbody tr.em-row--open td { background: var(--em-hover); }

.em-table__name { font-weight: 600; }
.em-table__sub { display: block; color: var(--em-muted); font-size: 0.78rem; margin-top: 0.1rem; }
.em-table__clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.em-table__center { text-align: center; }
.em-table__actions { text-align: right; white-space: nowrap; }

.em-table__detail td {
    background: var(--surface) !important;
    padding: 0.75rem 1.25rem 1rem 3rem;
    cursor: default;
}




.em-footer-note {
    display: flex;
    justify-content: space-between;
    color: var(--em-muted);
    font-size: 0.8rem;
}

/* ---- chips ---------------------------------------------------------------------------------------- */

.em-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--text);
}

.em-chip--draft { background: color-mix(in srgb, var(--text) 9%, transparent); }
.em-chip--review { background: var(--warning-hover); color: color-mix(in srgb, var(--warning-dark) 55%, var(--text)); }
.em-chip--published { background: var(--success-hover); color: color-mix(in srgb, var(--success-dark) 55%, var(--text)); }
.em-chip--live { background: var(--success); color: #fff; }
.em-chip--staging { background: var(--primary-hover); color: var(--text); }
.em-chip--marketing { background: var(--accent-hover); }
.em-chip--error { background: var(--error-hover); color: color-mix(in srgb, var(--error-dark) 60%, var(--text)); }
.em-chip--outline { background: transparent; border-color: var(--em-line); }

.em-chip-link {
    text-decoration: none;
    color: inherit;
}

.em-chip-link:hover .em-chip { border-color: var(--primary); }

.em-token {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    white-space: nowrap;
}

.em-token--warn { background: var(--warning-hover); }

/* ---- states --------------------------------------------------------------------------------------- */

.em-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--em-muted);
}


.em-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--em-radius);
    border-left: 4px solid var(--primary);
    background: var(--surface);
    font-size: 0.875rem;
}

.em-alert--warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.em-alert ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.em-alert__actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- panels --------------------------------------------------------------------------------------- */

.em-panel {
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    background: var(--surface);
    min-width: 0;
}

.em-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--em-line);
    font-weight: 700;
    font-size: 0.85rem;
}

.em-panel__body { padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }

/* ---- plain form fields (used where a DWS input would not fit: compact grids, textareas) ----------- */

.em-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.em-field__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--em-muted);
}

/* Code / HTML source in a multi-line DwsInput. */
.em-code-input textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; white-space: pre; tab-size: 2; line-height: 1.45; }

.em-field--invalid .em-field__error { font-weight: 600; }
.em-field__error { font-size: 0.75rem; color: var(--error-dark); }

/* The slate header bar of the editors (screenshots: fields on the primary colour). */
.em-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border-radius: var(--em-radius);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--em-line);
}

.em-bar__fields {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.5rem;
}

.em-bar__lead { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding-top: 1.1rem; }

.em-bar__tools {
    display: flex;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: var(--em-radius);
    background: transparent;
}

.em-bar__tools .em-bar__tools .em-bar__tools 
.em-span-2 { grid-column: span 2; }
.em-span-3 { grid-column: span 3; }
.em-span-4 { grid-column: span 4; }
.em-span-5 { grid-column: span 5; }
.em-span-6 { grid-column: span 6; }
.em-span-8 { grid-column: span 8; }
.em-span-12 { grid-column: span 12; }

/* Second bar: version, workflow, layout/theme. */
.em-versionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--em-radius);
    background: color-mix(in srgb, var(--primary) 82%, #000);
    color: var(--primary-text);
}

.em-versionbar__label { font-size: 0.72rem; font-weight: 700; opacity: 0.85; }
.em-versionbar__hint { font-size: 0.8rem; opacity: 0.9; }
.em-versionbar__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.4rem; }

a
/* ---- template editor: block stack ------------------------------------------------------------------ */

.em-stack { display: flex; flex-direction: column; align-items: stretch; }

.em-insert {
    display: flex;
    justify-content: center;
    padding: 0.4rem 0;
}



.em-block {
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    background: var(--surface);
    overflow: hidden;
}

.em-block--editing { box-shadow: 0 0 0 2px var(--accent); }

.em-block__head {
    display: grid;
    grid-template-columns: 2.2rem minmax(10rem, 1.3fr) minmax(9rem, 1fr) minmax(7rem, 0.6fr) minmax(9rem, 0.9fr) auto;
    gap: 0.5rem;
    align-items: end;
    padding: 0.5rem 0.65rem;
    background: var(--primary);
    color: var(--primary-text);
}

.em-block__head .em-field__label { color: var(--primary-text); opacity: 0.85; }

.em-block__state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

.em-block__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--primary-text);
}

.em-block__dot--published { background: var(--success); border-color: var(--success); }
.em-block__dot--review { background: var(--warning); border-color: var(--warning); }

.em-block__tools {
    display: flex;
    gap: 0.15rem;
    padding: 0.15rem;
    border-radius: var(--em-radius);
    background: rgba(0, 0, 0, 0.15);
}

.em-block__notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--warning) 12%, var(--surface));
    border-bottom: 1px solid var(--em-line);
}

.em-block__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.6rem;
}

.em-block__pane {
    position: relative;
    padding-top: 1.35rem;
    border: 1px solid var(--em-line);
    border-radius: 4px;
    min-height: 120px;
    overflow: hidden;
    background: #fff;
}

.em-block__pane-label {
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 700;
    color: #5b6670;
    background: rgba(255, 255, 255, 0.85);
    padding: 0 0.3rem;
    border-radius: 3px;
}

.em-block__text {
    margin: 0;
    padding: 0.3rem 0.75rem 0.6rem;
    max-height: 210px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.82rem;
    color: #2b3640;
    background: #fff;
}

.em-block__text--derived { color: #6a747d; font-style: italic; }

.em-block__editor {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    border-top: 1px solid var(--em-line);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.em-block__editor-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.em-subject-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- source/visual switch ------------------------------------------------------------------------- */

.em-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }

/* ---- preview mode --------------------------------------------------------------------------------- */

.em-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem);
    gap: 1rem;
    align-items: start;
}

.em-mail {
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    background: var(--surface);
    overflow: hidden;
}

.em-mail__meta {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.2rem 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--em-line);
    font-size: 0.82rem;
}

.em-mail__meta dt { font-weight: 700; color: var(--em-muted); }
.em-mail__meta dd { margin: 0; overflow-wrap: anywhere; }

.em-mail__switch { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--em-line); }
.em-mail__text { margin: 0; padding: 1rem 1.25rem; white-space: pre-wrap; font-size: 0.875rem; background: #fff; color: #222; min-height: 20rem; }

.em-side { display: flex; flex-direction: column; gap: 0.75rem; position: sticky; top: 0.75rem; }

.em-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.em-kv__row { display: flex; flex-direction: column; gap: 0.15rem; }

.em-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
}

.em-frame-wrap { position: relative; overflow: hidden; background: #fff; }

/* ---- content editor ------------------------------------------------------------------------------- */

.em-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.em-schema { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.em-schema th { text-align: left; font-size: 0.7rem; color: var(--em-muted); padding: 0.25rem 0.35rem; }
.em-schema td { padding: 0.2rem 0.35rem; border-top: 1px solid var(--em-line); }

.em-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.em-diff { margin: 0; font-size: 0.78rem; max-height: 22rem; overflow: auto; }
.em-diff__line { display: block; white-space: pre-wrap; padding: 0 0.5rem; font-family: ui-monospace, Consolas, monospace; }
.em-diff__line--Added { background: var(--success-hover); }
.em-diff__line--Removed { background: var(--error-hover); text-decoration: line-through; }

.em-picker { display: flex; flex-direction: column; gap: 0.6rem; min-width: min(46rem, 86vw); }
.em-picker__list { max-height: 50vh; overflow: auto; border: 1px solid var(--em-line); border-radius: var(--em-radius); }
.em-picker__item { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.55rem 0.75rem; border: 0; border-top: 1px solid var(--em-line); background: var(--surface); color: var(--text); cursor: pointer; }
.em-picker__item:first-child { border-top: 0; }
.em-picker__item:hover, .em-picker__item[aria-selected="true"] { background: var(--em-hover); }

.em-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; min-width: min(40rem, 86vw); }
.em-form__wide { grid-column: 1 / -1; }

.em-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.75rem; }

/* ---- small screens -------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .em-preview, .em-split, .em-block__editor { grid-template-columns: minmax(0, 1fr); }
    .em-side { position: static; }
    .em-block__head { grid-template-columns: 2.2rem minmax(0, 1fr) minmax(0, 1fr); }
    .em-block__head > .em-block__tools { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 760px) {
    .em-page { padding: 0.75rem; }
    .em-bar { grid-template-columns: minmax(0, 1fr); }
    .em-bar__lead { flex-direction: row; padding-top: 0; }
    .em-bar__fields > * { grid-column: span 12 !important; }
    .em-block__body { grid-template-columns: minmax(0, 1fr); }
    .em-form { grid-template-columns: minmax(0, 1fr); }
}

/* ==== 2026-10-09 editor redesign ====================================================================
   Title + envelope + workflow bar on the surface colour (the slate --primary is kept for buttons and the
   current state), and a live preview beside the block stack on wide screens. */

.em-titlebar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.em-titlebar__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: min(28rem, 100%); flex: 1 1 28rem; }

.em-titlebar__main .em-back { align-self: flex-start; margin-left: -0.5rem; }

.em-titlebar__name { width: 100%; max-width: 40rem; }
.em-titlebar__name input { font-size: 1.25rem; font-weight: 700; }

.em-titlebar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; color: var(--em-muted); }
.em-titlebar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }


/* Envelope: From / Subject like a mail client, settings folded away. */
.em-envelope {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    background: var(--surface);
    overflow: hidden;
}

.em-envelope__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid var(--em-line);
}

.em-envelope__subject input { font-weight: 600; }
.em-envelope__hint { font-size: 0.72rem; color: var(--em-muted); white-space: nowrap; }

.em-envelope__more { border-top: 1px solid var(--em-line); }
.em-envelope__summary-head { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-size: 0.82rem; font-weight: 700; }
.em-envelope__summary { font-weight: 400; color: var(--em-muted); }

.em-envelope__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.25rem 0.85rem 0.85rem;
}

/* Workflow bar on the surface, with a stepper. */
.em-page .em-versionbar {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--em-line);
}

.em-versionbar__field { display: inline-flex; align-items: center; gap: 0.4rem; }
.em-page .em-versionbar__label { color: var(--em-muted); opacity: 1; }
.em-page .em-versionbar__hint { color: var(--em-muted); opacity: 1; max-width: 26rem; }
.em-page .em-versionbar__actions { align-items: center; }

.em-steps {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.74rem;
    font-weight: 700;
}

.em-steps li {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem 0.25rem 1.1rem;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--em-muted);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}

.em-steps li:first-child { padding-left: 0.75rem; border-radius: 999px 0 0 999px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.em-steps li + li { margin-left: -4px; }
.em-steps .em-steps__done { background: var(--success-hover); color: color-mix(in srgb, var(--success-dark) 55%, var(--text)); }
.em-steps .em-steps__current { background: var(--primary); color: var(--primary-text); }

.em-alert--sticky { position: sticky; top: 0.5rem; z-index: 5; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }

/* Workspace: blocks + live preview. */
.em-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 32vw, 34rem);
    gap: 1.25rem;
    align-items: start;
}

.em-stack__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-size: 0.82rem; }
.em-stack__title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; }

.em-live { position: sticky; top: 0.75rem; min-width: 0; }

.em-live__panel {
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    background: var(--surface);
    overflow: hidden;
}

.em-live__head,
.em-live__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.em-live__head { border-bottom: 1px solid var(--em-line); }
.em-live__foot { border-top: 1px solid var(--em-line); font-size: 0.76rem; }
.em-live__title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem; }

.em-live__inbox {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--text) 4%, var(--surface));
    border-bottom: 1px solid var(--em-line);
}

.em-live__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-text);
    font-weight: 700;
}

.em-live__envelope { display: flex; flex-direction: column; min-width: 0; }
.em-live__from { font-size: 0.75rem; color: var(--em-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-live__subject { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.em-live__frame { background: #f8f8f8; }
.em-live__frame--narrow { padding: 0 calc(50% - 190px); background: color-mix(in srgb, var(--text) 10%, var(--surface)); }

/* Block cards: light header with a slate edge instead of a full slate bar. */
.em-page .em-block { border-left: 4px solid var(--primary); }
.em-page .em-block__head {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--text);
    border-bottom: 1px solid var(--em-line);
}

.em-page .em-block__head .em-field__label { color: var(--em-muted); opacity: 1; }
.em-page .em-block__tools { background: transparent; }
.em-page .em-block__tools .em-page .em-block__tools .em-page .em-block__dot { border-color: var(--em-muted); }
.em-page .em-block__pane { min-height: 0; }

/* The live preview needs room; below 1250px the blocks get the full width and the preview moves under. */
@media (max-width: 1250px) {
    .em-workspace { grid-template-columns: minmax(0, 1fr); }
    .em-live { position: static; }
}

@media (max-width: 900px) {
    .em-envelope__grid { grid-template-columns: minmax(0, 1fr); }
    .em-envelope__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

/* ==== Email dashboard (EmailDashboard.razor), prefixed ed- ========================================== */

.ed-small { font-size: 0.78rem; }
.ed-num { text-align: right; font-variant-numeric: tabular-nums; }
.ed-bad { color: var(--error-dark, var(--error)); font-weight: 700; }
.ed-flush { padding: 0; }
.ed-link { color: var(--link, var(--primary)); text-decoration: none; font-weight: 600; }
.ed-link:hover { text-decoration: underline; }
.ed-ok { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }

/* Live status strip */
.ed-status {
    display: grid;
    grid-template-columns: minmax(14rem, 1.2fr) minmax(8rem, 0.7fr) minmax(16rem, 2fr) minmax(10rem, 1fr);
    gap: 0;
    border: 1px solid var(--em-line);
    border-radius: var(--em-radius);
    background: var(--surface);
    overflow: hidden;
}

.ed-status > * { padding: 0.85rem 1rem; min-width: 0; }
.ed-status > * + * { border-left: 1px solid var(--em-line); }
.ed-status__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--em-muted); }
.ed-status__value { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.ed-status__hint { font-size: 0.76rem; color: var(--em-muted); margin-top: 0.15rem; }
.ed-status__health .ed-status__hint { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.ed-status__health { display: flex; gap: 0.75rem; align-items: flex-start; }
.ed-status__dot { flex: none; width: 14px; height: 14px; margin-top: 0.3rem; border-radius: 50%; background: var(--em-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--em-muted) 20%, transparent); }
.ed-status__health--ok .ed-status__dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 25%, transparent); }
.ed-status__health--warn .ed-status__dot { background: var(--warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent); }
.ed-status__health--bad .ed-status__dot { background: var(--error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 25%, transparent); }

/* Meter with a threshold mark */
.ed-meter { position: relative; height: 12px; margin: 0.45rem 0 0.2rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: visible; }
.ed-meter--thin { height: 7px; margin: 0.3rem 0 0; }
.ed-meter__fill { height: 100%; border-radius: 999px; background: var(--success); transition: width 0.3s; }
.ed-meter__fill--warn { background: var(--warning); }
.ed-meter__fill--bad { background: var(--error); }
.ed-meter__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .ed-meter__fill { transition: none; } }

/* KPI cards */
.ed-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; }
.ed-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--em-line);
    border-top: 3px solid var(--primary);
    border-radius: var(--em-radius);
    background: var(--surface);
    min-width: 0;
}

.ed-kpi--error { border-top-color: var(--error); }
.ed-kpi--warning { border-top-color: var(--warning); }
.ed-kpi__label { font-size: 0.75rem; font-weight: 700; color: var(--em-muted); }
.ed-kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ed-kpi__foot { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.72rem; }

.ed-trend { font-weight: 700; padding: 0 0.35rem; border-radius: 4px; }
.ed-trend--good { color: color-mix(in srgb, var(--success-dark, var(--success)) 70%, var(--text)); background: var(--success-hover); }
.ed-trend--bad { color: color-mix(in srgb, var(--error-dark, var(--error)) 70%, var(--text)); background: var(--error-hover); }
.ed-trend--neutral { color: var(--em-muted); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* Chart and legend */
.ed-chart svg { width: 100%; height: auto; max-height: 260px; }
.ed-legend { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; font-size: 0.76rem; color: var(--em-muted); }
.ed-legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 0.4rem; }
.ed-legend__swatch--a { background: var(--primary); }
.ed-legend__swatch--b { background: var(--error); }

/* Two-column sections */
.ed-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ed-stack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.ed-table td, .ed-table th { padding: 0.45rem 0.75rem; }
.ed-share { width: 22%; }
.ed-bar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.ed-bar__fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

.ed-budget + .ed-budget { margin-top: 0.6rem; }
.ed-budget__row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; }

.ed-error { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.5rem 0; border-top: 1px solid var(--em-line); }
.ed-error:first-child { border-top: 0; padding-top: 0; }
.ed-error__count { flex: none; min-width: 2.6rem; padding: 0.1rem 0.4rem; border-radius: 4px; text-align: center; font-weight: 700; font-size: 0.8rem; background: var(--error-hover); color: color-mix(in srgb, var(--error-dark, var(--error)) 70%, var(--text)); }
.ed-error__text { font-size: 0.84rem; overflow-wrap: anywhere; }

.ed-failures { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.ed-failures li { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; padding: 0.6rem 0.85rem; border-top: 1px solid var(--em-line); }
.ed-failures li:first-child { border-top: 0; }
.ed-failures__main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ed-failures__err { font-size: 0.76rem; color: var(--error-dark, var(--error)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36rem; }

.ed-pair { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; padding: 0.2rem 0; }
.ed-pair > :last-child { text-align: right; overflow-wrap: anywhere; }

/* SMTP service */
.ed-smtp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.ed-smtp__card { display: flex; flex-direction: column; gap: 0.45rem; }
.ed-smtp__server { font-size: 1.15rem; font-weight: 700; }
.ed-smtp__test { display: flex; flex-direction: column; gap: 0.6rem; }

.ed-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ed-steps li { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.4rem 0.6rem; border-radius: 4px; background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 0.84rem; }
.ed-steps__bad { background: color-mix(in srgb, var(--error) 10%, var(--surface)) !important; }
.ed-steps__detail { flex-basis: 100%; color: var(--em-muted); overflow-wrap: anywhere; }

.ed-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.ed-settings__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--em-muted); margin-bottom: 0.3rem; }
.ed-settings dl { margin: 0; }
.ed-settings__row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border-top: 1px solid var(--em-line); font-size: 0.82rem; cursor: help; }
.ed-settings__row dt { color: var(--em-muted); }
.ed-settings__row dd { margin: 0; font-weight: 600; text-align: right; }

@media (max-width: 1300px) {
    .ed-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ed-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-status > :nth-child(3) { border-left: 0; }
    .ed-status > :nth-child(n+3) { border-top: 1px solid var(--em-line); }
}

@media (max-width: 1000px) {
    .ed-grid, .ed-smtp, .ed-settings { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .ed-kpis, .ed-status { grid-template-columns: minmax(0, 1fr); }
    .ed-status > * + * { border-left: 0; border-top: 1px solid var(--em-line); }
}

/* ==== Sent mail (EmailOutgoingHistory.razor) filters, prefixed eh- ================================== */

.eh-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; }
.eh-filters > * { min-width: min(9rem, 100%); }
.eh-filters .em-search-field { flex: 1 1 18rem; }
.eh-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.82rem; color: var(--em-muted); }
.eh-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1rem; align-items: start; }
.eh-detail__meta dt { font-weight: 700; color: var(--em-muted); font-size: 0.75rem; }
.eh-detail__meta dd { margin: 0 0 0.5rem; overflow-wrap: anywhere; font-size: 0.85rem; }
@media (max-width: 1000px) { .eh-detail { grid-template-columns: minmax(0, 1fr); } }

/* ==== 2026-10-15 DWS components (raw HTML replaced) ===================================================
   Block name link inside the block head, small inline links, and phone layout for the toolbars. */

.em-block__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; min-height: 32px; line-height: 32px; }
.em-small-link { font-size: 0.78rem; }
.em-schema td { vertical-align: top; }
.em-schema td:first-child { min-width: 10rem; }
.em-titlebar__actions .em-seg,
.em-head__actions { align-items: center; }

@media (max-width: 760px) {
    .em-toolbar > .em-grow { display: none; }
    .em-search-field { max-width: none; flex-basis: 100%; }
    .em-versionbar__actions { margin-left: 0; width: 100%; }
    .em-versionbar__field { flex: 1 1 100%; }
    .em-titlebar__actions { width: 100%; }
    .em-block__head { grid-template-columns: 2.2rem minmax(0, 1fr); }
    .em-block__head > * { grid-column: 2 / -1; }
    .em-block__head > .em-block__state { grid-column: 1; grid-row: 1; }
    .em-block__head > .em-block__tools { justify-self: stretch; justify-content: flex-end; }
    .eh-pager { flex-wrap: wrap; }
    .em-live__frame--narrow { padding: 0; }
}
.em-unsaved { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; width: 100%; }