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

.num { text-align: right; font-variant-numeric: tabular-nums; }
.table input.form-control-sm, .table select.form-select-sm { min-width: 4.5rem; }
.table td { vertical-align: middle; }
.section-title { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; }

/* ---- Nutrastrips design (from the Shipping & Receiving Hub) ----
   Indigo from the logo, a dark indigo menu rail, Archivo type with wide bold headings, white panels that float on a
   tinted background with a faint label-sheet dot grid. Sky blue marks focus. */
:root {
    --indigo: #3A3189;
    --indigo-deep: #241E5E;
    --indigo-soft: #E9E7F7;
    --ink: #211D47;
    --ink-2: #5B5784;
    --ink-3: #6C6891;
    --canvas: #EFEEF6;
    --paper: #FFFFFF;
    --line: #DCDAEA;
    --sky: #00B0F0;
    --s-packaging: #4A3FB5;
    --s-raw: #0A8FC7;
    --s-shipping: #E3672E;
    --ok: #1E7B45; --ok-bg: #E3F3E9;
    --bad: #B3261E; --bad-bg: #FBE7E5;
    --radius-s: 6px; --radius-m: 10px; --radius-l: 16px;
    --wide: "wdth" 125;
    --float: 0 1px 2px rgba(33, 29, 71, .08), 0 10px 28px -10px rgba(33, 29, 71, .28);
    --rail-w: 232px;
    --topbar-h: 56px;

    /* Older names used across the portal's pages */
    --ns-navy: var(--indigo);
    --ns-navy-dark: #2E2672;
    --ns-blue: var(--s-raw);
    --ns-blue-light: var(--indigo-soft);
    --ns-bg: var(--canvas);
    --ns-border: var(--line);

    --bs-primary: #3A3189;
    --bs-primary-rgb: 58, 49, 137;
    --bs-link-color: #3A3189;
    --bs-link-color-rgb: 58, 49, 137;
    --bs-link-hover-color: #241E5E;
    --bs-link-hover-color-rgb: 36, 30, 94;
    --bs-body-color: #211D47;
    --bs-body-color-rgb: 33, 29, 71;
    --bs-secondary-color: #5B5784;
    --bs-border-color: #DCDAEA;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 6px;
    --bs-body-font-family: "Archivo", Arial, sans-serif;
}

body { font-family: "Archivo", Arial, sans-serif; font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.text-muted { color: var(--ink-2) !important; }

/* Shell: the menu rail and the page */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.app-rail { position: sticky; top: 0; width: var(--rail-w); flex-shrink: 0; height: 100vh; overflow-y: auto; isolation: isolate;
            background: var(--indigo-deep); color: #fff; display: flex; flex-direction: column; padding: 22px 14px 14px; }
.app-rail::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 150px; width: 168px; height: 210px; transform: translateX(-50%) rotate(-8deg);
                    background: url(img/rail-mark.png) no-repeat center / contain; opacity: .07; pointer-events: none; }
.app-brand { display: block; padding: 4px 6px 20px; color: #fff; text-decoration: none; }
.app-brand img { display: block; width: 100%; max-width: 190px; margin-bottom: 8px; }
.app-brand small { color: #B9B4E8; font-size: 13px; letter-spacing: .02em; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-s); color: #D7D3F5; font-weight: 600; text-decoration: none; }
.app-nav a svg, .app-me-links a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.app-nav a.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 var(--sky); }
.app-nav a.hub-ship.active { box-shadow: inset 3px 0 0 #F29A4A; }
.app-nav a.hub-print.active { box-shadow: inset 3px 0 0 #9C86F0; }
.app-nav a.hub-coa.active { box-shadow: inset 3px 0 0 #E3672E; }
.app-nav-group { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 0px); margin: 14px 0 2px; padding: 6px 12px;
    border: 0; border-radius: var(--radius-s); background: none; color: #9D97D8; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.app-nav-group:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.app-nav-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.app-nav-group[aria-expanded="false"] .app-nav-chevron { transform: rotate(-90deg); }
.app-nav-items { display: flex; flex-direction: column; gap: 2px; }
.app-nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #FFC857; color: var(--indigo-deep); font-size: 12px; font-weight: 800; text-align: center; }
.app-me { margin-top: auto; padding: 14px 6px 4px; border-top: 1px solid rgba(255, 255, 255, .12); }
.app-me-who { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 6px; border-radius: var(--radius-s); }
.app-me-who:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.app-me-who b { display: block; font-size: 14px; line-height: 1.2; }
.app-me-who small { display: block; color: #B9B4E8; font-size: 12px; }
.app-me-who .app-avatar { background: var(--indigo); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.app-me-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.app-me-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-s);
                  color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.app-me-links a svg { width: 15px; height: 15px; }
.app-me-links a:hover, .app-me-links a.active { background: rgba(255, 255, 255, .12); color: #fff; }
.app-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--indigo); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.app-avatar img { width: 100%; height: 100%; object-fit: cover; }

.app-main { flex: 1; min-width: 0; padding: 28px 36px 60px; position: relative; isolation: isolate;
            background: radial-gradient(900px 700px at 100% 45%, rgba(58, 49, 137, .30), transparent 65%),
                        radial-gradient(900px 700px at 0% 100%, rgba(0, 176, 240, .16), transparent 62%),
                        linear-gradient(180deg, #E8E6F7 0%, #E1E2F5 100%);
            background-attachment: fixed; }
/* label-sheet dot grid, very faint */
.app-main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
                    background-image: radial-gradient(rgba(58, 49, 137, .16) 1px, transparent 1.2px); background-size: 22px 22px; }
.app-main > * { max-width: 1600px; }
.app-shell-plain .app-main { min-height: 100vh; }

/* Phones: a slim top bar; the rail slides in from the left under it. */
.app-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1035; height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 12px;
              background: var(--indigo-deep); box-shadow: 0 2px 10px rgba(36, 30, 94, .35); }
.app-topbar-logo img { height: 22px; display: block; }
.app-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-s); background: none; color: #fff; }
.app-menu-toggle:hover, .app-menu-toggle[aria-expanded=true] { background: rgba(255, 255, 255, .12); }
@media (max-width: 767.98px) {
    .app-shell { display: block; padding-top: var(--topbar-h); }
    .app-rail { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 1030; width: 16rem; max-width: 85vw; height: auto; padding-top: 14px;
                box-shadow: 4px 0 16px rgba(33, 29, 71, .3); transform: translateX(-105%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
    .app-rail.open { transform: none; visibility: visible; }
    .app-rail .app-brand { display: none; }
    .app-nav a { padding: 11px 12px; font-size: 1.05rem; }
    .app-sidebar-backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 1025; background: rgba(33, 29, 71, .4); }
    .app-main { padding: 16px 12px 40px; min-height: calc(100vh - var(--topbar-h)); }
}

/* Headings: heavy and wide */
h1, .h1, .h3, h2.h4, .h4 { color: var(--ink); }
h1, .h3 { font-weight: 800; font-variation-settings: var(--wide); letter-spacing: -0.01em; }
.page-head > h1, .page-head h1.h3 { font-size: 30px; line-height: 1.1; }
.section-title { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--indigo-soft); padding-bottom: .35rem; margin-bottom: .75rem; }

/* Buttons */
.btn { font-weight: 700; border-radius: var(--radius-s); }
.btn-primary { --bs-btn-bg: var(--indigo); --bs-btn-border-color: var(--indigo); --bs-btn-hover-bg: #2E2672; --bs-btn-hover-border-color: #2E2672; --bs-btn-active-bg: #2E2672; --bs-btn-active-border-color: #2E2672; --bs-btn-disabled-bg: #A9A5CF; --bs-btn-disabled-border-color: #A9A5CF; }
.btn-outline-primary { --bs-btn-color: var(--indigo); --bs-btn-border-color: var(--line); --bs-btn-bg: #fff; --bs-btn-hover-bg: var(--indigo-soft); --bs-btn-hover-color: var(--indigo); --bs-btn-hover-border-color: var(--indigo); --bs-btn-active-bg: var(--indigo); --bs-btn-active-border-color: var(--indigo); border-width: 1.5px; }
.btn-outline-secondary { --bs-btn-color: var(--indigo); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--indigo-soft); --bs-btn-hover-color: var(--indigo); --bs-btn-hover-border-color: var(--indigo); --bs-btn-active-bg: var(--indigo-soft); --bs-btn-active-color: var(--indigo); background: #fff; border-width: 1.5px; }
.btn-link { --bs-btn-color: var(--indigo); font-weight: 600; }

/* Fields */
.form-control, .form-select { border: 1.5px solid var(--line); border-radius: var(--radius-s); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(0, 176, 240, .35); }
.form-check-input:checked { background-color: var(--indigo); border-color: var(--indigo); }
.form-label { color: var(--ink-2); font-weight: 600; font-size: 13px; }

/* Content sits on white panels that float off the background. */
main > .row, main > .table, main > .table-responsive, main > table, .card { background: var(--paper); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radius-m); box-shadow: var(--float); }
main > .row { padding: 1rem 1rem 1.25rem; margin-left: 0; margin-right: 0; }
main > table, main > .table-responsive { padding: .25rem .5rem; border-collapse: separate; }
.modal-content { border: 0; border-radius: var(--radius-l); box-shadow: 0 2px 6px rgba(20, 17, 48, .25), 0 30px 60px -20px rgba(20, 17, 48, .6); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); }
.table thead th { color: var(--ink-3); font-weight: 600; font-size: 13px; border-bottom-color: var(--line); white-space: nowrap; }
.table > :not(caption) > * > * { border-bottom-color: var(--line); }
.table-light, .table > :not(caption) > .table-light > * { --bs-table-bg: var(--indigo-soft); --bs-table-color: var(--ink); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--indigo-soft); }
tfoot { color: var(--ink); }

.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: var(--ink-2); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--ink); border-top: 3px solid var(--indigo); background: #fff; }

.badge.bg-secondary { background-color: var(--ink-2) !important; }
.dropdown-menu { border: 0; border-radius: var(--radius-m); box-shadow: 0 2px 4px rgba(33, 29, 71, .1), 0 16px 34px -12px rgba(33, 29, 71, .35); }
.dropdown-header { color: var(--ink-3); font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; }
.dropdown-item:hover { background: var(--indigo-soft); color: var(--ink); }
.alert { border-radius: var(--radius-m); }

/* Shipping & Receiving: the Hub fills the page under the menu and scrolls on its own. */
.app-main:has(.hub-page) { padding: 0; }
.app-main:has(.hub-page)::before { display: none; }
.app-main > .hub-page { max-width: none; }
.hub-page { position: sticky; top: 0; height: 100vh; }
.hub-page iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 767.98px) { .hub-page { top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); } }

/* Keeps a page's title, save buttons and messages visible while scrolling long lists. */
.page-actions { position: sticky; top: 0; z-index: 1010; background: rgba(232, 230, 247, .92); backdrop-filter: blur(6px); padding-top: .5rem; margin-top: -.5rem; }
@media (max-width: 767.98px) { .page-actions { top: var(--topbar-h); } }

/* A long list scrolls inside its panel under a fixed column header, so the page's top bar never scrolls away. */
.table-scroll { max-height: calc(100vh - 19rem); overflow: auto; }
main > .table-responsive.table-scroll { padding-top: 0; }
.table-scroll > table.resizable > thead > tr > th, .table-scroll > table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: #fff; }

/* Sortable list headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ns-blue); }
.sort-arrow { font-size: .7em; }
/* Customer headings on the grouped Quotes and Projects lists. */
tr.customer-group > th { background: var(--bs-tertiary-bg, #f3f4f8); color: var(--ns-navy, #39378d); font-weight: 600; padding-top: .5rem; border-bottom-width: 1px; }
.customer-group-caret { display: inline-block; width: 1em; font-size: .8em; }
tr.customer-group a.customer-link { color: inherit; text-decoration: none; }
tr.customer-group a.customer-link:hover { text-decoration: underline; }

/* Dashboard */
.stat-tile { padding: 1rem 1.25rem; color: inherit; }
a.stat-tile:hover { border-color: var(--ns-blue); }
.stat-label { color: #5a5d78; font-weight: 600; font-size: .85rem; }
.stat-value { color: var(--ns-navy); font-size: 2.25rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-note { color: #7a7d96; font-size: .8rem; }
.status-chart { display: flex; flex-direction: column; gap: .35rem; }
.status-row { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: .75rem; padding: .3rem .4rem; border-radius: .4rem; color: inherit; text-decoration: none; }
.status-row:hover { background: var(--ns-blue-light); }
.status-name { color: #5a5d78; font-weight: 500; }
.status-track { height: 18px; background: var(--ns-bg); border-radius: 4px; overflow: hidden; }
.status-bar { display: block; height: 100%; background: var(--ns-navy); border-radius: 0 4px 4px 0; min-width: 2px; }
.status-count { color: var(--bs-body-color); font-weight: 600; }
.rep-chart .status-row { grid-template-columns: 9rem 1fr 3rem; }
.rep-chart .status-bar { border-radius: 0; }
.rep-chart .status-bar:last-child { border-radius: 0 4px 4px 0; }
.rep-chart .status-bar[style^="width:0%"] { min-width: 0; }
.rep-draft { background: var(--ns-navy); }
.rep-sent { background: #0f75bc; }
.rep-key { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; }
main > .row.bare { background: none; border: 0; box-shadow: none; padding: 0; margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x)); }

/* Supplement Facts preview: mirrors the PDF (21 CFR 101.36(e)) */
.sf-panel { width: 3in; background: #fff; color: #000; border: 0.5pt solid #000; padding: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 8pt; line-height: 1.25; }
.sf-title { font-weight: 700; font-size: 20pt; line-height: 1.05; letter-spacing: -0.2pt; white-space: nowrap; }
.sf-bar-heavy { height: 6pt; background: #000; margin: 1px 0; }
.sf-bar-group { height: 4pt; background: #000; }
.sf-bar-light { height: 1pt; background: #000; }
.sf-row { display: grid; grid-template-columns: 1fr 58pt 36pt; padding: 1px 0; }
.sf-row > span:last-child { text-align: right; }
.sf-row.sf-head { font-weight: 700; grid-template-columns: 1fr 0 auto; }
.sf-hair { border-bottom: 0.25pt solid #000; }
.sf-foot { font-size: 7pt; padding-top: 2px; }
.sf-net { width: 3in; font-family: Helvetica, Arial, sans-serif; font-size: 10pt; font-weight: 700; color: #000; margin: 10px 0 4px; }
.sf-other { width: 3in; font-family: Helvetica, Arial, sans-serif; font-size: 8pt; color: #000; margin-top: 4px; }

/* Pages that use the whole screen width (header included): the list pages, Tasks, the Dashboard and the Schedule. */
.app-main:has(.wide-page) > * { max-width: none; }

/* Drag handle on the right edge of a resizable column header. */
table.resizable th { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.col-resizer { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; }
.col-resizer:hover { background: var(--ns-blue-light); }
.col-resizer.active { background: var(--ns-blue); }
table.resizable td { overflow: hidden; }
table.resizable td .form-control, table.resizable td .form-select { min-width: 0; }
/* Picture boxes on the Finished Product Spec (js/image-crop.js) */
.spec-image { flex: 1 1 18rem; min-width: 16rem; max-width: 28rem; }
.spec-image[data-editing] { flex-basis: 100%; max-width: none; }
/* A finished good's page shows only its packaging picture, so it gets the room: about twice the usual size. */
#fg-artwork .spec-image { flex-basis: 100%; max-width: 56rem; }
#fg-artwork .spec-dropzone { height: 440px; }
@media (max-width: 767.98px) { #fg-artwork .spec-dropzone { height: 280px; } }
.spec-dropzone { height: 200px; display: flex; align-items: center; justify-content: center; padding: .5rem; background: #fff;
                 border: 2px dashed var(--ns-border); border-radius: .5rem; white-space: pre-line; }
.spec-dropzone[data-crop-zone] { cursor: pointer; }
.spec-dropzone[data-crop-zone]:hover, .spec-dropzone[data-crop-zone]:focus, .spec-dropzone.drag-over { border-color: var(--ns-blue); background: var(--ns-blue-light); outline: none; }
.spec-dropzone img { max-width: 100%; max-height: 100%; object-fit: contain; }
.spec-image[data-busy] .spec-dropzone { position: relative; pointer-events: none; }
.spec-image[data-busy] .spec-dropzone::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%230f75bc' stroke-width='5' stroke-linecap='round' stroke-dasharray='90 150'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 2.5rem no-repeat; border-radius: inherit; }
.spec-image[data-editing] .spec-dropzone, .spec-image[data-editing] .spec-image-actions { display: none !important; }
.crop-area { height: min(55vh, 420px); background: #f3f4f7; border-radius: .5rem; }
.crop-area img { display: block; max-width: 100%; }
.markup-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; background: #f3f4f7; border-radius: .5rem; }
.markup-color { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c9ccd6; padding: 0; }
.markup-color.active { box-shadow: 0 0 0 2px var(--ns-navy, #39378d); }

/* A dropdown of checkboxes (Allergens), built on <details> so it needs no script. */
.check-dropdown { position: relative; }
.check-dropdown > summary { list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-dropdown > summary::-webkit-details-marker { display: none; }
.check-dropdown-menu { position: absolute; z-index: 20; left: 0; right: 0; margin-top: .25rem; padding: .5rem .75rem; background: #fff;
                       border: 1px solid var(--ns-border); border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); }

/* Status badge on the Quotes list that opens a list of statuses to switch to. */
.status-picker-toggle { cursor: pointer; }
.status-picker-toggle:hover { filter: brightness(.92); }
.status-picker-caret { font-size: .75em; margin-left: .1em; }
.status-picker-menu { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 10rem; margin-top: .25rem; }
/* Drag-and-drop file boxes (customer Documents tab, Settings > Standard documents). The file input covers the box so
   dropped files land on it; clicking anywhere opens the file picker. */
.document-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
                     min-height: 7rem; padding: 1rem; background: #fff; border: 2px dashed var(--ns-border); border-radius: .5rem;
                     text-align: center; cursor: pointer; }
.document-dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.document-dropzone:hover, .document-dropzone:focus-within, .document-dropzone.drag-over { border-color: var(--ns-blue); background: var(--ns-blue-light); }
.document-dropzone[data-busy] { pointer-events: none; opacity: .7; }
.document-dropzone-sm { display: inline-flex; min-height: 0; padding: .25rem .75rem; font-size: .8rem; border-width: 1px; vertical-align: middle; }
/* Fill-in field editor (DocumentFieldEditor.razor, js/document-fields.js) */
.field-editor { position: fixed; inset: 0; z-index: 1060; display: flex; flex-direction: column; background: var(--ns-bg); }
.field-editor-bar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; background: #fff; border-bottom: 3px solid var(--ns-navy); }
.field-editor-body { flex: 1; display: flex; min-height: 0; }
.field-pages { flex: 1; overflow-y: auto; padding: 1rem 2rem 3rem; touch-action: none; }
.field-page { position: relative; max-width: 54rem; margin: 0 auto 1.5rem; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); cursor: crosshair; user-select: none; }
.field-page canvas { display: block; width: 100%; height: 100%; }
.field-page-number { max-width: 54rem; margin: 0 auto .25rem; font-size: .75rem; color: var(--bs-secondary-color); }
.field-box { position: absolute; border: 1.5px solid var(--ns-blue); background: rgba(15,117,188,.12); border-radius: 2px; cursor: move;
             font-size: .7rem; line-height: 1.1; color: var(--ns-blue); overflow: hidden; white-space: nowrap; padding: 0 2px; display: flex; align-items: flex-end; }
.field-box.signer { border-color: #2e8b57; background: rgba(46,139,87,.12); color: #2e8b57; }
.field-box.cover { background: rgba(255,255,255,.85); }
.field-box.selected { border-width: 2px; border-color: var(--ns-navy); box-shadow: 0 0 0 2px rgba(57,55,141,.25); color: var(--ns-navy); }
.field-handle { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; background: currentColor; cursor: nwse-resize; }
.field-panel { width: 20rem; flex-shrink: 0; overflow-y: auto; padding: 1rem; background: #fff; border-left: 1px solid var(--ns-border); }
.field-list li { margin-bottom: .25rem; }

/* Tables only scroll sideways on phones; on bigger screens they keep their old layout, so menus inside them
   (like the status picker on the Quotes list) aren't clipped. */
@media (min-width: 768px) { .table-responsive:not(.table-scroll) { overflow-x: visible; } }

/* ---- Phones and small tablets ---- */
/* Page title rows (title, filters, buttons) wrap instead of running off the screen. */
.page-head { flex-wrap: wrap; row-gap: .5rem; }
@media (max-width: 767.98px) {
    h1, .h3 { font-size: 1.4rem; }
    .page-head > h1 { flex-basis: 100%; margin-bottom: 0; }
    .page-head > .form-control, .page-head > .form-select { flex: 1 1 10rem; max-width: none !important; margin-right: 0 !important; }
    .page-head { column-gap: .5rem; }
    .page-head > .me-2, .page-head .btn.me-2 { margin-right: 0 !important; }
    .page-head .badge { order: -1; }

    /* Tabs scroll sideways on one line instead of stacking into several rows. */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; padding: .5rem .75rem; }

    /* Wide tables scroll sideways inside their panel; the page itself never does. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table-hover td { white-space: nowrap; }
    .table td .form-control, .table td .form-select { min-width: 6rem; }

    /* Long lists let the page scroll rather than a small box inside it. */
    .table-scroll { max-height: none !important; }
    .table-scroll > table > thead > tr > th { position: static; }
    main > .table-responsive.table-scroll { padding-top: .25rem; }

    .stat-tile { padding: .75rem .85rem; }
    .stat-label { font-size: .8rem; }
    .stat-value { font-size: 1.5rem; }
    .stat-note { font-size: .72rem; }
    main > .row.bare { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .status-row { grid-template-columns: 5.5rem 1fr 2.5rem; gap: .5rem; }
    .rep-chart .status-row { grid-template-columns: 7rem 1fr 2.5rem; }

    /* Bigger tap targets for small buttons. */
    .btn-sm { padding: .35rem .65rem; }

    /* The Quotes list status menu opens at the bottom of the screen, since the table it sits in scrolls sideways. */
    .status-picker-menu { position: fixed; top: auto; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1050; }
    .status-picker-menu .dropdown-item { padding: .6rem 1rem; }

    /* Dialogs use nearly the full screen. */
    .modal-dialog { margin: .5rem; }

    /* Fill-in field editor: the field list goes under the pages. */
    .field-editor-bar { flex-wrap: wrap; padding: .5rem .75rem; }
    .field-editor-body { flex-direction: column; }
    .field-pages { padding: .75rem .5rem 2rem; }
    .field-panel { width: auto; max-height: 45vh; border-left: 0; border-top: 1px solid var(--ns-border); }
    .spec-image { min-width: 0; flex-basis: 100%; }
}

/* Profile: signature pad and preview (Shipping & Receiving forms) */
.sig-pad { display: block; width: 100%; height: 140px; background: #fff; border: 1px dashed var(--line, #c9cbe0); border-radius: 10px; touch-action: none; cursor: crosshair; }
.sig-preview { min-height: 72px; display: flex; align-items: center; background: #fff; border: 1px solid var(--line, #e3e4f0); border-radius: 10px; padding: 8px 12px; }
.sig-preview img { max-height: 80px; max-width: 100%; }

/* MMR allergen / storage condition chips, in the MMR template's colors. */
.mmr-cond {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.7rem; height: 1.35rem; padding: 0 .3rem; border-radius: .3rem;
    font-size: .72rem; font-weight: 700; line-height: 1;
    background: var(--chip); color: var(--chip-text); border: 1px solid var(--chip);
}
button.mmr-cond { cursor: pointer; }
.mmr-cond.off { background: transparent; color: var(--ink-3); border-color: var(--line, #DCDAEA); font-weight: 500; }
.mmr-cond.off:hover { border-color: var(--chip); color: var(--ink); }
.mmr-cond-cell { min-width: 5.5rem; }
/* MMR bill of materials: does production stock cover each ingredient's total blend? */
#mmr-blend-table .stock-enough, #mmr-packaging .stock-enough, #mmr-stock-legend .stock-enough, #requirements .stock-enough, #requirements-legend .stock-enough, #requirement-detail .stock-enough { color: #157347; font-weight: 600; }
#mmr-blend-table .stock-on-order, #mmr-packaging .stock-on-order, #mmr-stock-legend .stock-on-order, #requirements .stock-on-order, #requirements-legend .stock-on-order, #requirement-detail .stock-on-order { color: #5cb85c; font-weight: 600; }
#mmr-blend-table .stock-short, #mmr-packaging .stock-short, #mmr-stock-legend .stock-short, #requirements .stock-short, #requirements-legend .stock-short, #requirement-detail .stock-short { color: #e89b00; font-weight: 600; }
#mmr-blend-table .stock-low, #mmr-packaging .stock-low, #mmr-stock-legend .stock-low, #requirements .stock-low, #requirements-legend .stock-low, #requirement-detail .stock-low { color: #dc3545; font-weight: 600; }
.mmr-cond-show { display: inline-flex; flex-wrap: wrap; gap: .2rem; align-items: center; border: 1px dashed transparent; border-radius: .35rem; background: none; padding: .15rem .25rem; min-height: 1.8rem; }
.mmr-cond-show:not(:disabled):hover { border-color: var(--ink-3); cursor: pointer; }
.mmr-cond-picker { display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; max-width: 11rem; }

/* Batch record preview on the MMR Film / Pouching / Packaging tabs. */
.bpr-preview { height: 80vh; min-height: 32rem; background: #fff; }
.bpr-settings td:first-child { min-width: 14rem; }

/* "The portal is being updated" box, shown by Blazor while it has lost the server (see App.razor, js/update-wait.js). */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center;
    background: rgba(20, 16, 60, .45); padding: 16px;
}
#components-reconnect-modal .reconnect-box {
    background: #fff; border-radius: 12px; padding: 1.25rem 1.5rem; max-width: 26rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
#components-reconnect-modal .reconnect-title { font-weight: 700; font-size: 1.15rem; margin-bottom: .5rem; }

/* Storage conditions, styled like the Receive form's pick list (Hub .multi): pills with the wall legend's colored codes. */
.storage-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.storage-pills button { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line, #DCDAEA); border-radius: 999px;
    background: #fff; padding: 6px 12px 6px 6px; font-weight: 600; font-size: 14px; color: var(--ink-2); line-height: 1.2; }
.storage-pills button.plain { padding-left: 12px; }
.storage-pills button[aria-pressed="true"] { border-color: var(--indigo); background: #EEEBFA; color: var(--ink); box-shadow: inset 0 0 0 1px var(--indigo); }
.storage-pills button:disabled { cursor: default; }
.storage-dot { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff; }
/* Read-only, in tables: the legend codes as small dots plus the names. */
.storage-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.storage-chips .storage-dot { min-width: 20px; height: 20px; font-size: 9px; }
.storage-chips .plain { font-size: 12px; color: var(--ink-2); }

/* Production schedule */
.sched-projects { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.sched-project { border: 1px solid var(--line); border-left: 4px solid var(--sched-color); border-radius: var(--radius-s); background: #fff; padding: 6px 8px; font-size: 14px; }
.sched-project.can-drag { cursor: grab; }
.sched-project.can-drag:hover { box-shadow: 0 1px 4px rgba(33, 29, 71, .15); }
.sched-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
/* A production status in its color (Settings > Production), with text chosen to read on it. */
.production-badge { display: inline-block; padding: .2em .6em; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.production-select { width: auto; max-width: 16rem; border-left: 6px solid var(--production-color, var(--line)); }
.sched-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.sched-legend span { display: inline-flex; align-items: center; gap: 5px; }
/* The three small months (ScheduleMonths): stacked beside the big calendar, side by side when there's room above it. */
.sched-months { position: relative; }
.sched-months-nav { position: absolute; top: 0; right: 2px; display: flex; gap: 10px; align-items: baseline; z-index: 1; }
.sched-months-nav .btn-link { text-decoration: none; font-size: 18px; line-height: 1; }
.sched-months-nav .btn-link.small { font-size: 12px; }
.sched-months-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 4px 16px; }
.sched-month { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.sched-month caption { caption-side: top; padding: 0 0 2px 2px; font-weight: 600; font-size: 13px; color: var(--ink); }
.sched-month th { text-align: center; font-weight: 600; color: var(--ink-2); padding: 0 0 2px; }
.sched-month td { padding: 0; text-align: center; }
.sched-day { display: flex; flex-direction: column; align-items: center; width: 100%; border: 0; background: none; padding: 1px 0 0;
    border-radius: 6px; color: var(--ink); cursor: pointer; }
.sched-day:hover, .sched-day:focus-visible { background: #EEEBFA; outline: none; }
.sched-day-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; line-height: 1; }
.sched-day.today .sched-day-n { background: var(--indigo); color: #fff; font-weight: 600; }
.sched-day.booked .sched-day-n { font-weight: 600; }
.sched-day.other { color: var(--ink-2); opacity: .45; }
.sched-dots { display: flex; gap: 2px; height: 6px; margin-bottom: 1px; }
.sched-dots i { width: 5px; height: 5px; border-radius: 50%; background: #C2571B; }
@media (forced-colors: active) { .sched-dots i { background: CanvasText; } }
/* Large screens: the project list stays 20rem wide and the calendar takes the rest (its height is set by schedule.js),
   with the three small months in a row above the calendar; on a wide screen they stack in a column to its right.
   On a phone everything stacks, the small months last. */
@media (min-width: 992px) {
    .sched-layout { display: grid; grid-template-columns: 20rem minmax(0, 1fr); grid-template-areas: "side months" "side main";
        align-items: start; gap: 1rem; margin: 0; }
    .sched-layout > * { width: auto; max-width: none; padding: 0; margin: 0; }
    .sched-layout > .sched-side { grid-area: side; }
    .sched-layout > .sched-main { grid-area: main; min-width: 0; }
    .sched-layout > .sched-months-col { grid-area: months; }
    /* Above the calendar: one short row of three, so the calendar keeps most of the height. */
    .sched-months-col .sched-months-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
    .sched-layout { grid-template-columns: 18rem minmax(0, 1fr) 16rem; grid-template-areas: "side main months"; }
    .sched-months-col .sched-months-grid { grid-template-columns: minmax(0, 1fr); }
}
#sched-calendar { --fc-border-color: var(--line); --fc-today-bg-color: #EEEBFA; --fc-button-bg-color: var(--indigo); --fc-button-border-color: var(--indigo);
    --fc-button-hover-bg-color: var(--indigo-deep); --fc-button-hover-border-color: var(--indigo-deep); --fc-button-active-bg-color: var(--indigo-deep);
    --fc-button-active-border-color: var(--indigo-deep); font-size: 14px; }
#sched-calendar .fc-toolbar-title { font-size: 1.15rem; }
#sched-calendar .sched-event { cursor: pointer; padding: 1px 4px; font-weight: 600; }
#sched-calendar a { color: inherit; text-decoration: none; }
#sched-calendar .fc-col-header-cell-cushion { font-weight: 600; color: var(--ink-2); }
/* Let a booking's name wrap in a narrow day instead of being cut off. */
#sched-calendar .fc-daygrid-block-event .fc-event-title { white-space: normal; overflow-wrap: anywhere; }

/* ---- Quiet look (from Taylor's Oct 16 Hub update): flat background, white page headers with a thin accent line in the
   menu group's color, softer shadows, no menu watermark. ---- */
.app-main { background: #F5F4F9; --accent: var(--indigo); }
.app-main::before, .app-rail::before { display: none; }
.app-main[data-area="sales"] { --accent: #3A3189; }
.app-main[data-area="planning"] { --accent: #6F42C1; }
.app-main[data-area="production"] { --accent: #0A8FC7; }
.app-main[data-area="shipping"] { --accent: #E3672E; }
.app-main[data-area="facilities"] { --accent: #2E7D5B; }

/* Facilities > Equipment */
.equipment-thumb { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); display: block; background: #fff; }
.equipment-thumb-empty { background: repeating-linear-gradient(45deg, #f4f3f9, #f4f3f9 6px, #fff 6px, #fff 12px); }
.equipment-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--radius-m); border: 1px solid var(--line); background: #fff; display: block; }
.equipment-photo-drop { min-height: 0; padding: .4rem; margin-top: .5rem; }
.spare-photo-drop { position: relative; display: block; width: 3rem; height: 3rem; cursor: pointer; }
.spare-photo-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.spare-photo-drop.drag-over .equipment-thumb { outline: 2px solid var(--ns-blue); }
/* The Equipment dashboard: a row of stat tiles. The number stays in ink; the state is the strip on the left plus an
   icon and words ("All clear", or what needs attention), so it never rests on color alone. A tile filters the list. */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.kpi-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; padding: .7rem .9rem .7rem 1rem;
            background: var(--paper, #fff); border: 1px solid var(--line); border-left: 4px solid var(--kpi-state, var(--line));
            border-radius: var(--radius-m); color: var(--ink, inherit); cursor: pointer; }
.kpi-tile:disabled { cursor: default; opacity: 1; }
.kpi-tile:not(:disabled):hover { box-shadow: 0 1px 6px rgba(33, 29, 71, .12); }
.kpi-tile[aria-pressed="true"] { outline: 2px solid var(--kpi-state, var(--ns-blue)); outline-offset: 1px; }
.kpi-tile[data-state="clear"] { --kpi-state: #2E7D5B; }
.kpi-tile[data-state="warning"] { --kpi-state: #D99A00; }
.kpi-tile[data-state="critical"] { --kpi-state: #C62828; }
.kpi-label { font-size: .8rem; font-weight: 600; color: var(--ink-2, #555); }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--ink-3, #666); }
.kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%;
            font-size: .65rem; font-weight: 700; color: #fff; background: var(--kpi-state); flex: none; }
@media (max-width: 767.98px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-value { font-size: 1.5rem; } }

/* Take photo opens the camera, so it's only offered on phones and tablets (a touch screen as the main pointer). */
.take-photo { display: none; align-items: center; justify-content: center; gap: .4rem; }
.take-photo[data-busy] { pointer-events: none; opacity: .7; }
@media (pointer: coarse) { .take-photo { display: flex; } }

/* Phones: a .table-stack shows each row as a card, its cells stacked with their data-label above them, instead of a
   table to scroll sideways. A .stack-media cell (a picture) sits at the card's left; a .stack-remove cell at its top right.
   Child selectors only, so a table inside a cell (maintenance history) keeps its own layout. */
@media (max-width: 767.98px) {
    .table-stack > thead { display: none; }
    .table-stack, .table-stack > tbody, .table-stack > tbody > tr, .table-stack > tbody > tr > td { display: block; width: 100%; }
    .table-stack > tbody > tr { position: relative; border: 1px solid var(--line); border-radius: var(--radius-s); padding: .5rem .6rem; margin-bottom: .5rem; background: #fff; }
    /* Text wraps within the card (tables elsewhere keep cells on one line), long words included. */
    .table-stack > tbody > tr > td { border: 0; padding: .2rem 0; box-shadow: none; background: transparent; white-space: normal; overflow-wrap: anywhere; }
    .table-stack > tbody > tr > td > div { white-space: normal; }
    /* A highlighted row (e.g. a spare with none on hand) colors the whole card, not each cell. */
    .table-stack > tbody > tr.table-warning { background: var(--bs-warning-bg-subtle); }
    .table-stack > tbody > tr.table-danger { background: var(--bs-danger-bg-subtle); }
    .table-stack > tbody > tr > td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--bs-secondary-color); margin-bottom: .1rem; }
    .table-stack > tbody > tr > td:empty { display: none; }
    .table-stack.has-media > tbody > tr { padding-left: 4.4rem; min-height: 4.2rem; }
    .table-stack > tbody > tr > td.stack-media { position: absolute; top: .55rem; left: .6rem; width: auto; padding: 0; }
    .table-stack > tbody > tr > td.stack-remove { position: absolute; top: .35rem; right: .5rem; width: auto; padding: 0; }
    .table-stack > tbody > tr > td.stack-actions { text-align: left !important; display: flex; flex-wrap: wrap; gap: .25rem; padding-top: .4rem; }
    .table-stack > tbody > tr.stack-full { padding-left: .6rem; }
    .table-stack > tbody > tr > td.text-end { text-align: left !important; }
    .equipment-photo { max-height: 14rem; }
    .equipment-photo.equipment-thumb-empty { aspect-ratio: auto; height: 5rem; }
}
.app-main[data-area="home"] { --accent: #241E5E; }
:root { --float: 0 1px 2px rgba(33, 29, 71, .05), 0 4px 14px -8px rgba(33, 29, 71, .14); }
main > .row, main > .table, main > .table-responsive, main > table, .card { border: 1px solid var(--line); }
main > .row.bare { border: 0; }
.page-head { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent, var(--indigo)); border-radius: var(--radius-m);
             padding: 18px 22px; box-shadow: 0 1px 2px rgba(33, 29, 71, .05); }
.page-head > h1, .page-head h1.h3 { font-size: 28px; }
.page-actions { background: rgb(245, 244, 249); } /* solid, so nothing shows through the pinned header and tabs */
@media (max-width: 767.98px) { .page-head { padding: 14px 16px; } .page-head > h1, .page-head h1.h3 { font-size: 22px; } }
/* Every page's title card stays at the top while the rest of the page scrolls under it (under the top bar on phones). */
.app-main .page-head { position: sticky; top: 0; z-index: 1010; }
@media (max-width: 767.98px) { .app-main .page-head { top: var(--topbar-h); } }

/* Large picture view (js/image-viewer.js) */
img[data-view] { cursor: zoom-in; }
.image-viewer { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(15, 18, 40, .92); flex-direction: column; }
.image-viewer.open { display: flex; }
.image-viewer-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; color: #fff; flex-wrap: wrap; }
.image-viewer-caption { font-weight: 600; }
.image-viewer-zoom { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.image-viewer-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.image-viewer-stage img { max-width: none; max-height: none; background: #fff; cursor: grab; transform-origin: center; user-select: none; touch-action: none; }
.image-viewer-stage img.dragging { cursor: grabbing; }
body.image-viewer-open { overflow: hidden; }

/* Customers list: the row Enter opens while searching (Customers.razor), clearer than the hover shade. */
.table > tbody > tr.customer-highlighted > td { background: var(--ns-blue-light); box-shadow: none; }
.table > tbody > tr.customer-highlighted > td:first-child { box-shadow: inset 3px 0 0 var(--ns-blue); }

/* A project's formulation once R&D has signed it off and it's locked (FormulationSignOffPanel.razor). */
.formulation-locked { border-left: 4px solid var(--bs-dark); background: var(--bs-tertiary-bg); }

/* A project tab's step dot (ProjectDetail.razor), colored like the Projects list (.step-dot). */
.tab-step { margin: 0 0 0 .35rem; width: 11px; height: 11px; }

/* A project's ordered amounts and lot number beside its name (ProjectDetail.razor). */
.project-stat { display: inline-flex; align-items: baseline; gap: .3rem; padding: .2rem .65rem; border-radius: 999px;
                background: var(--ns-blue-light); color: var(--bs-body-color); font-size: .85rem; white-space: nowrap; }

/* Projects list: one dot per planning step (ProjectSteps) */
.step-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 4px; vertical-align: middle; border: 2px solid transparent; }
a.step-dot:hover { box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.step-notstarted { border-color: #c4c9cf; background: transparent; }
.step-started { background: #3b82f6; }
.step-sent { background: #e89b00; }
.step-done { background: #198754; }
.step-rejected { background: #dc3545; }
/* A project's packaging materials on the Projects list, in the stock colors of .stock-enough and the rest. */
.pkg-enough { background: #157347; }
.pkg-on-order { background: #5cb85c; }
.pkg-short { background: #e89b00; }
.pkg-low { background: #dc3545; }
.pkg-none { border-color: #c4c9cf; background: transparent; }

/* Requirements: the list, with the clicked ingredient's details in a column on the right (stacked on narrow screens). */
.requirements-layout { display: flex; gap: 1rem; align-items: flex-start; }
.requirements-list { flex: 1 1 auto; min-width: 0; }
.requirements-detail { flex: 0 0 20%; min-width: 17rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
    border: 1px solid var(--line, #DCDAEA); border-radius: .5rem; padding: .75rem; background: var(--bs-body-bg, #fff); }
.requirements-detail .detail-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3, #6b6890); margin: .9rem 0 .3rem; }
/* Planned for: a colored bar on each project, so where the ingredient runs out stands out. */
.requirements-detail .detail-project { border-left: 4px solid transparent; padding-left: .5rem !important; font-size: .9rem; }
.requirements-detail .runout-stock-enough { border-left-color: #157347; }
.requirements-detail .runout-stock-on-order { border-left-color: #5cb85c; }
.requirements-detail .runout-stock-short { border-left-color: #e89b00; background: #fff8e6; }
.requirements-detail .runout-stock-low { border-left-color: #dc3545; background: #fdecee; }
.requirements-detail .use-badge { font-weight: 500; }
#requirements tbody tr[role="button"] { cursor: pointer; }
@media (max-width: 991.98px) {
    .requirements-layout { flex-direction: column; }
    .requirements-detail { position: static; flex-basis: auto; width: 100%; max-height: none; }
}

/* MMR Film: whether a machine's settings are tested. The picked one is filled in its color. */
.parameter-validation .btn { font-weight: 600; text-transform: none; letter-spacing: 0; }
.parameter-validation .validation-new { --bs-btn-color: #DC3545; --bs-btn-border-color: #DC3545; --bs-btn-hover-bg: #f8d7da; --bs-btn-hover-color: #a71d2a; --bs-btn-hover-border-color: #DC3545; }
.parameter-validation .btn-check:checked + .validation-new { background: #DC3545; border-color: #DC3545; color: #fff; }
.parameter-validation .validation-notvalidated { --bs-btn-color: #997404; --bs-btn-border-color: #FFC107; --bs-btn-hover-bg: #fff3cd; --bs-btn-hover-color: #664d03; --bs-btn-hover-border-color: #FFC107; }
.parameter-validation .btn-check:checked + .validation-notvalidated { background: #FFC107; border-color: #FFC107; color: #212529; }
.parameter-validation .validation-validated { --bs-btn-color: #198754; --bs-btn-border-color: #198754; --bs-btn-hover-bg: #d1e7dd; --bs-btn-hover-color: #0f5132; --bs-btn-hover-border-color: #198754; }
.parameter-validation .btn-check:checked + .validation-validated { background: #198754; border-color: #198754; color: #fff; }

/* A formulation line's % wet against its purpose's ideal share (Settings > Inventory > Purposes). */
/* Bootstrap colors table cells through --bs-table-color-state, which beats a plain color, so set both. */
.purpose-fit-ideal { --bs-table-color-state: #157347; color: #157347; font-weight: 600; }
.purpose-fit-off { --bs-table-color-state: #e89b00; color: #e89b00; font-weight: 600; }
.purpose-fit-outside { --bs-table-color-state: #dc3545; color: #dc3545; font-weight: 600; }
/* Ingredients and Packaging: the row under the mouse goes light gray, so it's clear which row you're working on.
   Bootstrap shades cells through --bs-table-bg-state (as .table-hover does). */
#ingredients-table > tbody > tr:hover > * { --bs-table-bg-state: #ebebef; }