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

/* ------------------------------------------------------------------------
   Narrow screens (back-office pages only — scoped to .erp-main from
   MainLayout, so the POS till, the waiter PWA and the offline register are
   untouched). Nothing here applies from 960px up, so desktop and landscape
   tablets render exactly as before.

   MudBlazor already handles PHONES on its own: MudTable and MudDataGrid both
   default to Breakpoint.Xs, which below 600px hides the header row and turns
   every row into a stacked label/value card. Forcing a min-width on the table
   would break that layout, so the rules below deliberately exempt it.

   What is left unsolved by MudBlazor is the 600-960px band (portrait tablets,
   landscape phones): there the table still renders as a real table and 8-10
   columns get crushed into unreadable slivers. .mud-table-container already
   has overflow-x:auto, so giving the table a min-width turns that squeeze into
   a horizontal scroll — same as any desktop-width table, just scrolled.
   ------------------------------------------------------------------------ */
@media (max-width: 959.98px) {
    .erp-main .mud-table-root {
        min-width: 720px;
    }

    /* Breakpoint="Sm" tables stack below 960px — keep those fluid. */
    .erp-main .mud-sm-table .mud-table-root {
        min-width: 0;
    }
}

/* 600px exactly, not 599.98px: MudBlazor's own stacking query is @media(max-width:600px),
   so a viewport of exactly 600px (portrait on a whole class of Android tablets) stacks the
   table. A 599.98px reset would miss that pixel and leave the stacked cards stretched to the
   720px floor above. Match MudBlazor's boundary and the two can never disagree. */
@media (max-width: 600px) {
    /* Default (Breakpoint="Xs") tables stack below 600px — keep those fluid. */
    .erp-main .mud-xs-table .mud-table-root {
        min-width: 0;
    }

    /* Secondary columns on the busiest lists. Stacked cards repeat every column as its own
       label/value line, so 10 columns is 10 lines of scrolling per record; the columns
       carrying this class are the ones a phone user is not scanning for. Hidden ONLY here —
       from 600px up every list still shows every column, so nothing is lost on a desktop.
       Below 600px MudBlazor also hides the <colgroup>, so dropping cells cannot shift any
       column widths. */
    .erp-main .hide-on-phone {
        display: none !important;
    }
}

/* ------------------------------------------------------------------------
   Dialogs on phones (back-office only — .erp-dialogs wraps MainLayout's
   MudDialogProvider, so the POS till, the waiter PWA and the login screen
   keep their own dialogs untouched).

   MudBlazor ships no responsive behaviour for dialogs at all: .mud-dialog
   is capped at calc(100% - 64px), which on a 390px phone leaves 326px for a
   form the author sized for 960px. The rules below give the content-heavy
   dialogs the whole screen and let the small ones keep 16px of margin
   instead of 64px.

   "Content-heavy" is read off MudBlazor's own width class rather than a new
   flag: MaxWidth.Medium/Large IS the author saying this needs 960-1280px.
   MaxWidth.Small/ExtraSmall dialogs and message boxes (which carry
   mud-dialog-width-false) stay dialogs — a confirmation prompt has no
   business taking over the screen.

   Order matters: a Medium dialog with FullWidth carries BOTH
   mud-dialog-width-md and mud-dialog-width-full, and the two blocks have
   equal specificity, so the full-screen block must come second to win.
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
    .erp-dialogs .mud-dialog.mud-dialog-width-xs,
    .erp-dialogs .mud-dialog.mud-dialog-width-sm,
    .erp-dialogs .mud-dialog.mud-dialog-width-false {
        max-width: calc(100% - 16px);
    }

    .erp-dialogs .mud-dialog.mud-dialog-width-full {
        width: calc(100% - 16px);
    }

    /* Same declarations as MudBlazor's own .mud-dialog-fullscreen (what
       DialogOptions.FullScreen produces), applied by breakpoint instead of at
       the call site. overflow-y:hidden is part of it: the title and the
       actions row stay pinned and only .mud-dialog-content scrolls, which is
       what keeps "Откажи" reachable on a screen the dialog now fills. */
    .erp-dialogs .mud-dialog.mud-dialog-width-md,
    .erp-dialogs .mud-dialog.mud-dialog-width-lg,
    .erp-dialogs .mud-dialog.mud-dialog-width-xl,
    .erp-dialogs .mud-dialog.mud-dialog-width-xxl {
        width: 100%;
        height: 100%;
        margin: 0;
        max-width: 100%;
        max-height: none;
        border-radius: 0;
        overflow-y: hidden;
    }
}

/* ------------------------------------------------------------------------
   PDF preview dialog (PdfPreviewDialog.razor).

   .mud-dialog is already a flex column with .mud-dialog-content as the
   flexible row, but an iframe has no intrinsic height to flex against, so
   the frame carries an explicit one on desktop. On phones the dialog is
   full-screen (the block above), and there a fixed vh would either overflow
   or leave dead space — so the content area becomes a flex column and the
   frame simply takes whatever the title and the actions row leave.

   The grey backdrop is the colour Chrome's own PDF viewer paints around a
   page, so the frame does not flash white-on-dark-theme while it loads.
   ------------------------------------------------------------------------ */
.erp-pdf-frame {
    display: block;
    width: 100%;
    height: 70vh;
    border: 0;
    background: #525659;
}

@media (max-width: 600px) {
    .erp-dialogs .erp-pdf-dialog .mud-dialog-content {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .erp-dialogs .erp-pdf-dialog .erp-pdf-frame {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
}

/* ========================================================================
   MODULE MANUALS (/help, /help/{slug} — ManualPage.razor)

   The body is Markdown rendered to HTML and injected as a MarkupString, so
   MudBlazor components cannot style it from the inside. Everything below
   dresses plain tags instead, and does it through the MudBlazor palette
   variables so the manual follows the theme (light/dark) and the tenant's
   own primary colour rather than pinning a second palette into the app.
   ======================================================================== */

.erp-manual {
    max-width: 1180px;
}

/* ---- Header banner ---------------------------------------------------- */

.erp-manual-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-radius: var(--mud-default-borderradius);
    color: #fff;
    background: linear-gradient(135deg,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-primary-darken) 100%);
}

.erp-manual-header-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
}

.erp-manual-header-icon {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.erp-manual-header-text {
    min-width: 0;
}

.erp-manual-header-text h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.erp-manual-header-text p {
    margin: 4px 0 0;
    font-size: .875rem;
    opacity: .85;
}

.erp-manual-header-sep {
    margin: 0 6px;
    opacity: .6;
}

/* On the coloured banner an outlined button would draw itself in the very
   colour it sits on, so both are restated in white. */
.erp-manual-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.erp-manual-header-actions .mud-button-outlined {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.erp-manual-header-actions .mud-button-outlined:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, .12);
}

/* ---- Layout: table of contents + content ------------------------------ */

.erp-manual-body {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
    align-items: start;
}

.erp-manual-toc {
    position: sticky;
    /* Dense app bar (48px) plus breathing room. */
    top: 64px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
}

.erp-manual-toc-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

.erp-manual-toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    cursor: pointer;
}

.erp-manual-toc-link:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-primary);
}

.erp-manual-toc-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: var(--mud-palette-primary);
}

/* Sub-sections indent to the width of a missing icon, so their text lines up
   with the text of the chapters above them. */
.erp-manual-toc-l3 {
    padding-left: 36px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Chapter cards ---------------------------------------------------- */

.erp-manual-intro {
    margin-bottom: 20px;
}

.erp-manual-chapter {
    margin-bottom: 20px;
    overflow: hidden;
    /* Clears the fixed app bar when the TOC jumps here. */
    scroll-margin-top: 64px;
}

.erp-manual-chapter-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 20px;
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
}

.erp-manual-chapter-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: var(--mud-palette-primary);
}

.erp-manual-chapter-body {
    padding: 4px 20px 20px;
}

/* ---- Body typography -------------------------------------------------- */

.erp-manual-content p,
.erp-manual-content li {
    font-size: .9375rem;
    line-height: 1.65;
}

.erp-manual-content h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 8px;
    font-size: 1rem;
    font-weight: 600;
    scroll-margin-top: 64px;
}

.erp-manual-heading-icon {
    width: 18px;
    height: 18px;
    fill: var(--mud-palette-primary);
}

.erp-manual-content ul,
.erp-manual-content ol {
    padding-left: 24px;
}

.erp-manual-content li + li {
    margin-top: 4px;
}

.erp-manual-content a {
    color: var(--mud-palette-primary);
}

.erp-manual-content hr {
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 24px 0;
}

/* An italic paragraph is the manual's aside voice (the "the list defaults
   to…" lines under a table in the reference). */
.erp-manual-content > em,
.erp-manual-content p > em:only-child {
    color: var(--mud-palette-text-secondary);
}

.erp-manual-content code {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .875em;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

/* A fenced block (```…```) — used for short status-cycle diagrams like
   "Планиран → Во тек → Завршен". The inline <code> rule above would otherwise
   wrap it as a cramped pill; here it gets room to breathe as its own block. */
.erp-manual-content pre {
    margin: 12px 0;
    padding: 12px 16px;
    border-radius: 6px;
    overflow-x: auto;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.erp-manual-content pre code {
    padding: 0;
    border: 0;
    background: none;
    font-size: .875rem;
    line-height: 1.6;
}

.erp-manual-content kbd {
    display: inline-block;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: inherit;
    font-size: .8125em;
    font-weight: 600;
    text-align: center;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
}

/* ---- Tables ----------------------------------------------------------- */

/* Wide control/description tables must scroll inside the card rather than
   push the page sideways. */
.erp-manual-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: .9375rem;
}

.erp-manual-content th {
    text-align: left;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 10px 12px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.erp-manual-content td {
    padding: 10px 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* First column is the control being described — it reads as a label. */
.erp-manual-content td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

.erp-manual-content tbody tr:last-child td {
    border-bottom: 0;
}

/* ---- Callouts (":::info" … ":::") ------------------------------------- */

.erp-manual-callout {
    position: relative;
    margin: 16px 0;
    padding: 14px 16px 14px 52px;
    border-radius: 6px;
    border-left: 4px solid var(--callout-color);
    background: var(--mud-palette-background-grey);
}

.erp-manual-callout::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 15px;
    width: 22px;
    height: 22px;
    background-color: var(--callout-color);
    -webkit-mask: var(--callout-icon) center / contain no-repeat;
    mask: var(--callout-icon) center / contain no-repeat;
}

.erp-manual-callout > :first-child { margin-top: 0; }
.erp-manual-callout > :last-child { margin-bottom: 0; }

.erp-manual-callout-info {
    --callout-color: var(--mud-palette-info);
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.erp-manual-callout-tip {
    --callout-color: var(--mud-palette-success);
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zM9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1z'/%3E%3C/svg%3E");
}

.erp-manual-callout-warning {
    --callout-color: var(--mud-palette-warning);
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.erp-manual-callout-danger {
    --callout-color: var(--mud-palette-error);
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

/* ---- Screen mockups ---------------------------------------------------
   Deliberately sketches, not screenshots: a screenshot goes stale the next
   time a button moves, and it cannot follow the theme. Written as inline
   HTML in the Markdown source.
   ----------------------------------------------------------------------- */

.erp-mock {
    margin: 14px 0;
    padding: 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
}

.erp-mock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.erp-mock-row + .erp-mock-row {
    margin-top: 8px;
}

.erp-mock-btn,
.erp-mock-field,
.erp-mock-select {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: .8125rem;
    white-space: nowrap;
}

/* "текст во обоено поле означува копче" — the legend the reference prints. */
.erp-mock-btn {
    color: #fff;
    font-weight: 600;
    background: var(--mud-palette-primary);
}

.erp-mock-btn.is-secondary {
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
}

.erp-mock-btn.is-danger {
    background: var(--mud-palette-error);
}

.erp-mock-field,
.erp-mock-select {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* "Ознаката „▾" значи паѓачко мени". */
.erp-mock-select::after {
    content: " ▾";
    font-weight: 700;
}

.erp-mock-spacer {
    flex: 1 1 auto;
}

.erp-mock-caption {
    margin-top: 8px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* ---- Manual index cards ----------------------------------------------- */

.erp-manual-card {
    height: 100%;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.erp-manual-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-8);
}

.erp-manual-card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

.erp-manual-card-badge .erp-manual-header-icon {
    width: 22px;
    height: 22px;
}

/* ---- Phone ------------------------------------------------------------ */

@media (max-width: 960px) {
    .erp-manual-body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Above a phone the TOC is a rail beside the text; here it is a card the
       reader scrolls past, so pinning it would just eat the viewport. */
    .erp-manual-toc {
        position: static;
        max-height: none;
    }
}

@media (max-width: 600px) {
    .erp-manual-header {
        padding: 16px;
    }

    .erp-manual-header-text h1 {
        font-size: 1.25rem;
    }

    .erp-manual-header-actions {
        margin-left: 0;
        width: 100%;
    }

    .erp-manual-header-actions .mud-button-root {
        flex: 1 1 0;
    }

    .erp-manual-chapter-body {
        padding: 4px 14px 16px;
    }

    /* A control/description table stacks badly and reads worse than it
       scrolls, so the label column simply stops being nowrap. */
    .erp-manual-content td:first-child {
        white-space: normal;
    }
}

/* ---- Print ("Печати упатство") ---------------------------------------
   window.print() prints the whole document, so the app chrome is removed
   here rather than by rendering a separate printable page.
   ----------------------------------------------------------------------- */

@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-overlay,
    .mud-snackbar-location-bottom-start,
    .erp-manual-noprint {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .erp-main {
        max-width: none !important;
        padding: 0 !important;
    }

    .erp-manual {
        max-width: none;
    }

    .erp-manual-body {
        display: block;
        margin-top: 16px;
    }

    /* Elevation is a shadow; on paper it is nothing but a grey smear. */
    .erp-manual-chapter {
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .erp-manual-header {
        /* Chrome drops backgrounds unless the user opts in, so the banner is
           given a border to keep its shape either way. */
        border: 1px solid #ccc;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .erp-manual-content table,
    .erp-manual-callout {
        break-inside: avoid;
    }
}

/* ------------------------------------------------------------------------
   VERSION BADGE (MainLayout) — which build is being served.

   Fixed to the bottom-right: MudBlazor's snackbars default to bottom-LEFT,
   so the two never overlap. pointer-events:none is the important part — the
   badge floats above the page, and without it the corner would swallow
   clicks meant for whatever is underneath (a data-grid pager, a FAB).
   ------------------------------------------------------------------------ */

.erp-version {
    position: fixed;
    right: 8px;
    bottom: 6px;
    z-index: 1000;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .6875rem;
    line-height: 1.5;
    letter-spacing: .02em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    opacity: .75;
}

/* On a phone the corner is scarce and the drawer overlay lands on top of it
   anyway; the version stays available on Подесувања → Информации за системот. */
@media (max-width: 600px) {
    .erp-version {
        display: none;
    }
}

@media print {
    .erp-version {
        display: none;
    }
}