/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-ey9aeg89h7] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ey9aeg89h7] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-itbkeichzv],
.components-reconnect-repeated-attempt-visible[b-itbkeichzv],
.components-reconnect-failed-visible[b-itbkeichzv],
.components-pause-visible[b-itbkeichzv],
.components-resume-failed-visible[b-itbkeichzv],
.components-rejoining-animation[b-itbkeichzv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-retrying[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-failed[b-itbkeichzv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-itbkeichzv] {
    display: block;
}


#components-reconnect-modal[b-itbkeichzv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-itbkeichzv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-itbkeichzv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-itbkeichzv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-itbkeichzv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-itbkeichzv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-itbkeichzv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-itbkeichzv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-itbkeichzv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-itbkeichzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-itbkeichzv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-itbkeichzv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-itbkeichzv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-itbkeichzv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-itbkeichzv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-itbkeichzv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-itbkeichzv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-itbkeichzv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-itbkeichzv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/App/Sales/InvoiceEditor.razor.rz.scp.css */
/* Matthew (AI), 2026-09-23 15:20, owner's request: fit the invoice lines more cleanly.
   Scoped to this page rather than put in app.css, because §7 asks for the shared sheet only once a
   style is used on more than one screen. The bill editor solved the same crowding by splitting its
   line over two rows, so if this approach is preferred there too, these rules move to app.css and
   both pages take a class. */

/* An invoice line is eight fields across, and at the default 1rem the row wraps on a laptop before
   anybody has typed anything. .table-sm already tightens the cell padding; this brings the text down
   with it, so the headings and the read-only Amount and GST cells match the inputs rather than
   standing a size above them. */
.line-items[b-uenkt4lpfo] {
    font-size: 0.8125rem;
}

/* The Telerik combobox is sized by its own k- classes, not by Bootstrap's, so form-control-sm does
   nothing to it and it would sit a size larger than every field beside it.

   ::deep, because the combobox renders its own markup inside this component and scoped CSS does not
   cross that boundary without it. The dropdown itself is not touched: Telerik renders the popup at
   the end of the body, outside this scope entirely — which is the right outcome anyway, since a list
   somebody is reading is worth keeping legible even when the row it came from is tight.

   The numbers match Bootstrap's own .form-control-sm rather than being picked by eye, so the
   combobox lines up with the six native controls next to it. */
.line-items[b-uenkt4lpfo]  .k-combobox {
    font-size: 0.875rem;
}

.line-items[b-uenkt4lpfo]  .k-combobox .k-input-inner {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
}

/* No spinners on Qty or Unit price (owner's request, 2026-09-23).

   They ate about a character of an already narrow column and shifted the digits as the mouse passed
   over. The value is still typed and still arrow-keyed; only the little arrows go.

   Matthew (AI), 2026-09-23 15:55. **-webkit-appearance, not appearance.** The first version of this
   rule set only the unprefixed property, and Chrome does not honour it on these two pseudo-elements —
   so the arrows stayed exactly where they were and the rule looked like it had worked. Both are set:
   the prefixed one is what Chrome reads, the unprefixed one is for whatever reads that instead. */
.line-items[b-uenkt4lpfo]  input[type="number"]::-webkit-outer-spin-button,
.line-items[b-uenkt4lpfo]  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Belt and braces, and each half earns its place: Firefox has never drawn spinners on a textfield
   appearance, and recent Chrome honours it on the input as well as on the pseudo-elements above. */
.line-items[b-uenkt4lpfo]  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}