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

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================================================================
   MailGuard dashboard — self-contained styling (no CDN/assets)
   =================================================================== */

:root,
[data-theme="light"] {
    color-scheme: light;
    --mg-bg: #f4f6fb;
    --mg-surface: #ffffff;
    --mg-surface-soft: #f8fafc;
    --mg-border: #dbe1ec;
    --mg-ink: #1b2436;
    --mg-muted: #5c6880;
    --mg-brand: #2f5bd0;
    --mg-brand-ink: #1c3a8a;
    --mg-ok: #1f9d55;
    --mg-warn: #c77700;
    --mg-bad: #c5303a;
    --mg-radius: 10px;
    --mg-sidebar-width: 256px;
    --mg-sidebar-rail: 76px;
    --mg-shadow: 0 18px 42px rgba(26, 39, 71, 0.08);
}

[data-theme="dark"] {
    color-scheme: dark;
    --mg-bg: #0e1422;
    --mg-surface: #161e2f;
    --mg-surface-soft: #101827;
    --mg-border: #29364d;
    --mg-ink: #edf3ff;
    --mg-muted: #a6b2c7;
    --mg-brand: #8eb0ff;
    --mg-brand-ink: #c5d6ff;
    --mg-ok: #5cd68b;
    --mg-warn: #f2b95c;
    --mg-bad: #ff7a86;
    --mg-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--mg-bg);
    color: var(--mg-ink);
    line-height: 1.5;
}

body { min-height: 100vh; }

a { color: var(--mg-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.mg-app {
    min-height: 100vh;
    display: flex;
    background: var(--mg-bg);
    color: var(--mg-ink);
}

.mg-shell { flex-direction: row; }

/* Left sidebar shell */
.mg-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 var(--mg-sidebar-width);
    width: var(--mg-sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 0.85rem;
    background: var(--mg-surface);
    border-right: 1px solid var(--mg-border);
    box-shadow: var(--mg-shadow);
    z-index: 40;
    transition: width 160ms ease, flex-basis 160ms ease, padding 160ms ease;
}

.mg-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 44px;
}

.mg-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: var(--mg-ink);
    font-weight: 800;
}
.mg-brand:hover { text-decoration: none; }
.mg-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    color: var(--mg-brand-ink);
    background: color-mix(in srgb, var(--mg-brand) 18%, transparent);
    font-size: 1.15rem;
}
.mg-brand-copy { display: grid; line-height: 1.1; min-width: 0; }
.mg-brand-name { font-size: 1.08rem; letter-spacing: -0.01em; }
.mg-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--mg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.mg-sidebar-actions { display: inline-flex; gap: 0.35rem; align-items: center; }
.mg-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--mg-border);
    background: var(--mg-surface-soft);
    color: var(--mg-muted);
    cursor: pointer;
    font-weight: 800;
}
.mg-icon-btn:hover { color: var(--mg-ink); border-color: var(--mg-brand); }
.mg-icon-btn[aria-pressed="True"],
.mg-icon-btn[aria-pressed="true"] { color: var(--mg-brand-ink); background: color-mix(in srgb, var(--mg-brand) 14%, var(--mg-surface)); }

.mg-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.35rem;
}
.mg-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    color: var(--mg-muted);
    font-weight: 700;
    font-size: 0.92rem;
    border: 1px solid transparent;
}
.mg-nav-link:hover { color: var(--mg-ink); background: var(--mg-surface-soft); text-decoration: none; }
.mg-nav-link.active {
    color: var(--mg-brand-ink);
    background: color-mix(in srgb, var(--mg-brand) 16%, var(--mg-surface));
    border-color: color-mix(in srgb, var(--mg-brand) 34%, var(--mg-border));
}
.mg-nav-icon {
    display: inline-grid;
    place-items: center;
    width: 24px;
    flex: 0 0 24px;
    font-size: 1rem;
}
.mg-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mg-sidebar-status {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--mg-border);
}

.mg-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mg-topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.5rem;
    border-bottom: 1px solid var(--mg-border);
    background: color-mix(in srgb, var(--mg-bg) 82%, var(--mg-surface));
    position: sticky;
    top: 0;
    z-index: 25;
    backdrop-filter: blur(8px);
}
.mg-topbar-title { font-weight: 800; letter-spacing: -0.01em; }
.mg-topbar-sub { color: var(--mg-muted); font-size: 0.8rem; }

.mg-app.mg-sidebar-collapsed .mg-sidebar {
    flex-basis: var(--mg-sidebar-rail);
    width: var(--mg-sidebar-rail);
    padding-inline: 0.65rem;
}
.mg-app.mg-sidebar-collapsed .mg-brand-copy,
.mg-app.mg-sidebar-collapsed .mg-nav-label,
.mg-app.mg-sidebar-collapsed .mg-sidebar-status .mg-status-text,
.mg-app.mg-sidebar-collapsed .mg-sidebar-pin {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.mg-app.mg-sidebar-collapsed .mg-sidebar-head,
.mg-app.mg-sidebar-collapsed .mg-nav-link,
.mg-app.mg-sidebar-collapsed .mg-sidebar-status {
    justify-content: center;
}
.mg-app.mg-sidebar-pinned .mg-sidebar { border-right-color: color-mix(in srgb, var(--mg-brand) 24%, var(--mg-border)); }

/* API status widget */
.mg-status { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--mg-muted); min-width: 0; }
.mg-status-text { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
.mg-status-link { color: var(--mg-brand); font-weight: 600; text-decoration: none; }
.mg-status-link:hover { text-decoration: underline; }
.mg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 9px; }
.mg-dot-ok { background: var(--mg-ok); }
.mg-dot-bad { background: var(--mg-bad); }
.mg-dot-idle { background: #b6bfd1; }

.mg-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--mg-muted) 12%, var(--mg-surface));
    color: var(--mg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mg-badge-admin { background: color-mix(in srgb, var(--mg-brand) 18%, var(--mg-surface)); color: var(--mg-brand-ink); }
.mg-badge-ok { background: color-mix(in srgb, var(--mg-ok) 16%, var(--mg-surface)); color: var(--mg-ok); }
.mg-badge-warn { background: color-mix(in srgb, var(--mg-warn) 18%, var(--mg-surface)); color: var(--mg-warn); }
.mg-badge-bad { background: color-mix(in srgb, var(--mg-bad) 18%, var(--mg-surface)); color: var(--mg-bad); }

/* Main content */
.mg-main {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}
.mg-footer {
    text-align: center;
    color: var(--mg-muted);
    font-size: 0.8rem;
    padding: 1rem;
    border-top: 1px solid var(--mg-border);
}

h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 0.6rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.mg-lead { color: var(--mg-muted); margin: 0 0 1rem; max-width: 60ch; }

/* Cards */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.85rem; margin: 1rem 0; }
.mg-card {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    padding: 0.9rem 1rem;
}
.mg-card-label { font-size: 0.78rem; color: var(--mg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mg-card-value { font-size: 1.7rem; font-weight: 700; margin-top: 0.2rem; }
.mg-card-sub { font-size: 0.8rem; color: var(--mg-muted); }

.mg-panel {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    padding: 1rem 1.15rem;
    margin: 1rem 0;
}

/* Tables */
.mg-table-wrap { overflow-x: auto; }
.mg-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mg-table th, .mg-table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--mg-border); }
.mg-table th { color: var(--mg-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.mg-table tbody tr:hover { background: var(--mg-surface-soft); }
.mg-num { text-align: right; font-variant-numeric: tabular-nums; }
.mg-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.85rem; }

/* Forms & buttons */
.mg-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; max-width: 30rem; }
.mg-field label { font-weight: 600; font-size: 0.85rem; }
.mg-input, .mg-select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mg-border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--mg-surface);
    color: var(--mg-ink);
}
.mg-input:focus, .mg-select:focus { outline: 2px solid color-mix(in srgb, var(--mg-brand) 35%, transparent); border-color: var(--mg-brand); }

.mg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--mg-border);
    background: var(--mg-surface);
    color: var(--mg-ink);
    font-weight: 600;
    font-size: 0.88rem;
}
.mg-btn:hover { background: var(--mg-surface-soft); text-decoration: none; }
.mg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mg-btn-primary { background: var(--mg-brand); border-color: var(--mg-brand); color: #fff; }
.mg-btn-primary:hover { background: var(--mg-brand-ink); }
.mg-btn-sm { padding: 0.25rem 0.55rem; font-size: 0.8rem; }
.mg-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Messages */
.mg-msg { padding: 0.6rem 0.85rem; border-radius: 8px; margin: 0.75rem 0; font-size: 0.9rem; border: 1px solid transparent; }
.mg-msg-info { background: color-mix(in srgb, var(--mg-brand) 14%, var(--mg-surface)); border-color: color-mix(in srgb, var(--mg-brand) 30%, var(--mg-border)); color: var(--mg-brand-ink); }
.mg-msg-ok { background: color-mix(in srgb, var(--mg-ok) 14%, var(--mg-surface)); border-color: color-mix(in srgb, var(--mg-ok) 30%, var(--mg-border)); color: var(--mg-ok); }
.mg-msg-warn { background: color-mix(in srgb, var(--mg-warn) 16%, var(--mg-surface)); border-color: color-mix(in srgb, var(--mg-warn) 32%, var(--mg-border)); color: var(--mg-warn); }
.mg-msg-error { background: color-mix(in srgb, var(--mg-bad) 14%, var(--mg-surface)); border-color: color-mix(in srgb, var(--mg-bad) 30%, var(--mg-border)); color: var(--mg-bad); }

.mg-muted { color: var(--mg-muted); }
.mg-empty { color: var(--mg-muted); font-style: italic; padding: 0.75rem 0; }
.mg-spinner { color: var(--mg-muted); font-size: 0.9rem; }
.mg-back { font-size: 0.85rem; }
.mg-inline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }

@media (max-width: 920px) {
    .mg-app { flex-direction: column; }
    .mg-sidebar {
        position: sticky;
        height: auto;
        width: 100%;
        flex-basis: auto;
        padding: 0.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--mg-border);
    }
    .mg-nav { flex-direction: row; overflow-x: auto; padding-bottom: 0.1rem; }
    .mg-nav-link { flex: 0 0 auto; }
    .mg-sidebar-status { display: none; }
    .mg-app.mg-sidebar-collapsed .mg-sidebar {
        width: 100%;
        flex-basis: auto;
    }
    .mg-app.mg-sidebar-collapsed .mg-nav-label,
    .mg-app.mg-sidebar-collapsed .mg-brand-copy {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }
    .mg-topbar { display: none; }
    .mg-main { padding-inline: 1rem; }
}