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

/* Markdown rendered content */
.markdown-body h1 { font-size: 1.8rem; font-weight: 600; margin: 1.5rem 0 1rem; border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: .4rem; }
.markdown-body h2 { font-size: 1.4rem; font-weight: 600; margin: 1.5rem 0 .75rem; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: .3rem; }
.markdown-body h3 { font-size: 1.15rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.markdown-body h4 { font-size: 1rem; font-weight: 600; margin: 1rem 0 .5rem; }
.markdown-body p { margin: 0 0 .75rem; line-height: 1.6; }
.markdown-body ul, .markdown-body ol { margin: 0 0 .75rem; padding-left: 1.5rem; }
.markdown-body li { margin-bottom: .25rem; line-height: 1.5; }
.markdown-body code { background: rgba(0,0,0,.06); padding: .15rem .35rem; border-radius: 4px; font-size: .875em; font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace; }
.markdown-body pre { background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 0 0 1rem; }
.markdown-body pre code { background: none; padding: 0; color: inherit; font-size: .85em; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .9rem; }
.markdown-body th { background: rgba(0,0,0,.04); font-weight: 600; text-align: left; padding: .5rem .75rem; border-bottom: 2px solid rgba(0,0,0,.12); }
.markdown-body td { padding: .4rem .75rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.markdown-body tr:hover td { background: rgba(0,0,0,.02); }
.markdown-body hr { border: none; border-top: 1px solid rgba(0,0,0,.12); margin: 1.5rem 0; }
.markdown-body a { color: #0054A6; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body blockquote { border-left: 4px solid #0054A6; margin: 0 0 1rem; padding: .5rem 1rem; background: rgba(25,118,210,.04); }
.markdown-body strong { font-weight: 600; }

/* Email Builder */
.email-builder-container { display: flex; height: calc(100vh - 280px); min-height: 400px; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; }
.email-builder-left { width: 200px; overflow-y: auto; background: #ffffff; border-right: 1px solid #e0e0e0; padding: 12px; flex-shrink: 0; }
.email-builder-canvas { flex: 1; overflow-y: auto; background: #e0e0e0; padding: 20px; }
.email-builder-right { width: 300px; overflow-y: auto; border-left: 1px solid #e0e0e0; padding: 12px; flex-shrink: 0; }
.email-builder-row { margin-bottom: 4px; border: 2px solid transparent; border-radius: 4px; position: relative; }
.email-builder-row.selected { border-color: #0054A6; }
.email-builder-row:hover { border-color: #6ba3d6; }
.email-builder-row-toolbar { position: absolute; top: -2px; right: -2px; background: #0054A6; border-radius: 0 4px 0 4px; display: flex; z-index: 1; }
.email-builder-row-toolbar .mud-icon-button { color: #fff !important; }
.email-builder-column { min-height: 50px; border: 1px dashed #bdbdbd; padding: 0; position: relative; }
.email-builder-column.selected { border-color: #0054A6; border-style: solid; background: rgba(0, 84, 166, 0.02); z-index: 1; }
/* Presence indicator */
.presence-indicator { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #0054A6; border-radius: 4px; background: rgba(0, 84, 166, 0.06); }
.presence-slide-in { animation: presenceSlideIn 0.4s ease-out; }
@keyframes presenceSlideIn {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

.email-builder-block { margin: 2px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; position: relative; }
.email-builder-block.selected { border-color: #0054A6; background: rgba(0, 84, 166, 0.04); }
.email-builder-block:hover { border-color: #6ba3d6; }
.email-builder-block-toolbar { position: absolute; top: 0; right: 0; background: #0054A6; border-radius: 0 2px 0 4px; display: flex; z-index: 1; }
.email-builder-block-toolbar .mud-icon-button { color: #fff !important; padding: 2px; }
.email-builder-dropzone { min-height: 40px; }
.email-builder-dropzone .mud-drop-zone-drag { opacity: 0.6; }
.email-builder-column .mud-drop-zone { border: none !important; background: transparent !important; padding: 0; }
.layout-row { display: flex; gap: 6px; }
.layout-row .layout-option { flex: 1; }
.layout-option { cursor: pointer; border: 1px solid #bdbdbd; border-radius: 4px; padding: 6px 8px; transition: border-color 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center; }
.layout-option:hover { border-color: #0054A6; background: rgba(0, 84, 166, 0.06); }
.content-block-grid { display: flex; flex-direction: column; gap: 4px; }
.content-btn { flex-direction: row; gap: 8px; justify-content: flex-start; font-size: 0.8rem; color: #424242; }
.content-btn.disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.prop-tabs { display: flex; gap: 12px; border-bottom: 1px solid #e0e0e0; padding-bottom: 0; }
.prop-tab { cursor: pointer; padding: 6px 8px 8px; border-bottom: 3px solid transparent; transition: border-color 0.15s; }
.prop-tab:hover { border-bottom-color: #bdbdbd; }
.prop-tab.active { border-bottom-color: #0054A6; }

/* TinyMCE inline editor normalization — prevent visual jump between static preview and editor */
.mce-content-body { margin: 0 !important; padding: 0 !important; min-height: 1em; outline: none !important; }
.mce-content-body p { margin: 0; }
/* Match paragraph spacing in static preview to TinyMCE */
.email-builder-block div > p { margin: 0; min-height: 1em; }

/* Split pane layout with draggable handle */
.split-container { display: flex; height: calc(100vh - 220px); min-height: 400px; }
.split-pane { display: flex; flex-direction: column; overflow: hidden; min-width: 100px; }
.split-handle { width: 6px; cursor: col-resize; background: #e0e0e0; border-radius: 3px; margin: 0 4px; flex-shrink: 0; transition: background 0.2s; }
.split-handle:hover, .split-handle.active { background: #0054A6; }

/* Drop zone for file upload */
.drop-zone { border: 2px dashed #ccc; border-radius: 8px; transition: border-color 0.2s, background-color 0.2s; }
.drop-zone.drop-active { border-color: #0054A6; background-color: rgba(0, 84, 166, 0.05); }

/* Table alignment — center numeric and status columns */
.mud-table td.col-center, .mud-table th.col-center { text-align: center; }

/* Tab labels — bold, larger, with clear active indicator */
.mud-tabs .mud-tab { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; }
.mud-tabs .mud-tab-active { background-color: rgba(0, 84, 166, 0.08); border-radius: 4px 4px 0 0; }
.mud-tabs .mud-tabs-toolbar { border-bottom: 2px solid #e0e0e0; }

/* ── Blazor Reconnection Overlay ── */
#blazor-reconnect-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
#blazor-reconnect-modal .reconnect-overlay { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#blazor-reconnect-modal .reconnect-dialog { background: #fff; border-radius: 8px; padding: 2rem 2.5rem; text-align: center; max-width: 400px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
#blazor-reconnect-modal .reconnect-dialog h3 { margin: 0.5rem 0; color: #7e57c2; font-size: 1.25rem; }
#blazor-reconnect-modal .reconnect-dialog p { color: #666; margin: 0.5rem 0 1rem; font-size: 0.9rem; }
#blazor-reconnect-modal .reconnect-dialog button { background: #7e57c2; color: #fff; border: none; border-radius: 4px; padding: 0.5rem 1.5rem; font-size: 0.9rem; cursor: pointer; }
#blazor-reconnect-modal .reconnect-dialog button:hover { background: #5e35b1; }
.reconnect-spinner { width: 48px; height: 48px; }

#blazor-reconnect-modal .reconnect-attempting,
#blazor-reconnect-modal .reconnect-failed,
#blazor-reconnect-modal .reconnect-rejected { display: none; }
#blazor-reconnect-modal.components-reconnect-show .reconnect-attempting { display: block; }
#blazor-reconnect-modal.components-reconnect-failed .reconnect-failed { display: block; }
#blazor-reconnect-modal.components-reconnect-rejected .reconnect-rejected { display: block; }