/* No box-sizing reset existed anywhere in this file - every rule pairing width:100% with padding
   (.app-content, .app-header, and others) was adding that padding ON TOP of 100% under the default
   content-box model, pushing content past the right edge of the viewport. border-box is what every
   other rule in this file already assumes. */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---- BDS brand tokens ---- */
:root {
    --bds-magenta: #95017b;
    --bds-magenta-dark: #6d0159;
    --bds-magenta-tint: #f8ecf5;
    --bds-pink: #ee56a9;
    /* WCAG 2.1 AA fix: the base --bds-pink is ~2.5:1 against --bds-magenta, well under the 4.5:1 text
       minimum - too dark a pink on too dark a magenta. Only for text sitting on the magenta background
       (header/login wordmarks); --bds-pink itself is unchanged since it also has to work on white. */
    --bds-pink-on-dark: #ffb6da;
    --bds-ink: #241220;
    --bds-ink-muted: #715f6c;
    --bds-border: #e6dce3;

    --status-active: #147a3d;
    --status-closing-soon: #b5650a;
    --status-expired: #6b6b6b;
    --status-negative: #b3261e;
    --status-awarded: var(--bds-magenta);
    --status-discovered: #3a5fc4;

    /* Distinct per-source chart colours (dashboard trend) - deliberately separate from --status-* since
       those carry status meaning (active/closing/expired), not source identity. */
    --chart-contractsfinder: #95017b;
    --chart-sell2wales: #3a5fc4;
    --chart-publiccontractsscotland: #1f9e7a;
    --chart-findatender: #d98a1f;
    --chart-ted: #0a6ebd;
    --chart-other: #8a8894;
}

body {
    margin: 0;
    background: #fbf8fa;
    color: var(--bds-ink);
    font-family: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

h1, h2, h3 {
    color: var(--bds-ink);
    font-weight: 600;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Spacing scale (4px unit) - CLAUDE.md: reuse these, don't invent one-off spacing. */
.pa-4 { padding: 4px; }
.pa-8 { padding: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }

/* FluentCard defaults to content-visibility: auto, which silently clips descendants
   (open listboxes, expandable grouped-tender rows). Override globally - see CLAUDE.md gotchas. */
fluent-card {
    content-visibility: visible;
}

.field-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.native-select {
    min-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--bds-border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--bds-ink);
    font: inherit;
}

/* FluentDataGrid renders each row as a real <tr class="fluent-data-grid-row"> (a class, not a custom
   element tag) that is itself `display: contents` - no box of its own, but `:has()` still matches
   through it for selection purposes. The grid's real layout is `table { display: grid }` with each
   `<td role="gridcell">` as its own independent grid item carrying an inline `height: 32px`. Growing
   only the cell that itself contains the control (the first version of this rule) left sibling cells
   in the same row at 32px, so rows looked jagged. Selecting from the row instead - "any gridcell inside
   a row that has a control anywhere in it" - grows every cell in that row together. !important is
   needed to beat the inline height. Add new embedded control tags here - never a per-page height fix.
   See CLAUDE.md gotchas. */
[role="row"]:has(fluent-select, fluent-number-field, fluent-text-field, fluent-checkbox, fluent-button, .status-badge) [role="gridcell"] {
    height: 44px !important;
}

/* .layout is Fluent's own flex-column wrapper (header/main-row/footer) - give it the full-viewport
   floor so a short page's footer still sits at the bottom of the screen instead of right under the content. */
.layout {
    min-height: 100dvh;
}

.main {
    /* Vertical stretch comes from VerticalAlignment.Stretch on the FluentStack itself (it renders as
       an inline style, which always wins over a plain CSS class rule here anyway) - so .app-nav's
       white background reaches as far down as .app-content, on both short and long pages. */
    flex: 1;
    min-width: 0;
}

/* ---- App shell ---- */
.app-header {
    background: var(--bds-magenta);
    color: #ffffff;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 56px;
    gap: 12px;
    min-height: 56px;
}

.app-header__wordmark {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.app-header__wordmark span {
    color: var(--bds-pink-on-dark);
}

.app-header__user {
    margin-right: 12px;
    color: #ffffff;
}

.app-header__user .name {
    font-size: 0.9rem;
    opacity: 0.9;
}

.app-nav {
    background: #ffffff;
    border-right: 1px solid var(--bds-border);
    padding-top: 8px;
    flex: 0 0 220px;
    width: 220px;
}

.app-content {
    padding: 16px;
    width: 100%;
    min-width: 0;
}

/* Hamburger toggle - only meaningful once the nav becomes an off-canvas drawer below the breakpoint. */
.app-nav-toggle {
    display: none;
}

.app-nav-backdrop {
    display: none;
}

/* ---- Status badges ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.status-active, .status-uptodate { color: var(--status-active); background: color-mix(in srgb, var(--status-active) 12%, white); }
.status-closingsoon { color: var(--status-closing-soon); background: color-mix(in srgb, var(--status-closing-soon) 14%, white); }
.status-expired, .status-inactive { color: var(--status-expired); background: color-mix(in srgb, var(--status-expired) 12%, white); }
.status-cancelled, .status-withdrawn, .status-failed { color: var(--status-negative); background: color-mix(in srgb, var(--status-negative) 12%, white); }
.status-awarded { color: var(--status-awarded); background: color-mix(in srgb, var(--status-awarded) 12%, white); }
.status-discovered, .status-unknown, .status-queued, .status-available, .status-onfile,
.status-idle, .status-running {
    color: var(--status-discovered); background: color-mix(in srgb, var(--status-discovered) 12%, white);
}

.status-stale, .status-ratelimited, .status-unavailable, .status-pending {
    color: var(--status-closing-soon); background: color-mix(in srgb, var(--status-closing-soon) 14%, white);
}

.status-frameworkagreement, .status-dynamicpurchasingsystem {
    color: var(--status-awarded); background: color-mix(in srgb, var(--status-awarded) 12%, white);
}

.subtitle {
    color: var(--bds-ink-muted);
    margin: 0;
}

/* ---- Dashboard stat tiles ---- */
.stat-tile {
    width: 220px;
    flex: 0 0 auto;
    border-top: 3px solid var(--bds-magenta);
}

.stat-tile h3 {
    margin: 0 0 4px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bds-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-tile p {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bds-ink);
}

.trend-chart {
    width: 100%;
    /* Matches the viewBox (300x140) exactly so the SVG scales uniformly - preserveAspectRatio="none"
       plus a fixed height would stretch x and y differently, which is fine for plain rects but distorts
       the <text> axis labels' glyphs (they'd render horizontally squashed/stretched). */
    aspect-ratio: 300 / 140;
    display: block;
}

.trend-chart .gridline {
    stroke: var(--bds-border);
    stroke-width: 1;
}

.trend-chart .axis-label {
    fill: var(--bds-ink-muted);
    font-size: 6px;
}

.trend-chart .bar-segment {
    opacity: 0.92;
}

.trend-chart .bar-segment:hover {
    opacity: 1;
}

.trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.trend-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--bds-ink-muted);
}

.trend-legend .swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.data-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.data-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid var(--bds-border);
    border-radius: 6px;
}

.data-list .count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

/* CSS forces overflow-y to auto too whenever overflow-x isn't visible (can't have one axis truly
   "visible" and the other scrollable) - with a full page of rows that's invisible, but with only a
   row or two the container is barely taller than the header, so an open column-filter popover (which
   extends below the last row) gets vertically clipped by this same rule. FluentDataGrid.razor.js then
   calls scrollIntoViewIfNeeded() to bring the clipped popover into view, and since there's no vertical
   room to give, the browser drags the horizontal scrollbar instead - the table has to be scrolled
   sideways just to see a filter that has nothing to do with horizontal position. Scoped to the tenders
   grid specifically (:has), since it's the only one with column-filter popovers - the other .table-scroll
   grids (audit log, sync history, etc.) don't need the extra reserved space. */
.table-scroll:has(.tenders-grid) {
    min-height: 320px;
}

.tenders-grid {
    min-width: 1100px;
}

/* Title-column links read as plain text, not a hyperlink - the whole row is the click target already.
   Truncated to one line with an ellipsis (full title in the title="" tooltip and on the detail page) -
   a long title otherwise wraps to two lines inside the grid's fixed 44px row height (see the row-height
   :has() rule above) and visually overlaps the row below it. */
.tenders-grid a {
    color: inherit;
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tenders-grid a:hover,
.tenders-grid a:focus-visible {
    text-decoration: underline;
}

.column-filter-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 200px;
}

/* ---- Login split screen ---- */
.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    width: 100%;
}

.login-shell__brand {
    background: linear-gradient(160deg, var(--bds-magenta) 0%, var(--bds-magenta-dark) 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px;
    position: relative;
    overflow: hidden;
}

.login-shell__brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: var(--bds-pink);
    opacity: 0.25;
}

.login-shell__wordmark {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.login-shell__wordmark span {
    color: var(--bds-pink-on-dark);
}

.login-shell__tagline {
    font-size: 1.05rem;
    max-width: 380px;
    opacity: 0.92;
    line-height: 1.5;
}

.login-shell__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #ffffff;
}

.login-form {
    width: 100%;
    max-width: 340px;
}

.login-form__logo {
    height: 56px;
    width: auto;
    margin-bottom: 20px;
}

.login-form h1 {
    font-size: 1.4rem;
    margin-bottom: 4px;
}

.login-form p.subtitle {
    color: var(--bds-ink-muted);
    margin: 0 0 24px 0;
}

@media (max-width: 1100px) {
    .app-content {
        padding: 12px;
    }
}

@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
    }
    .login-shell__brand {
        padding: 32px;
        min-height: 220px;
    }
}

@media (max-width: 720px) {
    .app-header {
        height: auto;
        padding: 8px 12px;
        row-gap: 8px;
    }

    .app-header fluent-spacer {
        display: none;
    }

    .app-header__user {
        margin-right: 0;
    }

    /* Avatar-only on narrow screens - the full name alongside the wordmark and hamburger button
       doesn't fit and was overlapping both. */
    .app-header__user .name {
        display: none;
    }

    .app-content {
        padding: 8px;
    }

    .stat-tile {
        width: 100%;
    }

    /* Off-canvas drawer instead of a permanently visible sidebar - a fixed-width nav eats too much
       of a phone screen's width, squeezing every table/list into an unusably narrow column. */
    .app-nav-toggle {
        display: inline-flex;
    }

    .app-nav {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        z-index: 1000;
        width: 220px !important;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }

    .app-nav--open {
        transform: translateX(0);
    }

    .app-nav-backdrop {
        display: block;
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 999;
    }
}

@media (max-width: 520px) {
    .login-shell__brand {
        min-height: 160px;
        padding: 24px 20px;
    }

    .login-shell__wordmark {
        font-size: 1.5rem;
    }

    .login-shell__tagline {
        font-size: 0.95rem;
        max-width: none;
    }

    .login-shell__form {
        padding: 24px 16px;
    }
}

/* ---- Tender detail page ---- */
.detail-back {
    color: var(--bds-magenta);
    text-decoration: none;
    font-size: 0.9rem;
}

.detail-back:hover {
    text-decoration: underline;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
}

.detail-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 10px;
    column-gap: 12px;
    font-size: 0.92rem;
}

.detail-grid dt {
    color: var(--bds-ink-muted);
    font-weight: 600;
}

.detail-grid dd {
    margin: 0;
}

@media (max-width: 640px) {
    .detail-grid {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .detail-grid dt {
        margin-top: 8px;
    }
}

.assignment-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assignment-history li {
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid var(--bds-border);
    border-radius: 6px;
    font-size: 0.85rem;
}

/* ---- Footer ---- */
.app-footer {
    background: var(--bds-ink);
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
    padding: 12px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.app-footer a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}

.app-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.app-footer__links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.app-footer__version {
    margin-left: auto;
    opacity: 0.55;
    font-family: monospace;
}

/* ---- Legal / static content pages ---- */
.static-page {
    max-width: 720px;
}

.static-page h2 {
    margin-top: 24px;
}

.contact-form {
    max-width: 480px;
}

.contact-form fluent-text-field,
.contact-form fluent-text-area {
    width: 100%;
}

.dashboard-joke {
    font-style: italic;
    color: var(--bds-magenta);
}

.dashboard-joke::after {
    content: '|';
    margin-left: 2px;
    animation: dashboard-joke-blink 1s step-end infinite;
}

@keyframes dashboard-joke-blink {
    50% { opacity: 0; }
}

/* ---- Detail page header, summary tiles, key/value list (client page) ---- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.page-header h1,
.page-header h2 {
    margin: 0;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
}

.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.summary-tile {
    flex: 1 1 150px;
    max-width: 240px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--bds-border);
    border-top: 3px solid var(--bds-magenta);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-tile span {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bds-ink-muted);
}

.summary-tile strong {
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    color: var(--bds-ink);
}

.summary-tile strong.summary-text {
    font-size: 1.1rem;
    line-height: 2.1rem;
}

.tab-body {
    padding-top: 16px;
}

.kv-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 16px;
    margin: 12px 0 16px;
}

.kv-list dt {
    color: var(--bds-ink-muted);
}

.kv-list dd {
    margin: 0;
}

@media (max-width: 600px) {
    .kv-list {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .kv-list dd {
        margin-bottom: 8px;
    }
}

/* ---- Phone layout (<= 600px) ----
   The desktop grids use fixed column widths, so on a phone they scroll sideways and the first column is
   cut off. Each grid below keeps only the columns needed to act (the rest are on the detail page) and
   swaps in a phone column template. Cells keep their original grid-column number, so a template lists
   every original column (0 for the hidden ones). FluentDataGrid sets grid-template-columns inline, hence !important.
   Add new grids here with Class="mgrid m-<name>" - see docs/ui-standards.md. */
@media (max-width: 600px) {
    table.mgrid [col-index] { min-width: 0 !important; }
    /* Clip, not ellipsis, on cells that hold buttons/badges - a "..." after a button reads as a glitch. */
    table.mgrid td[col-index] { text-overflow: clip; }
    .tenders-grid { min-width: 0; }
    .table-scroll:has(.tenders-grid) { min-height: 0; }

    table.m-clients { grid-template-columns: 84px 1fr 0 0 96px 0 !important; }
    table.m-clients [col-index]:not([col-index="1"]):not([col-index="2"]):not([col-index="5"]) { display: none; }

    table.m-tenders { grid-template-columns: 44px 1fr 72px 0 0 0 0 108px !important; }
    table.m-tenders [col-index]:not([col-index="1"]):not([col-index="2"]):not([col-index="3"]):not([col-index="8"]) { display: none; }

    table.m-queue { grid-template-columns: 1fr 0 0 100px 0 124px !important; }
    table.m-queue [col-index]:not([col-index="1"]):not([col-index="4"]):not([col-index="6"]) { display: none; }

    table.m-queue-del { grid-template-columns: 1fr 0 0 0 112px !important; }
    table.m-queue-del [col-index]:not([col-index="1"]):not([col-index="5"]) { display: none; }

    table.m-sugg { grid-template-columns: 1fr 0 92px 0 84px !important; }
    table.m-sugg [col-index]:not([col-index="1"]):not([col-index="3"]):not([col-index="5"]) { display: none; }

    table.m-current { grid-template-columns: 1fr 120px 0 0 !important; }
    table.m-current [col-index]:not([col-index="1"]):not([col-index="2"]) { display: none; }

    table.m-history { grid-template-columns: 1fr 90px 120px 0 0 0 !important; }
    table.m-history [col-index]:not([col-index="1"]):not([col-index="2"]):not([col-index="3"]) { display: none; }

    table.m-sync { grid-template-columns: 1fr 0 100px 96px !important; }
    table.m-sync [col-index]:not([col-index="1"]):not([col-index="3"]):not([col-index="4"]) { display: none; }

    table.m-runs { grid-template-columns: 1fr 90px 70px 0 !important; }
    table.m-runs [col-index]:not([col-index="1"]):not([col-index="2"]):not([col-index="3"]) { display: none; }

    table.m-mycompany { grid-template-columns: 1fr 90px 110px 0 0 !important; }
    table.m-mycompany [col-index]:not([col-index="1"]):not([col-index="2"]):not([col-index="3"]) { display: none; }

    table.m-audit { grid-template-columns: 1fr 0 1fr 0 !important; }
    table.m-audit [col-index]:not([col-index="1"]):not([col-index="3"]) { display: none; }

    .page-header { align-items: stretch; }
    .summary-tile { flex: 1 1 calc(50% - 12px); max-width: none; }
}

/* ---- Header on phones: one tidy row, icon-only log out ---- */
@media (max-width: 720px) {
    .app-header { flex-wrap: nowrap; gap: 8px; }
    .app-header__wordmark { flex: 1 1 auto; min-width: 0; padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-header__logout-text { display: none; }
    .app-header__user { flex: 0 0 auto; }
}

/* ---- Tender page: actions (workflow, assign, export) come before the long field list on phones ---- */
@media (max-width: 900px) {
    .detail-layout > :nth-child(2) { order: -1; }
}

/* ---- Documentation section (/docs) ---- */
.docs-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.docs-nav {
    position: sticky;
    top: 16px;
    background: #ffffff;
    border: 1px solid var(--bds-border);
    border-radius: 8px;
    padding: 12px;
}

.docs-nav ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.docs-nav__group {
    margin: 8px 8px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bds-ink-muted);
}

.docs-nav a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--bds-ink);
    text-decoration: none;
    font-size: 0.92rem;
}

.docs-nav a:hover,
.docs-nav a:focus-visible {
    background: #f4e6f1;
}

.docs-nav a.active {
    background: var(--bds-magenta);
    color: #ffffff;
    font-weight: 600;
}

.docs-body {
    min-width: 0;
    max-width: 780px;
    line-height: 1.6;
}

.docs-body h2 {
    margin-top: 0;
}

.docs-body h3 {
    margin: 28px 0 8px;
}

.docs-lead {
    font-size: 1.05rem;
    color: var(--bds-ink-muted);
    margin-top: 4px;
}

.docs-steps {
    padding-left: 0;
    list-style: none;
    counter-reset: step;
}

.docs-steps > li {
    counter-increment: step;
    position: relative;
    padding: 6px 0 6px 40px;
}

.docs-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bds-magenta);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 12px;
    font-size: 0.92rem;
}

.docs-table th,
.docs-table td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bds-border);
}

.docs-table th {
    color: var(--bds-ink-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.docs-table td:first-child {
    white-space: nowrap;
    font-weight: 600;
}

.docs-callout {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 4px solid var(--bds-magenta);
    background: #faf2f8;
    border-radius: 0 6px 6px 0;
}

.docs-callout.warn {
    border-left-color: #b45309;
    background: #fdf5e8;
}

.docs-glossary dt {
    font-weight: 700;
    margin-top: 12px;
}

.docs-glossary dd {
    margin: 2px 0 0;
}

.docs-body code {
    background: #f1ecf0;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.88em;
}

.docs-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid var(--bds-border);
}

.docs-pager a {
    color: var(--bds-magenta);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 900px) {
    .docs-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .docs-nav {
        position: static;
    }

    .docs-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .docs-nav a {
        border: 1px solid var(--bds-border);
        padding: 6px 12px;
    }

    .docs-table td:first-child {
        white-space: normal;
    }
}

/* ---- BDS team member profile ---- */
.profile-id {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-id h1 {
    margin: 0;
}

.profile-id .subtitle {
    margin: 4px 0 0;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bds-magenta);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-bio {
    white-space: pre-line;
    max-width: 680px;
    line-height: 1.6;
}

.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.skill-chip {
    padding: 4px 12px;
    border-radius: 999px;
    background: #f4e6f1;
    color: var(--bds-ink);
    font-size: 0.88rem;
}

.app-header__me {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
}