@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --nm-red: #ed1c24;
    --nm-blue: #0d4f8a;
    --nm-z50: #fafafa;
    --nm-z100: #f4f4f5;
    --nm-z200: #e4e4e7;
    --nm-z300: #d4d4d8;
    --nm-z400: #a1a1aa;
    --nm-z500: #71717a;
    --nm-z600: #52525b;
    --nm-z700: #3f3f46;
    --nm-z900: #18181b;
    --nm-z950: #09090b;
    --nm-font-sans: "Segoe UI Variable Text", "Segoe UI", "Open Sans", system-ui, sans-serif;
    --nm-font-mono: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --nm-ring: rgba(9, 9, 11, 0.10);
    --nm-ring-strong: rgba(9, 9, 11, 0.15);
    --nm-radius-lg: 8px;
    --nm-radius-xl: 12px;
    --nm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --nm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
    /* 1.4.11 text scale: NM Timesheet's desktop baseline, read from Nacos.TimeSurfaces/wwwroot/time-surfaces.css.
       Body copy and table cells take the time chrome's copy size (.nm-mono .nm-time-chrome .hdr-label), help text
       is one step smaller, and nothing is below 12px. CIP's root stays 14px, so these are px: the vendor rules were
       written in Tailwind rem for a 16px root and painted near 12px here. CipVendorPageFeedbackStyleGuardTests
       keeps the relationship to NM's own rules. */
    --cip-text-body: 14px;
    --cip-text-help: 13px;
    --cip-text-min: 12px;
    /* The brand bar's height on a vendor page, where the bar sticks and the page head sticks directly under it. */
    --cip-appbar-height: 43px;
    /* Outcome tones (1.4.11): the status chip families below, plus red for a refusal or a failed leg. */
    --cip-info-fg: #0369a1;
    --cip-info-bg: #f0f9ff;
    --cip-info-border: #bae6fd;
    --cip-progress-fg: #1e40af;
    --cip-progress-bg: #eff6ff;
    --cip-progress-border: #bfdbfe;
    --cip-ok-fg: #166534;
    --cip-ok-bg: #f0fdf4;
    --cip-ok-border: #bbf7d0;
    --cip-warn-fg: #92400e;
    --cip-warn-bg: #fffbeb;
    --cip-warn-border: #fde68a;
    --cip-error-fg: #991b1b;
    --cip-error-bg: #fef2f2;
    --cip-error-border: #fecaca;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--nm-z950);
    background: var(--nm-z100);
    font-family: var(--nm-font-sans);
    font-size: 14px;
}

button, input, select, textarea { font: inherit; }
a { color: #006bb7; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

main.nm-main {
    width: min(78rem, 100%);
    margin: 0 auto;
    padding: 10px 12px 28px;
}

article.nm-article {
    min-height: calc(100vh - 38px);
    padding: 0 10px 16px;
    background: #fff;
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-xl);
    box-shadow: var(--nm-shadow-card);
}

.nm-appbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 43px;
    margin: 0 -10px;
    padding: 7px 14px;
    background: #fff;
    border-bottom: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-xl) var(--nm-radius-xl) 0 0;
}

.cip-brand-link {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.nm-app-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nm-appbar-logo { width: 22px; height: 22px; object-fit: contain; }

.nm-appbar-title {
    color: var(--nm-z950);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nm-appbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
}

.hdr-btn,
.sort-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 3px 10px;
    color: var(--nm-z950);
    background: #fff;
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-lg);
    box-shadow: var(--nm-shadow-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.hdr-btn:hover,
.sort-row button:hover { background: var(--nm-z50); border-color: var(--nm-ring-strong); }

.nm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    margin: 0 -10px;
    padding: 8px 14px 9px;
    background: var(--nm-z50);
    border-bottom: 1px solid var(--nm-ring);
}

.identity-position,
.product-position {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

.product-position { margin-left: auto; justify-content: flex-end; }
.hdr-label { color: var(--nm-z500); font-size: var(--cip-text-body); }
.identity-detail { color: var(--nm-z500); font-size: var(--cip-text-help); }
.identity-position strong { overflow-wrap: anywhere; font-size: var(--cip-text-body); }

.nm-app-version-pill {
    display: inline-block;
    padding: 1px 4px;
    color: #555;
    background: #e8e8e8;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    font-size: var(--cip-text-min);
    line-height: normal;
}

/* CIP is desktop-only (OVERVIEW.md), so the module strip never scrolls. It used to declare
   overflow-x:auto, which computes overflow-y to auto; each tab's margin-bottom:-1px under its 2px
   underline then became a 1px vertical scroll range (Erik, 2026-09-14). Same shape as the shared
   .nm-mono .nm-home-tabs rule in time-surfaces.css. The tab no longer hangs 1px below the strip
   either, so the strip has no overflow at all (scrollHeight == clientHeight); the active 2px underline
   sits directly above this 1px border. */
.nm-home-tabs {
    display: flex;
    gap: 2px;
    margin-top: 4px;
    border-bottom: 1px solid var(--nm-ring);
}

.nm-home-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 7px 12px;
    color: var(--nm-z500);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.nm-home-tab:hover { color: var(--nm-z950); }
.nm-home-tab-active { color: #1b3a52; border-bottom-color: #4f46e5; }
.nm-home-tab small { color: var(--nm-z500); font-size: var(--cip-text-min); font-weight: 500; }

.cip-content { padding: 8px 4px 0; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(1.35rem, 2.5vw, 1.75rem); letter-spacing: -.025em; }
h2 { margin-bottom: 6px; font-size: 1rem; }
h3 { margin-bottom: 5px; font-size: .9rem; }
p { margin-bottom: 10px; color: var(--nm-z600); line-height: 1.5; }

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 2px 7px;
}

.page-heading p { max-width: 52rem; margin-bottom: 0; }
.compact-heading { padding-top: 15px; }
.eyebrow { display: block; margin-bottom: 3px; color: var(--nm-z500); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.nm-card {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-lg);
    box-shadow: var(--nm-shadow-sm);
}

.welcome-grid,
.self-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.welcome-primary { border-left: 3px solid #4f46e5; }

.primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 12px;
    color: #fff;
    background: var(--nm-z900);
    border: 1px solid rgba(9, 9, 11, .9);
    border-radius: var(--nm-radius-lg);
    box-shadow: inset 0 1px rgba(255, 255, 255, .15), var(--nm-shadow-sm);
    font-weight: 600;
    text-decoration: none;
}

.primary-action:hover { color: #fff; background: #2c2c30; }
.external-action { margin-top: 14px; }
.external-note { margin: 7px 0 0; font-size: 11.5px; }

.helpdesk-subnav {
    display: flex;
    gap: 6px;
    margin: 2px 0 10px;
}

.helpdesk-subnav a {
    min-height: 28px;
    padding: 4px 10px;
    color: var(--nm-z600);
    background: var(--nm-z50);
    border: 1px solid var(--nm-ring);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.helpdesk-subnav a.active { color: var(--nm-z950); background: #fff; border-color: #4f46e5; }

.status-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 20px;
    padding: 1px 7px;
    border: 1px solid var(--nm-ring);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-preview { color: #3730a3; background: #eef2ff; border-color: #c7d2fe; }
.status-muted { color: var(--nm-z600); background: var(--nm-z100); }
.status-open { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.status-info { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; }
.status-warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.status-ok { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

.truth-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    color: #3730a3;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-left: 3px solid #4f46e5;
    border-radius: var(--nm-radius-lg);
    font-size: 12.5px;
}

.truth-banner span { color: #4338ca; }

.helpdesk-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.helpdesk-stats article {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 10px;
    background: var(--nm-z50);
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-lg);
}

.helpdesk-stats strong { font-size: 1.15rem; }
.helpdesk-stats span { color: var(--nm-z500); font-size: 12px; }

.helpdesk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 10px;
    align-items: start;
}

.card-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.card-heading-row p { margin-bottom: 0; font-size: 12px; }
.ticket-search { display: grid; gap: 3px; min-width: min(19rem, 45%); color: var(--nm-z500); font-size: 11px; font-weight: 600; }

.ticket-search input {
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    color: var(--nm-z950);
    background: #fff;
    border: 1px solid var(--nm-ring-strong);
    border-radius: var(--nm-radius-lg);
    box-shadow: var(--nm-shadow-sm);
}

.sort-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 7px; color: var(--nm-z500); font-size: 11px; }
.sort-row button { min-height: 25px; padding: 2px 7px; font-size: 11.5px; }
.table-scroll { max-width: 100%; overflow-x: auto; }

.ticket-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.ticket-table th,
.ticket-table td {
    padding: 7px 8px;
    text-align: left;
    border-bottom: 1px solid var(--nm-z200);
    vertical-align: middle;
}

.ticket-table th { color: var(--nm-z600); background: var(--nm-z50); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.ticket-table tbody tr:hover { background: #fcfcfd; }
.ticket-table td:first-child { white-space: nowrap; font-weight: 600; }
.result-count { margin: 7px 0 0; color: var(--nm-z500); font-size: 11px; }

.fact-list { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--nm-z600); font-size: 12px; line-height: 1.4; }
.readiness-card { background: var(--nm-z50); }

.self-service-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 175px; }
.self-service-card h2 { margin-top: 10px; }
.self-service-card p { flex: 1; font-size: 12.5px; }

.unavailable-action {
    width: 100%;
    min-height: 30px;
    padding: 6px 8px;
    color: var(--nm-z500);
    background: var(--nm-z100);
    border: 1px dashed var(--nm-z300);
    border-radius: var(--nm-radius-lg);
    font-size: 11.5px;
}

.self-service-readiness { margin-top: 10px; }
.access-request-grid { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.access-request-form { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.access-request-form label { margin-top: 6px; color: var(--nm-z700); font-size: 12.5px; font-weight: 600; }
.access-request-form input, .access-request-form select, .access-request-form textarea {
    width: 100%;
    min-height: 32px;
    padding: 6px 8px;
    color: var(--nm-z950);
    background: #fff;
    border: 1px solid var(--nm-ring-strong);
    border-radius: var(--nm-radius-lg);
}
.access-request-form textarea { resize: vertical; }
.access-request-form .primary-action { justify-self: start; margin-top: 6px; cursor: pointer; }
.access-request-form:disabled { opacity: .65; }
button:disabled { cursor: default; opacity: .65; }
.field-hint { color: var(--nm-z500); font-size: 11.5px; font-weight: 400; }
.request-feedback { margin-bottom: 12px; padding: 10px; background: var(--nm-z50); border: 1px solid var(--nm-ring); border-radius: var(--nm-radius-lg); }
.request-feedback p { margin-bottom: 6px; font-size: 12.5px; }
.request-feedback p:last-child { margin-bottom: 0; }
.access-request-table td { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.back-link { display: inline-flex; margin: 8px 0 2px; font-size: 12px; font-weight: 600; text-decoration: none; }

.ticket-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ticket-detail-grid .readiness-card { grid-column: 1 / -1; }

.detail-list {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 6px 10px;
    margin: 0 0 14px;
    font-size: 12.5px;
}

.detail-list dt { color: var(--nm-z500); font-weight: 600; }
.detail-list dd { margin: 0; }

.activity-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.activity-list li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--nm-z200); font-size: 12px; }
.activity-list li > span, .activity-list small { color: var(--nm-z500); }

.state-panel {
    max-width: 38rem;
    margin: 2rem auto;
    padding: 18px;
    text-align: center;
    background: var(--nm-z50);
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-xl);
}

#cip-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    color: var(--nm-z700);
    background: var(--nm-z100);
}

.boot-mark { width: 26px; height: 26px; margin: 0 auto; border: 3px solid var(--nm-z300); border-top-color: #4f46e5; border-radius: 50%; animation: cip-spin .8s linear infinite; }
@keyframes cip-spin { to { transform: rotate(360deg); } }

/* Vendor UI: adapted from Erik's licensed Tailwind Plus application-ui-v4/html:
   forms/form-layouts/04-two-column-with-cards, lists/tables/03-simple-in-card,
   forms/input-groups/02-input-with-label-and-help-text. App-local token CSS per §49;
   the source kit stays in gitignored Tailwinds/. */
main.nm-main:has(.vendor-grid) { width: min(120rem, 100%); }
.vendor-registration {
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-lg);
    background: var(--nm-z50);
    text-align: left;
}
.vendor-registration p { margin: 0 0 4px; }
.vendor-registration p:last-child { margin-bottom: 0; }
.vendor-registration-incomplete { border-left: 3px solid #b45309; }
.vendor-matrix .vendor-not-registered { background: var(--nm-z50); color: var(--nm-z500); }
.vendor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin-top: 16px;
}
.vendor-tile {
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-xl);
    box-shadow: var(--nm-shadow-card);
    text-align: left;
    overflow-wrap: anywhere;
}
.vendor-tile-wide { grid-column: 1 / -1; }
.vendor-tile > h2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 12px;
    color: var(--nm-z900);
    font-size: 1.1rem;
    font-weight: 600;
}
.vendor-tile > :last-child { margin-bottom: 0; }
.vendor-tile .field-help, .vendor-search .field-help {
    color: var(--nm-z600);
    font-size: var(--cip-text-help);
    line-height: 1.5;
}
.vendor-bank + .vendor-bank, .vendor-satellite + .vendor-satellite, .vendor-change-card + .vendor-change-card {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nm-z200);
}
.vendor-change-card h3 { line-height: 1.7; }
.vendor-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 12px;
}
.cip-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--nm-z700);
    font-size: var(--cip-text-body);
    line-height: 1.5;
    text-align: left;
}
.cip-table th, .cip-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--nm-z200);
    text-align: left;
    vertical-align: top;
}
.cip-table thead th {
    background: var(--nm-z50);
    color: var(--nm-z900);
    border-bottom-color: var(--nm-z300);
    font-weight: 600;
}
.cip-table th[scope="row"] { font-weight: 400; }
.vendor-fields { table-layout: fixed; min-width: 26rem; }
.vendor-fields th:first-child { width: 14rem; }
.vendor-fields td, .vendor-fields th { overflow-wrap: anywhere; }
.vendor-edit-fields { min-width: 34rem; }
.vendor-edit-fields th:first-child { width: 11rem; }
.vendor-edit-fields th:last-child { width: 11rem; }
.vendor-matrix {
    table-layout: fixed;
    min-width: calc(14rem + var(--vendor-company-count) * 8rem);
    border-collapse: separate;
    border-spacing: 0;
}
.vendor-matrix thead th:first-child { width: 14rem; }
.vendor-matrix thead th:first-child, .vendor-matrix th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    border-right: 1px solid var(--nm-z300);
}
.vendor-matrix thead th:first-child { background: var(--nm-z50); }
.vendor-matrix th, .vendor-matrix td { padding: 8px; }
.vendor-matrix th .field-help { display: block; font-weight: 400; margin-top: 4px; }
.vendor-matrix th .pill { margin-top: 6px; }
.vendor-matrix td { border-right: 1px solid var(--nm-z200); }
.vendor-matrix-group th { background: var(--nm-z100); font-size: var(--cip-text-help); font-weight: 600; }
.vendor-matrix-group th > span { display: inline-block; position: sticky; left: 8px; }
.vendor-matrix .vendor-field label.visually-hidden { padding: 0; }
.vendor-matrix .vendor-field input, .vendor-matrix .vendor-field select { padding: 6px; }
.vendor-matrix .vendor-field input:hover:not(:disabled), .vendor-matrix .vendor-field select:hover:not(:disabled) {
    border-color: var(--nm-blue);
}
.vendor-field label { display: block; text-align: left; padding-top: 7px; }
.vendor-field input, .vendor-field select, .vendor-search input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 10px;
    color: var(--nm-z900);
    background: #fff;
    border: 1px solid var(--nm-z300);
    border-radius: var(--nm-radius-lg);
    text-align: left;
    box-shadow: var(--nm-shadow-sm);
}
.vendor-field input:disabled, .vendor-field select:disabled { background: var(--nm-z50); color: var(--nm-z600); }
.vendor-field .field-help > span { display: block; }
.vendor-field .pill { margin-top: 6px; width: fit-content; }
.cip-table .row-subtext, .vendor-tile .row-subtext { color: var(--nm-z500); font-size: var(--cip-text-help); font-weight: 400; }
.cip-table .row-subtext { display: block; }
.vendor-tile .pill, .cip-table .pill {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--nm-z200);
    border-radius: var(--nm-radius-lg);
    background: var(--nm-z50);
    font-size: var(--cip-text-min);
    line-height: 1.5;
    font-weight: 500;
}
.vendor-tile .pill-warning, .cip-table .pill-warning { border-color: var(--nm-z300); color: var(--nm-z900); }
.cip-table td > .pill { margin-inline-start: 6px; }
.vendor-field .field-help > .pill { margin-inline-start: 0; }
.vendor-search { margin: 16px 0; text-align: left; }
.vendor-search label { display: block; margin-bottom: 6px; color: var(--nm-z900); }
.vendor-search input { display: inline-block; max-width: 32rem; margin: 0 8px 8px 0; vertical-align: middle; }
/* 1.4.9: the box is the shared TypeaheadSearch. Its wrapper takes the old input's spacing; the list,
   its options and the in-box spinner carry their own rules from the component. */
.vendor-search .nm-typeahead { margin: 0 8px 8px 0; }
.vendor-search .nm-typeahead > input { margin: 0; }
.vendor-option-name { display: block; font-weight: 600; }
.vendor-option-meta { display: block; color: var(--nm-z500); font-size: var(--cip-text-help); }
.vendor-registrations { display: flex; flex-wrap: wrap; gap: 4px; }
.vendor-entity {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid var(--nm-z200);
    border-radius: var(--nm-radius-lg);
    background: var(--nm-z50);
    color: var(--nm-z700);
    font-size: var(--cip-text-min);
    line-height: 1.6;
}
.vendor-entity-home { color: var(--nm-z900); font-weight: 600; }
.vendor-entity-match { border-color: var(--nm-blue); background: #e8f0f8; color: var(--nm-blue); }
.vendor-entity-hold { border-style: dashed; }
.vendor-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    max-width: 100%;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid var(--nm-z300);
    border-radius: var(--nm-radius-lg);
    color: var(--nm-z900);
    background: #fff;
    box-shadow: var(--nm-shadow-sm);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.vendor-button:hover:not(:disabled) { background: var(--nm-z50); }
.vendor-button-primary { color: #fff; background: var(--nm-blue); border-color: var(--nm-blue); }
.vendor-button-primary:hover:not(:disabled) { background: var(--nm-z900); border-color: var(--nm-z900); }
.cip-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cip-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .cip-spinner { animation: none; }
}

/* Manage portal users (1.4.16). The page renders before anything loads, so each section owns its own spinner rather
   than a page-wide loading state. Type sizes come from the shared tokens, like every other CIP page. */
.portal-users-search { margin: 0 0 14px; max-width: 34rem; }
.portal-users-search > label { display: block; margin-bottom: 4px; font-size: var(--cip-text-help); font-weight: 600; }
.portal-user-option-name { display: block; font-size: var(--cip-text-body); }
.portal-user-option-meta { display: block; color: var(--nm-z500); font-size: var(--cip-text-min); }
.portal-users-section { margin-top: 22px; }
.portal-users-section > h2 { font-size: 16px; margin: 0 0 6px; }
.portal-users-loading { margin: 8px 0; color: var(--nm-z500); }
/* 2.5 R2: the person panel's and the holders table's rules moved with their markup into the shared workspace's
   manage-users.css (.mu-*). The finder, the section heading and the loading line above are still CIP's. */

/* 1.4.11, feedback where the person is looking (Erik, 2026-09-14). On the vendor detail and edit pages the brand bar
   and the vendor's name and status line follow the scroll, the way NM Timesheet keeps its submit and save messages
   in view (Home.razor: position: sticky; top: 0 on an opaque surface with a soft shadow), and the outcome banner
   sits directly under them. The bar is article chrome and the head is page content, so they are two sticky boxes
   and the head's top is the bar's height. No ancestor of either declares overflow, which would stop them following
   the scroll (CipVendorPageFeedbackStyleGuardTests). */
.nm-article:has(.vendor-page-head) > .nm-appbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--cip-appbar-height);
}
.vendor-page-head {
    position: sticky;
    top: var(--cip-appbar-height);
    z-index: 30;
    margin: 0 -14px 12px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--nm-ring);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.vendor-page-title h1 { margin-bottom: 2px; }
.vendor-status-line { margin: 0; color: var(--nm-z600); font-size: var(--cip-text-body); overflow-wrap: anywhere; }
.vendor-feedback {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--nm-radius-lg);
    font-size: var(--cip-text-body);
}
.vendor-feedback > .cip-spinner { margin-top: 3px; }
.vendor-feedback-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vendor-feedback-body p { margin: 0 0 4px; color: inherit; }
.vendor-feedback-body p:last-child { margin-bottom: 0; }
.vendor-feedback-body a { color: inherit; font-weight: 600; }
.vendor-feedback-body .vendor-button { margin: 6px 8px 0 0; }
.vendor-feedback-dismiss {
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--nm-radius-lg);
    font-size: var(--cip-text-body);
    line-height: 1;
    cursor: pointer;
}
.vendor-feedback-progress { color: var(--cip-progress-fg); background: var(--cip-progress-bg); border-color: var(--cip-progress-border); border-left-color: var(--nm-blue); }
.vendor-feedback-info { color: var(--cip-info-fg); background: var(--cip-info-bg); border-color: var(--cip-info-border); border-left-color: var(--cip-info-fg); }
.vendor-feedback-success { color: var(--cip-ok-fg); background: var(--cip-ok-bg); border-color: var(--cip-ok-border); border-left-color: var(--cip-ok-fg); }
.vendor-feedback-warning { color: var(--cip-warn-fg); background: var(--cip-warn-bg); border-color: var(--cip-warn-border); border-left-color: #b45309; }
.vendor-feedback-error { color: var(--cip-error-fg); background: var(--cip-error-bg); border-color: var(--cip-error-border); border-left-color: var(--nm-red); }

/* The change at the top of the detail page (1.4.11): needs your approval, in flight, held, being withdrawn or withdrawn. */
.vendor-attention {
    margin: 0 0 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--nm-ring);
    border-left: 4px solid var(--cip-info-fg);
    border-radius: var(--nm-radius-xl);
    box-shadow: var(--nm-shadow-card);
    text-align: left;
    overflow-wrap: anywhere;
}
.vendor-attention-heading { display: flex; align-items: center; gap: 8px; }
.vendor-attention-heading h2 { margin: 0; color: var(--nm-z900); font-size: 1.1rem; font-weight: 600; }
.vendor-attention-status { margin: 6px 0 2px; color: var(--nm-z900); font-size: var(--cip-text-body); font-weight: 600; }
.vendor-attention .field-help { color: var(--nm-z600); font-size: var(--cip-text-help); }
.vendor-attention-message { color: var(--nm-z700); }
.vendor-attention-problem { color: var(--cip-error-fg); font-weight: 600; }
.vendor-attention-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vendor-attention-actions .vendor-button { margin-bottom: 0; }
.vendor-attention-progress { border-left-color: var(--nm-blue); }
.vendor-attention-success { border-left-color: var(--cip-ok-fg); }
.vendor-attention-warning { border-left-color: #b45309; background: var(--cip-warn-bg); }
.vendor-attention-error { border-left-color: var(--nm-red); background: var(--cip-error-bg); }

/* Notices that describe the vendor's state rather than an outcome: a lock, or read-only access. */
.vendor-notice { margin: 0 0 10px; padding: 8px 12px; border: 1px solid; border-radius: var(--nm-radius-lg); font-size: var(--cip-text-body); }
.vendor-notice-warning { color: var(--cip-warn-fg); background: var(--cip-warn-bg); border-color: var(--cip-warn-border); }
.error-banner { margin: 0 0 10px; padding: 8px 12px; color: var(--cip-error-fg); background: var(--cip-error-bg); border: 1px solid var(--cip-error-border); border-radius: var(--nm-radius-lg); }

/* Bank accounts in the comparison model (1.4.11): one row group per account id, and a company without the account
   shows an uneditable cell, never a create. */
.vendor-matrix .vendor-no-bank { background: var(--nm-z50); color: var(--nm-z500); }
.vendor-tile h3 { font-size: var(--cip-text-body); }

/* 1.4.15, adding a vendor: the entry link on the search page, and the home and additional legal entity choices.
   The text keeps the vendor tile's own sizes. */
.vendor-create-entry { margin: 0 0 12px; }
.vendor-create-entities { display: grid; gap: 8px; max-width: 40rem; text-align: left; }
.vendor-create-entities > label { color: var(--nm-z900); }
.vendor-create-entities select {
    min-height: 36px;
    padding: 6px 10px;
    color: var(--nm-z900);
    background: #fff;
    border: 1px solid var(--nm-z300);
    border-radius: var(--nm-radius-lg);
}
.vendor-create-additional {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 4px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--nm-z200);
    border-radius: var(--nm-radius-lg);
}
.vendor-create-additional legend { padding: 0 4px; color: var(--nm-z900); }
.vendor-entity-choice { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--nm-z700); }

@media (max-width: 760px) {
    main.nm-main { padding: 6px; }
    article.nm-article { min-height: calc(100vh - 12px); border-radius: var(--nm-radius-lg); }
    .nm-appbar { align-items: flex-start; border-radius: var(--nm-radius-lg) var(--nm-radius-lg) 0 0; }
    .nm-appbar-title { font-size: 14px; }
    .identity-detail { flex-basis: 100%; }
    .helpdesk-grid, .ticket-detail-grid { grid-template-columns: 1fr; }
    .ticket-detail-grid .readiness-card { grid-column: auto; }
    .welcome-grid, .self-service-grid { grid-template-columns: 1fr; }
    .card-heading-row { align-items: stretch; flex-direction: column; }
    .ticket-search { min-width: 100%; }
}

@media (max-width: 520px) {
    .nm-appbar { flex-wrap: wrap; padding: 8px 10px; }
    .cip-brand-link { flex: 1 1 calc(100% - 2rem); }
    .nm-appbar-actions { flex: 1 1 100%; justify-content: flex-start; }
    .hdr-btn, .primary-action, .helpdesk-subnav a { min-height: 2.75rem; }
    .hdr-btn { flex: 1 1 auto; }
    .nm-toolbar { align-items: flex-start; flex-direction: column; padding: 8px 10px; }
    .product-position { width: 100%; margin-left: 0; justify-content: flex-start; }
    .nm-home-tab { min-height: 2.75rem; padding: 8px 10px; }
    .nm-home-tab small { display: none; }
    .page-heading { flex-direction: column; gap: 8px; }
    .helpdesk-stats { grid-template-columns: 1fr; }
    .ticket-list-card { padding: 10px; }
    .ticket-table thead { display: none; }
    .ticket-table, .ticket-table tbody, .ticket-table tr, .ticket-table td { display: block; width: 100%; }
    .ticket-table tr { margin-bottom: 8px; padding: 7px 8px; border: 1px solid var(--nm-ring); border-radius: var(--nm-radius-lg); }
    .ticket-table td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 8px; padding: 4px 0; border: 0; }
    .ticket-table td::before { content: attr(data-label); color: var(--nm-z500); font-size: 11px; font-weight: 700; }
    .detail-list { grid-template-columns: 6rem minmax(0, 1fr); }
    .activity-list li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .boot-mark { animation: none; }
}

/* ── Signed-out and startup cards. Verbatim from the .nm-auth-* block in
   Nacos.TimeSurfaces/wwwroot/time-surfaces.css, which owns these rules for every portal.
   CIP mounts the same SignInCard.razor / AppLoading.razor components but deliberately does not
   reference Nacos.TimeSurfaces, so it cannot load that stylesheet; CipSignInCardParityGuardTests
   pins every rule below against the shared source and refuses a copy that drifts. Only the rules
   CIP actually renders are here — no .nm-auth-secondary (CIP has no public File QR lane) and no
   .nm-auth-heading (no public title actions). --nm-envbar-h falls back to 0: CIP has no
   environment bar. ── */
.nm-auth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--nm-z100);
    font-family: var(--nm-font-sans);
}
.nm-app-loading {
    position: fixed;
    top: var(--nm-envbar-h, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    background: var(--nm-z100, #f4f4f5);
}
.nm-app-loading > .nm-auth-wrap {
    height: 100%;
    min-height: 0;
}
.nm-app-loading-label {
    font-size: 14px;
    color: var(--nm-z500);
    margin-bottom: 14px;
}
.nm-app-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--nm-z200);
    border-top-color: var(--nm-z700);
    border-radius: 50%;
    animation: nm-app-loading-spin .8s linear infinite;
}
@keyframes nm-app-loading-spin { to { transform: rotate(360deg); } }
.nm-auth-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--nm-ring);
    border-radius: var(--nm-radius-xl);
    box-shadow: var(--nm-shadow-card);
    padding: 36px 44px 32px;
    max-width: 400px;
    margin: 0 16px;
    font-size: 14px;
    line-height: normal;
}
.nm-auth-card img {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
}
.nm-auth-card h2 {
    font-size: 18px;
    line-height: normal;
    font-weight: 600;
    color: var(--nm-z950);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.nm-auth-btn,
button.nm-auth-btn {
    background: var(--nm-z900);
    color: #fff;
    border: 1px solid rgba(9, 9, 11, .9);
    border-radius: var(--nm-radius-lg);
    padding: 9px 22px;
    min-height: 0;
    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin-top: 6px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .15), var(--nm-shadow-sm);
}
.nm-auth-btn:hover:not(:disabled),
button.nm-auth-btn:hover:not(:disabled) {
    background: #2c2c30;
    border-color: rgba(9, 9, 11, .9);
    color: #fff;
}