@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

    #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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODggOTMuODA3MkwyMzYuMTM3IDkzLjU1NzVMMjM2LjE4NyA5My4zMzE1IDIzNi4yMzkgOTMuMTQyNyAyMzYuMzAyIDkyLjk1NjEgMjM2LjM3MiA5Mi43Nzk1IDIzNi40NzkgOTIuNTU5NSAyMzYuNjAxIDkyLjM2ODMgMjU5LjMyNyA1Mi45MzI5IDI1OS43MjEgNTIuMzUzNSAyNjAuMTQzIDUxLjg3MjMgMjYwLjU5MyA1MS40NDEzIDI2MS4wODcgNTEuMTA0NyAyNjEuNTg0IDUwLjg2OTMgMjYyLjEzOCA1MC43MjQ1IDI2Mi42MTQgNTAuNjcxNSAyNjMuMDk5IDUwLjY3MTUgMjYzLjUwNiA1MFoiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Sidebar styles */
.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .sidebar .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .sidebar .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .sidebar .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.sidebar .nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.sidebar .nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* MudGrid's row already stretches its MudItem children to equal height (flexbox default
   align-items: stretch, MudGrid sets no override) - but a MudPaper inside doesn't fill
   that height on its own, so side-by-side cards with different content still end up
   visibly uneven. Opt in per-card (not a global MudPaper rule) so a lone/standalone paper
   elsewhere is never unintentionally stretched. */
.kbm-equal-height {
    height: 100%;
}

/* MudChip clips overflowing text raw (max-width:100%, white-space:nowrap, no ellipsis) -
   fine for short labels but an unusually long one (e.g. a custom role name an admin
   creates later) gets cut off mid-character with no visual cue there's more. Give it a
   proper ellipsis instead; the chip's own "title" attribute (set alongside this class)
   surfaces the full text on hover. Deliberately does NOT touch "display" - .mud-chip-content
   is inline-flex by default specifically to vertically center the label text, and
   overflow/text-overflow apply to that box fine without changing its display type. */
.kbm-chip-truncate .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A "text block + trailing action button" row (e.g. the option cards on /account/enable2fa).
   flex-wrap: wrap decides which line an item lands on using each item's *hypothetical*
   (unshrunk) size - for a block of wrappable text with flex-basis:auto that's its full
   one-line width, so the button gets pushed to a second line the moment the sentence is
   long enough, regardless of min-width. flex-shrink only ever applies *within* a line, so
   it can't prevent that. The fix is flex-wrap: nowrap - text and button always share one
   line, the text wraps internally instead - with a media query to deliberately switch to a
   stacked layout on narrow screens instead. */
.kbm-option-card {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kbm-option-card .kbm-flex-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* The button is a flex child of .kbm-option-card too, so without this it's just as
   shrinkable as the text (flex-shrink defaults to 1 on every flex item) - once the row got
   tight it was the button's own label wrapping onto two lines that made that one card
   taller than its siblings. The text div is the only one meant to absorb shrinking. */
.kbm-option-card .mud-button-root {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .kbm-option-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Browser autofill doesn't dispatch input events, so MudBlazor never applies its
   mud-shrink / mud-input-label-shrink classes on autofilled fields, leaving the
   floating label centered over the value. :has(input:autofill) looks correct on paper
   but Chromium doesn't reliably re-invalidate :has() ancestors when the :autofill
   pseudo-class flips asynchronously after paint - it silently never applies in practice.
   Use the well-established animation-glue trick instead: bind a no-op animation to the
   :-webkit-autofill state so the browser fires a real, listenable "animationstart" DOM
   event (see the site.css companion JS in _Host.cshtml), then toggle a plain class. */
@keyframes kbmOnAutoFillStart { from {} to {} }
@keyframes kbmOnAutoFillCancel { from {} to {} }

.mud-input-slot:-webkit-autofill {
    animation-name: kbmOnAutoFillStart;
}

.mud-input-slot:not(:-webkit-autofill) {
    animation-name: kbmOnAutoFillCancel;
}

.mud-input-control-input-container.kbm-autofilled .mud-input-label-inputcontrol {
    transform: translate(0, 1.5px) scale(0.75);
    transform-origin: top left;
}

.mud-input-control-input-container.kbm-autofilled .mud-input-outlined-border legend {
    width: auto;
    padding: 0 5px;
}

/* Kill the yellow/blue native autofill background so it matches the theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--mud-palette-text-primary);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}