#vendor-performance-app .vp-gmpbook-shell { display: grid; gap: 18px; min-width: 0; }
#vendor-performance-app .vp-gmpbook-hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr); gap: 22px; align-items: end; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(135deg, #f8fbfc 0%, #e7f1f5 100%); }
#vendor-performance-app .vp-gmpbook-hero h2 { margin: 4px 0 6px; }
#vendor-performance-app .vp-gmpbook-tabs { display: inline-flex; width: fit-content; gap: 4px; padding: 4px; border: 1px solid #b8cbd4; border-radius: 8px; background: #edf3f5; }
#vendor-performance-app .vp-gmpbook-tabs .btn { border: 0; }
#vendor-performance-app .vp-gmpbook-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
#vendor-performance-app .vp-gmpbook-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#vendor-performance-app .vp-gmpbook-sheet { overflow: hidden; border: 1px solid #8ca1aa; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgb(21 43 51 / 8%); }
#vendor-performance-app .vp-gmpbook-scroll { overflow: auto; max-height: 68vh; }
#vendor-performance-app .vp-gmpbook-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: #2a3438; font-size: 12px; }
#vendor-performance-app .vp-gmpbook-table th,
#vendor-performance-app .vp-gmpbook-table td { border-right: 1px solid #a9b5ba; border-bottom: 1px solid #b8c1c5; padding: 0; vertical-align: middle; }
#vendor-performance-app .vp-gmpbook-table th:last-child,
#vendor-performance-app .vp-gmpbook-table td:last-child { border-right: 0; }
#vendor-performance-app .vp-gmpbook-table thead th { position: sticky; top: 0; z-index: 4; padding: 9px 7px; background: #c9dde3; color: #27383e; font-weight: 800; text-align: center; letter-spacing: .015em; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-section td { position: sticky; top: 35px; z-index: 3; padding: 7px 9px; background: #1f5d83; color: #fff; font-weight: 800; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-section.is-gc td { background: #8bcf47; color: #24371d; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-section-total { float: right; font-variant-numeric: tabular-nums; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-linked td { background: #eef7fb; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-gc-link td { background: #e7f5db; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-total-row td { padding: 8px 9px; background: #dceaf1; border-top: 1px solid #5d7f91; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-total-row.is-final td { background: #8bcf47; color: #24371d; font-size: 13px; }
#vendor-performance-app .vp-gmpbook-table .vp-gmpbook-system { display: block; padding: 8px 7px; font-weight: 700; }
#vendor-performance-app .vp-gmpbook-table input,
#vendor-performance-app .vp-gmpbook-table select { display: block; width: 100%; min-height: 34px; margin: 0; border: 0; border-radius: 0; padding: 7px 6px; background: transparent; color: inherit; font: inherit; }
#vendor-performance-app .vp-gmpbook-table input:focus,
#vendor-performance-app .vp-gmpbook-table select:focus { position: relative; z-index: 2; outline: 2px solid #2d86b7; outline-offset: -2px; background: #fff; }
#vendor-performance-app .vp-gmpbook-table input[readonly] { color: #35535f; font-weight: 650; cursor: default; }
#vendor-performance-app .vp-gmpbook-table .is-number input { text-align: right; font-variant-numeric: tabular-nums; }
#vendor-performance-app .vp-gmpbook-money { display: block; padding: 8px 7px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#vendor-performance-app .vp-gmpbook-remove { display: flex; justify-content: center; padding: 3px; }
#vendor-performance-app .vp-gmpbook-remove .btn { min-height: 28px; padding: 5px 7px; }
#vendor-performance-app .vp-gmpbook-tag { display: inline-flex; align-items: center; width: fit-content; margin: 5px 7px; padding: 3px 7px; border-radius: 999px; background: #e6edf0; color: #4e626a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
#vendor-performance-app .vp-gmpbook-tag.is-allowance { background: #fff1b8; color: #6b5200; }
#vendor-performance-app .vp-gmpbook-tag.is-trade { background: #dceff8; color: #174d68; }
#vendor-performance-app .vp-gmpbook-add { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 14px; border-top: 1px solid #b8c1c5; background: #f3f6f7; }
#vendor-performance-app .vp-gmpbook-add-fields { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.4fr); gap: 10px; }
#vendor-performance-app .vp-gmpbook-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #9eb0b8; border-radius: 8px; overflow: hidden; background: #fff; }
#vendor-performance-app .vp-gmpbook-summary > div { padding: 15px 16px; border-right: 1px solid #c2ccd0; }
#vendor-performance-app .vp-gmpbook-summary > div:last-child { border-right: 0; background: #ddecf3; }
#vendor-performance-app .vp-gmpbook-summary span,
#vendor-performance-app .vp-gmpbook-summary strong { display: block; }
#vendor-performance-app .vp-gmpbook-summary strong { margin-top: 4px; font-size: 20px; font-variant-numeric: tabular-nums; }
#vendor-performance-app .vp-gmpbook-markups { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
#vendor-performance-app .vp-gmpbook-markup { padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: #f8faf9; }
#vendor-performance-app .vp-gmpbook-markup .form-control { text-align: right; }
#vendor-performance-app .vp-gmpbook-note { padding: 11px 13px; border-left: 4px solid #2f7da5; background: #edf6fa; color: #3f5964; }
#vendor-performance-app .vp-gmpbook-totalbar { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; background: #8bcf47; color: #203716; font-size: 16px; font-weight: 850; }
#vendor-performance-app .vp-gmpbook-empty { padding: 34px 22px; text-align: center; color: var(--muted-foreground); }
#vendor-performance-app .vp-gmpbook-source { padding: 7px; color: #45616c; font-size: 11px; }
#vendor-performance-app .vp-historical-preview-scroll { overflow-x: hidden; overflow-y: auto; }
#vendor-performance-app .vp-historical-sheet { width: 100%; min-width: 0; table-layout: fixed; }
#vendor-performance-app .vp-historical-sheet th { position: sticky; top: 0; z-index: 2; padding: 7px 8px; background: #dce8ec; color: #42606c; text-align: left; font-variant-numeric: tabular-nums; }
#vendor-performance-app .vp-historical-sheet th:nth-child(1) { width: 34%; }
#vendor-performance-app .vp-historical-sheet th:nth-child(2) { width: 7%; }
#vendor-performance-app .vp-historical-sheet th:nth-child(3) { width: 7%; }
#vendor-performance-app .vp-historical-sheet th:nth-child(4),
#vendor-performance-app .vp-historical-sheet th:nth-child(5),
#vendor-performance-app .vp-historical-sheet th:nth-child(6) { width: 11%; text-align: right; }
#vendor-performance-app .vp-historical-sheet th:nth-child(7) { width: 19%; }
#vendor-performance-app .vp-historical-sheet td { min-width: 0; padding: 7px 8px; overflow-wrap: anywhere; white-space: pre-wrap; vertical-align: top; }
#vendor-performance-app .vp-historical-sheet .vp-historical-money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#vendor-performance-app .vp-history-row { grid-template-columns: minmax(0, 1fr) max-content max-content; min-width: 0; }
#vendor-performance-app .vp-history-row .vp-copy { min-width: 0; }
#vendor-performance-app .vp-history-row .vp-copy strong,
#vendor-performance-app .vp-history-row .vp-copy span { overflow-wrap: anywhere; }
#vendor-performance-app .vp-historical-detail-head { align-items: flex-start; }
#vendor-performance-app .vp-historical-detail-actions { flex: 0 0 auto; white-space: nowrap; }
#vendor-performance-app .vp-historical-preview-scroll { max-height: 72vh; }
#vendor-performance-app .vp-historical-detail-head > * { min-width: 0; }
#vendor-performance-app .vp-historical-detail-head .vp-actions { max-width: 100%; }
#vendor-performance-app .vp-gmpbook-summary > div { min-width: 0; }
#vendor-performance-app .vp-gmpbook-summary strong { overflow-wrap: anywhere; }
#vendor-performance-app .vp-historical-item-picker { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr) auto; gap: 14px; align-items: end; padding: 16px; border: 1px solid #b8d1dc; border-radius: 7px; background: #eef7fb; }
#vendor-performance-app .vp-historical-item-picker strong,
#vendor-performance-app .vp-historical-item-picker span { display: block; }
#vendor-performance-app .vp-attached-history-list { grid-column: 1 / -1; display: grid; gap: 8px; padding: 14px; border: 1px solid #b8d1dc; border-radius: 7px; background: #fff; }
#vendor-performance-app .vp-attached-history summary { cursor: pointer; color: #075482; font-weight: 750; }
#vendor-performance-app .vp-attached-history table { width: 100%; margin-top: 9px; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
#vendor-performance-app .vp-attached-history th,
#vendor-performance-app .vp-attached-history td { padding: 7px; border: 1px solid #d4e2e9; overflow-wrap: anywhere; text-align: left; }
#vendor-performance-app .vp-attached-history th:nth-child(n+3),
#vendor-performance-app .vp-attached-history td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  #vendor-performance-app .vp-gmpbook-hero { grid-template-columns: 1fr; }
  #vendor-performance-app .vp-gmpbook-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vendor-performance-app .vp-gmpbook-summary > div:nth-child(2) { border-right: 0; }
  #vendor-performance-app .vp-gmpbook-summary > div:nth-child(-n+2) { border-bottom: 1px solid #c2ccd0; }
  #vendor-performance-app .vp-gmpbook-markups { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  #vendor-performance-app .vp-historical-item-picker { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #vendor-performance-app .vp-gmpbook-summary,
  #vendor-performance-app .vp-gmpbook-markups { grid-template-columns: 1fr; }
  #vendor-performance-app .vp-gmpbook-summary > div { border-right: 0; border-bottom: 1px solid #c2ccd0; }
  #vendor-performance-app .vp-gmpbook-summary > div:last-child { border-bottom: 0; }
  #vendor-performance-app .vp-gmpbook-add { grid-template-columns: 1fr; }
  #vendor-performance-app .vp-gmpbook-add-fields { grid-template-columns: 1fr; }
  #vendor-performance-app .vp-gmpbook-shell { gap: 14px; }
  #vendor-performance-app .vp-gmpbook-hero { gap: 15px; padding: 16px; }
  #vendor-performance-app .vp-gmpbook-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #vendor-performance-app .vp-gmpbook-tabs .btn { min-height: 42px; white-space: normal; }
  #vendor-performance-app .vp-gmpbook-toolbar { align-items: stretch; }
  #vendor-performance-app .vp-gmpbook-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  #vendor-performance-app .vp-gmpbook-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
  #vendor-performance-app .vp-gmpbook-scroll,
  #vendor-performance-app .vp-historical-preview-scroll { max-height: 62dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #vendor-performance-app .vp-gmpbook-sheet { position: relative; }
  #vendor-performance-app .vp-gmpbook-sheet::after { content: 'Swipe to view all worksheet columns'; display: block; position: sticky; left: 0; bottom: 0; width: fit-content; margin: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(7,84,130,.9); color: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
  #vendor-performance-app .vp-gmpbook-table { min-width: 980px; }
  #vendor-performance-app .vp-historical-sheet { min-width: 0; font-size: 11px; }
  #vendor-performance-app .vp-historical-sheet th,
  #vendor-performance-app .vp-historical-sheet td { padding: 6px 4px; }
  #vendor-performance-app .vp-gmpbook-totalbar { align-items: flex-start; flex-direction: column; gap: 4px; }
  #vendor-performance-app .vp-history-row { grid-template-columns: minmax(0, 1fr); }
  #vendor-performance-app .vp-history-row > * { justify-self: start; }
  #vendor-performance-app .vp-historical-detail-head { display: grid; grid-template-columns: 1fr; }
  #vendor-performance-app .vp-historical-detail-actions { display: grid; grid-template-columns: 1fr; width: 100%; white-space: normal; }
  #vendor-performance-app .vp-historical-detail-actions .btn { width: 100%; min-height: 44px; justify-content: center; }
}