h1:focus {
    outline: none;
}

/* Backs the drag-to-resize table columns feature (initColumnResize in app.js). table-layout:fixed
   makes a browser size every column purely from its header cell's own width, so resizing a <th> is
   enough to resize the whole column. overflow-x:auto means that once the JS-computed min-width
   (see syncTableMinWidth in app.js) no longer fits the viewport, the table scrolls horizontally
   instead of squeezing cells below their usable width -- which used to make adjacent columns'
   controls visually collide at the boundary between them. */
.resizable-table-wrapper {
    overflow-x: auto;
}

.resizable-table-wrapper table {
    table-layout: fixed;
}

.resizable-table-wrapper th {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.col-resize-handle {
    position: absolute;
    right: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    user-select: none;
}

.col-resize-handle:hover,
.col-resize-handle:active {
    background: rgba(0, 0, 0, 0.15);
}

/* The trailing action column (row-delete button) on every line-grid table: given both this class and
   an inline width:48px (see each form's <MudTh>) so it never absorbs the extra width freed up when
   data columns are hidden via column-visibility -- that leftover space instead goes to the remaining
   visible data columns, each given a percentage width computed by ColumnVisibilityState.WidthPercent,
   renormalized to sum to 100% among only the currently-visible ones (see ColumnVisibilityState.cs).
   syncTableMinWidth in app.js keeps the table from ever shrinking a column below its declared
   data-min-px floor, letting overflow-x:auto above take over (a horizontal scrollbar) instead of
   squeezing cells past their usable width. */
.grid-action-col {
    width: 48px;
    min-width: 48px;
}

/* Read-only amount cell in a line grid. Under the wrapper's table-layout:fixed a long number would
   otherwise spill out of its cell and sit underneath the next column's content (e.g. the row-delete
   button), so it is clipped with an ellipsis instead -- pair it with a title attribute carrying the
   full value so it's still readable on hover. */
.mud-table-cell.grid-amount-cell {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

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

.numeric-input-right input {
    text-align: right;
}

/* Compact data-entry density, opt-in per page by wrapping its content in class="compact-form" (first
   used by the Sales Invoice form). Smaller input text, tighter input padding and table cells, so the
   header fits one row and each line-grid row is ~34px instead of ~52px. Every selector is deliberately
   MORE specific than the MudBlazor rule it overrides: this file loads BEFORE MudBlazor.min.css (see
   App.razor), so an equal-specificity rule here would silently lose. Expects inputs to use
   Variant.Outlined + Margin.Dense. */
.compact-form .mud-input.mud-input-outlined {
    font-size: 0.8125rem;
}

.compact-form .mud-input.mud-input-outlined > input.mud-input-root.mud-input-root-outlined,
.compact-form .mud-input.mud-input-outlined div.mud-input-slot.mud-input-root.mud-input-root-outlined {
    padding: 6px 8px;
}

.compact-form .mud-input.mud-input-outlined > input.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-start {
    padding-left: 0;
    padding-inline-start: 0;
}

.compact-form .mud-input.mud-input-outlined > input.mud-input-root.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-right: 0;
    padding-inline-end: 0;
}

.compact-form .mud-input-control.mud-input-control-margin-dense {
    margin: 0;
}

/* Keeps room above a labelled field for its label, which sits on the top border once filled/focused. */
.compact-form .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 6px;
    margin-bottom: 0;
}

.compact-form .mud-input-adornment .mud-icon-button {
    padding: 2px;
    font-size: 1.125rem;
}

.compact-form .mud-input-adornment .mud-icon-root {
    font-size: 1.125rem;
}

/* Outlined label: resting position re-centred for the shorter input, and a slightly larger scale
   once shrunk so it stays readable at the smaller base font size. */
.compact-form label.mud-input-label.mud-input-label-outlined {
    font-size: 0.8125rem;
    transform: translate(8px, 7px) scale(1);
    max-width: calc(100% - 8px);
}

.compact-form .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.compact-form .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(8px, -7px) scale(0.85);
    max-width: calc(100% - 8px);
}

.compact-form .mud-table.mud-table-dense * .mud-table-row .mud-table-cell,
.compact-form .mud-table.mud-table-dense * .mud-table-row .mud-table-cell:last-child {
    padding: 2px 4px;
    padding-inline: 4px;
}

.compact-form .mud-table.mud-table-dense .mud-table-head .mud-table-row .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.8125rem;
}

.compact-form .mud-table.mud-table-dense .mud-table-body .mud-table-cell {
    font-size: 0.8125rem;
}

/* Smaller page title, opt-in per page by wrapping the <PageHeader> in class="compact-title"
   (first used by the Purchase Invoices list page). More specific than MudBlazor's own
   .mud-typography-h5 rule so it wins regardless of stylesheet load order (see the compact-form
   comment above for why that matters here). */
.compact-title .mud-typography-h5 {
    font-size: 1.25rem;
}

/* Compact stat-card density, opt-in per page by wrapping the stat-card MudGrid in
   class="compact-cards" (first used by the Purchase Invoices list page). Shrinks each StatCard's
   padding, avatar and type sizes so four cards fit comfortably in one row instead of wrapping to
   two rows. Pair with a "one card per quarter" MudItem breakpoint (e.g. xs="3") on that page. */
.compact-cards .mud-paper {
    padding: 10px 12px;
}

.compact-cards .mud-avatar.mud-avatar-medium {
    width: 32px;
    height: 32px;
    font-size: 1rem;
}

.compact-cards .mud-typography-body2 {
    font-size: 0.75rem;
}

.compact-cards .mud-typography-h5 {
    font-size: 1.125rem;
}

.compact-cards .mud-typography-caption {
    font-size: 0.6875rem;
}

/* Grid header row with a visible border and a light background tint, opt-in per page via
   class="bordered-grid-header" on the MudTable (first used by the Purchase Invoices list page).
   Uses the theme's own background/line tokens (--mud-palette-*) so it stays correct in dark mode. */
.bordered-grid-header .mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-table-lines);
}

/* Shorter grid header row, opt-in per page via class="compact-grid-header" on the MudTable (first
   used by the Goods Receipts list page, since rolled out to every master-data/document list page
   app-wide). MudBlazor's default (non-dense) header cell is padded for a ~48px-tall row; this trims
   it to a plain single-line height regardless of dense state. More specific than MudBlazor's own
   rule so it wins regardless of stylesheet load order. */
.compact-grid-header .mud-table-head .mud-table-row .mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
}

.journal-draft-watermark {
    position: relative;
}

.journal-draft-watermark::before {
    content: "DRAFT";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 5rem;
    font-weight: 800;
    color: rgba(200, 0, 0, 0.15);
    pointer-events: none;
    z-index: 5;
    white-space: nowrap;
}

.print-only {
    display: none;
}

@media print {
    .mud-appbar, .mud-drawer, .print-hide {
        display: none !important;
    }

    .mud-layout, .mud-main-content, .mud-container {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .print-only {
        display: block;
    }
}