/* paper.css — Paper pricing review (Money section).
 * Only what shared classes don't cover: status banner, tabs, review table, change chips,
 * threshold input, detail drawer. Shared: .page-header-bar, .btn(+variants), design tokens. */

.pp-wrap { padding: 0 4px; }

.pp-head-actions { display: flex; align-items: center; gap: 14px; }
.pp-thresh { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.pp-thresh-input {
  width: 58px; padding: 3px 6px; text-align: right; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}

.pp-status { margin: 10px 0; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13px; }
.pp-status-ok    { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pp-status-warn  { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.pp-status-error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.pp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 8px 0 4px; }
.pp-tab {
  padding: 8px 14px; border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pp-tab:hover { color: var(--text); }
.pp-tab-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.pp-tabcount {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--surface-alt); color: var(--text-muted); font-size: 11px; text-align: center;
}

.pp-toolbar { margin: 10px 0 4px; }
.pp-search {
  width: 320px; max-width: 100%; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
.pp-sortable { cursor: pointer; user-select: none; }
.pp-sortable:hover { color: var(--text); }
.pp-arrow { color: var(--accent); font-size: 10px; }
.pp-count { color: var(--text-muted); font-size: 12px; margin: 6px 0; }

.pp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.pp-filter {
  padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); max-width: 200px;
}
.pp-cores {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px;
  background: var(--surface-alt); color: var(--text-muted); font-size: 11px; white-space: nowrap;
}

.pp-hint { color: var(--text-muted); font-size: 13px; margin: 12px 0; line-height: 1.5; }
.pp-hint b { color: var(--text); font-weight: 600; }

/* Edit form in the drawer */
.pp-edit { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.pp-edit label { color: var(--text-muted); font-size: 13px; }
.pp-ed {
  padding: 5px 8px; font-size: 13px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
}
.pp-lock { color: var(--accent); cursor: help; font-size: 11px; }
.pp-edit-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.pp-edit-actions .pp-dim { font-size: 12px; }
.pp-empty { color: var(--text-muted); text-align: center; padding: 48px 16px; font-size: 14px; }

.pp-batchbar { display: flex; align-items: center; gap: 16px; margin: 8px 0; font-size: 13px; color: var(--text-muted); }

.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-table th {
  text-align: left; padding: 8px 10px; color: var(--text-muted); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.pp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.pp-table tbody tr { cursor: pointer; }
.pp-table tbody tr:hover { background: var(--surface-alt); }
.pp-table-muted td, .pp-table-muted th { color: var(--text-muted); }

.pp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-ck { width: 28px; text-align: center; }
.pp-mono { font-family: var(--font-mono); white-space: nowrap; }
.pp-dim { color: var(--text-muted); font-size: 12px; }
.pp-uom { color: var(--text-muted); font-size: 11px; }
.pp-actions { text-align: right; white-space: nowrap; }
.pp-actions .btn { margin-left: 4px; }

.pp-chg { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-chg-up   { color: var(--danger); }   /* a price rise costs money — red */
.pp-chg-down { color: var(--success); }
.pp-chg-new  { color: var(--accent); font-weight: 600; }
.pp-chg-unit { color: var(--warning); font-weight: 600; cursor: help; }

.pp-src { font-size: 11px; padding: 1px 6px; border-radius: 9px; }
.pp-src-portal { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pp-src-csv    { background: var(--surface-alt); color: var(--text-muted); }
.pp-src-order_history { background: var(--surface-alt); color: var(--text-muted); }

/* Detail drawer */
.pp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60;
  display: flex; justify-content: flex-end;
}
.pp-drawer {
  width: min(560px, 92vw); height: 100%; background: var(--surface); overflow-y: auto;
  padding: 18px 22px; box-shadow: -8px 0 24px rgba(0,0,0,0.2);
}
.pp-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pp-drawer-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 13px; margin-bottom: 18px; }
.pp-drawer-attrs > div { color: var(--text); }
.pp-dl { color: var(--text-muted); }
.pp-drawer-h { font-size: 13px; color: var(--text-muted); margin: 8px 0; }