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

.imageThumbnail {
    height: 100px;
    width: auto;
}

.imageSmThumbnail {
    height: 50px;
    width: auto;
}

.pivot-wrapper .e-pivotview {
    border-radius: 8px;
}

/* Pin the notification bar to the top of the viewport so it never scrolls away */
#notification-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1400; /* above MudAppBar (~1300) */
    width: 100%;
}

/* Shift the AppBar down by the notification area height using `top`, not `margin-top`,
   so it stays correctly positioned relative to the viewport as the user scrolls. */
.appbar-with-notifications {
    top: 120px !important; /* Match this to your Marquis height (120px) */
    transition: top 0.3s ease;
}

/* Main content must clear: notification (120px) + AppBar (~64px) = 184px */
.main-with-notifications {
    padding-top: 184px !important;
    transition: padding-top 0.3s ease;
}

::deep .condensed-btn {
    min-height: 24px !important; /* Overrides the default 30px+ min-height */
    padding: 2px 8px !important; /* Tighter left/right and top/bottom padding */
    font-size: 0.75rem !important; /* Slightly smaller text */
    line-height: 1.2 !important; /* Tighter text wrapping */
}
/* ProductionProduce list grid — auto layout so PSO sizes to content, Name gets remaining space */
.produce-list-grid .mud-table-root {
    table-layout: auto !important;
    width: 100% !important;
}

/* ProductionProduceRun grid — amount "links" are MudButtons; kill the button label styling
   (uppercase + medium weight) so units render as typed, e.g. "33 Each" not "33 EACH" */
.produce-run-grid .amount-link,
.produce-run-grid .amount-link .mud-button-label {
    text-transform: none !important;
    font-weight: 400 !important;
}

/* ProductionProduceRun grid — larger text for floor readability (cells, links, amount buttons) */
.produce-run-grid .mud-table-cell,
.produce-run-grid .mud-table-cell .mud-typography,
.produce-run-grid .mud-table-cell .mud-link,
.produce-run-grid .mud-table-cell .mud-button-root {
    font-size: 1rem !important;
}

/* ...but keep the header row at standard size so column headers don't set a wide min-width */
.produce-run-grid th.mud-table-cell {
    font-size: 0.875rem !important;
}

/* ProductionProduceRun on tablet/phone (produce-run-compact is added when MediaSize >= 2).
   NOTE: this deliberately stays on the AUTO table layout (inherited from .produce-list-grid).
   table-layout:fixed was tried and reverted — MudBlazor renders each expanded child row as
   <td colspan="1000">, and under fixed layout the ~1000 phantom columns that declares swallow
   every pixel the header cells don't claim, shifting the real columns left on expand. Auto
   layout gives phantoms zero width and the name column naturally absorbs the slack. The compact
   look instead comes from shrinking each column's MIN-CONTENT: wrapped headers (below), tight
   padding, and the width hints here (auto layout treats them as preferred widths). */
.produce-run-compact tr > :first-child {
    width: 2rem !important;      /* hierarchy / expand chevron — beats MudBlazor's inline width:0% */
    padding-left: 2px !important;
    padding-right: 0 !important;
}
.produce-run-compact .col-pso    { width: 3.5rem; }
.produce-run-compact .col-name   { width: 55%; }            /* preferred, not exact: name soaks up slack */
.produce-run-compact .col-days   { width: 5rem; }
.produce-run-compact .col-tight  { width: 5.5rem; }         /* Cumm / Needed / Remaining */
.produce-run-compact .col-status { width: 6.5rem; }

/* The expand button ships with MudBlazor's ma-n3 (-12px margin all sides); in the narrow fixed
   first column that negative margin pulls the chevron out under the neighbouring cell so it looks
   covered. Reset it and top-align so it lines up with the first line of a wrapped name. */
.produce-run-compact td:first-child {
    vertical-align: top;
}
.produce-run-compact td:first-child .mud-icon-button {
    margin: 0 !important;
    padding: 2px !important;
}

/* Let header labels wrap instead of clipping the sort/filter icons out of the narrow cells. */
.produce-run-compact th.mud-table-cell {
    white-space: normal;
}
.produce-run-compact .mud-table-cell.col-tight {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* GUARD: an expanded row's child content hosts its own nested MudDataGrids. All the compact rules
   above use descendant selectors, so without this they cascade into those inner tables — forcing
   fixed layout + a 2.25rem first column onto them and jamming their cell text over the header
   sort/filter icons. Reset the inner tables back to the normal auto layout. Higher specificity
   (extra .mud-table-child-content class) + !important wins over the rules above. */
.produce-run-compact .mud-table-child-content .mud-table-root {
    table-layout: auto !important;
}
.produce-run-compact .mud-table-child-content tr > :first-child {
    width: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    vertical-align: inherit;
}
.produce-run-compact .mud-table-child-content th.mud-table-cell {
    white-space: nowrap;
}

/* Lot detail grids (RecipeLotDetailList / ProductLotDetailList) — the compact wrapped-cell look
   these had before 2026-08-06 came from DynOList's style block bleeding globally; when that moved
   into CSS isolation the lot grids lost it and sprawled on tablets. Restore it here, scoped. */
.lot-detail-grid .mud-table-row .mud-table-cell {
    white-space: normal;
    max-width: 150px;
    width: 150px;
    overflow: visible;
}
.lot-detail-grid .mud-typography-body2 {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: inline-block;
}
/* inside a compact produce-run child row the guard above forces th nowrap on nested tables —
   lot-grid headers must still wrap or they clip at the 150px cap */
.produce-run-compact .mud-table-child-content .lot-detail-grid th.mud-table-cell {
    white-space: normal;
}

/* Tablet/phone: EVERY grid nested in an expanded child row gets the same capped-cell treatment
   (pack orders grid, ScaleProduct, QCLogDetail, DynOList steps) — they all leaned on the old
   global DynOList style too, and without the cap the auto-layout guard above lets them sprawl
   past the viewport, forcing horizontal scrolling. The hierarchy/expand first column keeps its
   auto width from the guard's !important rule. Specificity (0,4,0) also overrides the guard's
   th nowrap, restoring wrapped headers like the old global look. */
.produce-run-compact .mud-table-child-content .mud-table-row .mud-table-cell {
    white-space: normal;
    max-width: 150px;
    width: 150px;
    overflow: visible;
}
.produce-run-compact .mud-table-child-content .mud-typography-body2 {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: inline-block;
}

/* Pack grid (ProductionProductRunList): the capped-cell rule above (0,4,0) out-specifies the
   first-column guard (0,3,1), so under auto layout the hierarchy/expand column inherited the
   150px preferred width — a wide dead gutter on the left of every pack grid on tablets. Pin it
   back to chevron width. */
.produce-run-compact .mud-table-child-content .pack-grid .mud-table-cell:first-child {
    width: 2.5rem !important;
    max-width: 3rem !important;
    padding-left: 4px !important;
    padding-right: 0 !important;
}

/* DynOList grid CSS now lives in Forward.RazorClassLibrary/DynOList.razor.css (scoped),
   so every host app gets it. Do not re-add .dynolist-grid rules here. */

/* Dialog — draggable + resizable */
.mud-dialog {
    resize: both;
    overflow: auto;
    min-width: 320px;
    min-height: 200px;
}