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

a, .btn-link {
    color: #006bb7;
}

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

h1:focus {
    outline: none;
}

.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;
}
/* ---- navigation busy indicator ------------------------------------------------
   Driven entirely by JS adding .is-busy to #nav-busy; see
   wwwroot/TBS.Reports.Web.lib.module.js for when that happens and why.

   Hidden by default and shown by a class, rather than being created and removed,
   so there is nothing to construct at the moment the app is already busy.
   ------------------------------------------------------------------------------ */
#nav-busy {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease-in-out, visibility .15s;
}

#nav-busy.is-busy {
    opacity: 1;
    visibility: visible;
}

/* A bar along the top edge. It reads as "working" at a glance without covering
   anything, which matters for the ~200ms navigations where a full overlay would be
   more startling than the wait it describes. */
#nav-busy .nav-busy-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(13, 110, 253, .18);
    overflow: hidden;
}

#nav-busy .nav-busy-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: #0d6efd;
    animation: nav-busy-slide 1.1s ease-in-out infinite;
}

@keyframes nav-busy-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* And the spinner itself, centred. Deliberately NOT a full-screen scrim: the page
   underneath stays readable, so a slow navigation looks like one that is still
   working rather than one that has thrown the previous screen away. */
#nav-busy .nav-busy-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    font-size: .9rem;
    color: #495057;
}

#nav-busy .nav-busy-ring {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(13, 110, 253, .25);
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: nav-busy-spin .7s linear infinite;
}

@keyframes nav-busy-spin {
    to { transform: rotate(360deg); }
}

/* Anyone who has asked for less movement gets the indicator without the movement:
   it still appears, it simply does not animate. */
@media (prefers-reduced-motion: reduce) {
    #nav-busy .nav-busy-bar::after,
    #nav-busy .nav-busy-ring {
        animation: none;
    }
    #nav-busy .nav-busy-bar::after { left: 0; width: 100%; }
}

/* The inline spinner in BusyLine - the same idea as the navigation one, sized to sit
   on a line of small text rather than in the middle of the screen. */
.busy-line-ring {
    display: inline-block;
    flex: 0 0 auto;
    width: .85rem;
    height: .85rem;
    border: 2px solid rgba(13, 110, 253, .25);
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: nav-busy-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .busy-line-ring { animation: none; }
}

/* ---- branding page ------------------------------------------------------------
   The brand list. Selection is a tinted row with an accent down the left edge
   rather than Bootstrap's .active, which fills the row solid blue and leaves the
   muted "No VAT number" line underneath unreadable against it.
   ------------------------------------------------------------------------------ */
.brand-item {
    text-align: left;
}

.brand-item.is-selected {
    background-color: #eef4ff;
    box-shadow: inset 3px 0 0 #0d6efd;
}

/* The tenant code as a chip, so the list reads name-first with the code as a quiet
   identifier beside it. */
.brand-code {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    height: 1.6rem;
    padding: 0 .4rem;
    border-radius: .3rem;
    background: #eef2f7;
    color: #495057;
    font-size: .7rem;
    font-weight: 600;
}

.brand-item.is-selected .brand-code {
    background: #d7e5ff;
    color: #0a58ca;
}

/* Save and Cancel stay in view while the form scrolls under them. */
.brand-actions {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
}

/* The two previews. Monospaced-ish framing so they read as a specimen of the
   document rather than as more form text. */
.brand-preview {
    padding: .6rem .75rem;
    border: 1px dashed #ced4da;
    border-radius: .375rem;
    background: #f8f9fa;
    font-family: Arial, sans-serif;
    font-size: .85rem;
    color: #212529;
}

.brand-preview-label {
    margin-bottom: .35rem;
    font-family: inherit;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
}

/* ---- home ---------------------------------------------------------------------
   The hero borrows the sidebar's own gradient (navy to deep purple) turned through
   the diagonal, so the page reads as the same application rather than as a landing
   page bolted onto one.
   ------------------------------------------------------------------------------ */
.home-hero {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    padding: 3.5rem 2.5rem;
    color: #fff;
    background-image: linear-gradient(135deg, rgb(5, 39, 103) 0%, #3a0647 75%);
    box-shadow: 0 .75rem 2rem rgba(5, 39, 103, .25);
}

/* A soft light source in the top-right corner. Two flat colours meeting on a
   diagonal look like a gradient; this makes it look lit. */
.home-hero::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.home-hero-inner {
    position: relative;   /* above the glow */
    z-index: 1;
    max-width: 46rem;
}

.home-eyebrow {
    margin-bottom: .35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
}

.home-greeting {
    margin-bottom: .75rem;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -.02em;
}

.home-lead {
    margin-bottom: 1.75rem;
    max-width: 40rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}