/* ── Base typography ──────────────────────────────────────────────── */
html, body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    color: #111827;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* Page-level heading used on every page */
h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    padding-left: 0.75rem;
    border-left: 3px solid #2563eb;
    border-bottom: none;
    margin-bottom: 1.4rem;
    line-height: 1.3;
}

/* ── Links ───────────────────────────────────────────────────────── */
a, .btn-link {
    color: #2563eb;
}

a:hover {
    color: #1d4ed8;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    letter-spacing: 0.01em;
}

.btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.75rem;
    border-radius: 5px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #2563eb40;
}

/* ── Forms ───────────────────────────────────────────────────────── */
.form-control, .form-select {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.875rem;
    border-color: #d1d5db;
    border-radius: 8px;
}

.form-control:focus, .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #2563eb20;
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.3rem;
}

/* ── Content area ────────────────────────────────────────────────── */
.content {
    padding-top: 1.25rem;
}

h1:focus {
    outline: none;
}

/* ── Validation ──────────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #16a34a;
}

.invalid {
    outline: 1px solid #dc2626;
}

.validation-message {
    color: #dc2626;
    font-size: 0.8125rem;
}

/* ── Blazor error boundary ────────────────────────────────────────── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2ZyA+) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 6px;
}

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

/* ── Navbar branding logo ─────────────────────────────────────── */
.sqmw-brand {
    padding: 4px 0;
    display: flex;
    align-items: center;
}

.sqmw-logo {
    /* Sits directly on the white header -- no contrast pill needed, so a
       customer's own logo (almost always designed for white) looks native. */
    height: 34px;
    width: auto;
    object-fit: contain;
}

/* ── Shared plain Bootstrap table ────────────────────────────── */
.sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sg-table thead th {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    padding: 7px 10px;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    white-space: nowrap;
}

.sg-table.sg-sortable thead th.sg-sort {
    cursor: pointer;
    user-select: none;
}

.sg-table.sg-sortable thead th.sg-sort:hover {
    background: #f3f4f6;
    color: #374151;
}

.sg-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.sg-table tfoot td {
    padding: 7px 10px;
    border-top: 2px solid #e5e7eb;
    font-weight: 600;
}

.sg-table tbody tr:hover {
    background: #f9fafb;
}

.sg-table tbody tr.sg-selected {
    background: #eff6ff;
}

.sg-table tbody tr.sg-selected:hover {
    background: #dbeafe;
}

/* ── Icon buttons in table action columns ────────────────────── */
.sg-icon-btn {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 2px 5px;
    cursor: pointer;
    line-height: 1;
    color: #4b5563;
    transition: background 0.12s, border-color 0.12s;
}

.sg-icon-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.sg-icon-btn.danger {
    color: #dc2626;
    border-color: #fecaca;
}

.sg-icon-btn.danger:hover {
    background: #fef2f2;
    border-color: #fca5a5;
}

.sg-icon-btn .material-icons {
    font-size: 16px;
    vertical-align: middle;
    line-height: 1.4;
}

/* ── Shared pager ────────────────────────────────────────────── */
.sg-pager {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
}

.sg-page-btn {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
    color: #374151;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.12s;
}

.sg-page-btn:hover:not(:disabled) { background: #f3f4f6; }

.sg-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.sg-page-btn.sg-page-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 600;
}

/* ── PSW pages ───────────────────────────────────────────────── */
.psw-page { max-width: 1100px; }

.psw-project-header {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px 6px 0 0;
    padding: 8px 12px;
    margin-bottom: 0;
}

.psw-project-group .sg-table {
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.psw-proj-name { color: #111827; }
.psw-proj-pct  { font-size: 0.8rem; color: #6b7280; }

.psw-progress-bar {
    width: 100px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.psw-progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 5px;
    min-width: 2px;
}

.psw-closed { opacity: 0.6; }
.psw-admin-links a { font-size: 0.8rem; }

/* ── Shared filter toolbar ───────────────────────────────────── */
.filter-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ── PPM Report page ─────────────────────────────────────────── */
.ppm-page { max-width: 1100px; }

.ppm-chart-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.ppm-chart-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* ── ASN pages ───────────────────────────────────────────────── */
.asn-page { max-width: 1100px; }

.asn-orders-table th,
.asn-orders-table td { white-space: nowrap; }

.asn-parts-table input[type=number] {
    max-width: 120px;
}

.asn-slot-table { max-width: 500px; }

/* ── Admin Users page ────────────────────────────────────────── */
/* Widened 2026-09-03 for the Groups + Last login columns. */
.admin-users-page { max-width: 1200px; }
.admin-users-page .au-actions { white-space: nowrap; }

/* ── Library page ────────────────────────────────────────────── */
.lib-page { max-width: 900px; }

/* ── Shared form overlay / panel ────────────────────────────── */
.sc-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.40);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-form-panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.16);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
}

.sc-form-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1.25rem;
    color: #111827;
}

/* ── Variables page ──────────────────────────────────────────── */
.vars-page { max-width: 860px; }

.vars-group-header {
    font-weight: 700;
    font-size: 0.875rem;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px 6px 0 0;
    padding: 6px 12px;
    margin-bottom: 0;
}

.vars-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.vars-table th {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    padding: 6px 10px;
    font-weight: 600;
    color: #374151;
}

.vars-table td {
    border-bottom: 1px solid #f3f4f6;
    padding: 6px 10px;
    vertical-align: middle;
}

.vars-table tbody tr:last-child td { border-bottom: none; }

.vars-desc {
    width: 50%;
    color: #374151;
}

.vars-input {
    max-width: 340px;
}

/* ── Row-actions ellipsis button (shared RowActions component) ───── */
.row-actions-btn {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: 2px 4px;
    cursor: pointer;
    color: #6b7280;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.row-actions-btn:hover {
    background: #eef2f7;
    color: #111827;
}

.row-actions-btn .material-icons {
    font-size: 18px;
    vertical-align: middle;
}

/* ── Supplier Scorecard score cards (global: rendered via RenderTreeBuilder,
   which gets no CSS-isolation attribute, so scoped rules can't reach them) ── */
.bsc-score-card {
    border-radius: 6px;
    padding: 14px 10px;
    text-align: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    /* equal height + vertically centred, however long the label wraps */
    height: 100%;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bsc-score-card.score-green {
    background: #d1e7dd;
    border-color: #a3cfbb;
}

.bsc-score-card.score-amber {
    background: #fff3cd;
    border-color: #ffda6a;
}

.bsc-score-card.score-red {
    background: #f8d7da;
    border-color: #f1aeb5;
}

.bsc-score-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: #212529;
}

.bsc-score-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── 8D form helper-rendered sections (global: RenderTreeBuilder output
   carries no CSS-isolation attribute) ─────────────────────────────── */
.ed-checkoff-done .ed-checkoff-label {
    color: #166534;
}
/* ── Fishbone panels ─────────────────────────────────────── */
.ed-fishbone-panel {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
}
/* ── Section headers ─────────────────────────────────────── */
.ed-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0f6ff;
    border-left: 3px solid #2563eb;
    border-radius: 0 6px 6px 0;
    padding: 8px 14px;
    margin-bottom: 16px;
}
/* ── Checkoff card ───────────────────────────────────────── */
.ed-checkoff-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    margin-top: 24px;
}
.ed-checkoff-card.ed-checkoff-done {
    background: #f0fdf4;
    border-color: #86efac;
}

.ed-section-header h5 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 0;
}

.ed-fishbone-header {
    background: #374151;
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 5px 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ed-fishbone-list {
    list-style: none;
    margin: 0;
    padding: 6px 8px;
    min-height: 60px;
    font-size: 0.83rem;
}

.ed-fishbone-list li {
    padding: 3px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.ed-fishbone-list li:last-child {
    border-bottom: none;
}

.ed-fishbone-list li span {
    flex: 1;
}

.ed-checkoff-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.875rem;
    color: #374151;
}

.ed-checkoff-icon {
    color: #22c55e;
    font-size: 20px !important;
}

/* ── Radzen theme override (2026-08-30) ──────────────────────────────────
   The default Radzen theme's primary colour is ORANGE, which clashed with
   the app's blue brand accent. Point every Radzen primary token at the
   brand blue instead — this recolours all RadzenButton Primary buttons,
   checkboxes, progress bars etc. app-wide (app.css loads after the theme,
   so these variables win). */
:root {
    --rz-primary: #2563eb;
    --rz-primary-light: #3b82f6;
    --rz-primary-lighter: rgba(37, 99, 235, 0.14);
    --rz-primary-dark: #1d4ed8;
    --rz-primary-darker: #1e40af;
    --rz-on-primary: #ffffff;
}

/* ── Global print helper (2026-08-30) ────────────────────────────────────
   Any element marked no-print disappears when the page is printed
   (browser Print → Save as PDF is the app's report-to-PDF route). */
@media print {
    .no-print { display: none !important; }
    .sqmw-navbar, nav.navbar { display: none !important; }
    .supplier-view-banner { display: none !important; }
}

/* ── "Viewing as supplier" banner (2026-09-03) ───────────────────────────
   Deliberately loud: amber stripe under the navbar so a customer can never
   forget they are looking at (and writing to) the portal as a supplier. */
.supplier-view-banner {
    background: #fef3c7;
    border-top: 3px solid #f59e0b;
    border-bottom: 1px solid #fcd34d;
    color: #78350f;
    font-size: 0.95rem;
}
.supplier-view-banner .svb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.55rem 1rem;
}
.supplier-view-banner .svb-icon { font-size: 1.15rem; }
.supplier-view-banner .svb-text { flex: 1 1 320px; }
.supplier-view-banner .svb-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    white-space: nowrap;
}
.supplier-view-banner .svb-switch select,
.supplier-view-banner .svb-switch input {
    max-width: 320px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    font: inherit;
}
.supplier-view-banner .svb-exit {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    background: #78350f;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.supplier-view-banner .svb-exit:hover { background: #92400e; color: #fff; }

/* A money figure that has been converted from the stored GBP base carries the
   working on hover (base value, rate, result, rate source). The dotted rule is
   the only hint that there is something to hover — deliberately faint, since
   most readers never need it. */
.money-converted {
    border-bottom: 1px dotted #9ca3af;
    cursor: help;
}

/* ── ASL rating pills (2026-09-04) ────────────────────────────────────────
   GLOBAL, not scoped: these cells are produced by a RenderFragment using
   AddMarkupContent, and builder-rendered markup carries no scope attribute,
   so a rule in the page's .razor.css would never match it.

   Deliberately the same colours and shape as the dashboard's rating chips
   (.dash-chip-*), so a supplier's standing looks identical wherever it is
   shown. Every pill is the same width, so they line up as a column rather
   than ragging with the length of the word. */
.asl-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 138px;
    padding: 4px 8px 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.asl-pill-unrated      { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; font-weight: 500; }
.asl-pill-preferred    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.asl-pill-acceptable   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.asl-pill-conditional  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.asl-pill-unacceptable { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* The rating columns were sharing the table's spare width evenly, so each was
   176px holding a 112px pill -- 64px of dead space per column, which read as a
   gap between Quality and Delivery. Sizing them to their content lets the
   supplier name column absorb the slack instead. */
.asl-table th.asl-col-rating { width: 150px; }

/* Cells hold a fixed-width pill, so they align left rather than centring. */
.asl-table td.text-center:has(.asl-pill) { text-align: left !important; }

/* Movement arrows are also builder-rendered, so they belong here too. */
.asl-move {
    font-size: 1.05rem;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
    font-weight: 700;
}
.asl-move-up { color: #15803d; }
.asl-move-down { color: #b91c1c; }
.asl-move-new {
    font-size: 0.62em; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: #6b7280; background: #f3f4f6;
    border-radius: 3px; padding: 1px 4px;
}

/* ── 8D Status marks (2026-09-04) ─────────────────────────────────────────
   GLOBAL for the same reason as the ASL dots: these cells are produced by a
   RenderFragment via AddMarkupContent, which carries no scope attribute, so
   rules in the page's scoped stylesheet would never match.

   Replaces four fully shaded date cells per row. The mark says which of the
   three states applies and the title attribute says it in words. */
.d8-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.d8-mark {
    flex: 0 0 12px;
    width: 12px;
    text-align: center;
    font-size: 0.8em;
    line-height: 1;
    cursor: help;
}

.d8-mark-overdue { color: #dc2626; font-weight: 700; }
.d8-mark-late    { color: #d97706; }
.d8-mark-ontime  { color: #16a34a; }
.d8-na           { color: #9ca3af; }

/* ── Supplier Balanced Scorecard, printed (2026-09-04) ────────────────────
   GLOBAL, and that is the whole point: the score cards are built by a
   RenderFragment, and builder-rendered markup carries no scope attribute, so
   the print rules that used to sit in SupplierBSC.razor.css never applied to
   them. Hence "still formatted really badly, no change".

   Two problems were producing a five-page scorecard that should be one:

   1. Everything was too big. The screen sizes are generous because a monitor
      is generous; on paper they have to be much tighter.

   2. "page-break-inside: avoid" was on .bsc-section. When a section did not
      fit in what remained of a page it jumped to the next one whole, leaving
      most of the previous page blank -- which is exactly what the PDF showed.
      Only table ROWS should avoid breaking; sections must be free to flow. */
@media print {
    @page { size: A4 portrait; margin: 8mm; }

    .bsc-page {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 6.5pt !important;
        line-height: 1.2 !important;
    }

    .bsc-page h2 { font-size: 10pt !important; margin: 0 0 3px !important; }
    .bsc-page h3,
    .bsc-page h4 { font-size: 7.5pt !important; margin: 5px 0 2px !important; }
    .bsc-page p  { margin: 0 0 3px !important; }

    /* Sections flow; only rows are kept whole. */
    .bsc-section { page-break-inside: auto !important; break-inside: auto !important; margin-bottom: 6px !important; }
    .bsc-header  { page-break-inside: avoid; break-inside: avoid; margin-bottom: 6px !important; }

    .bsc-pivot-table tbody tr,
    .bsc-concern-table tbody tr { page-break-inside: avoid; }

    /* Score indicators: ALL of them on one row.
    
       They are laid out with Bootstrap's "col-6 col-md-4 col-lg-2". Print has
       no md/lg breakpoint, so every card fell back to col-6 -- half the page
       width each. Twelve indicators therefore became six stacked rows and ate
       a whole page on their own.
    
       Overriding the column basis puts all twelve across in a single row.
       Targeted with :has() so only the indicator rows are affected and the
       rest of the page's grid is left alone. */
    .bsc-page .row:has(.bsc-score-card) {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin: 0 0 6px !important;
    }

    .bsc-page .row:has(.bsc-score-card) > [class*="col-"] {
        flex: 1 1 0 !important;
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* height: 100% (not auto) so every card is the depth of the tallest in its
       row. The columns stretch by default, so the cards fill them and the row
       reads as one even band rather than a ragged set of boxes. */
    .bsc-score-card {
        padding: 2px 1px !important;
        min-height: 0 !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 3px !important;
        justify-content: center !important;
    }

    .bsc-score-value { font-size: 7pt !important; line-height: 1.05 !important; }
    .bsc-score-label { font-size: 4.2pt !important; line-height: 1.05 !important; word-break: break-word; }

    .table-responsive { overflow: visible !important; }

    .bsc-pivot-table,
    .bsc-concern-table {
        table-layout: fixed !important;
        width: 100% !important;
        font-size: 5.8pt !important;
    }

    .bsc-pivot-table th, .bsc-pivot-table td,
    .bsc-concern-table th, .bsc-concern-table td {
        padding: 1px 3px !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.15 !important;
    }

    .bsc-pivot-table thead th.metric-col { min-width: 0 !important; }

    /* Keep the colour coding -- it is the point of a scorecard. */
    .bsc-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .bsc-page .rz-button, .bsc-page button { display: none !important; }
}

/* PSW Status renders ONE TABLE PER PROJECT down the page. Each sized its own
   columns from its own supplier names, so the "% Complete" column started at a
   different x in each block and the page read as jogging rather than straight
   (2026-09-04). Fixing the layout and the supplier width makes every project
   table identical, so the bars and percentages form one clean column top to
   bottom. */
.psw-page .sg-table { table-layout: fixed; }
.psw-page .sg-table th:first-child,
.psw-page .sg-table td:first-child { width: auto; }

/* PSW "% Complete" (2026-09-04). The bar and its number were centred in the
   cell, so with variable-width text ("5%" against "100%") both shifted from
   row to row and the numbers never lined up. Left-aligning the pair fixes the
   bar's start, and a fixed-width right-aligned number puts the digits in a
   column. The explicit column width also stops the cell taking a share of the
   table's spare space, which was leaving a wide gap beside Supplier. */
.psw-pct-col {
    width: 170px;
    text-align: left;
}

.psw-pct-value {
    width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex: 0 0 38px;
}

/* ── Pareto chart on the Cost of Quality pages (2026-09-04) ───────────────
   The headline sentence sits beside the title, because "6 of 210 suppliers
   are 80% of the cost" is the finding -- the chart is the evidence for it. */
.pareto-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px 4px;
    background: #fff;
}

.pareto-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.pareto-title { font-weight: 600; font-size: 0.9rem; color: #374151; }

.pareto-insight {
    font-size: 0.82rem;
    color: #6b7280;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: 2px 10px;
}

.pareto-insight strong { color: #b91c1c; }

@media print {
    .pareto-wrap { break-inside: avoid; page-break-inside: avoid; }
}

/* PSW status page: accepted progress bar (package B, 2026-09-05) */
.psw-progress-fill.accepted { background: #15803d; }

/* PSW status: needs-attention strip + pills (package D, 2026-09-05) */
.psw-attention {
    border: 1px solid #fde68a;
    background: #fffbeb;
    border-radius: 8px;
    padding: 10px 14px;
}
.psw-attention-title {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: #b45309; font-weight: 700; margin-bottom: 6px;
}
.psw-attention-title .rzi { font-size: 1rem; }
.psw-attention-items { display: flex; flex-wrap: wrap; gap: 8px; }
.psw-att-pill {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
.psw-att-review   { background: #dbeafe; color: #1d4ed8; }
.psw-att-overdue  { background: #fee2e2; color: #b91c1c; }
.psw-att-rejected { background: #fee2e2; color: #b91c1c; }
.psw-att-nolevel  { background: #e2e8f0; color: #475569; }

/* Concern list quick-filter chips (2026-09-05) */
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.cl-chip {
    border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
    border-radius: 999px; padding: 3px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.cl-chip:hover { border-color: #93c5fd; color: #1d4ed8; }
.cl-chip.active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* ASL: certificates are a document status, shown last and quieter (2026-09-05) */
.asl-col-certs { opacity: 0.85; }

/* Phone menu: CSS-only toggle (2026-09-05) */
.sqmw-nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sqmw-nav-toggle:checked ~ .navbar-collapse { display: block !important; }
.navbar-toggler { cursor: pointer; margin-left: auto; }

/* Navbar search (2026-09-05) */
.sqmw-nav-search { display: flex; align-items: center; gap: 4px; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 10px; margin-right: 8px; background: #f8fafc; }
.sqmw-nav-search .rzi { font-size: 1.1rem; color: #64748b; }
.sqmw-nav-search input { border: 0; background: transparent; outline: none; width: 170px; font-size: 0.85rem; }
@media (max-width: 991px) { .sqmw-nav-search { margin: 6px 0; } .sqmw-nav-search input { width: 100%; } }

/* Supplier 8D badge (2026-09-05) */
.s8d-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; margin-left: 4px; }

/* Charges pills (2026-09-05) */
.ch-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.ch-accepted { background: #dcfce7; color: #166534; }
.ch-disputed { background: #fee2e2; color: #b91c1c; }
.ch-none { background: #e2e8f0; color: #475569; }
.ch-detail { background: #f8fafc; padding: 8px 12px 12px; }

/* Concern form: repeat banner + photos (2026-09-05) */
.cef-repeat { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: #fffbeb; border: 1px solid #fde68a; font-size: 0.85rem; }
.cef-repeat .rzi { color: #b45309; font-size: 1.1rem; }
.cef-photos { padding: 8px 10px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; }

/* Concern attachments: scan-to-upload (2026-09-05) */
.cl-qr-box { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; background: #fff; }
.cl-qr-box img { border: 1px solid #e2e8f0; border-radius: 6px; }

/* Library acknowledgement (2026-09-05) */
.lib-ack-done { color: #15803d; font-weight: 600; font-size: 0.85rem; }

/* ASL pill internals (2026-09-05): label centred in the space, movement on the right */
.asl-pill-label { flex: 1; text-align: center; }
.asl-pill-arrow { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; flex: 0 0 auto; }
.asl-pill-arrow .rzi { font-size: 16px; font-weight: 700; }
.asl-pill-up   { background: #15803d; color: #fff; }
.asl-pill-down { background: #b91c1c; color: #fff; }
.asl-pill-new  { width: auto; height: auto; padding: 1px 5px; border-radius: 4px; background: #fff; color: #475569; font-size: 0.6rem; letter-spacing: 0.04em; }

/* Supplier profile links in lists (2026-09-05) */
.asl-name-link, .sl-name-link, .cl-supplier-link { color: inherit; text-decoration: none; border-bottom: 1px dotted #94a3b8; }
.asl-name-link:hover, .sl-name-link:hover, .cl-supplier-link:hover { color: #1d4ed8; border-bottom-color: #1d4ed8; }
.cl-drawer-supplier { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; font-size: 0.85rem; font-weight: 500; color: #1d4ed8; text-decoration: none; }
.cl-drawer-supplier .rzi { font-size: 0.95rem; }
.cl-drawer-phone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: 6px 0 4px; border: 1px dashed #93c5fd; border-radius: 8px; background: #eff6ff; }
@media print { .no-print-link { color: inherit !important; text-decoration: none !important; } }

/* Help panel (2026-09-05): keep it clear of an open page drawer. The drawers
   are fixed to the right edge (Supplier Admin 560px / pinned 460px, Concern
   List 440px / pinned 380px), so the help slides left of them instead of
   covering them. On narrow screens it stays put and sits on top. */
@media (min-width: 1100px) {
    body:has(.sl-drawer) .hlp-panel { right: calc(min(560px, 94vw) + 24px); }
    body:has(.sl-drawer.sl-drawer-pinned) .hlp-panel { right: 484px; }
    body:has(.cl-drawer) .hlp-panel { right: 464px; }
    body:has(.cl-drawer.cl-drawer-pinned) .hlp-panel { right: 404px; }
}