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 {
    position: relative;
    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;
}

/* MainLayout.razor: the scan-in-progress truck animation and scan-result message render as an
   overlay pinned near the top of the blast banner (pushed up there from Dashboard.razor via
   IScanStatusService), rather than inline in the page content below. */
.jn-banner-overlay {
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 2;
}

.jn-banner-message {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

/* 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;
    position: relative;
}

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

.jn-email-row-selected,
.jn-email-row-selected:hover {
    background-color: #e7f1ff;
}

.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: absolute;
    top: 100%;
    left: 0;
    right: 0;
    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;
}

/* Set by EmailContextMenu.razor.js when there isn't room to drop the menu below the clicked row
   (the last few emails in a list, where a downward menu would run past the bottom of the window or
   under the footer). Anchors the menu to the top of the row and grows upward instead. */
.jn-context-menu-above {
    top: auto;
    bottom: 100%;
}

.jn-context-menu .dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.75rem 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;
}

/* Dashboard.razor: a mail truck that drives from the post office to the house along a dashed
   "road" while a scan is in progress, delivering mail on every pass. */
.jn-scan-truck-track {
    position: relative;
    height: 56px;
    overflow: hidden;
    border-bottom: 2px dashed #adb5bd;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.jn-scan-building {
    position: absolute;
    bottom: 0;
}

.jn-post-office {
    left: 0;
}

.jn-house {
    right: 0;
}

.jn-mail-truck {
    position: absolute;
    bottom: 2px;
    left: 50px;
    animation: jn-truck-drive 2.8s linear infinite;
}

@keyframes jn-truck-drive {
    from {
        left: 50px;
    }

    to {
        left: calc(100% - 140px);
    }
}

.jn-mail-truck .jn-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: jn-wheel-spin 0.4s linear infinite;
}

@keyframes jn-wheel-spin {
    to {
        transform: rotate(360deg);
    }
}