@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

.navmenu-icon {
    display: none;
}

.main {
    min-height: calc(100dvh - 50px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    height: calc(100dvh - 50px) !important;
    display: flex;

    /* Enable container queries */
    container-type: inline-size;
    container-name: bodyContainer;
}

.content {
    padding: 0.5rem 1.5rem;
    align-self: stretch !important;
    width: 100%;
}


/* When parent width is ≤1024px */
@container bodyContainer (max-width: 1024px) {
    .content{
    padding: 0.5rem 1rem;
    }
}

/* When parent width is ≤768px */
@container bodyContainer (max-width: 768px) {
    .content {
        padding: 0.5rem 0.5rem;
    }
}

/* When parent width is ≤480px */
@container bodyContainer (max-width: 480px) {
    .content {
        padding: 0.5rem 0.1rem;
    }
}

/*
.entry-stack {
    background-color: white;
    padding: 20px 40px;
}
*/


.manage {
    width: 100dvw;
}

footer {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    margin: 20px 0;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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::before {
        content: "An error has occurred. "
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

.flex-filler {
    flex-grow: 1;
}

.label-footer-small {
    font-size: 0.67em;
    font-weight: bold;
    line-height: 1.2;
}

.desktop-layout {
    height: calc(100vh - 16px);
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.centered-items {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Error reporting grid: selected-row highlight */
.error-report-grid tr.selected-row td {
    background-color: var(--neutral-fill-secondary-rest);
}

.error-report-grid tr:not([row-type='header']):not([row-type='sticky-header']) {
    cursor: pointer;
}

.error-report-grid td,
.error-report-grid th {
    white-space: nowrap;
}

.error-report-grid td.sticky-action {
    position: sticky;
    z-index: 1;
    background: var(--neutral-layer-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Single sticky action column = the last column. Pinning it at right:0 needs no knowledge
   of any other column's width, so it can't drift out of alignment the way two interdependent
   sticky columns did. */
.error-report-grid th:nth-last-child(1) {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 4;
    background: var(--neutral-layer-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Trim the grid's default cell padding on the action column so it stays compact. */
.error-report-grid td.sticky-action,
.error-report-grid th:nth-last-child(1) {
    padding-left: 4px;
    padding-right: 4px;
}

.error-report-grid th:nth-last-child(1) * {
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

.error-report-grid tr.selected-row td.sticky-action {
    background-color: var(--neutral-fill-secondary-rest);
}

/* Info + screenshot icons share one action column. Fixed-width slots keep each icon in a
   consistent position so they line up across rows (and with the header) even when a row has
   only one of the two. */
/* Date chip + popover (the date filter lives behind its chip in the unified filter bar). */
.er-date {
    position: relative;
    display: inline-block;
}

.er-date-popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    padding: 8px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Transparent click-catcher so clicking outside the popover closes it. */
.er-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 49;
}

.er-custom-range {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* Report detail heading: the exception message is the page's headline, with a quiet
   timestamp beneath it for "when did this happen" at a glance. */
.er-detail-title {
    margin: 0;
}

.er-detail-time {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size);
}

/* Zero-results message in place of the grid. */
.er-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
}

.er-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.er-actions > span,
.er-actions > .er-action {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The clickable icons are real <button>s — native keyboard activation (Enter/Space) and
   focusability, with a transparent bare-icon look. The header icons are plain <span>s
   (labels, not actions), so they get none of this. */
.er-actions > .er-action {
    border: none;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
    /* When focus scrolls a button into view, keep it clear of the sticky header (top) and a
       little off the bottom edge. */
    scroll-margin-top: 3rem;
    scroll-margin-bottom: 0.5rem;
}

.er-actions > .er-action:hover {
    background-color: var(--neutral-fill-stealth-hover);
}

/* Pressed state — instant, pure-CSS click feedback (Blazor WASM is single-threaded, so the
   navigation that follows would freeze a rendered spinner; CSS :active can't be frozen). */
.er-actions > .er-action:active {
    background-color: var(--neutral-fill-stealth-active);
}

.er-actions > .er-action:focus-visible {
    /* Fill (part of the button's own box, never clipped by the sticky column or scroll edge)
       backs the ring so the focused control stays visible even where an outline would clip. */
    background-color: var(--neutral-fill-stealth-hover);
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

/* Error reporting: grid + Analyze rail side by side. The grid flexes to fill and scrolls
   (min-width:0 lets it shrink so the wide grid scrolls horizontally rather than pushing
   the rail off-screen); the rail is a fixed-width column that scrolls its own value list. */
.er-main {
    display: flex;
    height: calc(100dvh - 13rem);
}

.er-grid {
    flex: 1 1 auto;
    min-width: 0;
    overflow: auto;
}

.er-rail {
    flex: 0 0 var(--er-rail-width, 340px);
    display: flex;
    flex-direction: column;
    /* visible (not hidden) so the Count-by dropdown popup isn't clipped by the rail; the
       value list still scrolls on its own via .er-rail-list. */
    overflow: visible;
    padding-left: 1rem;
}

/* Drag handle between the grid and the rail. Sits where the rail's left border was. */
.er-resizer {
    flex: 0 0 5px;
    cursor: col-resize;
    background: var(--neutral-stroke-rest);
    align-self: stretch;
}

.er-resizer:hover {
    background: var(--accent-fill-rest);
}

.er-rail-list {
    flex: 1 1 auto;
    overflow: auto;
}

/* Count-by values are toggles (multi-select): a fixed-width check slot keeps labels aligned
   whether or not they're selected, and selected rows read bolder. */
.er-rail-list .er-check {
    display: inline-block;
    width: 1.2em;
    color: var(--accent-fill-rest);
    font-weight: 700;
}

.er-rail-list .er-sum-val.sel {
    font-weight: 600;
}

/* Active-filter echo at the top of the Analyze rail. */
.er-rail-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    overflow-wrap: anywhere;
}

/* Mobile: stack the rail under the grid and let the page scroll instead of pinning the
   row to the viewport (the toolbars wrap and grow, so a fixed viewport height misaligns). */
@media (max-width: 768px) {
    .er-main {
        flex-direction: column;
        height: auto;
    }

    .er-grid {
        flex: none;
        height: 60dvh;
    }

    .er-rail {
        flex: none;
        width: 100%;
        max-height: 50dvh;
        border-top: 1px solid var(--neutral-stroke-rest);
        padding-left: 0;
        padding-top: 0.75rem;
    }

    /* No horizontal drag when stacked vertically. */
    .er-resizer {
        display: none;
    }
}