/* wwwroot/app.css — minimal residual styles Tailwind can't do.
   Everything else is handled by Tailwind (via CDN in App.razor).
   Kept:
     - .blazor-error-boundary  → Blazor built-in unhandled-error surface
     - .valid.modified / .invalid / .validation-message
                               → Blazor's built-in <EditForm> validation surface,
                                 used by the login + register modals.
*/

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

/* Blazor <EditForm> validation surface — used by login/register modals.
   Blazor toggles these classes automatically on <input> elements bound to a validated model. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid rgb(74 222 128 / 0.75);
}

.invalid {
    outline: 1px solid rgb(239 68 68 / 0.9);
}

.validation-message {
    color: rgb(248 113 113);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* Blazor's <FocusOnNavigate Selector="h1"> in Routes.razor programmatically
   sets tabindex="-1" on the target and calls .focus() after every route
   change so screen readers announce the new page. Browsers paint the default
   focus ring around the h1 for sighted users, which reads as a rendered
   border artifact (visible for a few seconds after every navigation).
   Suppress the outline specifically for programmatically-focused elements
   — [tabindex="-1"] can't receive keyboard focus anyway, so this doesn't
   hide any real focus indicator.

   Cover :focus AND :focus-visible (some Chromium builds paint the ring via
   :focus-visible even for programmatic .focus() when the initiating gesture
   was a keyboard-activated link). Also zero box-shadow in case a future
   UA / stylesheet paints the ring via shadow instead of outline. !important
   is defensive against any Tailwind utility that could get authored onto a
   focused heading later (e.g. focus:ring-*). */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================================
   Blazored.Modal — dark-theme override for the `.warzone-modal` variant.
   Applied by NavMenu.OpenAuthCycleAsync via ModalOptions.Class.

   Blazored REPLACES its default `blazored-modal size-medium` classes with
   whatever we pass in Options.Class, so the box DOM ends up with just
   `.warzone-modal` (verified via DOM inspection). That means all box sizing,
   padding, and background must be declared here — Blazored's scoped defaults
   never fire for the box.

   HOWEVER, Blazored's scoped CSS DOES fire on the header/title/close children
   (`.bm-header[b-<hash>]` etc.) at 0,2,0 specificity, and its stylesheet
   loads AFTER app.css. So we need `!important` on the properties Blazored
   sets or its `padding: 0 0 2rem 0` header and `margin: -1rem -1rem -1rem auto`
   close-button win, clipping the × above the modal's `overflow: hidden` edge.
   ============================================================================ */

.bm-container:has(.warzone-modal) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.warzone-modal {
    display: flex;
    flex-direction: column;
    background-color: rgb(23 23 23);
    color: rgb(245 245 245);
    border: 1px solid rgb(64 64 64);
    border-radius: 12px;
    /* Responsive cap — mobile stays phone-sized; tablets + desktop get
       progressively more breathing room. The boost/add-server/mint-key
       modals carry the most content and were the ones bumping into 440px. */
    width: min(94vw, 480px);
    max-height: calc(100vh - 3rem);
    margin: 1.5rem;
    overflow: hidden;
    /* 2px inset top ribbon in brand-orange + tighter outer glow so it doesn't feel like a floating grey box. */
    box-shadow:
        inset 0 2px 0 0 rgb(255 122 0),
        0 24px 48px -12px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 122, 0, 0.06);
}

/* sm — tablet portrait (Tailwind sm breakpoint) */
@media (min-width: 640px) {
    .warzone-modal { width: min(90vw, 560px); }
}
/* md — tablet landscape */
@media (min-width: 768px) {
    .warzone-modal { width: min(85vw, 640px); }
}
/* lg — desktop */
@media (min-width: 1024px) {
    .warzone-modal { width: min(80vw, 720px); }
}

.warzone-modal .bm-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem;
    padding: 1.125rem 1.5rem !important;
    margin: 0 !important;
    border-bottom: 1px solid rgb(38 38 38);
}

.warzone-modal .bm-title {
    color: rgb(250 250 250);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0 !important;
}

.warzone-modal .bm-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    color: rgb(163 163 163);
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}

.warzone-modal .bm-close:hover {
    color: rgb(245 245 245);
    background-color: rgba(255, 255, 255, 0.06);
}

.warzone-modal .bm-close:focus-visible {
    outline: 2px solid rgb(255 122 0);
    outline-offset: 2px;
}

.warzone-modal .bm-content {
    padding: 1.5rem;
    overflow-y: auto;
}