/* ============================================================
   PURCHASE INVOICE DETAIL (pid)
   Read-only invoice view with two action moments:
   – Accept invoice
   – Raise dispute
   And a "list navigation" strip on top for moving along the
   underlying queue without going back to the list.
   ============================================================ */

/* ---------- Page chrome ---------- */
.pid-page {
  background: var(--sd-bg-app);
  min-height: 100%;
  padding: 0 0 96px 0;  /* room for sticky action bar */
}

/* ============================================================
   01 · LIST NAV STRIP — sticks under topbar.
   Holds: ← back, position, prev/next of underlying list, keyboard.
   ============================================================ */
.pid-listnav {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #fff;
  border-bottom: 1px solid var(--sd-line-300);
  padding: 8px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  min-height: 48px;
  box-shadow: 0 1px 0 rgba(15, 28, 46, .02);
}

.pid-listnav__back {
  appearance: none;
  background: transparent;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  padding: 5px 10px 5px 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sd-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.pid-listnav__back:hover {
  background: var(--sd-blue-050);
  border-color: var(--sd-blue-600);
  color: var(--sd-blue-700);
}
.pid-listnav__back svg { width: 13px; height: 13px; }

.pid-listnav__pos {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  color: var(--sd-ink-500);
  flex-shrink: 0;
}
.pid-listnav__pos strong {
  color: var(--sd-ink-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pid-listnav__pos .sep { color: var(--sd-ink-300); }

.pid-listnav__filterchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--sd-ink-700);
  font-weight: 500;
}
.pid-listnav__filterchip svg { width: 11px; height: 11px; color: var(--sd-ink-400); }

.pid-listnav__spacer { flex: 1; }

.pid-listnav__nav {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  background: #fff;
  overflow: hidden;
}
.pid-listnav__navbtn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  color: var(--sd-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  min-width: 0;
  max-width: 240px;
}
.pid-listnav__navbtn + .pid-listnav__navbtn { border-left: 1px solid var(--sd-line-200); }
.pid-listnav__navbtn:hover {
  background: var(--sd-blue-050);
  color: var(--sd-blue-700);
}
.pid-listnav__navbtn:disabled {
  color: var(--sd-ink-300);
  cursor: not-allowed;
  background: var(--sd-bg-softer);
}
.pid-listnav__navbtn svg { width: 13px; height: 13px; flex-shrink: 0; }
.pid-listnav__navbtn-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.25;
}
.pid-listnav__navbtn-caps {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-400);
  font-weight: 600;
}
.pid-listnav__navbtn-id {
  font-family: var(--sd-mono);
  font-size: 11px;
  color: inherit;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pid-listnav__kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--sd-ink-400);
}
.pid-listnav__kbd kbd {
  font-family: var(--sd-mono);
  font-size: 10px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--sd-ink-700);
  font-weight: 500;
}

.pid-listnav__divider {
  width: 1px;
  height: 22px;
  background: var(--sd-line-200);
}

.pid-listnav__iconbtn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-ink-700);
  cursor: pointer;
  flex-shrink: 0;
}
.pid-listnav__iconbtn:hover {
  background: var(--sd-blue-050);
  border-color: var(--sd-blue-600);
  color: var(--sd-blue-700);
}
.pid-listnav__iconbtn svg { width: 14px; height: 14px; }

/* ============================================================
   02 · PAGE BODY layout — 12-col grid for the workspace.
   Left = main content (identity, match, lines, charges, activity)
   Right = sidebar (parties, documents, audit summary)
   ============================================================ */
.pid-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 18px 22px 0 22px;
  max-width: 1640px;
}

.pid-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pid-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Card primitive — matches the project's workbench card */
.pid-card {
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-sm);
  overflow: hidden;
}
.pid-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-line-100);
  background: var(--sd-bg-softer);
}
.pid-card__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pid-card__title svg { width: 13px; height: 13px; color: var(--sd-ink-400); }
.pid-card__aside {
  font-size: 11.5px;
  color: var(--sd-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pid-card__aside a {
  color: var(--sd-blue-700);
  text-decoration: none;
  font-weight: 500;
}
.pid-card__aside a:hover { text-decoration: underline; }
.pid-card__body { padding: 16px; }
.pid-card__body--flush { padding: 0; }

/* ============================================================
   03 · IDENTITY CARD — invoice number, status, dates, parties, PO link
   ============================================================ */
.pid-ident {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-md);
}
.pid-ident__left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pid-ident__caps {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-400);
  font-weight: 600;
}
.pid-ident__id {
  font-family: var(--sd-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--sd-ink-900);
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pid-ident__pills {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.pid-ident__meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 2px;
  font-size: 12px;
  color: var(--sd-ink-500);
}
.pid-ident__meta .v {
  color: var(--sd-ink-900);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pid-ident__meta .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sd-ink-400);
  font-weight: 500;
}

.pid-ident__right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  border-left: 1px solid var(--sd-line-200);
  padding-left: 18px;
}
.pid-ident__party {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pid-ident__party-role {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-400);
  font-weight: 600;
}
.pid-ident__party-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-ink-900);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pid-ident__party-code {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  color: var(--sd-ink-500);
  font-weight: 500;
}
.pid-ident__party-meta {
  font-size: 11px;
  color: var(--sd-ink-500);
  line-height: 1.4;
  margin-top: 2px;
}
.pid-ident__party-meta strong {
  color: var(--sd-ink-700);
  font-weight: 500;
  font-family: var(--sd-mono);
  font-size: 10.5px;
}
.pid-ident__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-ink-300);
}
.pid-ident__arrow svg { width: 16px; height: 16px; }

/* Status pill */
.pid-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--sd-radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--sd-font);
  border: 1px solid transparent;
  line-height: 1.4;
}
.pid-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pid-pill svg { width: 11px; height: 11px; }
.pid-pill--warn { background: var(--sd-amber-100); color: var(--sd-amber-text); border-color: #EBC07B; }
.pid-pill--err  { background: var(--sd-red-100); color: #A8273F; border-color: #E1A6B3; }
.pid-pill--ok   { background: var(--sd-green-100); color: #1F6A3F; border-color: #c4dfcf; }
.pid-pill--info { background: var(--sd-blue-100); color: var(--sd-blue-700); border-color: #B7CEDF; }
.pid-pill--cool { background: #EAF1F5; color: #225d83; border-color: #B7CEDF; }
.pid-pill--neutral { background: var(--sd-line-100); color: var(--sd-ink-700); border-color: var(--sd-line-300); }

/* ============================================================
   04 · 3-Way Match summary — PO / Invoice / GRN columns
   ============================================================ */
.pid-3way {
  padding: 14px 16px 16px 16px;
}
.pid-3way__verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-3way__verdict.bad { color: #A8273F; }
.pid-3way__verdict.warn { color: var(--sd-amber-text); }
.pid-3way__verdict.ok { color: #1F6A3F; }
.pid-3way__verdict svg { width: 12px; height: 12px; }

.pid-3way__grid {
  display: grid;
  grid-template-columns: 1fr 14px 1fr 14px 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 6px;
}
.pid-3way__col {
  background: var(--sd-bg-softer);
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pid-3way__col--warn { background: #FEF6E7; border-color: #EBC07B; }
.pid-3way__col--err  { background: #FBE9EE; border-color: #E1A6B3; }
.pid-3way__col-caps {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-3way__col-caps .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sd-ink-400);
}
.pid-3way__col--warn .pid-3way__col-caps .dot { background: var(--sd-amber-500); }
.pid-3way__col--err  .pid-3way__col-caps .dot { background: var(--sd-red-600); }
.pid-3way__col-ref {
  font-family: var(--sd-mono);
  font-size: 11px;
  color: var(--sd-ink-700);
  font-weight: 500;
}
.pid-3way__col-ref a { color: var(--sd-blue-700); text-decoration: none; }
.pid-3way__col-ref a:hover { text-decoration: underline; }
.pid-3way__col-val {
  font-size: 18px;
  font-weight: 600;
  color: var(--sd-ink-900);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  letter-spacing: -.005em;
}
.pid-3way__col-delta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sd-ink-500);
}
.pid-3way__col--warn .pid-3way__col-delta { color: var(--sd-amber-text); }
.pid-3way__col--err  .pid-3way__col-delta { color: #A8273F; }
.pid-3way__col--ok   .pid-3way__col-delta { color: #1F6A3F; }
.pid-3way__bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-ink-300);
}
.pid-3way__bridge svg { width: 14px; height: 14px; }

/* ============================================================
   05 · LINES TABLE
   ============================================================ */
.pid-lines {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.pid-lines thead th {
  background: var(--sd-bg-soft);
  border-bottom: 1px solid var(--sd-line-300);
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sd-ink-500);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.pid-lines thead th.num { text-align: right; }
.pid-lines tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--sd-line-100);
  vertical-align: top;
  color: var(--sd-ink-800);
}
.pid-lines tbody tr:last-child td { border-bottom: 0; }
.pid-lines tbody tr.has-diff td {
  background: #FEF6E7;
}
.pid-lines tbody tr.has-diff td:first-child {
  box-shadow: inset 3px 0 0 var(--sd-amber-500);
}
.pid-lines .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pid-lines .num strong { color: var(--sd-ink-900); font-weight: 600; }
.pid-lines .pid-lines__part {
  font-family: var(--sd-mono);
  font-size: 11px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--sd-ink-800);
  font-weight: 500;
  white-space: nowrap;
}
.pid-lines__desc { color: var(--sd-ink-900); font-weight: 500; }
.pid-lines__sub  {
  display: block;
  font-size: 11px;
  color: var(--sd-ink-500);
  font-weight: 400;
  margin-top: 2px;
}
.pid-lines__diff {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--sd-radius-pill);
  background: #FCE6D0;
  color: var(--sd-amber-text);
  font-size: 10.5px;
  font-weight: 500;
  border: 1px solid #EBC07B;
}
.pid-lines__diff svg { width: 10px; height: 10px; }
.pid-lines__diff.bad {
  background: var(--sd-red-100);
  color: #A8273F;
  border-color: #E1A6B3;
}
.pid-lines__qty-bad {
  color: var(--sd-amber-text);
  font-weight: 600;
}

/* Lines table footer rows — summary */
.pid-lines tfoot td {
  padding: 8px 12px;
  border-top: 1px solid var(--sd-line-200);
  background: var(--sd-bg-softer);
  font-size: 12.5px;
  color: var(--sd-ink-700);
  font-weight: 500;
}
.pid-lines tfoot tr.total td {
  background: #fff;
  border-top: 2px solid var(--sd-ink-900);
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-ink-900);
}
.pid-lines tfoot .num strong { font-size: 14px; }
.pid-lines tfoot tr.total .num strong { font-size: 15px; }

/* Section tabs (within main column) */
.pid-tabs {
  display: inline-flex;
  gap: 0;
  border-bottom: 1px solid var(--sd-line-200);
  background: #fff;
  border-top-left-radius: var(--sd-radius-lg);
  border-top-right-radius: var(--sd-radius-lg);
  margin: 0 -16px;
  padding: 0 16px;
}
.pid-tabs__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 11px 14px 10px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sd-ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-tabs__btn:hover { color: var(--sd-ink-900); }
.pid-tabs__btn.is-active {
  color: var(--sd-blue-700);
  border-bottom-color: var(--sd-blue-600);
  font-weight: 600;
}
.pid-tabs__count {
  font-family: var(--sd-mono);
  font-size: 10px;
  background: var(--sd-line-100);
  color: var(--sd-ink-500);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.pid-tabs__btn.is-active .pid-tabs__count {
  background: var(--sd-blue-100);
  color: var(--sd-blue-700);
}

/* ============================================================
   06 · CHARGES BREAKDOWN
   ============================================================ */
.pid-charges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
  padding: 4px 0;
}
.pid-charges__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--sd-line-100);
  font-size: 12.5px;
}
.pid-charges__line:last-child { border-bottom: 0; }
.pid-charges__line .lbl { color: var(--sd-ink-700); }
.pid-charges__line .lbl .sub {
  display: block;
  font-size: 10.5px;
  color: var(--sd-ink-400);
  margin-top: 1px;
}
.pid-charges__line .val {
  font-variant-numeric: tabular-nums;
  color: var(--sd-ink-900);
  font-weight: 500;
}
.pid-charges__line.total {
  border-top: 2px solid var(--sd-ink-900);
  border-bottom: 0;
  padding-top: 10px;
  margin-top: 4px;
}
.pid-charges__line.total .lbl,
.pid-charges__line.total .val {
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-ink-900);
}

/* ============================================================
   07 · SIDEBAR — documents, audit, contacts
   ============================================================ */
.pid-doclist { display: flex; flex-direction: column; gap: 6px; }
.pid-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-md);
  background: #fff;
  transition: background 150ms ease, border-color 150ms ease;
  text-decoration: none;
  color: inherit;
}
.pid-doc:hover {
  background: var(--sd-blue-050);
  border-color: var(--sd-blue-600);
}
.pid-doc__icon {
  width: 32px;
  height: 32px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-blue-600);
  flex-shrink: 0;
}
.pid-doc__icon svg { width: 16px; height: 16px; }
.pid-doc__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pid-doc__name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sd-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pid-doc__meta {
  font-size: 10.5px;
  color: var(--sd-ink-500);
  font-family: var(--sd-mono);
  margin-top: 1px;
}
.pid-doc__action {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--sd-ink-400);
  cursor: pointer;
  border-radius: var(--sd-radius-sm);
  display: inline-flex;
}
.pid-doc__action:hover { background: var(--sd-line-100); color: var(--sd-ink-900); }

/* Audit timeline */
.pid-audit {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pid-audit__item {
  position: relative;
  padding: 0 0 14px 22px;
  font-size: 12px;
}
.pid-audit__item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: -4px;
  width: 1px;
  background: var(--sd-line-200);
}
.pid-audit__item:last-child::before { display: none; }
.pid-audit__item:last-child { padding-bottom: 0; }
.pid-audit__dot {
  position: absolute;
  left: 0;
  top: 3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sd-ink-400);
}
.pid-audit__item--ok .pid-audit__dot   { border-color: var(--sd-green-600); }
.pid-audit__item--warn .pid-audit__dot { border-color: var(--sd-amber-500); }
.pid-audit__item--err .pid-audit__dot  { border-color: var(--sd-red-600); }
.pid-audit__item--blue .pid-audit__dot { border-color: var(--sd-blue-600); }
.pid-audit__title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sd-ink-900);
  line-height: 1.4;
}
.pid-audit__title strong { font-weight: 600; }
.pid-audit__meta {
  font-size: 11px;
  color: var(--sd-ink-500);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.pid-audit__meta .actor {
  color: var(--sd-ink-700);
  font-weight: 500;
}

/* KV list */
.pid-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 12px;
}
.pid-kv dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sd-ink-400);
  font-weight: 500;
  align-self: center;
}
.pid-kv dd {
  margin: 0;
  color: var(--sd-ink-900);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pid-kv dd.mono { font-family: var(--sd-mono); font-size: 11.5px; }
.pid-kv dd.sub { color: var(--sd-ink-700); font-weight: 400; }

/* ============================================================
   08 · STICKY ACTION BAR — bottom, two CTAs
   ============================================================ */
.pid-actionbar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 14;
  background: #fff;
  border-top: 1px solid var(--sd-line-300);
  box-shadow: 0 -4px 12px rgba(15, 28, 46, .08);
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.pid-actionbar__summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}
.pid-actionbar__caps {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-400);
  font-weight: 600;
}
.pid-actionbar__amount {
  font-size: 20px;
  font-weight: 600;
  color: var(--sd-ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.pid-actionbar__hint {
  font-size: 11.5px;
  color: var(--sd-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-actionbar__hint svg { width: 12px; height: 12px; color: var(--sd-amber-500); }
.pid-actionbar__spacer { flex: 1; }
.pid-actionbar__actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

/* Buttons in the action bar */
.pid-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--sd-radius-sm);
  padding: 0 18px;
  height: 40px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.pid-btn svg { width: 14px; height: 14px; }
.pid-btn--ghost {
  background: #fff;
  border-color: var(--sd-line-300);
  color: var(--sd-ink-700);
}
.pid-btn--ghost:hover {
  background: var(--sd-bg-soft);
  border-color: var(--sd-ink-400);
  color: var(--sd-ink-900);
}
.pid-btn--dispute {
  background: #fff;
  border-color: #EBC07B;
  color: var(--sd-amber-text);
}
.pid-btn--dispute:hover {
  background: var(--sd-amber-100);
  border-color: var(--sd-amber-500);
}
.pid-btn--accept {
  background: var(--sd-green-600);
  border-color: var(--sd-green-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.pid-btn--accept:hover {
  background: #15673c;
  border-color: #15673c;
}
.pid-btn--accept:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(33, 138, 80, .25);
}
.pid-btn--ghost-icon {
  appearance: none;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  width: 40px; height: 40px;
  color: var(--sd-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pid-btn--ghost-icon:hover {
  background: var(--sd-bg-soft);
  border-color: var(--sd-ink-400);
  color: var(--sd-ink-900);
}
.pid-btn--ghost-icon svg { width: 16px; height: 16px; }

.pid-actionbar__kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  font-size: 11px;
  color: var(--sd-ink-400);
}
.pid-actionbar__kbd kbd {
  font-family: var(--sd-mono);
  font-size: 10px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-300);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--sd-ink-700);
  font-weight: 500;
}

/* ============================================================
   09 · DISPUTE DRAWER — slides from the right when "Raise dispute"
   is pressed. Shown by toggling body[data-pid-dispute="1"]
   ============================================================ */
.pid-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 38, .32);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
body[data-pid-dispute="1"] .pid-scrim {
  opacity: 1;
  pointer-events: auto;
}
.pid-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 92vw;
  background: #fff;
  z-index: 41;
  box-shadow: -16px 0 32px rgba(15, 23, 38, .22);
  transform: translateX(100%);
  transition: transform 220ms ease;
  display: flex;
  flex-direction: column;
}
body[data-pid-dispute="1"] .pid-drawer {
  transform: translateX(0);
}
.pid-drawer__head {
  padding: 16px 20px 14px 20px;
  border-bottom: 1px solid var(--sd-line-200);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pid-drawer__caps {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--sd-amber-text);
}
.pid-drawer__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--sd-ink-900);
  margin-top: 4px;
  letter-spacing: -.005em;
}
.pid-drawer__sub {
  font-size: 12px;
  color: var(--sd-ink-500);
  margin-top: 2px;
}
.pid-drawer__close {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--sd-ink-500);
  display: inline-flex;
  border-radius: var(--sd-radius-sm);
}
.pid-drawer__close:hover { background: var(--sd-line-100); color: var(--sd-ink-900); }
.pid-drawer__close svg { width: 16px; height: 16px; }
.pid-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pid-drawer__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pid-drawer__field-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sd-ink-500);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-drawer__field-label .req { color: var(--sd-red-600); }
.pid-drawer__field-hint {
  font-size: 11.5px;
  color: var(--sd-ink-500);
}
.pid-drawer__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pid-drawer__chip {
  appearance: none;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-pill);
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--sd-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-drawer__chip:hover {
  background: var(--sd-bg-soft);
  border-color: var(--sd-ink-400);
  color: var(--sd-ink-900);
}
.pid-drawer__chip.is-active {
  background: #FEF6E7;
  border-color: #EBC07B;
  color: var(--sd-amber-text);
}
.pid-drawer__chip-kbd {
  font-family: var(--sd-mono);
  font-size: 10px;
  background: var(--sd-line-100);
  color: var(--sd-ink-500);
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 500;
}
.pid-drawer__chip.is-active .pid-drawer__chip-kbd {
  background: #fff;
  color: var(--sd-amber-text);
}

.pid-drawer__linepicker {
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-md);
  background: var(--sd-bg-softer);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pid-drawer__lineitem {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sd-line-100);
  font-size: 12.5px;
  cursor: pointer;
}
.pid-drawer__lineitem:last-child { border-bottom: 0; }
.pid-drawer__lineitem input { accent-color: var(--sd-blue-600); cursor: pointer; }
.pid-drawer__lineitem .name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.pid-drawer__lineitem .name code {
  font-family: var(--sd-mono); font-size: 10.5px;
  background: #fff; border: 1px solid var(--sd-line-200);
  padding: 1px 5px; border-radius: 3px; font-weight: 500;
  color: var(--sd-ink-800);
}
.pid-drawer__lineitem .diff {
  font-size: 11px;
  color: var(--sd-amber-text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pid-drawer__lineitem.is-checked {
  background: #FFFBEF;
}

.pid-drawer__textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--sd-ink-900);
  line-height: 1.5;
  background: #fff;
}
.pid-drawer__textarea:focus {
  outline: none;
  border-color: var(--sd-teal-600);
  box-shadow: 0 0 0 3px rgba(23, 162, 184, .18);
}

.pid-drawer__attach {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pid-drawer__attach-btn {
  appearance: none;
  border: 1px dashed var(--sd-line-300);
  background: #fff;
  border-radius: var(--sd-radius-sm);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--sd-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pid-drawer__attach-btn:hover {
  border-color: var(--sd-blue-600);
  color: var(--sd-blue-700);
  background: var(--sd-blue-050);
}
.pid-drawer__attach-btn svg { width: 13px; height: 13px; }
.pid-drawer__attached {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-pill);
  font-size: 12px;
  color: var(--sd-ink-800);
}
.pid-drawer__attached .thumb {
  width: 22px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--sd-blue-100), var(--sd-blue-600));
  flex-shrink: 0;
}
.pid-drawer__attached .rm {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--sd-ink-400); padding: 0;
  display: inline-flex; align-items: center;
}
.pid-drawer__attached .rm:hover { color: var(--sd-red-600); }
.pid-drawer__attached .rm svg { width: 12px; height: 12px; }

.pid-drawer__amount {
  background: var(--sd-bg-softer);
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-md);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
}
.pid-drawer__amount .lbl { font-size: 12px; color: var(--sd-ink-500); }
.pid-drawer__amount .val { font-size: 12.5px; color: var(--sd-ink-900); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.pid-drawer__amount .rule { grid-column: 1 / -1; height: 1px; background: var(--sd-line-100); margin: 2px 0; }
.pid-drawer__amount .total .lbl,
.pid-drawer__amount .total .val { font-weight: 600; color: var(--sd-ink-900); font-size: 14px; }

.pid-drawer__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--sd-line-200);
  background: var(--sd-bg-softer);
  display: flex;
  gap: 10px;
  align-items: center;
}
.pid-drawer__foot .spacer { flex: 1; }