/* ProPivot base theme. Override via CSS variables on .pp-root, or use the
   built-in dark theme with options.theme = 'dark' | 'auto'. */
.pp-root {
  --pp-border: #e0e0e0;
  --pp-header-bg: #f5f6f8;
  --pp-total-bg: #eef1f5;
  --pp-grand-bg: #e3e8ef;
  --pp-selected-bg: #cfe3ff;
  --pp-text: #1f2430;
  --pp-accent: #2f6fdb;
  /* Chrome surfaces (toolbar, popups, zones, inputs) — themed for dark mode. */
  --pp-bg: #ffffff;
  --pp-surface: #ffffff;
  --pp-surface-2: #fafbfc;
  --pp-muted: #6b7280;
  --pp-faint: #9aa1ad;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: var(--pp-text);
  background: var(--pp-bg);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pp-border);
  box-sizing: border-box;
  overflow: hidden;
}

.pp-root { color-scheme: light; }
/* Built-in dark theme (added by options.theme = 'dark', or 'auto' + OS dark). */
.pp-root.pp-theme-dark {
  color-scheme: dark;
  --pp-border: #39414f;
  --pp-header-bg: #1e2532;
  --pp-total-bg: #232c3b;
  --pp-grand-bg: #2b3548;
  --pp-selected-bg: #2a3a57;
  --pp-text: #e6e9f0;
  --pp-accent: #6ea8ff;
  --pp-bg: #11151c;
  --pp-surface: #161b24;
  --pp-surface-2: #1b212c;
  --pp-muted: #9aa3b2;
  --pp-faint: #6b7382;
}


.pp-grid-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.pp-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }

.pp-table { border-collapse: collapse; width: max-content; min-width: 100%; }
.pp-table th, .pp-table td {
  border: 1px solid var(--pp-border);
  padding: 4px 8px;
  white-space: nowrap;
}
.pp-table thead th {
  background: var(--pp-header-bg);
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
  font-weight: 600;
}
.pp-corner { background: var(--pp-header-bg); text-align: start; position: sticky; inset-inline-start: 0; }
/* The top-left corner is pinned on BOTH axes, so it must stack above the
 * sticky column headers (z 2) and the sticky row headers (z 1). The extra
 * `thead th` qualifier out-specifies `.pp-table thead th { z-index: 2 }`. */
.pp-table thead th.pp-corner { z-index: 5; }
.pp-rowh {
  background: var(--pp-header-bg);
  text-align: start;
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  font-weight: 500;
}
/* Numbers are always LTR (so RTL doesn't reorder thousands-separated groups). */
.pp-cell { text-align: right; direction: ltr; }
.pp-total, .pp-total-row > * { background: var(--pp-total-bg); font-weight: 500; }
.pp-grand, .pp-grand-row > * { background: var(--pp-grand-bg); font-weight: 600; }
.pp-alt > .pp-cell { background-color: rgba(0, 0, 0, 0.015); }
.pp-selected { outline: 2px solid var(--pp-accent); outline-offset: -2px; background: var(--pp-selected-bg) !important; }

.pp-toggle { cursor: pointer; display: inline-block; width: 14px; color: var(--pp-accent); user-select: none; }

/* Sortable headers (click to sort) */
.pp-sortable { cursor: pointer; user-select: none; }
.pp-sortable:hover { color: var(--pp-accent); }

/* Toolbar */
.pp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 6px 10px;
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-border);
}
.pp-tb-group { display: flex; align-items: center; gap: 4px; }
.pp-tb-label { font-size: 11px; text-transform: uppercase; color: var(--pp-muted); font-weight: 600; margin-right: 2px; }
.pp-tb-btn {
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.pp-tb-btn:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

/* Drill-through modal */
.pp-drill { min-width: 60vw; max-width: 90vw; }
.pp-drill-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--pp-border); border-radius: 5px; }

/* Field list / configurator */
.pp-fieldlist {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--pp-surface-2);
  border-bottom: 1px solid var(--pp-border);
  flex-wrap: wrap;
}
.pp-zone {
  flex: 1 1 120px;
  min-width: 120px;
  border: 1px dashed var(--pp-border);
  border-radius: 4px;
  background: var(--pp-surface);
  padding: 4px;
}
.pp-zone.pp-dragover { border-color: var(--pp-accent); background: #f0f6ff; }
.pp-zone-title { font-weight: 600; font-size: 11px; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pp-add-calc {
  font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--pp-border); background: var(--pp-surface); color: var(--pp-accent);
  cursor: pointer; text-transform: none;
}
.pp-add-calc:hover { border-color: var(--pp-accent); background: var(--pp-accent); color: #fff; }
.pp-calc-new { min-width: 340px; max-width: min(92vw, 560px); }
.pp-calc-new input[type="text"] { width: 100%; padding: 6px; border: 1px solid var(--pp-border); border-radius: 5px; box-sizing: border-box; }
.pp-zone-body { display: flex; flex-direction: column; gap: 4px; min-height: 24px; }
.pp-chip {
  background: var(--pp-header-bg);
  border: 1px solid var(--pp-border);
  border-radius: 3px;
  padding: 3px 6px;
  cursor: grab;
  font-size: 12px;
  /* Pointer drag is custom (works on touch) — stop the browser from scrolling
     or selecting text when a drag begins on a chip. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pp-chip:active { cursor: grabbing; }
/* Drop indicators while reordering chips / moving fields between zones. */
.pp-chip-drop-before { box-shadow: inset 0 3px 0 var(--pp-accent); }
.pp-chip-drop-after { box-shadow: inset 0 -3px 0 var(--pp-accent); }
.pp-chip-dragover { box-shadow: 0 0 0 2px var(--pp-accent); }

/* Measure header gear (opens the aggregation modal) — hover-revealed so the
   heading stays clean. */
.pp-measureh { position: relative; }
.pp-gear {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  margin-left: 6px;
  padding: 0 2px;
  color: var(--pp-muted);
  opacity: 0;
  transition: opacity .12s;
}
.pp-measureh:hover .pp-gear { opacity: .75; }
.pp-gear:hover { opacity: 1; color: var(--pp-accent); }

/* Popups and modals are appended to <body> (so they escape the grid's
 * overflow clip), which places them OUTSIDE .pp-root — where the palette
 * variables are defined. Re-declare the palette on these body-level containers
 * so their var(--pp-*) references resolve. Without this, e.g. the filter Apply
 * button's `background: var(--pp-accent)` collapses to transparent and its white
 * text becomes invisible (white-on-white), so the button "disappears". */
.pp-popup, .pp-modal-backdrop {
  --pp-border: #e0e0e0;
  --pp-header-bg: #f5f6f8;
  --pp-total-bg: #eef1f5;
  --pp-grand-bg: #e3e8ef;
  --pp-selected-bg: #cfe3ff;
  --pp-text: #1f2430;
  --pp-accent: #2f6fdb;
  --pp-bg: #ffffff;
  --pp-surface: #ffffff;
  --pp-surface-2: #fafbfc;
  --pp-muted: #6b7280;
  --pp-faint: #9aa1ad;
  color: var(--pp-text);
}
/* Dark theme for body-level popups (the grid adds this class on open). */
.pp-popup.pp-theme-dark, .pp-modal-backdrop.pp-theme-dark {
  --pp-border: #39414f;
  --pp-header-bg: #1e2532;
  --pp-total-bg: #232c3b;
  --pp-grand-bg: #2b3548;
  --pp-selected-bg: #2a3a57;
  --pp-text: #e6e9f0;
  --pp-accent: #6ea8ff;
  --pp-bg: #11151c;
  --pp-surface: #161b24;
  --pp-surface-2: #1b212c;
  --pp-muted: #9aa3b2;
  --pp-faint: #6b7382;
  color-scheme: dark;
}

/* Centered modal (measure configuration) */
.pp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pp-modal {
  background: var(--pp-surface);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 18px 20px;
  min-width: 300px;
  font-size: 13px;
}
.pp-modal h3, .pp-modal-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

/* ⚙ field-list trigger + the modal that hosts the rearrange UI. */
.pp-fieldlist-btn {
  position: absolute; z-index: 6; width: 30px; height: 30px; line-height: 1;
  border: 1px solid var(--pp-border); border-radius: 6px; background: var(--pp-surface);
  color: var(--pp-text); cursor: pointer; font-size: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pp-fieldlist-btn:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-fl-top-right { top: 8px; right: 8px; }
.pp-fl-top-left { top: 8px; left: 8px; }
.pp-fl-bottom-right { bottom: 8px; right: 8px; }
.pp-fl-bottom-left { bottom: 8px; left: 8px; }
.pp-fieldlist-modal { min-width: 320px; max-width: min(92vw, 720px); max-height: 86vh; display: flex; flex-direction: column; }
.pp-fieldlist-modal-body { overflow: auto; }
/* Inside the modal the field list fills the dialog (no inline max-height clamp). */
.pp-fieldlist-modal-body .pp-fieldlist { padding: 0; border: 0; max-height: none; }
.pp-internal-name {
  align-self: flex-start; padding: 2px 7px; border-radius: 4px; background: var(--pp-bg, #f6f7f9);
  border: 1px solid var(--pp-border); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--pp-text); user-select: all;
}
.pp-modal label { display: block; font-size: 11px; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 4px; }
.pp-modal select { width: 100%; padding: 7px; border: 1px solid var(--pp-border); border-radius: 5px; }
.pp-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
/* Normalise both actions to one size/baseline — reset the inline-form margin and
   font-size the primary button (.pp-popup-apply) otherwise brings in. */
.pp-modal-actions button { margin: 0; padding: 7px 14px; border-radius: 5px; border: 1px solid var(--pp-border); background: var(--pp-surface); cursor: pointer; font-size: 12.5px; line-height: 1.2; font-weight: 500; }
/* Keep the primary action accent-filled inside modals — `.pp-modal-actions button`
   above would otherwise repaint it surface-coloured, leaving white text on white. */
.pp-modal-actions .primary,
.pp-modal-actions .pp-popup-apply { background: var(--pp-accent); color: #fff; border-color: var(--pp-accent); }

/* Report-filter area */
.pp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--pp-surface-2);
  border-bottom: 1px solid var(--pp-border);
}
.pp-filters-label { font-size: 11px; text-transform: uppercase; color: var(--pp-muted); font-weight: 600; }
.pp-filter-btn {
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.pp-filter-btn:hover { border-color: var(--pp-accent); }
.pp-filter-btn b { font-weight: 600; }

/* Popups (measure aggregation + filter member picker) */
.pp-popup {
  position: fixed;
  z-index: 9999;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 10px;
  min-width: 200px;
  font-size: 13px;
  /* Never exceed the viewport — keeps the Apply button reachable (scroll within
   * the popup as a last resort) even when the member list is long. */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
/* Keep the action row (Apply) pinned to the bottom while the popup scrolls, so
 * it is always visible regardless of how tall the content is. */
.pp-popup-actions, .pp-tab-pane > .pp-popup-actions {
  position: sticky;
  bottom: -10px;
  background: var(--pp-surface);
  padding-top: 6px;
  margin-bottom: -4px;
}
.pp-popup-title { font-weight: 600; margin-bottom: 8px; }
.pp-popup label { display: block; font-size: 11px; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 4px; }
.pp-popup select { width: 100%; padding: 6px; border: 1px solid var(--pp-border); border-radius: 5px; }
.pp-popup-tools { display: flex; gap: 12px; margin-bottom: 6px; }
.pp-popup-tools a { color: var(--pp-accent); text-decoration: none; font-size: 12px; }
.pp-popup-list { max-height: 240px; overflow: auto; border: 1px solid var(--pp-border); border-radius: 5px; padding: 4px; }
.pp-member-search { width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 5px 8px; border: 1px solid var(--pp-border); border-radius: 5px; font-size: 12px; }
/* `label.pp-popup-item` to out-specify `.pp-popup label` (which would otherwise
   force uppercase/grey/block onto the member rows). Keeps member names in their
   real case and inline with the checkbox. */
.pp-popup label.pp-popup-item { display: flex; align-items: center; gap: 6px; padding: 2px 4px; margin-bottom: 0; text-transform: none; color: inherit; font-size: 13px; font-weight: 400; }
.pp-popup-item:hover { background: var(--pp-header-bg); }
.pp-popup-apply {
  margin-top: 8px;
  padding: 5px 14px;
  border: 1px solid var(--pp-accent);
  background: var(--pp-accent);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
}
.pp-popup-apply:hover { filter: brightness(1.06); }
/* In the inline Heading/Width rows the button is compact and the input fills. */
.pp-field-inline .pp-popup-apply { margin-top: 0; flex: 0 0 auto; }

/* ── Column controls: resize handle, reorder, properties button ───────────── */
.pp-measureh, .pp-colh, .pp-corner { position: relative; }
.pp-draggable { cursor: grab; touch-action: none; }
.pp-draggable:active { cursor: grabbing; }
.pp-col-dragover { box-shadow: inset 3px 0 0 var(--pp-accent); }
/* Positional drop indicators while reordering columns (left/right edge). */
.pp-col-drop-before { box-shadow: inset 3px 0 0 var(--pp-accent); }
.pp-col-drop-after { box-shadow: inset -3px 0 0 var(--pp-accent); }
.pp-resize {
  position: absolute;
  top: 0;
  inset-inline-end: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 4;
}
.pp-resize:hover { background: var(--pp-accent); opacity: 0.4; }
/* Bigger resize grip for touch / pen (coarse) pointers. */
@media (pointer: coarse) {
  .pp-resize { inset-inline-end: -9px; width: 20px; }
}

/* Floating label shown while dragging a column header or field-list chip. */
.pp-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  transform: translate(10px, 10px);
  background: var(--pp-accent);
  color: #fff;
  font-size: 12px;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding: 4px 9px;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
}
body.pp-dragging { user-select: none; -webkit-user-select: none; }
.pp-colprops {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  margin-left: 4px;
  padding: 0 2px;
  color: var(--pp-muted);
  opacity: 0;
  transition: opacity .12s;
}
.pp-measureh:hover .pp-colprops,
.pp-colh:hover .pp-colprops,
.pp-corner:hover .pp-colprops { opacity: .7; }
.pp-colprops:hover { opacity: 1; color: var(--pp-accent); }

/* ── Column-properties panel ─────────────────────────────────────────────── */
.pp-colprops-popup { width: 320px; max-width: 92vw; }
.pp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pp-border); margin-bottom: 8px; }
.pp-tab {
  border: none;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--pp-muted);
  border-bottom: 2px solid transparent;
}
.pp-tab:hover { color: var(--pp-text); }
.pp-tab-active { color: var(--pp-accent); border-bottom-color: var(--pp-accent); font-weight: 600; }
.pp-tab-pane { display: flex; flex-direction: column; gap: 8px; }
.pp-field { display: flex; flex-direction: column; gap: 3px; text-transform: none; }
.pp-field-label { font-size: 11px; text-transform: uppercase; color: var(--pp-muted); }
.pp-field input[type="text"], .pp-field input[type="number"], .pp-field select { width: 100%; padding: 5px; border: 1px solid var(--pp-border); border-radius: 5px; box-sizing: border-box; }
.pp-field input[type="color"] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--pp-border); border-radius: 5px; }
.pp-field-inline { display: flex; gap: 6px; align-items: center; }
.pp-field-inline input { flex: 1; }
.pp-display-opts { display: flex; flex-direction: column; gap: 8px; }
.pp-display-preview { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px dashed var(--pp-border); border-radius: 5px; }
.pp-display-preview .pp-sample { width: 90px; padding: 4px; border: 1px solid var(--pp-border); border-radius: 4px; }
.pp-preview-out { flex: 1; text-align: right; }
.pp-popup-actions { display: flex; gap: 6px; margin-top: 4px; justify-content: flex-end; }
.pp-popup-actions .pp-popup-apply { margin-top: 0; }
.pp-btn { padding: 6px 10px; border: 1px solid var(--pp-border); background: var(--pp-surface); border-radius: 5px; cursor: pointer; font-size: 12px; }
.pp-btn:hover { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-muted { font-size: 11px; color: var(--pp-faint); }

/* Column type badge + calculation editor (column-properties panel). */
.pp-type-badge {
  display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--pp-surface);
  border: 1px solid var(--pp-border); color: var(--pp-muted);
}
.pp-type-badge.pp-type-calc { background: #eef4ff; border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-calc-intro { margin: 0 0 2px; font-size: 11px; color: var(--pp-muted); line-height: 1.4; }
.pp-calc-formula {
  width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid var(--pp-border);
  border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; resize: vertical; background: var(--pp-surface); color: inherit;
}
.pp-calc-formula:read-only { background: var(--pp-bg, #f6f7f9); color: var(--pp-muted); }
.pp-calc-error { font-size: 11px; color: #c0392b; }
.pp-calc-ref > summary {
  cursor: pointer; font-size: 11px; font-weight: 600; text-transform: uppercase;
  color: var(--pp-muted); padding: 4px 0; list-style: revert;
}
.pp-calc-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 4px; }
.pp-calc-chip {
  padding: 2px 7px; border: 1px solid var(--pp-border); border-radius: 4px; cursor: pointer;
  background: var(--pp-surface); color: inherit; font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap;
}
.pp-calc-chip:hover:not(:disabled) { border-color: var(--pp-accent); color: var(--pp-accent); }
.pp-calc-chip:disabled { cursor: default; opacity: 0.85; }
.pp-cond-list { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow: auto; }
.pp-cond-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pp-cond-swatch { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; border-radius: 4px; border: 1px solid var(--pp-border); font-size: 10px; }
.pp-cond-rm { margin-left: auto; padding: 2px 6px; }
.pp-cond-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--pp-border); padding-top: 8px; }
.pp-cond-form select, .pp-cond-form input[type="number"] { width: 64px; padding: 4px; border: 1px solid var(--pp-border); border-radius: 4px; }
.pp-cond-form input[type="color"] { width: 32px; height: 26px; padding: 0; border: 1px solid var(--pp-border); border-radius: 4px; }

/* ── Responsive: keep the data grid usable on small screens ──────────────────
   On narrow viewports the inline field list (.pp-fieldlist) wraps its drag
   zones into a tall vertical stack, which can squeeze the actual grid down to
   a sliver. Cap its height so it scrolls within itself and the grid (.pp-scroll)
   keeps room. The field list stays fully usable and can still be toggled off
   via the toolbar “Fields” button. */
@media (max-width: 700px) {
  .pp-fieldlist { max-height: 42%; overflow: auto; }
  .pp-zone { flex-basis: 140px; }
  .pp-toolbar { gap: 8px; padding: 6px 8px; }
}

/* Range selection (Shift+click / Shift+arrows). An inset overlay so it shows
   even over conditionally-coloured cells. */
.pp-table .pp-range { box-shadow: inset 0 0 0 9999px rgba(47, 111, 219, 0.13); }

/* Keyboard focus ring for the ARIA grid (roving-tabindex navigation). */
.pp-table [role="gridcell"]:focus-visible,
.pp-table [role="rowheader"]:focus-visible,
.pp-table [role="columnheader"]:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}