/* Quality Inspection collaboration prototype
   Built from Figma: 187 Quality Collaboration SCC/SCPL, section "QC- History". */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--cui-surface-s4);
}

body {
  margin: 0;
  font-family: var(--cui-font-control);
  color: var(--cui-text-t1);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 1440px;
  margin: 0 auto;
  background: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--cui-text-link);
  text-decoration: none;
}

button {
  font-family: inherit;
}

.icon {
  display: block;
  width: 100%;
  height: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Supplier portal (CSP) header ─────────────────────────────────────── */

.csp-header {
  background: #ffffff;
}

.csp-header__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 68px 12px;
}

.csp-header__brand {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1 0 0;
}

.csp-header__logo {
  width: 82.6px;
  height: 22.4px;
  overflow: hidden;
}

.csp-header__brand span {
  font-size: 18px;
  font-weight: var(--cui-weight-semibold);
  line-height: 24px;
  color: var(--cui-text-2);
}

.csp-welcome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  line-height: 20px;
}

.csp-welcome__item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--csp-link);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.csp-welcome__caret {
  width: 12px;
  height: 12px;
}

.csp-welcome__divider {
  width: 2px;
  height: 12px;
}

.csp-welcome__count {
  background: var(--csp-link);
  color: #ffffff;
  border-radius: 13px;
  padding: 0 12px;
}

.csp-nav {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 68px 12px;
  border-bottom: 4px solid var(--csp-brand);
}

.csp-nav__tab {
  padding: 5px 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-1);
  cursor: pointer;
}

.csp-nav__tab:hover {
  background: var(--silver-100);
}

.csp-nav__tab--active,
.csp-nav__tab--active:hover {
  background: var(--csp-brand);
  border-color: var(--csp-brand);
  border-radius: 21px;
  color: #ffffff;
}

.csp-nav__home {
  width: 23px;
  height: 21px;
}

.csp-customer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  height: 69px;
  padding: 4px 17px 4px 0;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
}

.csp-customer__label {
  font-weight: 700;
  color: var(--cui-text-form-label);
  padding-right: 20px;
}

.csp-customer__select {
  width: 309px;
  height: 28px;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  background: #ffffff;
  padding: 0 8px;
  font: inherit;
  color: #000000;
}

/* ─── Buyer (Coupa core) header ────────────────────────────────────────── */

.coupa-header__bar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #ffffff;
}

.coupa-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  padding-right: 83px;
}

.coupa-header__logo {
  width: 148px;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 3px 4px;
}

.coupa-header__logo img {
  width: 121.6px;
  height: 33.1px;
}

.coupa-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 240px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 18px;
  background: var(--silver-100);
  font-family: var(--coupa-chrome-font);
  font-size: var(--cui-font-size-md);
  color: #6a6969;
  cursor: pointer;
}

.coupa-search img {
  width: 16px;
  height: 16px;
}

.coupa-header__mic {
  position: relative;
  width: 36px;
  height: 36px;
}

.coupa-header__mic img:first-child {
  position: absolute;
  inset: 0;
  width: 36px;
  height: 36px;
}

.coupa-header__mic img:last-child {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 20px;
  height: 20px;
}

.coupa-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coupa-pill {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50px;
  background: var(--cui-surface-s4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--coupa-chrome-font);
  font-size: var(--cui-font-size-md);
  color: var(--cui-text-t3);
}

.coupa-pill img {
  width: 16px;
  height: 16px;
}

.coupa-nav {
  background: #ffffff;
}

.coupa-nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
}

.coupa-nav__link {
  padding: 4px 16px;
  border: 0;
  border-radius: 28px;
  background: none;
  font-family: var(--coupa-nav-font);
  font-size: var(--cui-font-size-md);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t1);
  white-space: nowrap;
  cursor: pointer;
}

.coupa-nav__link:hover {
  background: var(--cui-surface-s4);
}

.coupa-nav__link--active,
.coupa-nav__link--active:hover {
  background: var(--cui-scrollbar-hover);
  color: #ffffff;
  line-height: var(--cui-line-2xs);
}

.coupa-nav__home {
  padding: 4px 8px;
  border-radius: 21px;
}

.coupa-nav__home img {
  width: 24px;
  height: 20px;
  display: block;
}

.coupa-nav__border {
  display: block;
  width: 100%;
  height: 4px;
}

/* ─── Page title ───────────────────────────────────────────────────────── */

.page-title {
  padding: 20px 20px 0;
}

.page-title h1 {
  margin: 0;
  font-family: var(--cui-font-heading);
  font-size: 30px;
  font-weight: var(--cui-weight-bold);
  line-height: 40px;
  color: var(--cui-text-t1);
}

/* ─── Content column ──────────────────────────────────────────────────── */

.content {
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-3xl);
  padding: var(--cui-space-3xl);
  flex: 1 0 auto;
}

/* ─── Alert ───────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cui-space-lg);
  padding: 6px 16px;
  border: 1px solid var(--cui-light-blue-subtle-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.alert--warning {
  border-color: var(--cui-status-warning-bold);
}

.alert__icon {
  padding: 7px 12px 7px 0;
}

.alert__icon img {
  width: 20px;
  height: 20px;
  display: block;
}

.alert__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-2xs);
  padding: 8px 0;
  color: var(--cui-alert-info-color);
}

.alert--warning .alert__text {
  color: var(--cui-alert-warning-color);
}

.alert__title {
  margin: 0;
  font-size: var(--cui-font-size-md);
  font-weight: var(--cui-weight-medium);
  line-height: 1.5;
}

.alert__body {
  margin: 0;
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-regular);
  line-height: 19.992px;
}

.alert__body strong,
.alert__title strong {
  font-weight: var(--cui-weight-bold);
}

.alert__action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--cui-space-2xs);
  border: 1px solid var(--cui-border-neutral-minimal);
  border-radius: var(--cui-radii-2xl);
  background: var(--cui-surface-s4);
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t1);
  white-space: nowrap;
}

.chip img {
  width: 24px;
  height: 24px;
  display: block;
}

.chip__label {
  padding: var(--cui-space-3xs) var(--cui-space-xs);
}

.chip__count {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cui-border-neutral-minimal);
  color: #ffffff;
  font-size: var(--cui-font-size-2xs);
  font-weight: var(--cui-weight-medium);
  letter-spacing: 0.14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
}

.chip--warning {
  background: var(--cui-orange-subtle-surface);
  border-color: var(--cui-orange-subtle-border);
}

/* A chip that is a control: the alert's "Characteristics Pending" jumps to
   the table. Same look as the static chip, plus the pointer and states. */
.chip--link {
  font-family: inherit;
  cursor: pointer;
}

.chip--link:hover {
  background: var(--cui-border-b2);
}

.chip--link.chip--warning:hover {
  background: #ffd9ad;
}

/* The jump stops a little short of the table, not flush with the window. */
#characteristics {
  scroll-margin-top: 20px;
}

.chip--link:focus-visible {
  outline: 2px solid var(--cui-light-blue-subtle-border);
  outline-offset: 2px;
}

.chip--warning .chip__count {
  background: var(--cui-status-warning-bold);
}

/* ─── Card / accordion ────────────────────────────────────────────────── */

.card {
  background: var(--cui-surface-s1);
  border: 1px solid var(--cui-border-b2-alt);
  border-radius: var(--cui-radii-xl);
  padding: var(--cui-space-4xl) var(--cui-space-5xl);
}

.card--tight {
  padding: var(--cui-space-4xl);
  border-color: var(--cui-border-b2);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.card__title {
  margin: 0;
  font-family: var(--cui-font-heading);
  font-size: var(--cui-font-size-2xl);
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-lg);
  color: var(--cui-text-1);
  text-align: left;
}

.card__chevron {
  width: 24px;
  height: 24px;
  transition: transform 0.18s ease;
}

.card__body {
  margin-top: var(--cui-space-3xl);
}

.card.is-collapsed .card__body {
  display: none;
}

.card.is-collapsed .card__chevron {
  transform: rotate(180deg);
}

/* ─── Summary ─────────────────────────────────────────────────────────── */

.summary .card__title {
  color: var(--cui-text-t1);
}

.summary__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 20px;
}

.summary__label {
  font-size: var(--cui-font-size-2xs);
  font-weight: var(--cui-weight-semibold);
  letter-spacing: 0.3px;
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-form-label);
  margin: 0 0 4px;
}

.summary__value {
  margin: 0;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  line-height: 18px;
  color: var(--cui-text-1);
}

.summary__value a {
  color: var(--cui-text-link);
}

.summary__more {
  margin-top: var(--cui-space-3xl);
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--cui-radii-xs);
  background: var(--cui-surface-s2);
  color: var(--cui-text-link);
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.summary__more img {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.summary.is-expanded .summary__more img {
  transform: rotate(180deg);
}

.summary__extra {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px 20px;
  margin-top: 24px;
}

/* Third row — Figma 518:29199, revealed by "Show more". */
.summary__extra--third {
  display: none;
}

.summary.is-expanded .summary__extra--third {
  display: grid;
}

/* ─── Table block ─────────────────────────────────────────────────────── */

.table-block {
  background: var(--cui-surface-s1);
  border: 1px solid var(--cui-border-b2-alt);
  border-radius: var(--cui-radii-xl);
  padding: 0 0 8px;
}

.table-block__title-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 16px 8px;
}

.views-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: var(--cui-radii-xs);
  background: var(--silver-100);
  font-size: var(--cui-font-size-md);
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-1);
  cursor: pointer;
}

.views-trigger img {
  width: 24px;
  height: 24px;
}

.table-block__title {
  margin: 0;
  font-family: var(--cui-font-heading);
  font-size: var(--cui-font-size-2xl);
  font-weight: var(--cui-weight-bold);
  line-height: 32px;
  color: var(--cui-text-1);
}

.views-panel {
  display: none;
  margin: 0 16px 12px;
  width: 256px;
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--cui-radii-xs);
  padding: 8px;
}

.views-panel.is-open {
  display: block;
}

.views-panel__title {
  margin: 0 0 4px;
  font-size: var(--cui-font-size-2xs);
  font-weight: var(--cui-weight-semibold);
  letter-spacing: 0.3px;
  color: var(--cui-text-form-label);
}

.views-panel__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-t1);
  cursor: pointer;
}

.views-panel__item:hover,
.views-panel__item.is-active {
  background: var(--cui-surface-s3);
}

.table-block__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 16px 12px;
}

.table-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--cui-border-input);
  border-radius: var(--cui-radii-xs);
  background: #ffffff;
}

.table-search input {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: var(--cui-font-size-md);
  color: var(--cui-text-t1);
}

.table-search input::placeholder {
  color: var(--cui-text-t3);
}

.table-search img {
  width: 20px;
  height: 20px;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--cui-radii-xs);
  background: var(--cui-surface-s3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-button:hover {
  background: var(--cui-surface-s4);
}

.icon-button img {
  width: 20px;
  height: 20px;
}

/* No horizontal padding here on purpose: a padded scrollport leaves a strip at
   the right edge that the locked columns cannot cover, and scrolled cells show
   through it. The 16px inset lives on the edge cells instead. */
.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cui-scrollbar-rest) transparent;
}

.table-scroll::-webkit-scrollbar {
  height: 8px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: var(--cui-scrollbar-rest);
  border-radius: 50px;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--cui-scrollbar-hover);
}

/* Wider than the viewport on purpose: the data columns scroll sideways while
   the Actions column stays locked to the right edge. */
.data-table {
  --col-att-w: 244px; /* holds a file name at the library's 210px, plus its icon */
  --col-actions-w: 80px;
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-1);
  white-space: nowrap;
}

/* Generous column widths: the table is wider than the card and scrolls sideways,
   while Attachments and Actions stay pinned to the right edge. */
.data-table th[data-sort-key='id'] { min-width: 56px; }
.data-table th[data-sort-key='characteristic'] { min-width: 240px; }
.data-table th[data-sort-key='range'] { min-width: 150px; }
.data-table th[data-sort-key='result'] { min-width: 120px; }
.data-table th[data-sort-key='expectedResult'] { min-width: 200px; }
.data-table th[data-sort-key='inspectedBy'] { min-width: 160px; }
/* 166px so the date field and its picker fit without the column resizing
   when a row goes into inline edit. */
.data-table th[data-sort-key='inspectionDate'] { min-width: 166px; }
.data-table th[data-sort-key='remarks'] { min-width: 300px; }

/* The 16px inset the scroller used to carry */
.data-table th:first-child,
.data-table td:first-child {
  padding-left: 16px;
}

.data-table th {
  text-align: left;
  font-weight: var(--cui-weight-semibold);
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-1);
  padding: 6px 12px;
  border-bottom: 1px solid var(--cui-border-b2);
  background: #ffffff;
}

.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--cui-border-b2);
  vertical-align: middle;
}

.data-table tbody tr:hover td {
  background: var(--cui-surface-s2);
}

/* Specification is a fixed 300px column whose text wraps instead of clipping,
   so the full spec reads in place on both screens. A wrapped cell is never
   clipped, so the hover tooltip stops appearing there by itself. */
.data-table th[data-sort-key='specification'],
.data-table .col-spec {
  box-sizing: border-box;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}

.data-table .col-spec {
  white-space: normal;
  overflow-wrap: break-word;
  overflow: visible;
  text-overflow: clip;
}

.data-table .col-remarks {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Attachments scrolls with the data columns; only Actions is locked. */
.data-table .col-att,
.data-table th.col-att {
  width: var(--col-att-w);
  min-width: var(--col-att-w);
}

/* Locked Actions column */
.data-table .col-actions,
.data-table th.col-actions {
  position: sticky;
  right: 0;
  width: var(--col-actions-w);
  min-width: var(--col-actions-w);
  padding-right: 16px;
  background: #ffffff;
  border-left: 1px solid var(--cui-border-b2);
  box-shadow: -4px 0 5px rgba(0, 0, 0, 0.08);
  text-align: center;
  z-index: 2;
}

.data-table th.col-actions {
  z-index: 3;
}

.data-table tbody tr:hover td.col-actions {
  background: var(--cui-surface-s2);
}

/* Inline row editing — Figma 507:44397. The row keeps its columns; the four
   supplier-owned cells swap their text for fields. */
/* 11px keeps the edited row the same height as its neighbours. */
.data-table tbody tr.is-editing td {
  padding-top: 11px;
  padding-bottom: 11px;
  background: var(--cui-surface-s3);
  white-space: normal;
}

.data-table tbody tr.is-editing td.col-actions {
  background: var(--cui-surface-s3);
}

.cell-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--cui-border-input);
  border-radius: var(--cui-radii-xs);
  background: #ffffff;
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-1);
}

.cell-input:focus {
  outline: 2px solid var(--cui-light-blue-subtle-border);
  outline-offset: -1px;
}

/* Two buttons where the pencil was, without widening the locked column. */
.row-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.row-edit-actions .row-action {
  width: 24px;
  height: 24px;
}

/* Full text for the cells the columns clip */
.cell-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 80;
  max-width: 420px;
  padding: 8px 12px;
  border-radius: var(--cui-radii-xs);
  background: var(--cui-text-t1);
  color: #ffffff;
  font-size: var(--cui-font-size-2xs);
  line-height: var(--cui-line-2xs);
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: opacity 0.12s ease;
}

.cell-tooltip.is-visible {
  opacity: 1;
}

.row-action {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: var(--cui-surface-s3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.row-action:hover {
  background: var(--cui-surface-s4);
}

.row-action img {
  width: 20px;
  height: 20px;
}

.row-action--bare {
  background: none;
}

.row-action--bare img {
  width: 18px;
  height: 18px;
}

.att-icon {
  width: 16px;
  height: 20px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

/* Attachments column: the row's line-level files, named and styled like their
   Attachments Library rows. A row with two files stacks them. */
.att-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
}

.att-cell__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cui-text-t1);
  cursor: pointer;
  text-align: left;
}

.att-cell__file--link {
  color: var(--cui-text-link);
}

.att-cell__file img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.att-cell__file span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.att-cell__file:hover span {
  text-decoration: underline;
}

.att-cell__none {
  color: var(--cui-text-t3);
}

/* Editing a row: its attachments stay clickable and the library's own
   "Add File | URL" affordance attaches more to this characteristic. */
.att-cell--editing {
  gap: 6px;
  width: 100%;
}

.att-cell__add {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  color: var(--cui-text-1);
}

.att-cell__add button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--coupa-primary);
  cursor: pointer;
}

.att-cell__add button:hover {
  text-decoration: underline;
}

.att-cell__add button.is-active {
  font-weight: 700;
  text-decoration: underline;
}

.att-cell__url {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.att-cell__url-add {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--cui-radii-xs);
  background: var(--cui-text-link);
  font-family: inherit;
  font-size: var(--cui-font-size-2xs);
  font-weight: var(--cui-weight-semibold);
  color: #ffffff;
  cursor: pointer;
}

.att-cell__url-add:disabled {
  background: var(--cui-surface-s4);
  color: var(--cui-text-t3);
  cursor: default;
}

.result-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--cui-radii-2xl);
  font-size: var(--cui-font-size-sm);
}

.result-pill--warning {
  background: var(--cui-orange-subtle-surface);
  border: 1px solid var(--cui-orange-subtle-border);
}

.result-pill--error {
  background: #fdecec;
  border: 1px solid var(--cui-status-error);
}

/* ─── Inspections list — Figma 514:38555 ──────────────────────────────── */

/* The list screen's own title sizes: a lighter page title than the inspection
   screens carry, a 20px section title, and a plain-text Views control. */
.page-title--list h1 {
  font-size: 28px;
  font-weight: var(--cui-weight-regular);
  line-height: 36px;
}

.table-block__title--list {
  font-size: var(--cui-font-size-xl);
  line-height: var(--cui-line-md);
}

.views-trigger--bare {
  background: none;
  padding-left: 0;
  font-weight: var(--cui-weight-regular);
}

.views-trigger--bare img {
  width: 20px;
  height: 20px;
}

/* Search with the magnifier after the field, as this screen draws it. */
.table-search--trailing img {
  opacity: 0.7;
}

/* All 12 columns are in frame in the design, so the table is laid out to the
   card's width rather than scrolled sideways: fixed layout, allotted widths,
   and cells that wrap. Rows align to the top so a wrapped cell does not shift
   its neighbours' first line. */
.data-table--list {
  table-layout: fixed;
  width: 100%;
}

.data-table--list td,
.data-table--list th {
  white-space: normal;
  vertical-align: top;
}

/* Only cell values may be broken mid-word; a column label never is. */
.data-table--list td {
  overflow-wrap: break-word;
}

.data-table--list .col-num {
  text-align: right;
}

.data-table--list th.col-num {
  text-align: left;
}

.data-table--list .col-nowrap {
  white-space: nowrap;
}

/* Widths follow the content: the long free-text columns take the room, the
   date columns take only what a date needs. */
.data-table--list th[data-ins-sort-key='id'] { width: 100px; }
.data-table--list th[data-ins-sort-key='documentReference'] { width: 152px; }
.data-table--list th[data-ins-sort-key='requestedBy'] { width: 140px; }
.data-table--list th[data-ins-sort-key='itemName'] { width: 142px; }
.data-table--list th[data-ins-sort-key='supplierPartNumber'] { width: 114px; }
.data-table--list th[data-ins-sort-key='buyerPartNumber'] { width: 100px; }
.data-table--list th[data-ins-sort-key='requestDate'] { width: 100px; }
.data-table--list th[data-ins-sort-key='dueDate'] { width: 100px; }
.data-table--list th[data-ins-sort-key='status'] { width: 100px; }
.data-table--list th[data-ins-sort-key='resolutionReason'] { width: 134px; }
.data-table--list th[data-ins-sort-key='supplier'] { width: 116px; }
.data-table--list th[data-ins-sort-key='createdAt'] { width: 100px; }

/* Recoloured Figma caret: the sorted column is marked in the link blue. */
.sort-caret {
  width: 8px;
  height: 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.sort-caret--asc {
  transform: rotate(180deg);
}

.link-button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  color: var(--cui-text-link);
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}

/* "Per page 15 | 45 | 90" — the sizes other than the current one are links. */
.table-block__footer--list {
  justify-content: flex-start;
  font-size: var(--cui-font-size-sm);
}

.per-page {
  display: flex;
  align-items: center;
  gap: 8px;
}

.per-page button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--cui-text-link);
  cursor: pointer;
}

.per-page button:hover {
  text-decoration: underline;
}

.per-page button.is-current {
  color: var(--cui-text-1);
}

.per-page__pipe {
  color: var(--cui-text-t3);
}

.table-block__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 4px;
  font-size: var(--cui-font-size-2xs);
  color: var(--cui-text-1);
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pager button,
.page-size button {
  border: 0;
  background: none;
  padding: 2px 6px;
  border-radius: 4px;
  font: inherit;
  color: var(--cui-text-1);
  cursor: pointer;
}

.pager button:hover,
.page-size button:hover {
  background: var(--cui-surface-s3);
}

.pager button.is-current {
  border: 1px solid var(--cui-border-input);
}

.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size button.is-current {
  background: var(--cui-surface-s3);
  font-weight: var(--cui-weight-semibold);
}

/* ─── Attachments Library — Figma 758:125789 ──────────────────────────── */

.attachments .card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The count line above it already carries the gap under the card title. */
  margin-top: 20px;
}

/* Sits outside .card__body so the collapsed card still reads
   "Attachments: 6 Files | 1 URL" — the Figma collapsed state. */
.attachments .att__count {
  margin-top: var(--cui-space-3xl);
}

.att__count {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t1);
}

.att__count button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cui-text-link);
  cursor: pointer;
}

.att__count button:hover {
  text-decoration: underline;
}

.att__pipe {
  color: var(--cui-text-link);
}

.att__panes {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.att__list {
  width: 648px;
  flex: 0 0 648px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Tabs with count badges */
.att__tabs {
  display: flex;
  align-items: stretch;
  height: 46px;
}

.att__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  letter-spacing: 0.3px;
  line-height: 26px;
  color: var(--cui-text-t2);
  cursor: pointer;
}

.att__tab.is-active {
  color: var(--cui-text-link);
  border-bottom-color: var(--cui-text-t2);
}

.att__badge {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 14px;
  background: #3b4758;
  font-size: 13px;
  font-weight: var(--cui-weight-semibold);
  line-height: 20px;
  text-align: center;
  color: var(--cui-surface-s2);
}

.att__list-title {
  margin: 0;
  font-size: var(--cui-font-size-md);
  font-weight: 800;
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
}

/* File rows */
.att__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.att__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 28px;
  padding: 2px 6px;
  border-radius: var(--cui-radii-xs);
  cursor: pointer;
}

.att__row:hover,
.att__row.is-selected {
  background: var(--cui-surface-s3);
}

.att__row.is-selected .att__row-name {
  font-weight: var(--cui-weight-semibold);
}

.att__row-line {
  width: 21px;
  flex: 0 0 21px;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
}

.att__row-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.att__row-name {
  width: 210px;
  flex: 0 0 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
}

.att__row-name--link {
  color: var(--cui-text-link);
}

.att__row-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.att__row-action {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.85;
}

.att__row-action:hover {
  opacity: 1;
}

.att__row-action img {
  width: 24px;
  height: 24px;
}

.att__empty {
  padding: 8px 6px;
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-t3);
}

/* Pagination — Figma <Pagination> */
.att__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
}

.att__pager button {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  line-height: 20px;
  color: var(--cui-text-t2);
  cursor: pointer;
}

.att__pager button:hover:not(:disabled) {
  background: var(--cui-surface-s3);
}

.att__pager button.is-current {
  background: var(--cui-surface-s4);
  color: var(--cui-text-t1);
}

.att__pager button:disabled {
  opacity: 0.35;
  cursor: default;
}

.att__pager button img {
  width: 6.02px;
  height: 10.69px;
}

.att__pager button.att__pager-prev img {
  transform: rotate(180deg);
}

.att__pager span {
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-t3);
}

/* "Add File | URL" */
.att__add {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  color: var(--cui-text-1);
}

.att__add button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--coupa-primary);
  cursor: pointer;
}

.att__add button.is-active {
  font-weight: 700;
  text-decoration: underline;
}

.att__adder {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.attachments.is-adding .att__adder {
  display: flex;
}

.att__dropzone {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--cui-border-input);
  border-radius: 10px;
  font-size: var(--cui-font-size-sm);
  line-height: 19.992px;
  color: #607590;
}

.attachments.is-adding-file .att__dropzone {
  display: flex;
}

.attachments.is-adding-file .att__dropzone.is-dragover {
  background: var(--cui-surface-s3);
}

.att__browse {
  padding: 4px 12px;
  border: 1px solid rgba(96, 117, 144, 0.5);
  border-radius: var(--cui-radii-md);
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--cui-weight-semibold);
  letter-spacing: 0.3px;
  line-height: 22px;
  color: #607590;
  cursor: pointer;
}

.att__url {
  display: none;
  align-items: center;
  gap: 8px;
}

.attachments.is-adding-url .att__url {
  display: flex;
}

.att__url input {
  flex: 1;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--cui-border-input);
  border-radius: 10px;
  background: var(--cui-surface-s1);
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-1);
}

.att__url input::placeholder {
  color: #607590;
}

.att__url-add {
  padding: 6px 16px;
  border: 0;
  border-radius: var(--cui-radii-md);
  background: var(--cui-text-link);
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  letter-spacing: 0.3px;
  line-height: 26px;
  color: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  cursor: pointer;
}

.att__url-add:disabled {
  background: var(--cui-surface-s4);
  color: var(--cui-text-t3);
  filter: none;
  cursor: default;
}

/* Preview pane */
.att__preview {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  min-height: 320px;
  border-radius: var(--cui-radii-xl);
  background: var(--cui-surface-s3);
  padding: 10px;
}

/* "Expand" in the preview action set */
.att__preview.is-full {
  position: fixed;
  inset: 24px;
  z-index: 60;
  overflow: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.att__preview.is-full .att__sheet {
  height: auto;
  min-height: calc(100vh - 140px);
}

.att__preview-empty {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.att__preview-empty h3 {
  margin: 0;
  font-size: var(--cui-font-size-xl);
  font-weight: var(--cui-weight-bold);
  line-height: 32px;
  color: var(--cui-text-t1);
}

.att__preview-empty p {
  margin: 0;
  font-size: var(--cui-font-size-md);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t2);
}

.att__preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 2px;
}

.att__preview-name {
  margin: 0;
  font-size: var(--cui-font-size-md);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t1);
}

.att__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.att__action {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  border-radius: var(--cui-radii-md);
  background: none;
  cursor: pointer;
}

.att__action:hover {
  background: var(--cui-surface-s4);
}

.att__action img {
  width: 24px;
  height: 24px;
}

.att__sheet {
  height: 700px;
  overflow: auto;
  padding: 20px;
  border-radius: 12px;
  background: var(--cui-surface-s1);
}

.att__sheet img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.18s ease;
  transform-origin: top center;
}

.att__doc {
  max-width: 558px;
  margin: 0 auto;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  line-height: 20px;
  color: var(--cui-text-1);
  transition: transform 0.18s ease;
  transform-origin: top center;
}

.att__doc h4 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 24px;
}

.att__doc h5 {
  margin: 16px 0 4px;
  font-size: 13px;
  line-height: 20px;
}

.att__doc p,
.att__doc ul {
  margin: 0 0 8px;
}

.att__doc ul {
  padding-left: 18px;
}

.att__doc .att__doc-meta {
  margin: 0;
  color: var(--cui-text-2);
}

/* URL attachment preview */
.att__link {
  padding: 12px 2px;
}

.att__link h3 {
  margin: 0 0 8px;
  font-size: var(--cui-font-size-xl);
  font-weight: var(--cui-weight-bold);
  line-height: 32px;
  color: var(--cui-text-t1);
}

.att__link p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--cui-font-size-md);
  line-height: var(--cui-line-xs);
}

.att__link a {
  color: var(--cui-text-link);
}

.att__link img {
  width: 20px;
  height: 20px;
}

.att__note {
  margin: 0;
  padding: 40px 12px;
  text-align: center;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t3);
}

/* ─── Comments ────────────────────────────────────────────────────────── */

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-form__label {
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  letter-spacing: 0.3px;
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
}

.comment-form textarea {
  width: 100%;
  height: 71px;
  padding: 8px 12px;
  border: 1px solid var(--cui-border-input);
  border-radius: var(--cui-radii-md);
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-1);
  resize: vertical;
}

.comment-form textarea:focus {
  outline: 2px solid var(--cui-light-blue-subtle-border);
  outline-offset: -1px;
}

.comment-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.comment-form__row--end {
  justify-content: flex-end;
}

.comment-form__attach {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  color: var(--cui-text-1);
}

.comment-form__attach button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--coupa-primary);
  cursor: pointer;
}

.btn-legacy {
  padding: 6px 12px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #eeeeee 0%, #e0dfe0 100%);
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--cui-text-dark);
  cursor: pointer;
}

.btn-legacy:hover {
  background: linear-gradient(180deg, #e6e6e6 0%, #d6d5d6 100%);
}

/* ─── Comment — legacy Coupa comment component ─────────────────────────────
   Matched to the supplied screengrab, which is core Coupa's own comment widget
   rather than a CUI card: no card border or radius, a counted bubble and a dark
   rule under the title, "Mute Comments" and a collapse chevron on the right,
   "Add File | URL" inside the input's box, the @name hint, the posting buttons
   disabled until something is typed, Participants, then the thread on grey
   panels. The colours below are sampled from the screengrab, not CUI tokens,
   which is why they are literals. */

.cmt {
  margin-top: var(--cui-space-4xl);
}

.cmt__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #333333;
}

/* The bubble carries the comment count, so the count is text over the glyph. */
.cmt__badge {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

.cmt__badge img {
  display: block;
  width: 22px;
  height: 22px;
}

.cmt__badge-count {
  position: absolute;
  top: 2px;
  left: 0;
  width: 22px;
  height: 13px;
  font-size: 10px;
  font-weight: var(--cui-weight-semibold);
  line-height: 13px;
  text-align: center;
  color: #D2822A;
}

.cmt__title {
  flex: 1 0 auto;
  margin: 0;
  font-family: var(--cui-font-heading);
  font-size: 26px;
  font-weight: var(--cui-weight-regular);
  line-height: 32px;
  color: var(--cui-text-dark);
}

.cmt__head-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cmt__mute {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-link);
  cursor: pointer;
}

.cmt__mute:hover {
  text-decoration: underline;
}

.cmt__collapse {
  display: flex;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.cmt__collapse img {
  width: 20px;
  height: 20px;
  transition: transform 0.18s ease;
}

.cmt.is-collapsed .cmt__collapse img {
  transform: rotate(180deg);
}

.cmt.is-collapsed .cmt__body {
  display: none;
}

.cmt__label {
  display: block;
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t2);
}

/* One bordered box holds the textarea and the Add File | URL line, as the
   screengrab has it — the input's own border is the box. */
.cmt__input {
  border: 1px solid #ccd2d9;
  border-radius: 2px;
  background: #ffffff;
}

.cmt__input textarea {
  display: block;
  width: 100%;
  height: 52px;
  padding: 8px 10px 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-1);
  resize: vertical;
}

.cmt__input textarea:focus {
  outline: 0;
}

.cmt__input:focus-within {
  border-color: var(--cui-light-blue-subtle-border);
}

.cmt__attach {
  margin: 0;
  padding: 0 10px 7px;
  font-size: 13px;
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-dark);
}

.cmt__attach button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--cui-text-link);
  cursor: pointer;
}

.cmt__attach button:hover {
  text-decoration: underline;
}

.cmt__pipe {
  color: #9aa3ad;
}

.cmt__hint {
  margin: 5px 0 0;
  font-size: var(--cui-font-size-2xs);
  line-height: var(--cui-line-3xs);
  color: #767676;
}

.cmt__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Disabled until the box has text, which is the state the screengrab caught. */
.cmt__btn {
  padding: 8px 18px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #eeeeee 0%, #e0dfe0 100%);
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  font-weight: var(--cui-weight-medium);
  color: var(--cui-text-dark);
  cursor: pointer;
}

.cmt__btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #e6e6e6 0%, #d6d5d6 100%);
}

.cmt__btn:disabled {
  background: #d6d9dc;
  color: #8f9499;
  cursor: default;
}

.cmt__participants {
  margin: 18px 0 0;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  font-weight: var(--cui-weight-bold);
  color: var(--cui-text-dark);
}

.cmt__participants-label {
  margin-right: 8px;
}

.cmt__list {
  margin-top: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.cmt-entry {
  padding: 12px 18px 16px;
  background: #f4f4f4;
}

.cmt-entry + .cmt-entry {
  margin-top: 10px;
}

.cmt-entry__tag {
  margin: 0 0 8px;
  font-size: var(--cui-font-size-2xs);
  line-height: var(--cui-line-3xs);
  color: #767676;
}

.cmt-entry__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmt-entry__avatar {
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
}

.cmt-entry__avatar img {
  display: block;
  width: 44px;
  height: 44px;
}

.cmt-entry__name {
  flex: 1 0 auto;
  font-size: 15px;
  font-weight: var(--cui-weight-bold);
  color: var(--cui-text-dark);
}

.cmt-entry__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmt-entry__time {
  font-size: 13px;
  color: #767676;
}

.cmt-entry__edit {
  display: flex;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.cmt-entry__edit img {
  width: 20px;
  height: 20px;
}

/* The body sits at the panel's own left edge, not indented under the avatar. */
.cmt-entry__body {
  margin: 10px 0 0;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-dark);
}

.cmt__empty {
  margin: 0;
  padding: 12px 0;
  font-size: var(--cui-font-size-sm);
  color: #767676;
}

/* ─── History ─────────────────────────────────────────────────────────── */

.history {
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-md);
}

.history .card__title {
  color: var(--cui-text-t1);
}

.history__filter {
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-2xl);
  padding: var(--cui-space-lg) 0;
  border-bottom: 1px solid var(--cui-border-b2);
}

.history__filter-bar {
  display: flex;
  align-items: flex-start;
  gap: var(--cui-space-lg);
}

.history-search {
  display: flex;
  align-items: center;
  gap: var(--cui-space-2xl);
  flex: 1 0 0;
  min-width: 0;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--cui-radii-md);
  background: #ffffff;
}

.history-search img {
  width: 24px;
  height: 24px;
}

.history-search input {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: var(--cui-font-size-md);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t1);
}

.history-search input::placeholder {
  color: var(--cui-text-t3);
}

.history-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--cui-radii-md);
  background: #ffffff;
  font-size: var(--cui-font-size-md);
  color: var(--cui-text-t1);
  cursor: pointer;
  white-space: nowrap;
}

.history-sort img:first-child {
  width: 20px;
  height: 20px;
}

.history-sort img:last-child {
  width: 8px;
  height: 5px;
}

.history__chips {
  display: flex;
  align-items: center;
  gap: var(--cui-space-sm);
}

.history-chip {
  padding: var(--cui-space-xs) var(--cui-space-lg);
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--cui-radii-xs);
  background: var(--cui-surface-s1);
  font-size: var(--cui-font-size-2xs);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
  cursor: pointer;
}

.history-chip:hover {
  background: var(--cui-surface-s3);
}

.history-chip.is-active {
  background: var(--cui-brand2-200);
  border-color: var(--cui-brand2-200);
}

.history__frames {
  display: flex;
  gap: var(--cui-space-sm);
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cui-scrollbar-rest) transparent;
}

.history__frames::-webkit-scrollbar {
  width: 8px;
}

.history__frames::-webkit-scrollbar-thumb {
  background: var(--cui-scrollbar-rest);
  border-radius: 50px;
}

.history__bubbles {
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-md);
  flex: 1 0 0;
  min-width: 0;
}

.bubble {
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-sm);
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--cui-radii-xs);
  padding: var(--cui-space-lg) var(--cui-space-sm) var(--cui-space-sm) var(--cui-space-lg);
}

.bubble__user {
  display: flex;
  align-items: flex-start;
  gap: var(--cui-space-sm);
}

.avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cui-surface-s4);
  color: var(--cui-text-t3);
  font-size: var(--cui-font-size-2xs);
  font-weight: var(--cui-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bubble__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cui-space-2xs);
  padding: var(--cui-space-sm) var(--cui-space-md);
}

.bubble__name {
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t2);
}

.bubble__action {
  margin: 0;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t2);
}

.bubble__action a {
  color: var(--cui-text-link-history);
  text-decoration: underline;
}

.bubble__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t2);
}

.bubble__lines li {
  word-break: break-word;
  white-space: normal;
}

.bubble__bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--cui-space-md) 0 var(--cui-space-7xl);
}

.bubble__timestamp {
  margin: 0;
  font-size: var(--cui-font-size-2xs);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t2);
  text-align: right;
}

.bubble--new {
  animation: bubble-in 0.35s ease;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.history__empty {
  padding: 24px 0;
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-t3);
}

/* ─── Action bars ─────────────────────────────────────────────────────── */

.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 26px;
}

.action-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.btn {
  padding: 9px 16px;
  border-radius: var(--cui-radii-xs);
  border: 1px solid transparent;
  font-family: var(--cui-font-control);
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-2xs);
  cursor: pointer;
}

.btn--primary {
  background: var(--coupa-primary);
  color: #ffffff;
}

.btn--primary:hover {
  background: #0a63d2;
}

.btn--outline {
  background: #ffffff;
  border-color: var(--cui-border-input);
  color: var(--cui-text-t1);
}

.btn--outline:hover {
  background: var(--cui-surface-s3);
}

.btn--link-outline {
  background: #ffffff;
  border-color: var(--coupa-primary);
  color: var(--coupa-primary);
}

.btn--link-outline:hover {
  background: #f2f7ff;
}

.btn--danger-outline {
  background: #ffffff;
  border-color: var(--cui-status-error);
  color: var(--cui-status-error);
}

.btn--danger-outline:hover {
  background: #fdf1f1;
}

/* ─── Footer ──────────────────────────────────────────────────────────── */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
}

.footer__border {
  width: 100%;
  height: 4px;
  background: var(--csp-link);
}

.footer__contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 8px;
}

.footer__logo {
  width: 96px;
  height: 28px;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--coupa-chrome-font);
  font-size: 13px;
  color: var(--cui-text-dark);
}

.footer__links img {
  width: 16.7px;
  height: 20px;
}

/* ─── Success banner — buyer-inspections.html ─────────────────────────────
   Matched to the supplied screengrab: a full-width green bar with bold white
   text and a white close ×. The green is sampled from the screengrab; CUI has
   no matching token. */

.success-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  margin-bottom: 20px;
  padding: 0 20px;
  background: #6aaf5a;
  color: #ffffff;
}

.success-banner[hidden] {
  display: none;
}

.success-banner__text {
  margin: 0;
  font-size: 13px;
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-3xs);
}

.success-banner__close {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* close-outline.svg is drawn dark; the banner's × is white. */
.success-banner__close img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* ─── Modal / toast (prototype feedback) ──────────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 40, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.overlay.is-open {
  display: flex;
}

.modal {
  width: 480px;
  max-width: calc(100vw - 40px);
  background: #ffffff;
  border-radius: var(--cui-radii-xl);
  padding: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.modal h2 {
  margin: 0 0 8px;
  font-family: var(--cui-font-heading);
  font-size: var(--cui-font-size-xl);
  font-weight: var(--cui-weight-bold);
  color: var(--cui-text-t1);
}

.modal p {
  margin: 0 0 20px;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t2);
}

.modal__dl {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 12px;
  font-size: var(--cui-font-size-sm);
  color: var(--cui-text-t2);
}

.modal__dl dt {
  font-weight: var(--cui-weight-semibold);
  color: var(--cui-text-form-label);
}

.modal__dl dd {
  margin: 0;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ─── Reason modals — buyer Accept / Reject / Send Back ────────────────────
   Matched to the supplied "Modal flows" screengrab: a small-radius white
   panel, a regular-weight title, a one-line intro, bold field labels, a
   Reason dropdown whose open menu is a floating card, Comments, then a text
   Cancel and a compact primary button. Sizes are scaled from the screengrab;
   colours are CUI tokens. */

.qmodal {
  width: 480px;
  max-width: calc(100vw - 40px);
  padding: 22px 22px 22px;
  border-radius: var(--border-radius);
  background: var(--cui-surface-s1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  font-family: var(--cui-font-control);
}

/* Send Back has no Reason row; the design keeps it the others' height. */
.qmodal--tall {
  min-height: 364px;
  display: flex;
  flex-direction: column;
}

.qmodal--tall .qmodal__actions {
  margin-top: auto;
}

.qmodal__title {
  margin: 0;
  font-family: var(--cui-font-heading);
  font-size: 18px;
  font-weight: var(--cui-weight-regular);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t1);
}

.qmodal__intro {
  margin: 8px 0 20px;
  font-size: 13px;
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
}

.qmodal__label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
}

.qselect {
  position: relative;
  margin-bottom: 16px;
}

.qselect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--border-radius);
  background: var(--cui-surface-s1);
  font: inherit;
  font-size: 12px;
  color: var(--cui-text-t1);
  text-align: left;
  cursor: pointer;
}

.qselect__trigger:focus-visible,
.qselect.is-open .qselect__trigger {
  outline: none;
  border-color: var(--cui-light-blue-subtle-border);
}

.qselect.is-invalid .qselect__trigger {
  border-color: var(--cui-status-error);
}

.qselect__value.is-placeholder {
  color: var(--cui-text-t3);
}

.qselect__trigger img {
  width: 7.31px;
  height: 4px;
  flex: none;
}

.qselect__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 2;
  display: none;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border-radius: var(--border-radius);
  background: var(--cui-surface-s1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.16);
}

.qselect.is-open .qselect__menu {
  display: block;
}

.qselect__option {
  display: block;
  width: 100%;
  padding: 6px 20px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t1);
  text-align: left;
  cursor: pointer;
}

.qselect__option:hover,
.qselect__option:focus-visible {
  outline: none;
  background: var(--cui-surface-s3);
}

.qselect__option[aria-selected='true'] {
  font-weight: var(--cui-weight-semibold);
}

.qmodal__comments {
  display: block;
  width: 100%;
  height: 82px;
  padding: 10px 10px;
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--border-radius);
  font: inherit;
  font-size: 12px;
  line-height: 22px;
  color: var(--cui-text-t1);
  resize: vertical;
}

.qmodal__comments:focus {
  outline: none;
  border-color: var(--cui-light-blue-subtle-border);
}

.qmodal__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.qmodal__cancel {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--cui-text-link-history);
  cursor: pointer;
}

.qmodal__cancel:hover {
  text-decoration: underline;
}

.qmodal__submit {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: var(--cui-text-link-history);
  font: inherit;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
}

.qmodal__submit:hover {
  background: var(--cui-light-blue-bold-surface);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(16px);
  background: var(--cui-text-t1);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: var(--cui-radii-xs);
  font-size: var(--cui-font-size-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 70;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Prototype role switcher (not part of the Figma) ─────────────────── */

.proto-switch {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--cui-radii-2xl);
  background: rgba(27, 31, 40, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-size: var(--cui-font-size-2xs);
  color: #ffffff;
}

.proto-switch__label {
  padding-left: 4px;
  opacity: 0.7;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.proto-switch a {
  padding: 4px 10px;
  border-radius: var(--cui-radii-2xl);
  color: #ffffff;
  font-weight: var(--cui-weight-semibold);
}

.proto-switch a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.proto-switch a.is-current {
  background: #ffffff;
  color: var(--cui-text-t1);
}

/* ─── Gmail shell — email.html ─────────────────────────────────────────────
   A mock-up of the inbox the supplier reads the notification in, matched to
   the supplied Gmail screengrab: a top bar with search and the account pill,
   the folder nav with Compose, the message on a white rounded panel with its
   toolbar, subject row and sender header, and the side-panel rail. Gmail's
   own colours are literals (they are not Coupa's, so there are no tokens).
   The panel scrolls inside the window, as Gmail's does. Responsive: the nav
   and then the rail drop away as the viewport narrows. */

.gm-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.gm-body {
  background: #f6f8fc;
}

.gm {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr) 56px;
  grid-template-rows: 64px minmax(0, 1fr);
  height: 100vh;
  font-family: Roboto, Arial, sans-serif;
  color: #1f1f1f;
}

.gm-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.gm-icon--sm { width: 16px; height: 16px; }
.gm-icon--xs { width: 12px; height: 12px; }

.gm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #444746;
  cursor: pointer;
}

.gm-iconbtn:hover {
  background: rgba(68, 71, 70, 0.08);
}

.gm-iconbtn--wide {
  width: 48px;
  border-radius: 20px;
}

/* Top bar */
.gm-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px 0 12px;
}

.gm-top__brand {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 232px;
  flex: none;
}

.gm-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 6px;
}

.gm-logo__mark {
  width: 32px;
  height: 24px;
}

.gm-logo__word {
  font-size: 22px;
  line-height: 24px;
  color: #444746;
}

.gm-search {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  max-width: 720px;
  min-width: 0;
  height: 48px;
  padding: 0 4px 0 16px;
  border-radius: 24px;
  background: #e9eef6;
  color: #444746;
}

.gm-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: #1f1f1f;
  outline: none;
}

.gm-search input::-webkit-search-cancel-button { display: none; }

.gm-top__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.gm-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  margin-left: 8px;
  padding: 0 4px 0 16px;
  border: 1px solid #c4c7c5;
  border-radius: 24px;
}

.gm-account img {
  width: 64px;
  height: 18px;
}

.gm-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5e7d6b;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

/* Each region is pinned to its column, so hiding the nav on a narrow screen
   does not let the panel slide into the nav's emptied track. */
.gm-nav { grid-column: 1; grid-row: 2; }
.gm-main { grid-column: 2; grid-row: 2; }
.gm-rail { grid-column: 3; grid-row: 2; }

/* Folder nav */
.gm-nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 16px 0 8px;
  overflow-y: auto;
}

.gm-compose {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  height: 56px;
  margin: 0 0 16px;
  padding: 0 24px 0 16px;
  border: 0;
  border-radius: 16px;
  background: #c2e7ff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #001d35;
  cursor: pointer;
}

.gm-compose:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gm-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 32px;
  padding: 0 12px 0 18px;
  border: 0;
  border-radius: 0 16px 16px 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #1f1f1f;
  text-align: left;
  cursor: pointer;
}

.gm-nav__item:hover {
  background: rgba(31, 31, 31, 0.06);
}

.gm-nav__item.is-current {
  background: #d3e3fd;
  font-weight: 700;
  color: #001d35;
  cursor: default;
}

.gm-nav__label { flex: 1 1 auto; }

.gm-nav__count {
  font-size: 12px;
  font-weight: 700;
}

.gm-nav__caret {
  position: absolute;
  left: 2px;
  display: inline-flex;
}

.gm-nav__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 0;
  padding-left: 18px;
  font-size: 16px;
  font-weight: 500;
}

/* The message panel */
.gm-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.gm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  flex: none;
  padding: 0 8px;
}

.gm-toolbar__left,
.gm-toolbar__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.gm-sep {
  width: 1px;
  height: 20px;
  margin: 0 8px;
  background: #e0e3e1;
}

.gm-pager {
  margin-right: 8px;
  font-size: 12px;
  color: #444746;
  white-space: nowrap;
}

.gm-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.gm-subject {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 16px 8px 72px;
}

.gm-subject__text {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
  color: #1f1f1f;
}

.gm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: #ddd;
  font-size: 12px;
  line-height: 18px;
  color: #444746;
}

.gm-tag button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.gm-tag--external {
  padding: 0 6px;
  background: #fbd863;
  color: #1f1f1f;
}

.gm-subject__important {
  color: #747775;
}

.gm-subject__tools {
  display: flex;
  margin-left: auto;
}

.gm-msg {
  padding: 0 16px 24px;
}

.gm-msg__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0 8px;
}

.gm-msg__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #e8eaed;
  color: #9aa0a6;
}

.gm-msg__who {
  flex: 1 1 auto;
  min-width: 0;
}

.gm-msg__from {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.gm-msg__from strong { font-weight: 700; }

.gm-msg__addr {
  font-size: 12px;
  color: #5e5e5e;
}

.gm-msg__to {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #5e5e5e;
}

.gm-msg__meta {
  display: flex;
  align-items: center;
  flex: none;
}

.gm-msg__date {
  margin-right: 8px;
  font-size: 12px;
  color: #5e5e5e;
  white-space: nowrap;
}

/* The email itself, indented under the sender as Gmail does. Its own page
   chrome — full-window height and the 1440 cap — gives way to the panel. */
.gm-msg__body {
  margin-left: 56px;
}

.gm .email-page {
  max-width: none;
  min-height: 0;
  padding: 20px clamp(12px, 2.2vw, 32px) 32px;
  font-family: var(--cui-font-control);
}

/* Side-panel rail */
.gm-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
}

.gm-rail__app {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.gm-rail__sep {
  width: 20px;
  height: 1px;
  background: #c4c7c5;
}

@media (max-width: 1100px) {
  .gm { grid-template-columns: 0 minmax(0, 1fr) 56px; }
  .gm-nav { display: none; }
  .gm-top__brand { width: auto; }
  .gm-main { margin-left: 8px; }
}

@media (max-width: 760px) {
  .gm { grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-rows: 56px minmax(0, 1fr); }
  .gm-rail,
  .gm-logo__word,
  .gm-account img,
  .gm-top__actions .gm-iconbtn,
  .gm-search .gm-iconbtn,
  .gm-toolbar__left .gm-sep,
  .gm-toolbar__left .gm-iconbtn:nth-child(n+6),
  .gm-pager,
  .gm-toolbar__right .gm-iconbtn--wide,
  .gm-subject__tools,
  .gm-msg__meta .gm-iconbtn:not(:nth-last-child(2)) { display: none; }
  .gm-top { gap: 8px; }
  .gm-account { padding: 0; border: 0; margin: 0; }
  .gm-main { margin: 0 8px 8px; }
  .gm-subject { padding: 12px 8px 4px; }
  .gm-subject__text { font-size: 18px; line-height: 24px; }
  .gm-msg { padding: 0 8px 16px; }
  .gm-msg__addr { display: none; }
  .gm-msg__body { margin-left: 0; }
}

/* ─── Notification email — email.html ──────────────────────────────────────
   Matched to the design's email screengrab: a "Powered by Coupa" line above a
   full-width email body ruled top and bottom, the customer's logo over a blue
   subject line, a grey intro panel with a centred text column and one pill
   button, a Summary card of the request in four columns, and Coupa's Business
   Spend Management footer under the body. Values are the inspection's own.

   Unlike the two screens, this page is responsive: an email is read wherever
   the supplier opens it, so it reflows from 1440 px down to a phone. The
   insets are clamped against the viewport rather than stepped, so at 1440 px
   the rendering is identical to the fixed-width version the screengrab was
   matched against, and only the Summary grid and the two display type sizes
   change at a breakpoint. */

.email-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  /* 4.3vw resolves to the design's 62px at 1440px, and floors at 16px. */
  padding: 24px clamp(16px, 4.3vw, 62px) 40px;
  background: var(--cui-surface-s3);
}

.email-powered {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 18px;
  padding-right: clamp(0px, 1.7vw, 24px);
  font-size: 13px;
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t2);
}

.email-powered img {
  width: 88px;
  height: 24px;
}

/* The email body: white, ruled top and bottom, nothing else around it. */
.email-frame {
  background: #ffffff;
  border-top: 3px solid var(--cui-border-input);
  border-bottom: 3px solid var(--cui-border-input);
}

/* 3.9vw and 8.3vw resolve to the design's 56px and 120px at 1440px. */
.email-frame__body {
  padding: 28px clamp(20px, 3.9vw, 56px) clamp(48px, 8.3vw, 120px);
}

.email-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.email-brand__mark {
  width: 40px;
  height: 40px;
}

.email-brand__name {
  font-size: 28px;
  font-weight: var(--cui-weight-bold);
  line-height: 32px;
  letter-spacing: -0.4px;
  color: var(--cui-text-dark);
}

.email-subject {
  margin: 0 0 24px;
  font-size: var(--cui-font-size-xl);
  font-weight: var(--cui-weight-regular);
  line-height: var(--cui-line-md);
  color: var(--cui-text-link);
}

/* The intro sits on a grey panel, with its text and button in one centred
   column — so the button is as wide as the paragraph, as the design has it. */
.email-intro {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 2.5vw, 36px) clamp(16px, 1.7vw, 24px);
  background: var(--cui-surface-s3);
}

/* 406px is the design's column; narrower viewports take what is left. */
.email-intro__col {
  width: 100%;
  max-width: 406px;
}

.email-intro__greeting,
.email-intro__text {
  margin: 0 0 20px;
  font-size: var(--cui-font-size-md);
  line-height: var(--cui-line-xs);
  color: var(--cui-text-t1);
}

.email-intro__text strong {
  font-weight: var(--cui-weight-bold);
}

.email-intro__requested {
  margin-bottom: 24px;
}

.email-cta {
  display: block;
  width: 100%;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--cui-radii-2xl);
  background: var(--coupa-primary);
  color: #ffffff;
  font-family: var(--cui-font-control);
  font-size: var(--cui-font-size-md);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-2xs);
  cursor: pointer;
}

.email-cta:hover {
  background: #0a63d2;
}

.email-summary {
  margin-top: 28px;
  padding: clamp(16px, 1.7vw, 24px);
  border: 1px solid var(--cui-border-b2);
  border-radius: var(--cui-radii-xs);
  background: #ffffff;
}

.email-summary__title {
  margin: 0 0 28px;
  font-size: var(--cui-font-size-2xl);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-md);
  color: var(--cui-text-t1);
}

/* Four fields to a row, as the design lays the Summary out. */
.email-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 12px;
}

.email-summary__label {
  margin: 0 0 4px;
  overflow-wrap: break-word;
  font-size: 13px;
  font-weight: var(--cui-weight-bold);
  line-height: var(--cui-line-3xs);
  color: var(--cui-text-t2);
}

.email-summary__value {
  margin: 0;
  padding-right: clamp(0px, 1.1vw, 16px);
  overflow-wrap: break-word;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t1);
}

.email-footer {
  padding: 24px 0 0;
  text-align: center;
}

.email-footer__logo {
  width: 140px;
  height: 38px;
  margin: 0 auto 12px;
  display: block;
}

.email-footer__tagline {
  margin: 0 0 6px;
  font-size: var(--cui-font-size-sm);
  font-weight: var(--cui-weight-semibold);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-link);
}

.email-footer__prefs {
  margin: 0;
  font-size: var(--cui-font-size-sm);
  line-height: var(--cui-line-2xs);
  color: var(--cui-text-t1);
}

.email-footer__link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--cui-text-link);
  text-decoration: underline;
  cursor: pointer;
}

/* The Summary drops a column at a time rather than squeezing four of them:
   "Manufacturer Part Number" needs room to read as a label. */
@media (max-width: 1120px) {
  .email-summary__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .email-summary__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }

  /* Room under the footer for the fixed role switcher, which sits bottom-left. */
  .email-page {
    padding-bottom: 84px;
  }

  .email-brand__name {
    font-size: 22px;
    line-height: 26px;
  }

  .email-subject {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: var(--cui-line-xs);
  }

  .email-summary__title {
    margin-bottom: 20px;
    font-size: var(--cui-font-size-xl);
  }
}

@media (max-width: 520px) {
  .email-summary__grid {
    grid-template-columns: 1fr;
  }

  .email-powered {
    justify-content: flex-start;
  }
}