h1:focus {
    outline: none;
}

/* Button-like hover/focus feedback for every navbar link, including the Logout button (styled to
   look like a nav-link in NavMenu.razor) - a rounded highlight fill on top of its existing padding,
   not just the default underline/color-only nav-link hover. */
.navbar-nav .nav-link {
    border-radius: 0.375rem;
    transition: background-color 0.15s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
    background-color: #e9ecef;
}

/* Compact label/value header rows (SpamDomainDialog's Subject/From/To). */
.jn-email-headers {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    margin-bottom: 1rem;
}

.jn-email-headers dt {
    font-weight: 600;
    color: #6c757d;
}

.jn-email-headers dd {
    margin: 0;
    word-break: break-word;
}

/* Compact "Search in: Subject Body From HTML" checkbox rows (SpamDomainDialog, Settings). */
.jn-search-scope label {
    font-size: 0.85rem;
    font-weight: normal;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Site-wide theme: a faint spam-message texture over a dark base, everywhere, plus a dedicated
   "blast banner" strip below the navbar showing a real nuclear-test photo prominently. Applies to
   every page (both the Blazor App.razor shell and the Identity area's own _Layout.cshtml load this
   file), so it shows on the Blazor dashboard/settings pages and the Login/Register pages alike.

   Earlier version tried to bleed the photo through body's own background behind the content panel,
   but the Bootstrap container spans nearly the full viewport at normal desktop widths (only ~40px
   gutters at 1400px wide) - there just isn't enough uncovered space for a background photo to read
   as "an explosion in the center." A real, fixed-height banner element guarantees it's always
   fully visible regardless of viewport width or how much of the page the content panel covers. */
body {
    min-height: 100vh;
    background-color: #170303;
    background-image: url('img/spam-pattern.svg');
    background-repeat: repeat;
    background-attachment: fixed;
}

/* The banner itself: JunkNuke/Components/Layout/MainLayout.razor and JunkNuke/Pages/Shared/_Layout.cshtml
   both render a <div class="jn-blast-banner"></div> right below the navbar for this.

   The photo (wwwroot/img/mushroom-cloud-photo.jpg) is the public-domain "Operation Crossroads
   Baker" shot, 25 July 1946, Bikini Atoll - a U.S. Department of Defense work via the Library of
   Congress, public domain as a work of the U.S. federal government. */
.jn-blast-banner {
    height: 340px;
    background-color: #170303;
    background-image:
        radial-gradient(circle at 50% 45%, rgba(255, 183, 3, 0.45) 0%, rgba(251, 86, 7, 0.28) 22%, rgba(157, 2, 8, 0.16) 42%, rgba(23, 3, 3, 0) 70%),
        url('img/mushroom-cloud-photo.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 38%;
    background-size: cover, cover;
    box-shadow: inset 0 -70px 60px -40px #170303;
}

/* Wraps the actual page content (not the navbar/footer bars) so text and Bootstrap components
   stay fully readable against the busy background above. */
.jn-page-panel {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.35);
}

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

/* JunkNuke */

.jn-hero {
    padding: 2rem 0;
}

.jn-setup-guide {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.jn-email-row {
    cursor: pointer;
}

.jn-email-row:hover {
    background-color: #f8f9fa;
}

.jn-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.jn-overlay-transparent {
    background: transparent;
    z-index: 1040;
}

.jn-dialog {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    width: 32rem;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}

.jn-dialog-wide {
    width: 48rem;
}

.jn-context-menu {
    position: fixed;
    z-index: 1060;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    min-width: 14rem;
}

.jn-context-menu .dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.5rem 1rem;
}

.jn-context-menu .dropdown-item:hover {
    background-color: #f8f9fa;
}

.jn-email-preview {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    background: #fff;
    word-break: break-word;
}