/* ── 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;
}

/* ── Sticky footer (2026-09-08) ───────────────────────────────────────
   The copyright/licensee line belongs at the FOOT OF THE PAGE, not
   directly under the content: on a short page it floated up under the
   last paragraph, where it reads as part of the content rather than as
   the page footer.

   Body becomes a flex column at least as tall as the viewport, and the
   content area takes the slack -- so the footer is pushed to the bottom
   on a short page and simply follows the content on a long one.
   min-height, not height, so a long page still grows normally. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.app-content > .content {
    flex: 1 0 auto;
}

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;
    /* 1.4rem here put 21px of nothing under the title of every page in the app
       before any content started (2026-09-08 density pass). */
    margin-bottom: 0.7rem;
    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;
}

/* Row padding is the single biggest lever on how much data fits a screen:
   .sg-table is used by 22 pages, and 3px off the top and bottom of every row
   is roughly three extra rows per screen without shrinking any text. */
.sg-table thead th {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
    padding: 4px 8px;
    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: 3px 8px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.sg-table tfoot td {
    padding: 4px 8px;
    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;
}

/* Date pills, the same shape as the chips used elsewhere (2026-09-06):
   the date is the pill, its colour is the state. */
.d8-pill {
    display: inline-block;
    min-width: 7.25rem;
    text-align: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: default;
}

.d8-pill[title] { cursor: help; }

.d8-pill-overdue { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.d8-pill-late    { background: #fef9c3; border-color: #fde68a; color: #854d0e; }
.d8-pill-ontime  { background: #ecfdf5; border-color: #bbf7d0; color: #15803d; }
.d8-pill-open    { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.d8-pill-verify  { background: #e0e7ff; border-color: #c7d2fe; color: #3730a3; }
.d8-pill-waiting { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.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 {
    /* Every printed page in the app is A4 portrait by default -- the concern
       report, the 8D pack and the certificate register all match their legacy
       RDLC page setup that way.
       Both @page rules have to live in this GLOBAL stylesheet. @page is a
       document-level at-rule, so Blazor's scoped CSS cannot attach a component's
       [b-xxxxx] marker to it: a copy in any .razor.css ends up in the shared
       bundle and silently re-sizes every printed page in the app. That is exactly
       what happened when ConcernStats declared landscape in its own scoped file
       (fixed 2026-09-08). A page that genuinely needs landscape claims the named
       page below with "page: wide" instead. */
    @page { size: A4 portrait; margin: 5mm; }
    @page wide { size: A4 landscape; margin: 5mm; }

    .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; }
/* The training supplier (2026-09-09). Amber, not red: seeing it is normal and
   wanted, but it must never be mistaken for a real supplier, so it is marked
   everywhere it legitimately appears. */
.sl-training { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px;
               background: #fef3c7; color: #92400e; font-size: 0.62rem; font-weight: 700;
               letter-spacing: 0.06em; vertical-align: middle; }
.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; }
}

/* Supplier self-assessment questionnaires (2026-09-07). Shared by the four
   pages (/my-questionnaires, /my-questionnaire, /questionnaires,
   /questionnaire) so the styles live once, here, rather than in four scoped
   copies. Plain HTML forms, static server-rendered. */
.qn-page { max-width: 1100px; }
.qn-intro { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; white-space: pre-line; color: #334155; }
.qn-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-bottom: 18px; }
.qn-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; min-width: 180px; flex: 1 1 180px; }
.qn-card .lbl { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700; }
.qn-card .val { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.qn-card .sub { font-size: .85rem; color: #64748b; margin-top: 2px; }
.qn-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.qn-pill-green { background: #dcfce7; color: #166534; }
.qn-pill-amber { background: #fef3c7; color: #92400e; }
.qn-pill-red   { background: #fee2e2; color: #991b1b; }
.qn-pill-grey  { background: #e2e8f0; color: #475569; }
.qn-pill-blue  { background: #dbeafe; color: #1e40af; }
.qn-section { margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 2px solid #e2e8f0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.qn-section h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.qn-section .meta { font-size: .85rem; color: #64748b; }
.qn-bar { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.qn-bar > span { display: block; height: 100%; background: #2563eb; }
.qn-q { padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.qn-q.hidden { display: none; }
.qn-q .title { font-weight: 600; }
.qn-q .title .key { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.qn-q .help { font-size: .85rem; color: #64748b; margin-top: 2px; }
.qn-q .answer { margin-top: 8px; }
.qn-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.qn-scale label { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 10px; font-size: .88rem; cursor: pointer; background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.qn-scale label:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.qn-scale input { margin: 0; }
.qn-yesno { display: inline-flex; gap: 6px; }
.qn-yesno label { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 14px; cursor: pointer; background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.qn-yesno label:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.qn-na { font-size: .85rem; color: #64748b; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.qn-note { margin-top: 6px; }
.qn-note input, .qn-q textarea, .qn-q input[type="text"], .qn-q input[type="number"], .qn-q input[type="date"] { width: 100%; max-width: 620px; }
.qn-files { list-style: none; padding: 0; margin: 6px 0; font-size: .9rem; }
.qn-files li { display: flex; gap: 10px; align-items: center; }
.qn-actions { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: 12px 0; margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qn-actions .note { color: #64748b; font-size: .85rem; }
.qn-passnote { font-size: .85rem; color: #64748b; margin: -8px 0 18px; max-width: 800px; }
/* Auto-save tell-tale: quiet when it is working, loud only when it is not. */
.qn-saved { font-size: .82rem; color: #16a34a; font-weight: 600; }
.qn-saved.pending { color: #94a3b8; font-weight: 400; }
.qn-saved.bad { color: #b91c1c; }
.qn-danger { margin-top: 28px; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; background: #fef2f2; }
.qn-danger summary { cursor: pointer; font-weight: 600; color: #991b1b; }
.qn-danger p { margin: 10px 0; font-size: .9rem; color: #7f1d1d; max-width: 760px; }
/* The declaration is the last thing read before submitting, so it gets its own
   block rather than a line of small print next to the buttons. */
.qn-declare { margin-top: 22px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 16px; }
.qn-declare label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.qn-declare input { margin-top: 3px; flex: 0 0 auto; }
.qn-declare span { color: #78350f; font-size: .92rem; }
.qn-review-answer { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.qn-review-answer .meaning { font-size: .85rem; color: #64748b; }
.qn-scale-key { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .85rem; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.qn-scale-key b { font-variant-numeric: tabular-nums; }
.qn-table { width: 100%; border-collapse: collapse; font-size: .93rem; background: #fff; }
.qn-table th { text-align: left; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.qn-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.qn-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qn-send { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
/* A label here is a phrase on one line ("Send X to"), NOT a stacked field.
   This rule used to say flex-direction: column for every label in the form,
   which broke "Send <b>name</b> to" onto three lines and forced every other
   label added since to override it. Only the captioned fields stack, and they
   say so with .qn-field (2026-09-09). */
.qn-send label { display: inline-flex; align-items: baseline; gap: 5px; font-size: .85rem; color: #475569; }
.qn-send label b { color: #1e293b; }
.qn-send .qn-field { flex-direction: column; align-items: flex-start; gap: 3px; }
/* The same explainer folded into the all-help page. */
.help-explainer { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; padding: 10px 14px; }
.help-explainer > summary { cursor: pointer; font-weight: 600; color: #3730a3; font-size: .88rem; }
.help-explainer[open] > summary { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.help-explainer .dg { max-width: 780px; }

/* ── Help explainer: a window over the help panel for one difficult subject
   (2026-09-09). The panel itself stays deliberately backdrop-less so people
   can click around while following it; this is something to read, so it gets
   a backdrop and sits above everything. */
.hlp-explainer-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 8px 13px;
                     border: 1px solid #c7d2fe; border-radius: 8px; background: #eef2ff; color: #3730a3;
                     font-size: .84rem; font-weight: 600; cursor: pointer; }
.hlp-explainer-btn:hover { background: #e0e7ff; }
.hlp-explainer-btn .rzi { font-size: 1.05rem; }

.hlp-modal-back { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1400; }
.hlp-modal { position: fixed; z-index: 1401; top: 50%; left: 50%; transform: translate(-50%, -50%);
             width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px);
             display: flex; flex-direction: column;
             background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.hlp-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #e2e8f0; }
.hlp-modal-title { font-weight: 700; color: #0f172a; font-size: 1rem; }
.hlp-modal-head .hlp-close { margin-left: auto; }
.hlp-modal-body { overflow-y: auto; padding: 18px 22px 24px; }

/* The explainer's own content. Kept narrow-column and generously spaced:
   it is a page to read, not a panel to scan. */
.dg { color: #1e293b; font-size: .88rem; line-height: 1.62; }
.dg h4 { font-size: .92rem; font-weight: 700; color: #0f172a; margin: 22px 0 7px; }
.dg h4:first-of-type { margin-top: 6px; }
.dg p { margin: 0 0 11px; }
.dg-lead { font-size: .95rem; color: #0f172a; border-left: 3px solid #6366f1; padding-left: 13px; }
.dg-note { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 7px; padding: 10px 13px; color: #475569; }
.dg-list { margin: 0 0 11px; padding-left: 20px; }
.dg-list li { margin-bottom: 7px; }
.dg-svg { width: 100%; height: auto; margin: 6px 0 16px; display: block; }

/* Who the questionnaire goes to: the groups first, the ticked list only when
   "Choose from the list" is picked. Full width so the options read as a list
   of choices rather than as more controls on the same row. */
.qn-scope { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 4px 2px 2px; }
.qn-scope-opt { align-items: center; gap: 7px; white-space: nowrap; font-size: .85rem; color: #1e293b; cursor: pointer; }
.qn-scope-opt input { flex: none; }
.qn-scope-opt select:disabled { opacity: .55; }

/* Supplier picker on the questionnaire send form: a ticked list, kept to a
   fixed height so a long supplier list does not push the Send button off the
   screen. Full width of the form so it sits under the controls, not beside. */
.qn-picker { flex-basis: 100%; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.qn-picker-bar { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.qn-picker-bar input[type=search] { max-width: 260px; }
.qn-picker-list { max-height: 240px; overflow-y: auto; padding: 6px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; }
.qn-picker-item { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: .85rem; color: #1e293b; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.qn-picker-item:hover { background: #eef2f7; }
.qn-picker-item input { flex: none; }
/* The name has to be allowed to shrink before it can be clipped: a flex
   item's floor is its content width until min-width says otherwise, so
   without this the row widens and the grid column stretches instead of
   the text ending in an ellipsis. The full name is on the label's title. */
.qn-picker-item span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.qn-flash { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid; }
.qn-flash.ok   { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.qn-flash.warn { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.qn-flash.bad  { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.qn-keylist { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; }

/* ── Questionnaire Designer (2026-09-08) ──────────────────────────────────
   Cards for the three parts of a questionnaire -- what it is, what it asks,
   what the answers are called -- so a long screen still reads as sections. */
.qd-page { max-width: 1180px; }
.qd-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
.qd-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.qd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 18px; }
.qd-grid > label, .qd-f { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: #334155; }
.qd-f { margin-bottom: 12px; }
.qd-grid > label.qd-wide { grid-column: 1 / -1; }
.qd-grid .hint, .qd-f .hint { font-weight: 400; font-size: .78rem; color: #64748b; }
.qd-check { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; }
.qd-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: .88rem; }
.qd-checks label { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.qd-checks input { margin-top: 3px; }
.qd-links { margin: 0 0 8px; padding-left: 18px; font-size: .9rem; }
.qd-note { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #475569; background: #f1f5f9; border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.qd-retired td { opacity: .6; }
.qd-questions td { vertical-align: top; }
.qd-title { font-weight: 600; }
.qd-code { font-size: .75rem; color: #64748b; font-family: ui-monospace, Consolas, monospace; }
.qd-help { font-size: .8rem; color: #64748b; margin-top: 2px; max-width: 520px; }
.qd-sectionrow td { background: #f8fafc; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #475569; }
.qd-move { white-space: nowrap; }
.qd-arrow { border: 0; background: none; color: #94a3b8; cursor: pointer; padding: 0 2px; font-size: .7rem; line-height: 1; display: block; }
.qd-arrow:hover { color: #2563eb; }
.qd-bands input, .qd-bands select { min-width: 0; }
/* The question editor sits over the page: a question has a dozen settings and
   they belong together, not spread down a form the length of the screen. */
.qd-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qd-panel { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.18); padding: 20px 24px; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; }
.qd-panel-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; }

/* What an accepted questionnaire actually earned, on the review page. */
.qn-worth { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 16px; margin-bottom: 14px; font-size: .9rem; }
.qn-worth ul { margin: 8px 0 0; padding-left: 18px; }
.qn-worth li { margin-bottom: 4px; }
.qn-worth p { margin-top: 10px; font-size: .85rem; color: #64748b; max-width: 760px; }