/* ==========================================================================
   PPS Design System — Components
   --------------------------------------------------------------------------
   All component classes are prefixed .pps-. They are safe to coexist with
   the legacy .kpi / .hdr / .btn / .b-* classes during migration — replace
   legacy markup one screen at a time, both can render side-by-side.

   Naming convention: BEM-flavored
     .pps-component                — block
     .pps-component__element       — element
     .pps-component--modifier      — modifier

   Depends on: pps.tokens.css (load first)
   ========================================================================== */

/* ── App reset (scoped — does NOT touch global * selectors) ───────────── */
.pps-app * { box-sizing: border-box; }
.pps-app {
  font-family: var(--pps-font-sans);
  color: var(--pps-ink);
  background: var(--pps-bg);
  font-size: var(--pps-t-body);
  line-height: var(--pps-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   AppShell — header + tabs + page container
   Replaces: .hdr + .nav (capa) and .header + .tab-bar (dcm)
   ========================================================================== */
.pps-shell {
  position: sticky; top: 0; z-index: var(--pps-z-shell);
  background: var(--pps-paper);
}
.pps-hdr {
  background: var(--pps-primary); color: var(--pps-primary-fg);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 14px;
}
.pps-hdr__mark {
  width: 28px; height: 28px; border-radius: var(--pps-radius-sm);
  background: var(--pps-paper); color: var(--pps-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--pps-t-code); letter-spacing: -0.02em;
  flex-shrink: 0;
}
.pps-hdr__title { font-size: var(--pps-t-sub); font-weight: 600; line-height: 1.15; margin: 0; }
.pps-hdr__sub   { font-size: var(--pps-t-code); opacity: 0.65; margin-top: 1px; }
.pps-hdr__spacer { flex: 1; }
.pps-hdr__right {
  margin-left: auto;
  display: flex; gap: 10px; align-items: center;
  font-size: var(--pps-t-code);
}

/* Tabs (primary nav) */
.pps-tabs {
  display: flex; gap: 0; padding: 0 24px;
  background: var(--pps-paper);
  border-bottom: var(--pps-rule);
  overflow-x: auto;
}
.pps-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 11px 16px; font-family: inherit;
  font-size: var(--pps-t-data); font-weight: 500; color: var(--pps-n-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--pps-dur-fast) var(--pps-ease),
              border-color var(--pps-dur-fast) var(--pps-ease);
  white-space: nowrap;
}
.pps-tab:hover { color: var(--pps-ink); }
.pps-tab[aria-current="page"], .pps-tab.is-active {
  color: var(--pps-primary); font-weight: 600;
  border-bottom-color: var(--pps-primary);
}
.pps-tab:focus-visible {
  outline: 2px solid var(--pps-accent); outline-offset: -3px;
  border-radius: 4px 4px 0 0;
}
.pps-tab__count {
  display: inline-block; margin-left: 6px;
  font-family: var(--pps-font-mono); font-size: var(--pps-t-code);
  color: var(--pps-bad); font-weight: 600;
}
.pps-tab__count--neutral { color: var(--pps-n-400); }
.pps-tab__count--ok      { color: var(--pps-ok); }

/* Page container */
.pps-page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 24px;
}

/* Section header (above tables / chart groups) */
.pps-section-title {
  font-size: var(--pps-t-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pps-n-500);
  margin: 22px 0 10px;
}
.pps-section-title:first-child { margin-top: 0; }

/* ==========================================================================
   Button
   Replaces: .btn / .btn-primary / .btn-ghost / .cta-btn / inline buttons
   ========================================================================== */
.pps-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--pps-radius);
  font-size: var(--pps-t-data); font-weight: 600; line-height: 1.2;
  border: 1px solid transparent;
  transition: background var(--pps-dur-fast) var(--pps-ease),
              border-color var(--pps-dur-fast) var(--pps-ease),
              color var(--pps-dur-fast) var(--pps-ease);
  white-space: nowrap;
}
.pps-btn:focus-visible {
  outline: 2px solid var(--pps-accent); outline-offset: 2px;
}
.pps-btn[disabled], .pps-btn:disabled { opacity: 0.45; cursor: default; }

.pps-btn--primary {
  background: var(--pps-primary); color: var(--pps-primary-fg);
  border-color: var(--pps-primary);
}
.pps-btn--primary:hover:not(:disabled) {
  background: var(--pps-primary-hover); border-color: var(--pps-primary-hover);
}
.pps-btn--accent {
  background: var(--pps-accent); color: var(--pps-accent-fg);
  border-color: var(--pps-accent);
}
.pps-btn--accent:hover:not(:disabled) {
  background: var(--pps-accent-hover); border-color: var(--pps-accent-hover);
}
.pps-btn--secondary {
  background: var(--pps-paper); color: var(--pps-ink);
  border-color: var(--pps-n-300);
}
.pps-btn--secondary:hover:not(:disabled) {
  background: var(--pps-n-50); border-color: var(--pps-n-400);
}
.pps-btn--ghost {
  background: transparent; color: var(--pps-ink); border-color: transparent;
}
.pps-btn--ghost:hover:not(:disabled) { background: var(--pps-n-100); }

.pps-btn--danger {
  background: var(--pps-bad); color: var(--pps-bad-fg); border-color: var(--pps-bad);
}
.pps-btn--danger:hover:not(:disabled) {
  background: #8e1c13; border-color: #8e1c13;
}

/* Sits on a dark header / hero — readable but unobtrusive */
.pps-btn--on-dark {
  background: rgba(255,255,255,.15); color: var(--pps-paper);
  border-color: rgba(255,255,255,.25);
}
.pps-btn--on-dark:hover:not(:disabled) {
  background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4);
}

.pps-btn--sm { padding: 4px 10px; font-size: var(--pps-t-code); border-radius: var(--pps-radius-sm); }
.pps-btn--lg { padding: 10px 20px; font-size: var(--pps-t-sub); }
.pps-btn--icon { padding: 6px; aspect-ratio: 1; }
.pps-btn--block { width: 100%; }

/* ==========================================================================
   Badge
   Replaces: .s-* / .t-* / .p-* (capa) and .b-* / .badge-* (dcm)
   --------------------------------------------------------------------------
   Filled variants carry workflow STATE.
   Outlined variants carry TYPE / CATEGORY.
   Always pair with a text label — never let color alone carry meaning.
   ========================================================================== */
.pps-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--pps-radius-sm);
  font-size: var(--pps-t-label); font-weight: 500;
  line-height: 1.5; white-space: nowrap;
  font-family: inherit;
}
.pps-badge__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}

/* Workflow state — filled */
.pps-badge--new       { background: var(--pps-stage-new-bg);      color: var(--pps-stage-new); }
.pps-badge--assigned  { background: var(--pps-stage-assigned-bg); color: var(--pps-stage-assigned); }
.pps-badge--progress  { background: var(--pps-stage-progress-bg); color: var(--pps-stage-progress); }
.pps-badge--review    { background: var(--pps-stage-review-bg);   color: var(--pps-stage-review); }
.pps-badge--closed    { background: var(--pps-stage-closed-bg);   color: var(--pps-stage-closed); }

/* Semantic intent — filled */
.pps-badge--bad       { background: var(--pps-bad-bg);            color: var(--pps-bad); }
.pps-badge--warn      { background: var(--pps-warn-bg);           color: var(--pps-warn); }
.pps-badge--ok        { background: var(--pps-ok-bg);             color: var(--pps-ok); }
.pps-badge--info      { background: var(--pps-info-bg);           color: var(--pps-info); }
.pps-badge--neutral   { background: var(--pps-n-100);             color: var(--pps-n-600); }

/* Category / type — outlined (so they read distinctly from state pills) */
.pps-badge--outline {
  background: transparent; border: 1px solid currentColor;
}

/* ==========================================================================
   KPI
   Replaces: .kpi (capa) / .kpi-card / .exec-card (dcm)
   --------------------------------------------------------------------------
   Sizes:  --sm (sub-tile, exec rows)  default (page metric)  --xl (featured)
   States: --bad / --warn / --ok / --info applied to the value color.
   ========================================================================== */
.pps-kpi {
  background: var(--pps-paper); border: var(--pps-rule);
  border-radius: var(--pps-radius); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.pps-kpi__label {
  font-size: var(--pps-t-label); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pps-n-500);
}
.pps-kpi__value {
  font-family: var(--pps-font-serif);
  font-size: var(--pps-t-metric); font-weight: 500;
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--pps-ink);
  font-variant-numeric: tabular-nums;
}
.pps-kpi__value--bad  { color: var(--pps-bad); }
.pps-kpi__value--warn { color: var(--pps-warn); }
.pps-kpi__value--ok   { color: var(--pps-ok); }
.pps-kpi__value--info { color: var(--pps-info); }

.pps-kpi__sub {
  font-size: var(--pps-t-code); color: var(--pps-n-500);
  margin-top: 2px;
}
.pps-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--pps-font-mono);
  font-size: var(--pps-t-label); font-weight: 600;
}
.pps-kpi__delta--up   { color: var(--pps-bad); }      /* "up" overdue is bad */
.pps-kpi__delta--down { color: var(--pps-ok); }
.pps-kpi__delta--flat { color: var(--pps-n-400); }

.pps-kpi--sm  .pps-kpi__value { font-size: var(--pps-t-sect); }
.pps-kpi--xl  .pps-kpi__value { font-size: var(--pps-t-metric-xl); }

.pps-kpi--clickable {
  cursor: pointer;
  transition: box-shadow var(--pps-dur-fast) var(--pps-ease),
              transform  var(--pps-dur-fast) var(--pps-ease);
}
.pps-kpi--clickable:hover {
  box-shadow: var(--pps-shadow-md); transform: translateY(-1px);
}

/* KPI grid */
.pps-kpi-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* KPI group — featured + supporting (replaces .kpi-mosaic-*) */
.pps-kpi-group {
  background: var(--pps-paper); border: var(--pps-rule);
  border-radius: var(--pps-radius-lg); overflow: hidden;
  display: grid; grid-template-columns: 3fr 2fr;
}
.pps-kpi-group--5col { grid-template-columns: 2fr 1.5fr 1.5fr; }

.pps-kpi-group__feature {
  padding: 20px 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  border-right: var(--pps-rule);
}
.pps-kpi-group__feature .pps-kpi__value { font-size: var(--pps-t-metric-xl); }

.pps-kpi-group__tiles {
  display: grid; grid-template-columns: 1fr 1fr;
}
.pps-kpi-group--5col .pps-kpi-group__tiles { grid-template-columns: 1fr 1fr; }
.pps-kpi-group__tile {
  padding: 12px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border-left: var(--pps-rule); border-bottom: var(--pps-rule);
}
.pps-kpi-group__tile:first-child { border-left: none; }
.pps-kpi-group__tile:nth-last-child(-n+2) { border-bottom: none; }
.pps-kpi-group__tile .pps-kpi__value { font-size: var(--pps-t-sect); }

/* ==========================================================================
   Banner — inline page notice
   Replaces: .banner + inline overrides
   ========================================================================== */
.pps-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: var(--pps-radius);
  font-size: var(--pps-t-data); line-height: var(--pps-lh-snug);
  border: 1px solid;
}
.pps-banner__icon { flex-shrink: 0; margin-top: 1px; }
.pps-banner__body { flex: 1; }
.pps-banner__title { font-weight: 700; }
.pps-banner--info { background: var(--pps-info-bg); border-color: var(--pps-info-border); color: var(--pps-info); }
.pps-banner--warn { background: var(--pps-warn-bg); border-color: var(--pps-warn-border); color: var(--pps-warn); }
.pps-banner--ok   { background: var(--pps-ok-bg);   border-color: var(--pps-ok-border);   color: var(--pps-ok); }
.pps-banner--bad  { background: var(--pps-bad-bg);  border-color: var(--pps-bad-border);  color: var(--pps-bad); }

/* ==========================================================================
   Field — form input + label + help
   Replaces: .dcm-edit-field / .so-field / .so-fld (and the dark-input bug)
   ========================================================================== */
.pps-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pps-field__label {
  font-size: var(--pps-t-label); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--pps-n-500);
}
.pps-field__input,
.pps-field__select,
.pps-field__textarea {
  background: var(--pps-paper); color: var(--pps-ink);
  border: 1px solid var(--pps-n-300); border-radius: var(--pps-radius);
  padding: 7px 10px;
  font-size: var(--pps-t-data); font-family: inherit;
  transition: border-color var(--pps-dur-fast) var(--pps-ease),
              box-shadow  var(--pps-dur-fast) var(--pps-ease);
  width: 100%;
}
.pps-field__input:focus,
.pps-field__select:focus,
.pps-field__textarea:focus {
  outline: none; border-color: var(--pps-accent);
  box-shadow: 0 0 0 3px rgba(0, 85, 179, 0.18);
}
.pps-field__textarea { resize: vertical; line-height: var(--pps-lh-snug); min-height: 60px; }
.pps-field__help { font-size: var(--pps-t-label); color: var(--pps-n-500); }
.pps-field__help--bad { color: var(--pps-bad); }
.pps-field__checkbox {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--pps-t-data); cursor: pointer;
}
.pps-field__checkbox input { accent-color: var(--pps-accent); cursor: pointer; }

/* ==========================================================================
   DataTable — list of CARs / docs
   Replaces: the three parallel table styles
   ========================================================================== */
.pps-table-wrap {
  background: var(--pps-paper);
  border: var(--pps-rule); border-radius: var(--pps-radius);
  overflow: hidden; box-shadow: var(--pps-shadow);
}
.pps-table-wrap__scroll { overflow-x: auto; }
.pps-table {
  width: 100%; border-collapse: collapse;
  background: var(--pps-paper);
  font-size: var(--pps-t-data);
}
.pps-table thead th {
  position: sticky; top: 0; background: var(--pps-n-50);
  text-align: left; padding: 9px 12px;
  border-bottom: var(--pps-rule);
  font-size: var(--pps-t-label); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pps-n-500); white-space: nowrap;
}
.pps-table thead th[aria-sort] { cursor: pointer; user-select: none; }
.pps-table thead th[aria-sort]:hover { background: var(--pps-n-100); color: var(--pps-ink); }
.pps-table thead th[aria-sort="ascending"]::after  { content: " ▲"; font-size: 0.78em; color: var(--pps-n-400); }
.pps-table thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.78em; color: var(--pps-n-400); }
.pps-table td {
  padding: 9px 12px; border-bottom: var(--pps-rule-soft);
  color: var(--pps-n-700); vertical-align: top;
}
.pps-table tr:last-child td { border-bottom: none; }
.pps-table tbody tr:hover td { background: var(--pps-n-50); }
.pps-table tbody tr[data-state="bad"]  { background: var(--pps-bad-tint); }
.pps-table tbody tr[data-state="bad"]:hover td  { background: var(--pps-bad-bg); }
.pps-table tbody tr[data-state="warn"] { background: var(--pps-warn-tint); }
.pps-table tbody tr[data-state="warn"]:hover td { background: var(--pps-warn-bg); }
.pps-table tbody tr[aria-selected="true"] td { background: var(--pps-info-bg); }

.pps-table__cell--num   { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pps-table__cell--id    { font-weight: 600; color: var(--pps-accent); white-space: nowrap; }
.pps-table__cell--muted { color: var(--pps-n-400); }
.pps-table__cell--truncate {
  max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pps-table__group-row td {
  background: var(--pps-n-100);
  font-weight: 700; font-size: var(--pps-t-data); color: var(--pps-n-700);
  padding: 7px 12px; cursor: pointer; user-select: none;
}
.pps-table__group-row td:hover { background: var(--pps-n-200); }

/* ==========================================================================
   Filter bar — sits below the tabs
   Replaces: .filter-bar (dcm) and the ad-hoc filter rows in CAPA
   ========================================================================== */
.pps-filterbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--pps-paper); border: var(--pps-rule);
  border-radius: var(--pps-radius); padding: 8px 14px;
  box-shadow: var(--pps-shadow-sm);
  font-size: var(--pps-t-code);
}
.pps-filterbar__group { display: flex; align-items: center; gap: 6px; }
.pps-filterbar__label { font-size: var(--pps-t-code); color: var(--pps-n-500); font-weight: 500; }
.pps-filterbar__select {
  border: 1px solid var(--pps-n-300); border-radius: var(--pps-radius-sm);
  padding: 4px 8px; font-size: var(--pps-t-data);
  background: var(--pps-paper); color: var(--pps-ink);
  font-family: inherit; cursor: pointer;
}
.pps-filterbar__select:focus { outline: none; border-color: var(--pps-accent); }
.pps-filterbar__spacer { margin-left: auto; }
.pps-filterbar__tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 9px; border-radius: var(--pps-radius-pill);
  background: var(--pps-info-bg); color: var(--pps-info);
  font-size: var(--pps-t-code); font-weight: 500;
}
.pps-filterbar__tag-clear {
  border: none; background: none; cursor: pointer; color: currentColor;
  font-size: 14px; line-height: 1; padding: 0 4px;
  border-radius: var(--pps-radius-pill);
}
.pps-filterbar__tag-clear:hover { background: rgba(0,0,0,.05); }

/* ==========================================================================
   SlideOut — right-side editor panel
   Replaces: .dcm-slideout (and removes the dark-input bug)
   ========================================================================== */
.pps-slideout-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: var(--pps-z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--pps-dur) var(--pps-ease);
}
.pps-slideout-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.pps-slideout {
  position: fixed; top: 0; right: 0;
  height: 100vh; width: 480px; max-width: 96vw;
  background: var(--pps-paper);
  box-shadow: var(--pps-shadow-overlay);
  z-index: var(--pps-z-slideout);
  transform: translateX(100%);
  transition: transform var(--pps-dur-slow) var(--pps-ease);
  display: flex; flex-direction: column;
}
.pps-slideout[data-open="true"] { transform: translateX(0); }
.pps-slideout__header {
  padding: 12px 16px;
  background: var(--pps-primary); color: var(--pps-primary-fg);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.pps-slideout__title {
  flex: 1; font-size: var(--pps-t-sub); font-weight: 600;
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pps-slideout__close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.75); font-size: 20px;
  padding: 2px 6px; line-height: 1;
}
.pps-slideout__close:hover { color: var(--pps-primary-fg); }
.pps-slideout__body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.pps-slideout__footer {
  padding: 12px 16px; border-top: var(--pps-rule);
  background: var(--pps-n-50);
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
}

/* ==========================================================================
   Toast — bottom-center notification
   Replaces: .copy-toast / #copy-toast
   ========================================================================== */
.pps-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(40px);
  z-index: var(--pps-z-toast);
  background: var(--pps-n-900); color: var(--pps-paper);
  padding: 9px 18px; border-radius: var(--pps-radius);
  font-size: var(--pps-t-data);
  opacity: 0; pointer-events: none;
  transition: opacity var(--pps-dur) var(--pps-ease),
              transform var(--pps-dur) var(--pps-ease);
}
.pps-toast[data-show="true"] {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}

/* ==========================================================================
   Live status pill — sits in the header chrome
   Replaces: .live-chip + dot + animation
   ========================================================================== */
.pps-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--pps-t-label); font-weight: 600;
  padding: 3px 9px; border-radius: var(--pps-radius-pill);
  background: rgba(20, 105, 58, 0.18); color: #6ee7b7;
  border: 1px solid rgba(20, 105, 58, 0.4);
}
.pps-live__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  animation: pps-pulse 2s ease-in-out infinite;
}
@keyframes pps-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ==========================================================================
   Icon — SVG via currentColor
   Replaces: Unicode emoji used as iconography (📊 👥 🏢 📝 📋 ⚠️ 🚨 ✉️ 💬 …)
   --------------------------------------------------------------------------
   Use with inline <svg> from Lucide / Phosphor / Tabler:
     <span class="pps-icon"><svg viewBox="0 0 24 24" …></svg></span>
   ========================================================================== */
.pps-icon {
  display: inline-flex; flex-shrink: 0;
  width: 16px; height: 16px; vertical-align: -2px;
  color: inherit;
}
.pps-icon--sm { width: 14px; height: 14px; }
.pps-icon--lg { width: 20px; height: 20px; }
.pps-icon--xl { width: 24px; height: 24px; }
.pps-icon svg { width: 100%; height: 100%; }

/* ==========================================================================
   Card — generic surface (chart wrappers, content panels)
   Replaces: .chart-card / .tbl-card / .log-card
   ========================================================================== */
.pps-card {
  background: var(--pps-paper); border: var(--pps-rule);
  border-radius: var(--pps-radius); padding: 16px 18px;
  box-shadow: var(--pps-shadow);
}
.pps-card__title { font-size: var(--pps-t-sub); font-weight: 600; color: var(--pps-ink); margin-bottom: 2px; }
.pps-card__sub   { font-size: var(--pps-t-code); color: var(--pps-n-500); margin-bottom: 12px; }

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  @page { margin: 0.5in; }
  .pps-shell, .pps-hdr, .pps-tabs, .pps-filterbar,
  .pps-slideout, .pps-slideout-backdrop, .pps-toast { display: none !important; }
  .pps-page { padding: 0 !important; max-width: none !important; }
  .pps-card, .pps-kpi-group, .pps-kpi { break-inside: avoid; page-break-inside: avoid; }
  .pps-table tr { break-inside: avoid; page-break-inside: avoid; }
  .pps-table thead { display: table-header-group; }
  [style*="box-shadow"], .pps-card { box-shadow: none !important; }
}