/* WWOF Market Price Management — Portal chrome on wwof-ui (matches CoC portal language) */

[hidden] { display: none !important; }

/* wwof-ui.min.css shows .wwof-mega purely via :hover/:focus-within on the
   wrap — the .is-mega-open class app.js toggles on click/nav has no matching
   selector there at all, so a click inside the panel never actually closed
   it while the mouse stayed put (a click doesn't move the cursor). Force JS
   state to win: hidden whenever it's explicitly not open, regardless of hover. */
.wwof-mega-wrap:not(.is-mega-open) .wwof-mega { display: none !important; }

/* ── Outline danger button — wwof-ui.min.css has no such variant; combining
   .wwof-btn-outline (background:transparent) with .wwof-btn-danger
   (background:red, color:#fff) left white text on a transparent
   background, i.e. invisible (Reject/Deny/"Leave without Saving"). Mirrors
   the vendor's own .wwof-btn-outline-primary pattern. */
.pm-admin-user-row + .pm-admin-user-row { border-top: 1px solid var(--wwof-border, #E5E1D8); }
.pm-admin-user-edit:not([hidden]) {
  padding: 12px 14px 14px;
  margin: -4px 0 8px;
  background: rgba(181,136,11,.04);
  border-radius: 0 0 10px 10px;
}
html.wwof-dark .pm-admin-user-row + .pm-admin-user-row,
body.wwof-dark .pm-admin-user-row + .pm-admin-user-row { border-top-color: rgba(255,255,255,.08); }
html.wwof-dark .pm-admin-user-edit:not([hidden]),
body.wwof-dark .pm-admin-user-edit:not([hidden]) { background: rgba(181,136,11,.08); }

.wwof-btn-outline-danger {
  color: var(--wwof-danger, #B83230);
  border-color: var(--wwof-danger, #B83230);
  background: transparent;
}
.wwof-btn-outline-danger:hover {
  background: var(--wwof-danger, #B83230);
  color: #fff;
}

/* ── Toasts — centered + a visible dismiss control ──
   Overrides wwof-ui.min.css's default (small, top-right corner, auto-hide
   only, easy to miss/lose track of when stacked) rather than editing that
   shared vendor file directly. */
.wwof-toast-container {
  top: 50% !important;
  right: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  align-items: center;
}
.wwof-toast {
  min-width: 300px;
  max-width: 480px;
  font-size: 0.95rem;
  padding: 14px 14px 14px 20px;
  transform: scale(0.92) !important;
  opacity: 0;
  transition: transform 0.2s var(--ease, ease), opacity 0.2s var(--ease, ease);
}
.wwof-toast.show {
  transform: scale(1) !important;
  opacity: 1;
}
.wwof-toast-text { flex: 1; }
.wwof-toast-close {
  flex: none;
  background: rgba(255, 255, 255, 0.16);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.wwof-toast-close:hover { background: rgba(255, 255, 255, 0.3); }

/* ── Global loading overlay ── */
.pm-loading {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 23, 26, 0.55); backdrop-filter: blur(4px);
}
.pm-loading[hidden] { display: none !important; }
body.pm-loading-open { overflow: hidden; }
.pm-loading-card {
  background: #fff; border-radius: 16px; padding: 28px 32px;
  min-width: 300px; max-width: 440px; width: min(440px, 92vw); text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  animation: pm-load-in 0.18s ease-out;
}
@keyframes pm-load-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
html.wwof-dark .pm-loading-card { background: #2C3034; color: #f5f2ec; }
.pm-loading-spinner {
  width: 40px; height: 40px; margin: 0 auto 14px;
  border: 3px solid rgba(181,136,11,.2); border-top-color: #B5880B;
  border-radius: 50%; animation: pm-spin 0.75s linear infinite;
}
.pm-loading-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.pm-loading-sub { font-size: 0.82rem; color: var(--wwof-muted); margin-top: 4px; }
.pm-loading-progress {
  height: 4px; border-radius: 999px; background: rgba(181,136,11,.12);
  margin: 14px 0 0; overflow: hidden;
}
.pm-loading-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #B5880B, #d4a84b);
  transition: width 0.28s ease;
}
.pm-loading-steps { margin-top: 14px; text-align: left; font-size: 0.78rem; display: flex; flex-direction: column; gap: 6px; }
.pm-loading-step { display: flex; gap: 8px; align-items: center; color: var(--wwof-muted); }
.pm-loading-step.done { color: var(--wwof-success); }
.pm-loading-step.active { color: var(--wwof-heading); font-weight: 600; }

/* Preview modal */
.pm-preview-meta { font-size: 0.9rem; margin-bottom: 12px; }
.pm-preview-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pm-preview-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.pm-preview-sub { margin-top: 4px; font-size: 0.8rem; }
.pm-preview-ready {
  font-size: 0.72rem; font-weight: 700; color: #2E7D32;
  background: rgba(46,125,50,.1); border-radius: 999px; padding: 6px 10px; white-space: nowrap;
}
.pm-preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
@media (max-width: 640px) { .pm-preview-stats { grid-template-columns: repeat(2, 1fr); } }
.pm-preview-stat {
  border: 1px solid var(--wwof-border, #E5E1D8); border-radius: 10px; padding: 10px;
  text-align: center; background: var(--wwof-surface-2, #F7F5F1);
}
.pm-preview-stat b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.pm-preview-stat span { font-size: 0.68rem; color: var(--wwof-muted); text-transform: uppercase; letter-spacing: .04em; }
.pm-preview-viz {
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--wwof-border); border-radius: 12px;
  background: var(--wwof-surface-2, #F7F5F1);
}
.pm-preview-bars { display: flex; flex-direction: column; gap: 8px; }
.pm-preview-bar-row { display: grid; grid-template-columns: 36px 1fr 64px; gap: 8px; align-items: center; font-size: 0.72rem; }
.pm-preview-bar-row span { font-weight: 700; color: var(--wwof-muted); }
.pm-preview-bar-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.pm-preview-bar-track { height: 8px; border-radius: 999px; background: rgba(0,0,0,.06); overflow: hidden; }
.pm-preview-bar { height: 100%; border-radius: 999px; min-width: 4px; transition: width .3s ease; }
.pm-preview-bar.us { background: #2C6BED; }
.pm-preview-bar.ca { background: #B83230; }
.pm-preview-bar.mx { background: #2E7D32; }
.pm-preview-table-wrap { max-height: 280px; overflow: auto; border: 1px solid var(--wwof-border); border-radius: 10px; }
.pm-preview-table { font-size: 0.78rem; margin: 0; }
.pm-preview-table .pm-num { text-align: right; font-variant-numeric: tabular-nums; }
.pm-modal-preview { max-width: 860px !important; width: 94vw !important; }
.pm-diff-old { color: var(--wwof-muted); text-decoration: line-through; margin-right: 4px; }
.pm-diff-arrow { color: var(--wwof-muted); margin: 0 4px; }
.pm-diff-new { font-weight: 700; }
.pm-mega-disabled { opacity: 0.45; pointer-events: none; }
.pm-mega-empty-state {
  margin: 0; padding: 18px 16px; border-radius: 12px;
  background: rgba(181,136,11,.06); border: 1px dashed rgba(181,136,11,.28);
  text-align: center;
}
#mega-pricelist.is-empty .pm-mega-empty-state {
  margin: 0;
}
html.wwof-dark #mega-pricelist.is-empty .pm-mega-empty-state {
  background: rgba(181,136,11,.1);
}
.pm-mega-empty-icon {
  width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #B5880B; font-size: 1.1rem;
  border: 1px solid rgba(181,136,11,.2);
}
.pm-mega-empty-title { font-weight: 700; font-size: 0.88rem; margin: 0 0 4px; }
.pm-mega-empty-body { font-size: 0.75rem; color: var(--wwof-muted); margin: 0 0 10px; line-height: 1.4; }
.pm-mega-empty-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.wwof-dark .pm-mega-empty-state { background: rgba(181,136,11,.1); }
html.wwof-dark .pm-mega-empty-icon { background: #1a1d21; }
.pm-pnav-empty { opacity: 0.85; }
.pm-disabled { opacity: 0.5; pointer-events: none; }
.pm-btn-busy { cursor: wait; }
/* Dashboard: compact tabs + multi-select filter dropdowns (not chip clutter) */
.pm-dash-stats-compact {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.pm-dash-stats-compact .pm-stat-card {
  padding: 12px 8px !important;
  cursor: default;
}
.pm-dash-stats-compact .pm-stat-action { cursor: pointer; }
.pm-dash-stats-compact .pm-stat-action:hover,
.pm-dash-stats-compact .pm-stat-action.active {
  outline: 2px solid #B5880B;
  outline-offset: 1px;
}
.pm-dash-stats-compact .pm-stat-label { font-size: 0.68rem !important; }
.pm-dash-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--wwof-border, #E5E1D8);
  padding-bottom: 0;
}
.pm-dash-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: none; background: transparent;
  font: inherit; font-size: 0.84rem; font-weight: 600;
  color: var(--wwof-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pm-dash-tab:hover { color: var(--wwof-heading); }
.pm-dash-tab.active { color: #B5880B; border-bottom-color: #B5880B; }
.pm-dash-tab em {
  font-style: normal; font-size: 0.68rem; font-weight: 700;
  background: var(--wwof-surface-2, #F0EDE7); color: var(--wwof-muted);
  padding: 1px 7px; border-radius: 999px;
}
.pm-dash-tab em.hot { background: rgba(181,136,11,.15); color: #7a5a10; }
.pm-dash-tab.active em { background: rgba(181,136,11,.18); color: #7a5a10; }

.pm-dash-filterbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--wwof-surface-2, #F7F5F1);
  border: 1px solid var(--wwof-border, #E5E1D8);
  border-radius: 12px;
}
.pm-msel { position: relative; }
.pm-msel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  background: #fff; font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--wwof-text-2); cursor: pointer; max-width: 240px;
}
.pm-msel-btn:hover, .pm-msel-btn[aria-expanded="true"] {
  border-color: #B5880B; box-shadow: 0 0 0 2px rgba(181,136,11,.12);
}
.pm-msel-label { color: var(--wwof-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .04em; }
.pm-msel-value {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px;
  font-weight: 500; color: var(--wwof-muted);
}
.pm-msel-value.has { color: var(--wwof-heading); font-weight: 650; }
.pm-msel-count {
  font-size: 0.65rem; font-weight: 700; background: rgba(181,136,11,.15); color: #7a5a10;
  padding: 1px 6px; border-radius: 999px;
}
.pm-msel-btn .bi-chevron-down { font-size: 0.7rem; color: var(--wwof-muted); }
.pm-msel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  min-width: 220px; background: #fff; border: 1px solid var(--wwof-border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 8px;
}
.pm-msel-options { max-height: 200px; overflow-y: auto; }
.pm-msel-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px; font-size: 0.82rem; cursor: pointer;
}
.pm-msel-opt:hover { background: rgba(181,136,11,.08); }
.pm-msel-opt input { accent-color: #B5880B; }
.pm-msel-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--wwof-border);
}
.pm-msel-clear {
  border: none; background: none; font: inherit; font-size: 0.78rem;
  color: var(--wwof-muted); cursor: pointer; font-weight: 600;
}
.pm-msel-clear:hover { color: var(--wwof-danger, #B83230); }
.pm-filter-active-count { font-size: 0.72rem; font-weight: 600; color: #7a5a10; }
.pm-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.pm-action-tab-card .pm-action-empty {
  display: flex; gap: 12px; align-items: flex-start; padding: 24px 12px; justify-content: center;
}
html.wwof-dark .pm-dash-filterbar { background: #2C3034; border-color: #444; }
html.wwof-dark .pm-msel-btn { background: #1a1d21; color: #ece8e0; border-color: #444; }
html.wwof-dark .pm-msel-panel { background: #2C3034; border-color: #444; }
html.wwof-dark .pm-msel-value.has { color: #f5f2ec; }
html.wwof-dark .pm-dash-tab.active { color: #e8c76a; border-bottom-color: #B5880B; }
html.wwof-dark .pm-preview-stat,
html.wwof-dark .pm-preview-viz { background: #1a1d21; border-color: #444; }
html.wwof-dark .pm-preview-bar-track { background: rgba(255,255,255,.08); }
@media (max-width: 900px) {
  .pm-dash-stats-compact { grid-template-columns: repeat(3, 1fr) !important; }
  .pm-dash-insights { grid-template-columns: 1fr !important; }
}

/* Dashboard analytics summary — fills empty stage space with useful rollups */
.pm-dash-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.pm-insight-card {
  padding: 14px 16px 12px !important;
  border-radius: 12px;
  min-height: 168px;
}
.pm-insight-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--wwof-heading, #2C3034);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pm-insight-head .bi { color: #B5880B; font-size: 0.95rem; }
.pm-insight-stack {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  background: rgba(0,0,0,.04);
  margin-bottom: 12px;
}
.pm-insight-seg { min-width: 4px; border-radius: 2px; }
.pm-insight-seg.draft { background: #5c6570; }
.pm-insight-seg.submitted { background: #C47F17; }
.pm-insight-seg.approved { background: #2E7D32; }
.pm-insight-seg.empty { background: rgba(0,0,0,.06); }
.pm-insight-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-insight-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--wwof-muted);
}
.pm-insight-legend strong {
  margin-left: auto;
  color: var(--wwof-heading);
  font-variant-numeric: tabular-nums;
}
.pm-insight-legend em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--wwof-muted);
  min-width: 2.2rem;
  text-align: right;
}
.pm-insight-legend .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  display: inline-block;
}
.pm-insight-legend .dot.draft { background: #5c6570; }
.pm-insight-legend .dot.submitted { background: #C47F17; }
.pm-insight-legend .dot.approved { background: #2E7D32; }
.pm-insight-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--wwof-border, #E5E1D8);
  font-size: 0.7rem;
  color: var(--wwof-muted);
}
.pm-insight-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.pm-insight-kpi-n {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wwof-heading, #2C3034);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pm-insight-unit {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wwof-muted);
  margin-left: 1px;
}
.pm-insight-kpi-l {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--wwof-muted);
  margin-top: 2px;
  line-height: 1.25;
}
.pm-insight-subh {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wwof-muted);
  margin-bottom: 8px;
}
.pm-insight-bar-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.72rem;
}
.pm-insight-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wwof-heading);
  font-weight: 600;
}
.pm-insight-bar-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
}
.pm-insight-bar-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
  background: #B5880B;
}
.pm-insight-bar-fill.brand { background: linear-gradient(90deg, #B5880B, #C47F17); }
.pm-insight-bar-fill.green { background: #2E7D32; }
.pm-insight-bar-fill.gold { background: #B5880B; }
.pm-insight-bar-fill.amber { background: #C47F17; }
.pm-insight-bar-fill.red { background: #B83230; }
.pm-insight-bar-val {
  font-variant-numeric: tabular-nums;
  color: var(--wwof-muted);
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.68rem;
}
.pm-insight-empty {
  font-size: 0.75rem;
  color: var(--wwof-muted);
  padding: 6px 0;
  line-height: 1.4;
}
html.wwof-dark .pm-insight-stack { background: rgba(255,255,255,.06); }
html.wwof-dark .pm-insight-bar-track { background: rgba(255,255,255,.08); }
html.wwof-dark .pm-insight-foot { border-color: #444; }

/* ── Slick polish ─────────────────────────────────────────── */
.wwof-pnav {
  min-height: 60px !important;
  padding: 0 20px !important;
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
  background: #FBF9F5 !important;
  border-bottom: 1px solid #E8E4DB !important;
  box-shadow: none !important;
}
.wwof-snav {
  min-height: 44px !important;
  padding: 0 20px !important;
  background: #fff !important;
  position: sticky;
  top: 60px;
  z-index: 150;
}
.wwof-snav-tab {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* Wave 3 set display:inline-flex !important on every snav tab, which beats
   both the HTML hidden attribute and the global [hidden] rule (class beats
   attribute at the same !important). Admin/Price List tabs then leaked onto
   Dashboard. Keep them in the bar for their own context, but honor hidden. */
.wwof-snav-tab[hidden] {
  display: none !important;
}
/* Horizontal-scroll hint: fade the trailing edge so a tab list that
   overflows past the viewport doesn't look like it simply ends there. */
.wwof-snav {
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.wwof-pnav-tab {
  font-size: 0.8125rem !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
}
.wwof-pnav-tab.active::after {
  bottom: -2px !important;
  height: 2px !important;
}
.wwof-snav-tab {
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
}
/* Hamburger trigger + drawer backdrop for the primary nav — hidden by
   default, shown/activated only under the <=900px media query below where
   the primary nav switches from an inline row to a slide-in drawer. */
.wwof-pnav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-right: 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--wwof-heading, #2C3034);
  cursor: pointer;
}
.wwof-pnav-hamburger:hover { background: rgba(181,136,11,.08); }
html.wwof-dark .wwof-pnav-hamburger,
body.wwof-dark .wwof-pnav-hamburger { color: #f5f2ec; }
.pm-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 210;
}
body.pm-nav-drawer-open { overflow: hidden; }
.pm-stage {
  padding: 16px 20px 12px !important;
}
.pm-stage-card {
  border-radius: 14px !important;
  border-color: #E8E4DB !important;
  box-shadow: 0 1px 2px rgba(44,48,52,.04), 0 8px 28px rgba(44,48,52,.05) !important;
  padding: 18px 22px 22px !important;
  min-height: auto !important;
}
.pm-page-head {
  border-bottom-color: #EFEBE3 !important;
}
.pm-step-card {
  border: 1px solid #EBE7DF !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}
.pm-step-card .wwof-card-head {
  font-size: 0.875rem;
  font-weight: 650;
  padding: 12px 16px !important;
  background: #FCFBF8;
  border-bottom: 1px solid #F0ECE4;
}
.pm-step-card .wwof-card-body {
  padding: 14px 16px 16px !important;
}
.pm-step-num {
  width: 20px;
  height: 20px;
  font-size: 0.65rem;
}
.pm-form-stack .wwof-input {
  border-radius: 8px;
  border-color: #E0DBD2;
}
.pm-form-stack .wwof-input:focus {
  border-color: var(--wwof-gold);
  box-shadow: 0 0 0 3px rgba(181,136,11,.12);
}
.pm-query-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pm-query-row .wwof-label { margin: 0; }
.pm-tight { margin: 0 0 12px !important; line-height: 1.4; }
.pm-load-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* ── Mega menus: one open at a time, centered under active tab ── */
.wwof-pnav {
  overflow: visible !important;
  z-index: 200 !important; /* above snav / stage so mega never sits under content */
}
.wwof-pnav-center {
  overflow: visible !important;
  position: relative;
  z-index: 2;
}
.wwof-mega-wrap {
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1;
}
/* Only the hovered / open wrap stacks above siblings */
.wwof-mega-wrap:hover,
.wwof-mega-wrap.is-mega-open,
.wwof-mega-wrap:focus-within {
  z-index: 50;
}
/* Default: all megas hidden (override vendor left:-40px / top:56px) */
.wwof-mega,
.wwof-mega.pm-mega-panel,
.pm-mega-panel {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 60 !important;
  border-radius: 14px !important;
  border: 1px solid var(--wwof-border, #E8E4DB) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.18) !important;
  padding: 16px 18px !important;
  min-width: min(420px, 92vw) !important;
  margin: 0 !important;
  pointer-events: auto;
}
/* Show ONLY for the wrap currently hovered / focused / JS-open */
.wwof-mega-wrap:hover > .wwof-mega,
.wwof-mega-wrap:focus-within > .wwof-mega,
.wwof-mega-wrap.is-mega-open > .wwof-mega {
  display: block !important;
}
/* Clicking a mega item removes is-mega-open, but the pointer is still over
   the wrap so :hover (same specificity, later in this file) would keep the
   panel painted. Dismissed wins until mouseleave. */
.wwof-mega-wrap.is-mega-dismissed > .wwof-mega,
.wwof-mega-wrap.is-mega-dismissed:hover > .wwof-mega,
.wwof-mega-wrap.is-mega-dismissed:focus-within > .wwof-mega {
  display: none !important;
}
/* When any wrap is hovered, force-hide other wraps' panels (prevents dual open / overlap) */
.wwof-pnav-center:has(.wwof-mega-wrap:hover) > .wwof-mega-wrap:not(:hover) > .wwof-mega,
.wwof-pnav-center:has(.wwof-mega-wrap:focus-within) > .wwof-mega-wrap:not(:focus-within):not(:hover) > .wwof-mega,
.wwof-pnav-center:has(.wwof-mega-wrap.is-mega-open) > .wwof-mega-wrap:not(.is-mega-open) > .wwof-mega {
  display: none !important;
}
/* Touch devices (e.g. a tablet in landscape, wide enough that the drawer
   hasn't kicked in yet) never fire :hover, so a hover-only mega would just
   never open. Fall back to the JS is-mega-open toggle exclusively. */
@media (hover: none) {
  .wwof-mega-wrap:hover > .wwof-mega,
  .wwof-mega-wrap:focus-within > .wwof-mega {
    display: none !important;
  }
  .wwof-mega-wrap.is-mega-open > .wwof-mega {
    display: block !important;
  }
}
#mega-workspace.pm-mega-panel {
  min-width: min(680px, 94vw) !important;
}
#mega-pricelist.pm-mega-panel {
  min-width: min(720px, 96vw) !important;
  max-width: min(860px, 96vw);
}
#mega-admin.pm-mega-panel {
  min-width: min(480px, 92vw) !important;
}
/* Price List mega — 3 cols like Workspace (browse | open/active | aside) */
#mega-pricelist .pm-mega-grid {
  grid-template-columns: minmax(200px, 1.1fr) minmax(210px, 1.15fr) minmax(150px, 0.85fr);
  gap: 14px 16px;
  align-items: start;
}
#mega-pricelist .pm-mega-pl-pick {
  max-height: 200px;
  min-width: 0;
}
#mega-pricelist .pm-mega-pl-help {
  font-size: 0.72rem;
  color: var(--wwof-muted, #6b6560);
  line-height: 1.4;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(181,136,11,.06);
  border: 1px dashed rgba(181,136,11,.22);
}
#mega-pricelist .pm-mega-active-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  color: #fff;
  background: #B5880B;
}
#mega-pricelist .pm-mega-count {
  display: inline-block;
  margin-left: 4px;
  min-width: 1.1rem;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #B5880B;
  background: rgba(181,136,11,.12);
  vertical-align: middle;
}
#mega-pricelist.has-open-list .pm-mega-hint {
  margin: 0 0 8px;
  background: rgba(46,125,50,.08);
  color: var(--wwof-heading, #2C3034);
}
#mega-pricelist .pm-mega-aside-stats {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--wwof-muted, #6b6560);
}
#mega-pricelist .pm-mega-aside-stats strong {
  color: var(--wwof-heading, #2C3034);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
@media (max-width: 720px) {
  #mega-pricelist .pm-mega-grid {
    grid-template-columns: 1fr 1fr;
  }
  #mega-pricelist .pm-mega-aside {
    grid-column: 1 / -1;
  }
}
.wwof-mega-link {
  border-radius: 10px !important;
  padding: 8px 10px !important;
}
.wwof-mega-link:hover {
  background: rgba(181,136,11,.06) !important;
}
.wwof-mega-col-title {
  font-size: 0.62rem !important;
  letter-spacing: .08em !important;
  margin-bottom: 8px !important;
}
/* Product title next to single logo — solid color (no gradient wash / dual look) */
html:not(.wwof-dark) .wwof-pnav-logo-title {
  color: #2C3034 !important;
  background: none !important;
  -webkit-text-fill-color: #2C3034 !important;
}
.pm-site-footer {
  padding: 8px 20px !important;
  padding-left: max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  background: #FBF9F5 !important;
}
.wwof-ticker {
  min-height: 28px !important;
  background: #F3EDE0 !important;
  border-top-color: #E4D9C2 !important;
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
.pm-narrow { max-width: 720px !important; }

/* New Price List — use full stage width */
.pm-newlist-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr);
  gap: 20px;
  align-items: start;
  max-width: none;
  width: 100%;
}
.pm-newlist-intro { margin-bottom: 14px; }
/* Create New Price List — production-style form */
.pm-create-pl-card .wwof-card-body { padding: 20px 22px 22px !important; }
.pm-field-full { width: 100%; }
.pm-req { color: #B83230; font-weight: 700; }
.pm-create-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.pm-create-actions .wwof-btn-lg {
  min-height: 42px;
  padding: 10px 20px;
  font-weight: 700;
}
.pm-advanced-query {
  border: 1px solid var(--wwof-border, #E5E1D8);
  border-radius: 10px;
  background: var(--wwof-surface-2, #F7F5F1);
  padding: 0;
}
.pm-advanced-query > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--wwof-heading, #2C3034);
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.pm-advanced-query > summary::-webkit-details-marker { display: none; }
.pm-advanced-query > summary .bi-sliders { color: #B5880B; }
.pm-advanced-query[open] > summary {
  border-bottom: 1px solid var(--wwof-border, #E5E1D8);
}
.pm-advanced-query-body { padding: 12px 14px 14px; }
.pm-brand-upload-hint {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.pm-brand-upload-hint.ok {
  background: rgba(46,125,50,.08);
  border: 1px solid rgba(46,125,50,.25);
  color: #1b5e20;
}
.pm-brand-upload-hint.warn {
  background: rgba(196,127,23,.1);
  border: 1px solid rgba(196,127,23,.35);
  color: #7a4a0a;
}
/* Approvals hub (Find redesigned) */
.pm-appr-hub { max-width: 1100px; }
.pm-appr-hub-intro {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.pm-appr-hub-h {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wwof-heading, #2C3034);
}
.pm-appr-hub-lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--wwof-muted);
  max-width: 520px;
  line-height: 1.4;
}
.pm-appr-hub-kpis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-appr-hub-kpi {
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  background: var(--wwof-surface, #fff);
  text-align: center;
}
.pm-appr-hub-kpi b {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--wwof-heading);
  line-height: 1.1;
}
.pm-appr-hub-kpi span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--wwof-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pm-appr-setup {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
  align-items: start;
}
.pm-appr-setup-pick { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.pm-appr-pick {
  text-align: left;
  border: 1px solid var(--wwof-border);
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}
.pm-appr-pick:hover { border-color: rgba(181,136,11,.4); background: rgba(181,136,11,.04); }
.pm-appr-pick.active { border-color: #B5880B; background: rgba(181,136,11,.1); box-shadow: 0 0 0 2px rgba(181,136,11,.12); }
.pm-appr-pick-name { font-weight: 700; font-size: 0.88rem; color: var(--wwof-heading); }
.pm-appr-pick-meta { font-size: 0.72rem; color: var(--wwof-muted); margin-top: 2px; }
.pm-setup-appr-list { display: flex; flex-direction: column; gap: 8px; }
.pm-setup-appr-list.compact { gap: 6px; }
.pm-setup-appr-row, .pm-approver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  background: var(--wwof-surface-2, #F7F5F1);
}
.pm-setup-appr-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #B5880B; color: #fff; font-weight: 800; font-size: 0.9rem; flex-shrink: 0;
}
.pm-setup-appr-avatar.sm { width: 28px; height: 28px; font-size: 0.75rem; }
.pm-setup-appr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pm-approver-main { flex: 1; min-width: 0; }
.pm-approver-name { font-weight: 650; font-size: 0.88rem; }
.pm-setup-empty, .pm-empty-sm { font-size: 0.82rem; color: var(--wwof-muted); padding: 12px 4px; }
.pm-setup-add { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wwof-border); }
.pm-setup-add-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wwof-muted); margin-bottom: 8px; }
.pm-setup-add-form { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 8px; }
.pm-setup-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-setup-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed rgba(181,136,11,.4); background: rgba(181,136,11,.06);
  border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; color: var(--wwof-heading);
}
.pm-setup-chip:hover { background: rgba(181,136,11,.14); }
.pm-setup-chip span { font-weight: 500; color: var(--wwof-muted); font-size: 0.68rem; }
.pm-setup-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.pm-appr-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pm-find-search-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.pm-find-search-wrap { position: relative; flex: 1; min-width: 220px; }
.pm-find-search-wrap > .bi-search {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--wwof-muted); pointer-events: none;
}
.pm-find-search-wrap .wwof-input { padding-left: 36px !important; }
.pm-find-brand-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.pm-find-chip {
  border: 1px solid var(--wwof-border); background: #fff; border-radius: 999px;
  padding: 4px 10px; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.pm-find-chip:hover, .pm-find-chip-all:hover { border-color: #B5880B; color: #7a5a10; }
.pm-find-empty-card {
  text-align: center; padding: 36px 20px; border: 1px dashed rgba(181,136,11,.3);
  border-radius: 14px; background: rgba(181,136,11,.04);
}
.pm-find-empty-icon {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #B5880B; font-size: 1.25rem;
  border: 1px solid rgba(181,136,11,.2);
}
.pm-find-empty-card h3 { margin: 0 0 6px; font-size: 1rem; }
.pm-find-empty-card p { margin: 0 0 14px; font-size: 0.85rem; color: var(--wwof-muted); max-width: 420px; margin-left: auto; margin-right: auto; }
@media (max-width: 800px) {
  .pm-appr-setup { grid-template-columns: 1fr; }
  .pm-setup-add-form { grid-template-columns: 1fr; }
}

#finbrand-select {
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  min-width: 160px;
}
.pm-brand-select-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.pm-brand-select-row .wwof-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-query-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
#modal-add-brand .wwof-modal {
  max-width: 520px;
}
.pm-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  cursor: pointer;
}
.pm-check-row input { margin-top: 3px; accent-color: #B5880B; }
.pm-newlist-h {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wwof-heading, #2C3034);
}
.pm-newlist-lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--wwof-muted);
  max-width: 52ch;
}
.pm-newlist-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pm-field-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--wwof-muted);
  line-height: 1.35;
}
.pm-newlist-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.pm-newlist-help .pm-help-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pm-help-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--wwof-text-2);
}
.pm-mock-toggle-row { margin-bottom: 8px; }
.pm-factor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pm-factor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.wwof-dark .pm-newlist-h { color: #f5f2ec; }
@media (max-width: 960px) {
  .pm-newlist-layout { grid-template-columns: 1fr; }
  .pm-newlist-aside { position: static; }
  .pm-newlist-fields { grid-template-columns: 1fr; }
  .pm-factor-grid { grid-template-columns: 1fr; }
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(13px, 0.85rem + 0.15vw, 14.5px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--wwof-warm, #F0EDE7);
  color: var(--wwof-text, #2C3034);
  max-width: 100vw;
}
/* Page-level overflow-x:hidden used to silently clip anything that ran wide
   instead of surfacing it — the actual wide content (AG Grid) already
   manages its own horizontal scroll via ag-theme-alpine, so nothing here
   needs the page itself to clip. */
/* Zoom-safe: no giant background logos / watermark bleed */
body::before,
body::after,
.pm-portal::before,
.pm-portal::after,
.pm-stage::before,
.pm-stage::after {
  content: none !important;
  background-image: none !important;
}

/* Brand type scale (CoC-aligned) */
.pm-page-title,
.pm-hero-title,
.pm-active-name,
.pm-login-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.pm-page-title {
  font-size: 1.4rem !important;
}
.pm-page-sub {
  font-size: 0.875rem !important;
  font-weight: 550;
}
.pm-admin-wrap {
  max-width: none !important;
  width: 100%;
}
.pm-admin-lead {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--wwof-text-2, #3D4248) !important;
}
.pm-brand-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(181,136,11,.06);
  border: 1px solid rgba(181,136,11,.15);
  font-size: 0.8rem;
  color: var(--wwof-text-2);
}
.pm-brand-legend strong { color: var(--wwof-heading); font-weight: 700; }
.pm-brand-header {
  display: none;
  grid-template-columns: minmax(140px, 200px) 1fr minmax(90px, 110px) 40px;
  gap: 10px;
  padding: 0 4px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wwof-muted);
}
@media (min-width: 720px) {
  .pm-brand-header { display: grid; }
  .pm-brand-row .pm-brand-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}
.pm-brand-list { display: flex; flex-direction: column; gap: 10px; }
.pm-brand-row {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr minmax(90px, 110px) 40px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  border-radius: 12px;
  background: var(--wwof-surface-2, #F7F5F1);
}
.pm-brand-row.pm-row-highlight { border-color: var(--wwof-primary, #B5652A); box-shadow: 0 0 0 3px rgba(181, 101, 42, 0.25); transition: box-shadow .3s ease, border-color .3s ease; }
.pm-brand-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pm-brand-field-query { min-width: 0; }
.pm-brand-field-mojo { min-width: 0; }
.pm-brand-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wwof-muted);
}
.pm-brand-row .wwof-input {
  font-size: 0.9rem !important;
  font-weight: 500;
  padding: 9px 12px !important;
  border-radius: 8px !important;
}
.pm-brand-query-input {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace !important;
  font-size: 0.82rem !important;
  letter-spacing: -0.01em;
}
.pm-brand-remove { align-self: center; margin-bottom: 2px; }
html.wwof-dark .pm-brand-row {
  background: #1a1d21 !important;
  border-color: #444 !important;
}
html.wwof-dark .pm-brand-legend {
  background: rgba(181,136,11,.1);
  border-color: rgba(181,136,11,.25);
  color: #ece8e0;
}
@media (max-width: 719px) {
  .pm-brand-row { grid-template-columns: 1fr 40px; }
  .pm-brand-field-query, .pm-brand-field-mojo { grid-column: 1 / -1; }
}

/* Action Required — dashboard */
.pm-stat-action .pm-stat-value { color: #B5880B; }
.pm-action-card {
  margin-bottom: 14px;
  border-color: rgba(181,136,11,.28) !important;
  box-shadow: 0 2px 12px rgba(181,136,11,.06);
}
.pm-action-card .wwof-card-head {
  background: linear-gradient(90deg, rgba(181,136,11,.08), transparent);
}
.pm-action-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wwof-surface-2, #F7F5F1);
  color: var(--wwof-muted);
}
.pm-action-count-badge.has-items {
  background: rgba(181,136,11,.14);
  color: #7a5a10;
}
.pm-action-body { padding-top: 8px !important; }
.pm-action-list { display: flex; flex-direction: column; gap: 8px; }
.pm-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  border-radius: 10px;
  background: #fff;
}
.pm-action-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; }
.pm-action-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0;
  background: #B5880B;
}
.pm-action-dot.danger { background: #B83230; }
.pm-action-dot.warning { background: #C47F17; }
.pm-action-dot.gold { background: #B5880B; }
.pm-action-dot.info { background: #6B7280; }
.pm-action-name { font-weight: 700; font-size: 0.92rem; }
.pm-action-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-top: 4px; font-size: 0.75rem;
}
.pm-action-reason {
  font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 6px;
}
.pm-action-reason-danger { background: rgba(184,50,48,.1); color: #B83230; }
.pm-action-reason-warning { background: rgba(196,127,23,.12); color: #a86b12; }
.pm-action-reason-gold { background: rgba(181,136,11,.12); color: #7a5a10; }
.pm-action-reason-info { background: rgba(107,114,128,.12); color: #4b5563; }
.pm-action-ctas { display: flex; gap: 6px; flex-shrink: 0; }
.pm-action-empty {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 8px 4px; color: var(--wwof-muted);
}
.pm-action-empty i { font-size: 1.4rem; color: var(--wwof-success); margin-top: 2px; }
.pm-action-empty strong { display: block; color: var(--wwof-heading); font-size: 0.92rem; margin-bottom: 2px; }
.pm-action-empty p { margin: 0; font-size: 0.82rem; line-height: 1.4; }
.pm-inline-action {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 6px; border-radius: 5px;
}
html.wwof-dark .pm-action-row { background: #1a1d21; border-color: #444; }
html.wwof-dark .pm-action-count-badge.has-items { color: #e8c76a; }
html.wwof-dark .pm-action-empty strong { color: #f5f2ec; }
.wwof-table {
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}
.wwof-table th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wwof-muted);
}
.wwof-label {
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
  color: var(--wwof-text-2, #3D4248);
  margin-bottom: 2px;
}
/* Base box model — .wwof-input has no rule in the vendor design system at
   all (only .wwof-form-control does), so every input/select/textarea in
   this app was rendering with bare browser defaults: no padding, no
   border-radius, shrink-to-content width. This is the fix, not a re-skin. */
.wwof-input, textarea.wwof-input, select.wwof-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 0.92rem !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wwof-text);
  background: var(--wwof-surface);
  border: 1px solid var(--wwof-border);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.wwof-input::placeholder, textarea.wwof-input::placeholder { color: var(--wwof-muted-2); }
.wwof-input:focus, textarea.wwof-input:focus, select.wwof-input:focus {
  outline: none;
  border-color: var(--wwof-gold);
  box-shadow: 0 0 0 3px var(--wwof-gold-soft);
}
.wwof-input:disabled, textarea.wwof-input:disabled, select.wwof-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--wwof-warm-3);
}
.wwof-input-sm, textarea.wwof-input-sm, select.wwof-input-sm {
  padding: 7px 11px;
  font-size: 0.84rem !important;
  border-radius: var(--radius-sm);
}
.pm-page-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.pm-page-sub {
  font-size: 0.86rem !important;
  line-height: 1.4;
}
.pm-step-card .wwof-card-head {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}
.wwof-btn {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wwof-pnav-tab,
.wwof-snav-tab {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Portal shell */
.pm-portal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: bl-fade 0.35s ease both;
  padding-bottom: 36px; /* ticker */
}
@keyframes bl-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* CoC-scale WWOF logo — ONE mark only (theme swaps src in JS) */
.wwof-pnav {
  height: 60px !important;
  min-height: 60px !important;
}
.wwof-pnav-logo {
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-shrink: 0 !important;
  margin-right: 20px !important;
}
.pm-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #E8E4DB;
  box-shadow: 0 1px 2px rgba(44,48,52,.04);
  flex-shrink: 0;
}
.pm-logo-plate.pm-logo-plate-dark {
  background: #121416;
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.wwof-pnav-logo img,
.pm-logo-full {
  height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
  min-width: 120px;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0;
}
.pm-footer-logo {
  height: 28px !important;
  width: auto !important;
  max-width: 130px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0;
}
/* Never show dual logo stacks if old markup remains */
.pm-logo-on-dark { display: none !important; }
html.wwof-dark .pm-logo-on-light { display: none !important; }
html.wwof-dark .pm-logo-on-dark { display: none !important; }
.wwof-pnav-logo-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  max-width: none !important;
  line-height: 1.15 !important;
  border-left: 2px solid #B5880B !important;
  padding-left: 12px !important;
  background: none !important;
  -webkit-text-fill-color: #2C3034 !important;
  color: #2C3034 !important;
}
.wwof-pnav-logo-title.pm-logo-title-compact {
  font-size: 0.95rem !important;
}
html.wwof-dark .wwof-pnav-logo-title,
body.wwof-dark .wwof-pnav-logo-title {
  border-left-color: #B5880B !important;
  color: #f5f2ec !important;
  -webkit-text-fill-color: #f5f2ec !important;
  background: none !important;
}
html.wwof-dark .pm-logo-plate,
body.wwof-dark .pm-logo-plate {
  background: #121416;
  border-color: rgba(255,255,255,.12);
}
.pm-mega-grid-admin {
  grid-template-columns: 1fr 1fr !important;
  min-width: 440px;
  gap: 8px 20px !important;
}
#pnav-admin-wrap {
  position: relative !important;
}
#mega-admin.pm-mega-admin {
  min-width: min(500px, 92vw) !important;
}
#mega-admin .wwof-mega-link {
  align-items: flex-start !important;
  min-height: 52px;
}
#mega-admin .wwof-mega-link-label {
  font-size: 0.84rem !important;
  font-weight: 650 !important;
}
#mega-admin .wwof-mega-link-desc {
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
}
#mega-admin .wwof-mega-col-title {
  margin-bottom: 10px !important;
  font-size: 0.65rem !important;
}
/* Admin layout */
.pm-admin-wrap {
  max-width: none !important;
  width: 100%;
}
.pm-admin-card { border-radius: 14px !important; margin-bottom: 14px; width: 100%; }
.pm-admin-lead {
  font-size: 0.85rem;
  color: var(--wwof-muted);
  margin: 0 0 14px;
  line-height: 1.45;
}
.pm-admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pm-admin-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pm-admin-table { font-size: 0.8rem; }
.pm-admin-savebar { margin-top: 8px; }
.pm-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pm-role-tile {
  border: 1px solid var(--wwof-border, #E5E1D8);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--wwof-surface-2, #F7F5F1);
}
.pm-role-tile-h {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-role-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--wwof-text-2);
  line-height: 1.55;
}
.pm-admin-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pm-admin-row .wwof-input { font-size: 0.85rem; }
/* login logo handled by .pm-login-logo-coc */

/* Workspace mega is wider (3 cols) */
#mega-workspace .pm-mega-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.85fr;
  gap: 18px;
}
.pm-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pm-mega-col { min-width: 0; }
.pm-mega-aside {
  background: linear-gradient(160deg, rgba(181,136,11,.08), rgba(44,48,52,.03));
  border: 1px solid rgba(181,136,11,.18);
  border-radius: 12px;
  padding: 14px 16px;
}
.pm-mega-aside-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wwof-gold);
  margin-bottom: 8px;
}
.pm-mega-aside-body {
  font-size: 0.78rem;
  color: var(--wwof-muted);
  line-height: 1.45;
  margin: 0 0 12px;
}

/* Profile dropdown */
.pm-user-menu { position: relative; }
.pm-user-trigger {
  border: none;
  font: inherit;
  cursor: pointer;
}
/* Vendor stylesheet's fixed width was sized for a short name and clipped a
   full email mid-word when the session has no display name yet — give it
   room and a clean ellipsis instead of a hard cutoff. */
#topbar-user-name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--wwof-surface, #fff);
  border: 1px solid var(--wwof-border, #E4E0D7);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  z-index: 300;
  padding: 10px 0 8px;
  animation: bl-fade 0.15s ease both;
}
.pm-user-dropdown-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: rgba(181,136,11,.05);
  border-radius: 12px 12px 0 0;
  margin: -10px -1px 0;
}
.pm-user-dropdown-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--wwof-heading);
  margin-bottom: 3px;
}
.pm-user-dropdown-meta {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #8a6608;
  background: rgba(181,136,11,.14);
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 4px;
}
.pm-user-dropdown-email {
  font-size: 0.72rem;
  color: var(--wwof-muted-2, #8a8e93);
  word-break: break-all;
}
.pm-user-dropdown-sep {
  height: 1px;
  background: var(--wwof-border);
  margin: 4px 0;
}
.pm-user-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--wwof-text-2, #3D4248);
  cursor: pointer;
  text-align: left;
}
.pm-user-item:hover {
  background: rgba(181,136,11,.07);
  color: var(--wwof-heading);
}
.pm-user-item:focus-visible {
  outline: 2px solid #B5880B;
  outline-offset: -2px;
  background: rgba(181,136,11,.07);
  color: var(--wwof-heading);
}
.pm-user-item i {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(181,136,11,.09);
  color: #8a6608;
  font-size: 0.85rem;
}
.pm-user-item-danger i { background: rgba(184,50,48,.09); color: var(--wwof-danger); }
html.wwof-dark .pm-user-item i,
body.wwof-dark .pm-user-item i { background: rgba(181,136,11,.16); color: #e8c76a; }
html.wwof-dark .pm-user-item-danger i,
body.wwof-dark .pm-user-item-danger i { background: rgba(184,50,48,.16); color: var(--wwof-danger); }
.pm-user-item-danger { color: var(--wwof-danger); }
.pm-user-item-danger:hover { background: rgba(184,50,48,.08); color: var(--wwof-danger); }
.pm-user-item-danger:focus-visible { background: rgba(184,50,48,.08); color: var(--wwof-danger); }
.pm-user-trigger:focus-visible {
  outline: 2px solid #B5880B;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Slim footer (single row, above ticker) */
.pm-site-footer {
  background: rgba(255,255,255,.92);
  border-top: 1px solid var(--wwof-border, #E4E0D7);
  padding: 10px 28px;
  /* Follows content directly — no margin-top:auto. That pattern pins the
     footer to the bottom of .pm-portal's min-height:100vh box, which looks
     fine on tall pages but leaves a large empty gap above the footer on
     short ones (e.g. Dashboard with few price lists). */
  margin-top: 24px;
  backdrop-filter: blur(8px);
}
.pm-site-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pm-footer-brand {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.pm-footer-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.pm-footer-brand-text strong {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wwof-heading);
}
.pm-footer-brand-text span {
  font-size: 0.65rem;
  color: var(--wwof-muted);
  font-weight: 500;
}
.pm-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
}
.pm-footer-links a {
  color: var(--wwof-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.pm-footer-links a:hover { color: var(--wwof-gold); }
.pm-footer-sep { color: var(--wwof-border); user-select: none; }
.pm-footer-muted { color: var(--wwof-muted-2, #8a8e93); font-weight: 400; }

/* Ticker — slimmer */
.wwof-ticker {
  height: 30px !important;
  font-size: 11px !important;
  padding: 0 20px !important;
}

/* How-it-works slides */
.pm-how-steps { min-height: 160px; }
.pm-how-step {
  display: none;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}
.pm-how-step.active { display: grid; animation: bl-fade 0.25s ease both; }
.pm-how-num {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--wwof-gold), #a56133);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-how-step h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--wwof-heading);
}
.pm-how-step p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--wwof-muted);
  line-height: 1.5;
}
.pm-how-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--wwof-border);
}
.pm-how-dots { display: flex; gap: 6px; }
.pm-how-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wwof-border);
  border: none;
  padding: 0;
  cursor: pointer;
}
.pm-how-dot.active { background: var(--wwof-gold); transform: scale(1.15); }

.pm-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pm-help-grid .wwof-card { border-radius: 12px; }
.pm-help-grid strong { display: block; margin-bottom: 6px; }
.pm-help-grid p { margin: 0; }

.pm-modal-wide { max-width: 720px; width: 94vw; }

/* ═══ Dark mode — matches login charcoal + gold (full surface map) ═══ */
html.wwof-dark,
html.wwof-dark body {
  background: #14171a !important;
  color: #ece8e0;
  color-scheme: dark;
}
html.wwof-dark .wwof-pnav,
body.wwof-dark .wwof-pnav {
  background: #1a1d21 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: none !important;
}
html.wwof-dark .wwof-pnav-tab,
body.wwof-dark .wwof-pnav-tab { color: rgba(255,255,255,.78); }
html.wwof-dark .wwof-pnav-tab:hover,
body.wwof-dark .wwof-pnav-tab:hover { color: #fff; background: rgba(255,255,255,.04); }
html.wwof-dark .wwof-pnav-tab.active,
body.wwof-dark .wwof-pnav-tab.active { color: #fff; }
html.wwof-dark .wwof-pnav-tab i,
body.wwof-dark .wwof-pnav-tab i { color: rgba(255,255,255,.45); }
html.wwof-dark .wwof-pnav-tab.active i,
body.wwof-dark .wwof-pnav-tab.active i { color: #B5880B; }
html.wwof-dark .wwof-pnav-tab.active::after,
body.wwof-dark .wwof-pnav-tab.active::after { background: #B5880B; }
html.wwof-dark .wwof-snav,
body.wwof-dark .wwof-snav {
  background: #1f2327 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html.wwof-dark .wwof-snav-tab,
body.wwof-dark .wwof-snav-tab { color: #aba79e; }
html.wwof-dark .wwof-snav-tab:hover,
body.wwof-dark .wwof-snav-tab:hover { color: #e8c76a; }
html.wwof-dark .wwof-snav-tab.active,
body.wwof-dark .wwof-snav-tab.active { color: #e8c76a; border-bottom-color: #B5880B; }
html.wwof-dark .pm-stage,
body.wwof-dark .pm-stage {
  background: #14171a !important;
}
html.wwof-dark .pm-stage-card,
body.wwof-dark .pm-stage-card {
  background: #1e2226 !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
html.wwof-dark .wwof-card,
body.wwof-dark .wwof-card,
html.wwof-dark .pm-step-card,
body.wwof-dark .pm-step-card,
html.wwof-dark .pm-stat-card,
body.wwof-dark .pm-stat-card,
html.wwof-dark .pm-table-card,
body.wwof-dark .pm-table-card {
  background: #2C3034 !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #ece8e0;
}
html.wwof-dark .pm-step-card .wwof-card-head,
body.wwof-dark .pm-step-card .wwof-card-head,
html.wwof-dark .wwof-card-head,
body.wwof-dark .wwof-card-head {
  background: #262a2e !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
  color: #f5f2ec;
}
html.wwof-dark .wwof-input,
body.wwof-dark .wwof-input,
html.wwof-dark textarea.wwof-input,
body.wwof-dark textarea.wwof-input,
html.wwof-dark select.wwof-input,
body.wwof-dark select.wwof-input {
  background: #1a1d21 !important;
  border-color: #444 !important;
  color: #f5f2ec !important;
}
html.wwof-dark .wwof-input:focus,
body.wwof-dark .wwof-input:focus {
  border-color: #B5880B !important;
  box-shadow: 0 0 0 3px rgba(181,136,11,.2) !important;
}
html.wwof-dark .pm-query-field,
body.wwof-dark .pm-query-field {
  background: rgba(196,127,23,.12) !important;
  border-color: #C47F17 !important;
  color: #f5f2ec !important;
}
html.wwof-dark .pm-query-field.pm-query-active,
body.wwof-dark .pm-query-field.pm-query-active {
  background: #1a1d21 !important;
  border-color: #B5880B !important;
}
html.wwof-dark .wwof-label,
body.wwof-dark .wwof-label,
html.wwof-dark .pm-page-sub,
body.wwof-dark .pm-page-sub,
html.wwof-dark .pm-text-muted,
body.wwof-dark .pm-text-muted,
html.wwof-dark .pm-hero-sub,
body.wwof-dark .pm-hero-sub,
html.wwof-dark .pm-stat-label,
body.wwof-dark .pm-stat-label {
  color: #aba79e !important;
}
html.wwof-dark .pm-page-title,
body.wwof-dark .pm-page-title,
html.wwof-dark .pm-stat-value,
body.wwof-dark .pm-stat-value,
html.wwof-dark .pm-active-name,
body.wwof-dark .pm-active-name {
  color: #f5f2ec !important;
}
html.wwof-dark .wwof-table th,
body.wwof-dark .wwof-table th {
  color: #8f8b82 !important;
  border-color: #3f444a !important;
  background: rgba(0,0,0,.15) !important;
}
html.wwof-dark .wwof-table td,
body.wwof-dark .wwof-table td { border-color: #3a3a4e !important; color: #ece8e0 !important; }
html.wwof-dark .wwof-table tbody tr:hover,
body.wwof-dark .wwof-table tbody tr:hover { background: rgba(181,136,11,.06) !important; }
html.wwof-dark .wwof-btn-outline,
body.wwof-dark .wwof-btn-outline {
  background: transparent !important;
  border-color: #555 !important;
  color: #ece8e0 !important;
}
html.wwof-dark .wwof-btn-outline:hover,
body.wwof-dark .wwof-btn-outline:hover {
  border-color: #B5880B !important;
  color: #e8c76a !important;
}
html.wwof-dark .pm-user-dropdown,
body.wwof-dark .pm-user-dropdown {
  background: #2C3034 !important;
  border-color: #444 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
}
html.wwof-dark .pm-user-item,
body.wwof-dark .pm-user-item { color: #ece8e0; }
html.wwof-dark .pm-user-item:hover,
body.wwof-dark .pm-user-item:hover { background: rgba(181,136,11,.12); }
html.wwof-dark .pm-user-item:focus-visible,
body.wwof-dark .pm-user-item:focus-visible { background: rgba(181,136,11,.12); color: #f5f2ec; }
html.wwof-dark .pm-user-dropdown-head,
body.wwof-dark .pm-user-dropdown-head { background: rgba(181,136,11,.1); }
html.wwof-dark .pm-user-dropdown-name,
body.wwof-dark .pm-user-dropdown-name { color: #f5f2ec; }
html.wwof-dark .pm-user-dropdown-meta,
body.wwof-dark .pm-user-dropdown-meta { color: #e8c76a; background: rgba(181,136,11,.2); }
html.wwof-dark .pm-user-dropdown-email,
body.wwof-dark .pm-user-dropdown-email { color: #aba79e; }
html.wwof-dark .pm-user-dropdown-sep,
body.wwof-dark .pm-user-dropdown-sep { background: rgba(255,255,255,.08); }
html.wwof-dark .pm-site-footer,
body.wwof-dark .pm-site-footer {
  background: #1a1d21 !important;
  border-top-color: rgba(255,255,255,.08) !important;
}
html.wwof-dark .pm-footer-brand-text strong,
body.wwof-dark .pm-footer-brand-text strong { color: #f5f2ec; }
html.wwof-dark .pm-footer-brand-text span,
body.wwof-dark .pm-footer-brand-text span,
html.wwof-dark .pm-footer-links a,
body.wwof-dark .pm-footer-links a,
html.wwof-dark .pm-footer-muted,
body.wwof-dark .pm-footer-muted { color: #aba79e; }
html.wwof-dark .wwof-ticker,
body.wwof-dark .wwof-ticker {
  background: #101214 !important;
  border-top-color: #2a2e32 !important;
  color: #aba79e !important;
}
html.wwof-dark .wwof-mega,
body.wwof-dark .wwof-mega {
  background: #2C3034 !important;
  border-color: #444 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.55) !important;
}
html.wwof-dark .wwof-mega-col-title,
body.wwof-dark .wwof-mega-col-title { color: #8f8b82; }
html.wwof-dark .wwof-mega-link:hover,
body.wwof-dark .wwof-mega-link:hover { background: rgba(181,136,11,.1) !important; }
html.wwof-dark .wwof-mega-link-label,
body.wwof-dark .wwof-mega-link-label { color: #f5f2ec; }
html.wwof-dark .wwof-mega-link-desc,
body.wwof-dark .wwof-mega-link-desc { color: #8f8b82; }
html.wwof-dark .pm-mega-aside,
body.wwof-dark .pm-mega-aside {
  background: rgba(0,0,0,.2) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.wwof-dark .wwof-modal,
body.wwof-dark .wwof-modal {
  background: #2C3034 !important;
  color: #ece8e0;
  border-color: #444;
}
html.wwof-dark .wwof-modal-header,
body.wwof-dark .wwof-modal-header {
  border-bottom-color: rgba(255,255,255,.08) !important;
  color: #f5f2ec;
}
html.wwof-dark .wwof-modal-footer,
body.wwof-dark .wwof-modal-footer {
  border-top-color: rgba(255,255,255,.08) !important;
  background: #262a2e !important;
}
html.wwof-dark .wwof-pnav-secure,
body.wwof-dark .wwof-pnav-secure {
  background: rgba(46,125,50,.15) !important;
  border-color: rgba(46,125,50,.3) !important;
  color: #7dcea0 !important;
}
html.wwof-dark .wwof-pnav-user,
body.wwof-dark .wwof-pnav-user {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #f5f2ec !important;
}
html.wwof-dark .pm-page-head,
body.wwof-dark .pm-page-head {
  border-bottom-color: rgba(255,255,255,.08) !important;
}
html.wwof-dark .pm-empty,
body.wwof-dark .pm-empty { color: #8f8b82; }
html.wwof-dark .pm-link,
body.wwof-dark .pm-link { color: #e8c76a; }
html.wwof-dark .wwof-breadcrumb a,
body.wwof-dark .wwof-breadcrumb a { color: #aba79e; }
html.wwof-dark .wwof-breadcrumb-active,
body.wwof-dark .wwof-breadcrumb-active { color: #f5f2ec; }
html.wwof-dark .pm-age-tile,
body.wwof-dark .pm-age-tile { background: #2C3034 !important; }
html.wwof-dark .pm-filter-active-count,
body.wwof-dark .pm-filter-active-count { color: #e8c76a; }
html.wwof-dark .pm-active-bar,
body.wwof-dark .pm-active-bar {
  background: #262a2e !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.wwof-dark .pm-toolbar,
body.wwof-dark .pm-toolbar {
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.wwof-dark .ag-theme-alpine,
body.wwof-dark .ag-theme-alpine {
  --ag-background-color: #2C3034;
  --ag-header-background-color: #262a2e;
  --ag-odd-row-background-color: #272b30;
  --ag-border-color: #3f444a;
  --ag-header-foreground-color: #aba79e;
  --ag-foreground-color: #ece8e0;
  --ag-row-hover-color: rgba(181,136,11,.08);
}
/* Login field always CoC charcoal grid (ignore app theme) */
html.wwof-dark .pm-login-screen,
body.wwof-dark .pm-login-screen {
  background: #3a3e42 !important;
}
html.wwof-dark .pm-login-card-coc,
body.wwof-dark .pm-login-card-coc {
  background: #F7F5F1 !important;
  color: #2C3034 !important;
}

/* Mega list of open price lists */
.pm-mega-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  min-width: 220px;
}
.pm-mega-empty {
  font-size: 0.78rem;
  color: var(--wwof-muted);
  padding: 8px 10px;
}
.pm-mega-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pm-mega-item:hover {
  background: var(--wwof-gold-soft, rgba(181,136,11,.08));
  border-color: rgba(181,136,11,.2);
  text-decoration: none;
}
.pm-mega-item.active {
  background: rgba(181,136,11,.12);
  border-color: rgba(181,136,11,.35);
}
.pm-mega-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wwof-heading, #2C3034);
}
.pm-mega-item-sub {
  font-size: 0.68rem;
  color: var(--wwof-muted);
  margin-top: 1px;
}
.pm-mega-hint {
  font-size: 0.72rem;
  color: var(--wwof-muted);
  margin: 10px 0 0;
  line-height: 1.4;
  padding: 8px 10px;
  background: rgba(44,107,237,.06);
  border-radius: 8px;
}

.pm-snav-sep {
  width: 1px;
  height: 18px;
  background: var(--wwof-border);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Stage — floating portal card like CoC */
.pm-stage {
  flex: 1;
  padding: 20px 28px 24px;
  background: var(--wwof-warm, #F0EDE7);
}
.pm-stage-card {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  background: var(--wwof-surface, #fff);
  border: 1px solid var(--wwof-border, #E4E0D7);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(44, 48, 52, 0.06);
  padding: 20px 24px 28px;
  min-height: calc(100vh - 64px - 38px - 36px - 56px);
  animation: bl-card-in 0.4s cubic-bezier(.2,.8,.2,1) both;
}
/* Content areas fill the stage (no orphan right-side void) */
.pm-content,
.pm-view,
#view-admin,
#view-newlist,
#view-dashboard {
  width: 100%;
  max-width: none;
}
@keyframes bl-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.pm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--wwof-border, #E4E0D7);
}
.pm-page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--wwof-heading, #2C3034);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm-page-sub {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--wwof-muted);
  font-weight: 550;
}
.pm-breadcrumb {
  font-size: 0.72rem !important;
  margin-bottom: 8px !important;
}
.pm-page-head {
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
}
/* Avoid double page titles inside views */
.pm-view .pm-hero-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wwof-text-2, #3D4248);
}
.pm-view .pm-hero { margin-bottom: 14px; }
.pm-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pm-content { min-height: 200px; }
.pm-view { animation: bl-view 0.3s ease both; }
@keyframes bl-view {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ═══ Login — CoC-style (dark grid + cream card + MS button) ═══ */
.pm-login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: auto;
  padding: 32px 16px 40px;
  background: #3a3e42;
  color-scheme: light;
}
/* Subtle cross / plus pattern like CoC portal */
.pm-login-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.pm-login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: bl-card-in 0.35s ease both;
}
.pm-login-card,
.pm-login-card-coc {
  width: 100%;
  max-width: 400px;
  background: #F7F5F1 !important;
  color: #2C3034 !important;
  border-radius: 16px;
  border: none;
  box-shadow: 0 24px 56px rgba(0,0,0,.4);
  padding: 0;
  text-align: center;
  overflow: hidden;
}
.pm-login-card-top {
  padding: 36px 28px 22px;
  background: #F7F5F1;
}
.pm-login-logo-coc {
  display: block;
  height: 48px !important;
  width: auto !important;
  max-width: 220px !important;
  margin: 0 auto 16px;
  object-fit: contain;
}
.pm-login-app-name {
  margin: 0 0 6px !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #2C3034 !important;
  -webkit-text-fill-color: #2C3034 !important;
  background: none !important;
}
.pm-login-app-tag {
  margin: 0 0 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
  line-height: 1.4;
}
.pm-login-sso-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c6370;
  background: #fff;
  border: 1px solid #E4E0D7;
  border-radius: 999px;
  padding: 4px 12px;
}
.pm-login-card-bottom {
  background: #fff;
  padding: 22px 24px 24px;
  border-top: 1px solid #EBE7DF;
  text-align: center;
}
.pm-login-ms-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: #2C3034 !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.pm-login-ms-btn:hover {
  background: #1a1d21 !important;
  transform: translateY(-1px);
}
.pm-login-ms-btn.is-open {
  background: #3a3e42 !important;
}
.pm-login-ms-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 3px;
  flex-shrink: 0;
}
.pm-login-ms-hint {
  margin: 12px 0 0;
  font-size: 0.72rem;
  color: #8a8580;
  line-height: 1.35;
}
.pm-login-picker-wrap {
  margin-top: 16px;
  text-align: left;
  animation: bl-card-in 0.2s ease both;
}
.pm-login-picker-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a8580;
  margin-bottom: 8px;
}
.pm-login-picker { text-align: left; }
.pm-login-alert {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  margin-bottom: 14px;
  background: #fff8e8;
  border: 1px solid #edd9a8;
  color: #7a5a10;
}
.pm-login-alert-error {
  background: #fdeeee;
  border-color: #f0c4c3;
  color: #8b2e2c;
}
.pm-login-card .pm-account-tile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
  background: #F7F5F1 !important;
  border: 1px solid #E5E1D8 !important;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #2C3034 !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pm-login-card .pm-account-tile:hover {
  border-color: #B5880B !important;
  background: #FBF6EA !important;
  box-shadow: 0 2px 10px rgba(181,136,11,.1);
}
.pm-login-card .pm-account-tile.is-busy,
.pm-login-card .pm-account-tile:disabled {
  opacity: 0.65;
  pointer-events: none;
}
.pm-login-card .pm-account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B5880B, #a56133);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.72rem;
  flex: none;
}
.pm-login-card .pm-account-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pm-login-card .pm-account-name {
  font-weight: 700;
  font-size: 0.86rem;
  color: #1a1d21 !important;
}
.pm-login-card .pm-account-email {
  font-size: 0.7rem;
  color: #6b6f74 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-login-card .pm-account-role {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  background: #2C3034;
  color: #fff !important;
  flex: none;
}
.pm-login-manual {
  margin-top: 14px;
  text-align: left;
  border: 1px solid #E5E1D8 !important;
  border-radius: 10px;
  background: #FBF9F5 !important;
  color: #2C3034 !important;
}
.pm-login-manual > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a4e53 !important;
  list-style: none;
}
.pm-login-manual > summary::-webkit-details-marker { display: none; }
.pm-login-manual[open] > summary { border-bottom: 1px solid #E5E1D8; }
.pm-login-manual-body { padding: 12px 14px 14px; background: #fff; }
.pm-login-manual .wwof-label { color: #4a4e53 !important; }
.pm-login-manual .wwof-input {
  background: #fff !important;
  color: #2C3034 !important;
  border-color: #E0DBD2 !important;
}
.pm-login-enter {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
  font-weight: 700;
}
.pm-login-footer-credit {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(255,255,255,.55);
}
.pm-login-credit-img { height: 16px; width: auto; opacity: 0.85; filter: brightness(1.1); }

/* Legacy hooks kept for dark-mode overrides elsewhere */
.pm-login-brand { display: none; }
.pm-login-title { display: none; }
.pm-login-product { color: #2C3034 !important; }

/* Dashboard */
.pm-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pm-hero-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--wwof-heading);
}
.pm-hero-sub {
  margin: 0;
  color: var(--wwof-muted);
  font-size: 0.85rem;
}
.pm-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--wwof-success);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pm-live-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wwof-success);
  animation: wwof-pulse 2s ease-in-out infinite;
}

.pm-dash-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.pm-stat-card {
  text-align: center;
  padding: 14px 8px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: bl-view 0.4s ease both;
}
.pm-stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.pm-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.25;
}
.pm-stat-card:nth-child(1) { animation-delay: 30ms; }
.pm-stat-card:nth-child(2) { animation-delay: 60ms; }
.pm-stat-card:nth-child(3) { animation-delay: 90ms; }
.pm-stat-card:nth-child(4) { animation-delay: 120ms; }
.pm-stat-card:nth-child(5) { animation-delay: 150ms; }
.pm-stat-card:nth-child(6) { animation-delay: 180ms; }
.pm-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44,48,52,.08);
}
.pm-stat-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--wwof-gold);
  opacity: 0.4;
}
.pm-age-green::after { background: var(--wwof-success); }
.pm-age-gold::after { background: var(--wwof-gold); }
.pm-age-amber::after { background: var(--wwof-warning); }
.pm-age-red::after { background: var(--wwof-danger); }
.pm-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--wwof-heading);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.pm-stat-label {
  font-size: 0.7rem;
  color: var(--wwof-muted);
  line-height: 1.35;
  margin-top: 6px;
}
.pm-age-green .pm-stat-value { color: var(--wwof-success); }
.pm-age-gold .pm-stat-value { color: var(--wwof-gold); }
.pm-age-amber .pm-stat-value { color: var(--wwof-warning); }
.pm-age-red .pm-stat-value { color: var(--wwof-danger); }

.pm-table-card { border-radius: 12px; overflow: hidden; }
.pm-link { color: var(--wwof-gold); text-decoration: none; font-weight: 700; }
.pm-link:hover { text-decoration: underline; }
.pm-age-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.pm-age-dot.green { background: var(--wwof-success); }
.pm-age-dot.gold { background: var(--wwof-gold); }
.pm-age-dot.amber { background: var(--wwof-warning); }
.pm-age-dot.red { background: var(--wwof-danger); }

/* New list / forms */
.pm-narrow { max-width: 680px; }
.pm-step-card {
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  animation: bl-view 0.35s ease both;
}
.pm-step-card:nth-child(1) { animation-delay: 40ms; }
.pm-step-card:nth-child(2) { animation-delay: 80ms; }
.pm-step-card:nth-child(3) { animation-delay: 120ms; }
.pm-step-card:nth-child(4) { animation-delay: 160ms; }
.pm-step-num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(181,136,11,.15);
  color: var(--wwof-gold);
  margin-right: 8px;
}
.pm-query-field {
  background: rgba(196,127,23,.1) !important;
  border-color: var(--wwof-warning) !important;
}
.pm-query-field.pm-query-active {
  background: #fff !important;
  border-color: var(--wwof-gold) !important;
  box-shadow: 0 0 0 3px rgba(181,136,11,.15);
}
.pm-file-btn { display: inline-flex; align-items: center; cursor: pointer; }
.pm-sync-status { margin-top: 12px; }
.pm-sync-log { display: flex; flex-direction: column; gap: 8px; font-size: 0.85rem; }
.pm-sync-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(44,48,52,.03);
}
.pm-spin { animation: pm-spin 0.85s linear infinite; display: inline-block; }
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* Review */
.pm-active-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pm-active-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--wwof-heading);
  letter-spacing: -0.02em;
}
.pm-icon-btn {
  background: none;
  border: none;
  color: var(--wwof-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.pm-icon-btn:hover {
  color: var(--wwof-gold);
  background: rgba(181,136,11,.08);
}
.pm-inline-name-input {
  display: inline-block;
  width: min(360px, 100%);
  font-size: 1.15rem;
  font-weight: 700;
}
.pm-save-chip {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-save-chip.dirty {
  background: rgba(196,127,23,.12);
  color: var(--wwof-warning);
  border: 1px solid rgba(196,127,23,.25);
}
.pm-save-chip.saved {
  background: rgba(46,125,50,.1);
  color: var(--wwof-success);
  border: 1px solid rgba(46,125,50,.2);
}
.pm-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pm-saveas-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(196,127,23,.1);
  border: 1px solid rgba(196,127,23,.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.pm-saveas-strip input { max-width: 320px; }
.pm-review-pane { min-height: 200px; }
.pm-grid-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 64px 24px;
  color: var(--wwof-muted);
  font-size: 1.05rem;
  font-weight: 600;
}

.pm-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pm-summary-grid .wwof-card { border-radius: 12px; }
.pm-summary-grid .wwof-card:nth-child(5) { grid-column: 1 / -1; }

.pm-factor-hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(44,107,237,.06);
  border: 1px solid rgba(44,107,237,.12);
  font-size: 0.78rem;
  color: var(--wwof-text-2);
  line-height: 1.4;
  margin-top: 10px;
}
.pm-factor-hint i { color: var(--wwof-info); flex: none; margin-top: 2px; }

.pm-approver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(44,48,52,.08);
  gap: 10px;
}
.pm-approver-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-add-approver { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pm-plain-list { padding-left: 18px; }
.pm-appr-progress-label { font-weight: 700; margin-bottom: 8px; }

/* ── Background job dock ── */
.pm-job-dock {
  position: fixed; right: 18px; bottom: 48px; z-index: 10040;
  display: flex; align-items: stretch; gap: 0;
  background: #2C3034; color: #f5f2ec;
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  overflow: hidden; max-width: min(420px, calc(100vw - 24px));
  animation: pm-load-in 0.18s ease-out;
}
.pm-job-dock[hidden] { display: none !important; }
.pm-job-dock.is-running { border: 1px solid rgba(181,136,11,.45); }
.pm-job-dock.is-done { border: 1px solid rgba(46,125,50,.45); }
.pm-job-dock.is-error { border: 1px solid rgba(184,50,48,.5); }
.pm-job-dock-main {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: none; background: transparent;
  color: inherit; cursor: pointer; text-align: left; font: inherit; flex: 1; min-width: 0;
}
.pm-job-dock-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2); border-top-color: #B5880B;
  animation: pm-spin 0.75s linear infinite; flex-shrink: 0;
}
.pm-job-dock-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pm-job-dock-text strong { font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-job-dock-text span { font-size: 0.68rem; color: rgba(245,242,236,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.pm-job-dock-pct { font-weight: 800; font-size: 0.9rem; color: #e8c76a; flex-shrink: 0; }
.pm-job-dock-x {
  border: none; background: rgba(255,255,255,.06); color: #f5f2ec;
  padding: 0 12px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.pm-job-dock-x:hover { background: rgba(255,255,255,.12); }
html:not(.wwof-dark) .pm-job-dock {
  background: #fff; color: #2C3034;
  border: 1px solid #E8E4DB; box-shadow: 0 12px 40px rgba(44,48,52,.15);
}
html:not(.wwof-dark) .pm-job-dock-text span { color: #6B7280; }
html:not(.wwof-dark) .pm-job-dock-x { background: #F7F5F1; color: #2C3034; }

/* Admin audit viewer */
.pm-admin-wrap-wide {
  max-width: none !important;
  width: 100%;
}
.pm-admin-audit-card,
.pm-admin-audit-card .wwof-card-body {
  width: 100%;
}
.pm-admin-audit-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  align-items: flex-end; margin-bottom: 14px;
}
.pm-admin-audit-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; justify-content: flex-end; }
.pm-admin-audit-search .wwof-input { min-width: min(320px, 100%); flex: 1; max-width: 420px; }
.pm-admin-jobs {
  margin-bottom: 14px; padding: 10px 12px; border-radius: 12px;
  background: rgba(181,136,11,.06); border: 1px solid rgba(181,136,11,.18);
}
.pm-admin-jobs-h {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wwof-muted); margin-bottom: 8px;
}
.pm-admin-jobs-list { display: flex; flex-direction: column; gap: 6px; }
.pm-admin-job-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--wwof-border); background: #fff; cursor: pointer; font: inherit;
}
.pm-admin-job-chip:hover { border-color: #B5880B; }
.pm-admin-job-chip strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.pm-admin-audit-list { display: flex; flex-direction: column; gap: 0; max-height: 68vh; overflow-y: auto; width: 100%; }
.pm-admin-audit-row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 16px 20px;
  padding: 14px 8px; border-top: 1px solid var(--wwof-border, #E5E1D8);
  align-items: start;
  width: 100%;
}
.pm-admin-audit-row:first-child { border-top: none; }
.pm-admin-audit-date { font-size: 0.75rem; font-weight: 600; color: var(--wwof-heading); }
.pm-admin-audit-src { font-size: 0.65rem; color: var(--wwof-muted); text-transform: uppercase; letter-spacing: .04em; }
.pm-admin-audit-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.pm-admin-audit-detail { font-size: 0.82rem; color: var(--wwof-text-2); line-height: 1.4; }
.pm-admin-audit-meta {
  display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px;
  font-size: 0.72rem; color: var(--wwof-muted); align-items: center;
}
html.wwof-dark .pm-admin-job-chip { background: #1a1d21; border-color: #444; color: #ece8e0; }
html.wwof-dark .pm-admin-jobs { background: rgba(181,136,11,.1); }
@media (max-width: 720px) {
  .pm-admin-audit-row { grid-template-columns: 1fr; }
  .pm-job-dock { right: 10px; left: 10px; max-width: none; bottom: 40px; }
}

/* ── Fabric env pill (New Price List) ── */
.pm-fabric-env-pill {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.pm-fabric-env-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--wwof-border);
  background: var(--wwof-surface-2, #F7F5F1);
}
.pm-fabric-env-chip.mock { color: #5c564c; }
.pm-fabric-env-chip.live {
  color: #1b5e20;
  background: rgba(46,125,50,.1);
  border-color: rgba(46,125,50,.28);
}
.pm-fabric-env-chip.staged {
  color: #0d4a7a;
  background: rgba(13,110,181,.1);
  border-color: rgba(13,110,181,.28);
}

/* ── Fabric pull progress modal ── */
.pm-fabric-modal { max-width: 640px !important; }
.pm-fabric-status-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.pm-fabric-phase {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #B5880B; margin-bottom: 4px;
}
.pm-fabric-phase.is-ok { color: #2E7D32; }
.pm-fabric-phase.is-error { color: #B83230; }
.pm-fabric-message { font-size: 0.92rem; font-weight: 600; color: var(--wwof-heading); line-height: 1.35; }
.pm-fabric-pct {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
  color: #B5880B; min-width: 3.2rem; text-align: right;
}
.pm-fabric-progress-track {
  height: 8px; border-radius: 999px; background: rgba(181,136,11,.12);
  overflow: hidden; margin-bottom: 14px;
}
.pm-fabric-progress-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #B5880B, #d4a84b);
  transition: width .28s ease;
}
.pm-fabric-progress-bar.is-done { background: linear-gradient(90deg, #2E7D32, #4caf50); }
.pm-fabric-progress-bar.is-error { background: linear-gradient(90deg, #B83230, #e57373); }

.pm-fabric-counts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.pm-fabric-count {
  text-align: center; padding: 8px 6px; border-radius: 10px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  background: var(--wwof-surface-2, #F7F5F1);
}
.pm-fabric-count b { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
.pm-fabric-count span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wwof-muted); font-weight: 600; }
.pm-fabric-count.is-warn b { color: #C47F17; }

.pm-fabric-tables-wrap {
  border: 1px solid var(--wwof-border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
  background: #fff;
}
.pm-fabric-tables-h {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wwof-muted); margin-bottom: 8px;
}
.pm-fabric-table-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start;
  padding: 8px 0; border-top: 1px solid rgba(0,0,0,.05);
}
.pm-fabric-table-row:first-of-type { border-top: none; }
.pm-fabric-table-name { font-weight: 700; font-size: 0.84rem; }
.pm-fabric-role {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  color: #B5880B; background: rgba(181,136,11,.1); padding: 1px 6px; border-radius: 4px; margin-left: 6px;
}
.pm-fabric-table-code { font-size: 0.7rem; font-family: ui-monospace, Consolas, monospace; color: var(--wwof-muted); }
.pm-fabric-table-detail { font-size: 0.72rem; color: var(--wwof-text-2); margin-top: 2px; }
.pm-fabric-table-n { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.95rem; min-width: 3rem; text-align: right; }
.pm-fabric-table-empty { font-size: 0.82rem; color: var(--wwof-muted); padding: 8px 0; }

.pm-fabric-alerts { display: flex; flex-direction: column; gap: 6px; max-height: 140px; overflow-y: auto; }
.pm-fabric-alert {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.78rem; line-height: 1.35; padding: 8px 10px; border-radius: 8px;
}
.pm-fabric-alert.level-info { background: rgba(44,107,237,.08); color: #1e4bb8; }
.pm-fabric-alert.level-success { background: rgba(46,125,50,.1); color: #1b5e20; }
.pm-fabric-alert.level-warning { background: rgba(196,127,23,.12); color: #8a5a0a; }
.pm-fabric-alert.level-danger { background: rgba(184,50,48,.1); color: #8b1e1c; }
.pm-text-warn { color: #C47F17; }

.pm-fabric-history { margin-top: 14px; }
.pm-fabric-hist-h {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--wwof-muted); margin-bottom: 8px;
}
.pm-fabric-hist-list { display: flex; flex-direction: column; gap: 6px; }
.pm-fabric-hist-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--wwof-border);
  background: var(--wwof-surface-2, #F7F5F1); font-size: 0.82rem;
}
html.wwof-dark .pm-fabric-tables-wrap,
html.wwof-dark .pm-fabric-count,
html.wwof-dark .pm-fabric-hist-row { background: #1a1d21; border-color: #444; }
html.wwof-dark .pm-fabric-message { color: #f5f2ec; }
html.wwof-dark .pm-fabric-table-row { border-top-color: rgba(255,255,255,.06); }

/* IDs + audit — unique refs, clean timeline */
.pm-id-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(181,136,11,.28);
  background: rgba(181,136,11,.08); color: #7a5a10;
  cursor: pointer; vertical-align: middle; line-height: 1.4;
}
.pm-id-chip:hover { background: rgba(181,136,11,.16); border-color: #B5880B; }
.pm-id-chip.sm { font-size: 0.62rem; padding: 1px 6px; }
.pm-id-chip.ghost { background: transparent; border-color: var(--wwof-border); color: var(--wwof-muted); }
.pm-id-chip.copied { background: rgba(46,125,50,.12); border-color: #2E7D32; color: #2E7D32; }
html.wwof-dark .pm-id-chip { background: rgba(181,136,11,.15); border-color: rgba(181,136,11,.35); color: #e8c76a; }
.pm-active-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.pm-hero-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm-hero-compact { margin-bottom: 14px; }
.pm-hero-compact .pm-hero-title { margin: 0; font-size: 1.2rem; }

.pm-audit-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pm-audit-tab {
  font-size: 0.72rem; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--wwof-border); background: #fff; color: var(--wwof-text-2); cursor: pointer;
}
.pm-audit-tab em { font-style: normal; font-weight: 700; margin-left: 4px; color: var(--wwof-muted); }
.pm-audit-tab.active { background: rgba(181,136,11,.12); border-color: #B5880B; color: #7a5a10; }
.pm-audit-tab.active em { color: #7a5a10; }
html.wwof-dark .pm-audit-tab { background: #1a1d21; border-color: #444; color: #ece8e0; }
html.wwof-dark .pm-audit-tab.active { background: rgba(181,136,11,.2); color: #e8c76a; }

.pm-audit-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.pm-audit-item {
  display: grid; grid-template-columns: 16px 1fr; gap: 12px;
  padding: 10px 4px; position: relative;
}
.pm-audit-item:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 26px; bottom: -2px; width: 2px;
  background: rgba(181,136,11,.2);
}
.pm-audit-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--wwof-gold);
  border: 2px solid var(--wwof-surface, #fff);
  box-shadow: 0 0 0 2px rgba(181,136,11,.35);
  margin-top: 4px;
}
.pm-audit-item.tone-success .pm-audit-dot { background: #2E7D32; box-shadow: 0 0 0 2px rgba(46,125,50,.3); }
.pm-audit-item.tone-danger .pm-audit-dot { background: #B83230; box-shadow: 0 0 0 2px rgba(184,50,48,.3); }
.pm-audit-item.tone-warning .pm-audit-dot { background: #C47F17; box-shadow: 0 0 0 2px rgba(196,127,23,.3); }
.pm-audit-item.tone-info .pm-audit-dot { background: #2C6BED; box-shadow: 0 0 0 2px rgba(44,107,237,.3); }
.pm-audit-body { min-width: 0; }
.pm-audit-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm-audit-action { font-weight: 700; font-size: 0.85rem; color: var(--wwof-heading); }
.pm-audit-meta { font-size: 0.72rem; color: var(--wwof-muted); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pm-audit-sep { opacity: .5; }
.pm-audit-detail { font-size: 0.78rem; color: var(--wwof-text-2); margin-top: 3px; line-height: 1.4; }
.pm-audit-links {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px;
  font-size: 0.62rem; font-family: ui-monospace, Consolas, monospace; color: var(--wwof-muted);
}
.pm-audit-links span { padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.04); }
html.wwof-dark .pm-audit-links span { background: rgba(255,255,255,.06); }
.pm-audit-empty { text-align: center; padding: 20px 12px; color: var(--wwof-muted); }
.pm-audit-empty i { font-size: 1.5rem; display: block; margin-bottom: 8px; opacity: .5; }
.pm-audit-empty p { margin: 0; font-size: 0.82rem; line-height: 1.45; }

.pm-approval-history {
  margin-bottom: 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(181,136,11,.05); border: 1px solid rgba(181,136,11,.14);
}
.pm-approval-history-h {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wwof-muted); margin-bottom: 8px;
}
.pm-approval-hist-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-top: 1px solid rgba(0,0,0,.05); font-size: 0.82rem;
}
.pm-approval-hist-row:first-of-type { border-top: none; }
.pm-approval-hist-right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pm-appr-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 960px) { .pm-appr-grid { grid-template-columns: 1fr; } }
.pm-appr-name { font-weight: 650; }
.pm-appr-actions { white-space: nowrap; }
html.wwof-dark .pm-approval-history { background: rgba(181,136,11,.1); border-color: rgba(181,136,11,.22); }
html.wwof-dark .pm-audit-action { color: #f5f2ec; }

/* Grid toolbar + KPI strip — match production Price List example */
.pm-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pm-grid-toolbar-left,
.pm-grid-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pm-grid-brand-chip {
  font-weight: 700 !important;
  padding: 6px 12px !important;
}
.pm-grid-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pm-grid-search-wrap > .bi-search {
  position: absolute;
  left: 10px;
  color: var(--wwof-muted);
  font-size: 0.85rem;
  pointer-events: none;
}
.pm-grid-search {
  max-width: 320px;
  min-width: 220px;
  padding-left: 32px !important;
}
.pm-grid-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--wwof-border, #E5E1D8);
  border-radius: 12px;
  background: var(--wwof-surface, #fff);
  overflow: hidden;
}
.pm-grid-kpi {
  padding: 12px 16px 14px;
  border-right: 1px solid var(--wwof-border, #E5E1D8);
  min-width: 0;
}
.pm-grid-kpi:last-child { border-right: none; }
.pm-grid-kpi-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wwof-muted, #6b6560);
  margin-bottom: 4px;
}
.pm-grid-kpi-value {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--wwof-heading, #2C3034);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.pm-grid-kpi-up .pm-grid-kpi-value { color: #2E7D32; }
.pm-grid-kpi-sub {
  font-size: 0.68rem;
  color: var(--wwof-muted);
  margin-top: 2px;
  font-weight: 500;
}
.pm-grid {
  height: min(58vh, 640px);
  min-height: 360px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(44,48,52,.08);
}
/* Always-visible horizontal scrollbar on the lot grid. AG Grid hides its own
   bar until you scroll when the OS uses overlay scrollbars (macOS, and Chrome/
   Edge on Windows 11), leaving mouse-only Windows users no visible way right.
   Styling ::-webkit-scrollbar forces Chromium/Safari to draw a classic bar.
   Don't add scrollbar-width/-color outside the @supports block: since Chrome
   121 they make Chrome ignore the ::-webkit-scrollbar styling below. */
.pm-grid .ag-body-horizontal-scroll,
.pm-grid .ag-body-horizontal-scroll.ag-scrollbar-invisible.ag-apple-scrollbar {
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: 14px !important; min-height: 14px !important; max-height: 14px !important;
}
.pm-grid .ag-body-horizontal-scroll-viewport,
.pm-grid .ag-horizontal-left-spacer,
.pm-grid .ag-horizontal-right-spacer {
  height: 14px !important; min-height: 14px !important; max-height: 14px !important;
}
.pm-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar { height: 14px; }
.pm-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { background: var(--wwof-warm, #F0EDE7); }
.pm-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
  background: var(--wwof-gold, #B5880B);
  border-radius: 7px;
  border: 3px solid var(--wwof-warm, #F0EDE7);
}
.pm-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover { background: var(--wwof-gold-hover, #9A7309); }
html.wwof-dark .pm-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { background: #1a1d21; }
html.wwof-dark .pm-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { border-color: #1a1d21; }
/* Same treatment for the vertical (side) scrollbar. */
.pm-grid .ag-body-vertical-scroll,
.pm-grid .ag-body-vertical-scroll.ag-scrollbar-invisible.ag-apple-scrollbar {
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 14px !important; min-width: 14px !important; max-width: 14px !important;
}
.pm-grid .ag-body-vertical-scroll-viewport {
  width: 14px !important; min-width: 14px !important; max-width: 14px !important;
}
.pm-grid .ag-body-vertical-scroll-viewport::-webkit-scrollbar { width: 14px; }
.pm-grid .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { background: var(--wwof-warm, #F0EDE7); }
.pm-grid .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
  background: var(--wwof-gold, #B5880B);
  border-radius: 7px;
  border: 3px solid var(--wwof-warm, #F0EDE7);
}
.pm-grid .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover { background: var(--wwof-gold-hover, #9A7309); }
html.wwof-dark .pm-grid .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track { background: #1a1d21; }
html.wwof-dark .pm-grid .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb { border-color: #1a1d21; }
@supports not selector(::-webkit-scrollbar) {
  .pm-grid .ag-body-horizontal-scroll-viewport,
  .pm-grid .ag-body-vertical-scroll-viewport { scrollbar-width: auto; scrollbar-color: var(--wwof-gold, #B5880B) var(--wwof-warm, #F0EDE7); }
}
.pm-columns-dropdown { position: relative; }
.pm-columns-menu {
  position: absolute;
  top: 110%;
  right: 0;
  left: auto;
  background: var(--wwof-surface, #fff);
  border: 1px solid var(--wwof-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  padding: 10px;
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  min-width: 220px;
}
.pm-col-toggle {
  display: block;
  font-size: 0.82rem;
  padding: 6px 8px;
  white-space: nowrap;
  border-radius: 6px;
  cursor: pointer;
}
.pm-col-toggle:hover { background: rgba(181,136,11,.08); }
/* Editable price cells — soft gold like production example */
.pm-editable-cell { background: rgba(245, 230, 180, 0.55) !important; }
.ag-theme-alpine .ag-row-hover .pm-editable-cell { background: rgba(245, 220, 150, 0.75) !important; }
html.wwof-dark .pm-grid-kpis { background: #2C3034; border-color: #444; }
html.wwof-dark .pm-grid-kpi { border-color: #444; }
html.wwof-dark .pm-grid-kpi-value { color: #f5f2ec; }
html.wwof-dark .pm-editable-cell { background: rgba(181,136,11,.18) !important; }
@media (max-width: 900px) {
  .pm-grid-kpis { grid-template-columns: 1fr 1fr; }
  .pm-grid-kpi:nth-child(2) { border-right: none; }
  .pm-grid-kpi:nth-child(1),
  .pm-grid-kpi:nth-child(2) { border-bottom: 1px solid var(--wwof-border, #E5E1D8); }
}
.pm-cell-wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.pm-cell-value { overflow: hidden; text-overflow: ellipsis; }
.pm-modified-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 9px solid var(--wwof-danger);
  border-left: 9px solid transparent;
  cursor: help;
}

.pm-export-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 900px;
}
.pm-export-card {
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pm-export-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(44,48,52,.1);
}
.pm-export-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(181,136,11,.12);
  color: var(--wwof-gold);
  font-size: 1.25rem;
}

.pm-admin-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pm-flex-2 { flex: 2; min-width: 160px; }
.pm-admin-row-wrap { align-items: flex-start; }
.pm-admin-row-wrap textarea.wwof-input { resize: vertical; min-height: 44px; }
.pm-block { display: block; text-align: center; }
.pm-modal-wide { max-width: 640px; width: 92vw; }

.pm-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--wwof-muted);
}
.pm-empty i {
  font-size: 2rem;
  color: var(--wwof-gold);
  opacity: 0.7;
  display: block;
  margin-bottom: 10px;
}

.pm-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--wwof-border, #E4E0D7);
  border-radius: 10px;
  background: rgba(181, 136, 11, 0.06);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.35;
}
.pm-check-row input { margin-top: 3px; flex: none; }
.pm-mail-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(44,48,52,.08);
  font-size: 0.82rem;
  align-items: start;
}
.pm-mail-kind { font-weight: 700; color: var(--wwof-heading); }
.pm-mail-meta { font-size: 0.72rem; color: var(--wwof-muted); margin-top: 2px; }

.pm-ml-1 { margin-left: 4px; }
.pm-ml-2 { margin-left: 8px; }
.pm-mt-2 { margin-top: 8px; }
.pm-mt-3 { margin-top: 12px; }
.pm-mb-2 { margin-bottom: 8px; }
.pm-mb-3 { margin-bottom: 12px; }
.pm-mb-4 { margin-bottom: 16px; }
.pm-p-2 { padding: 8px; }
.pm-p-3 { padding: 12px; }
.pm-text-xs { font-size: 0.72rem; }
.pm-text-sm { font-size: 0.85rem; }
.pm-text-muted { color: var(--wwof-muted); }
.pm-text-success { color: var(--wwof-success); }
.pm-text-danger { color: var(--wwof-danger); }

/* Session pill uses secure chip styling when calm */
#session-timer.warn {
  color: var(--wwof-warning) !important;
  border-color: rgba(196,127,23,.3) !important;
  background: rgba(196,127,23,.12) !important;
}
#session-timer.danger {
  color: var(--wwof-danger) !important;
  border-color: rgba(184,50,48,.3) !important;
  background: rgba(184,50,48,.12) !important;
}

/* Session expiry warning — only while signed in (never on login) */
.pm-session-modal { max-width: 420px; }
.pm-session-lead { font-size: 0.95rem; font-weight: 600; margin: 0 0 8px; color: var(--wwof-heading); }
.pm-session-countdown {
  margin-top: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #C47F17;
}
.pm-session-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(196,127,23,.15);
  margin-top: 10px;
  overflow: hidden;
}
.pm-session-bar {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #C47F17, #B5880B);
  transition: width 0.9s linear;
}
html.wwof-dark .pm-session-lead { color: #f5f2ec; }
html.wwof-dark .pm-session-countdown { color: #e8c76a; }

/* ═══ Responsive + zoom-safe ═══ */
@media (max-width: 1280px) {
  .pm-dash-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .pm-mega-grid { grid-template-columns: 1fr 1fr; }
  .pm-mega-aside { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .pm-export-cards { grid-template-columns: 1fr; }
  .wwof-pnav { padding: 0 12px !important; }
  .wwof-snav { padding: 0 12px !important; overflow-x: auto; overflow-y: hidden; }
  .pm-stage { padding: 12px !important; }
  .pm-help-grid { grid-template-columns: 1fr; }
  .wwof-pnav-secure { display: none !important; }
  .wwof-pnav-logo { margin-right: 12px !important; }
  .wwof-pnav-logo img,
  .pm-logo-full { height: 36px !important; max-width: 170px !important; min-width: 100px; }
  .pm-logo-plate { height: 44px; }
  /* Title is decorative next to the logo — first thing to go once the
     hamburger/nav/badges start competing for the same 60px-tall row. */
  .wwof-pnav-logo-title { display: none !important; }
  /* Desktop nav is still visible here (hamburger cutover is 900px), but a
     mega panel centered under its tab and sized for a full-width desktop
     screen can run off the right edge on a laptop at 125-150% zoom. Pin it
     to the viewport instead of the tab. */
  .wwof-mega,
  .wwof-mega.pm-mega-panel,
  .pm-mega-panel {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: 70vh !important;
    overflow: auto !important;
  }
}
@media (max-width: 900px) {
  .pm-summary-grid { grid-template-columns: 1fr; }
  .pm-summary-grid .wwof-card:nth-child(5) { grid-column: auto; }
  .pm-dash-stats { grid-template-columns: repeat(2, 1fr); }

  /* Primary nav becomes a hamburger-triggered slide-in drawer instead of
     disappearing outright with no replacement. The mega panels inside serve
     no purpose here (the secondary nav already surfaces the same
     destinations once you're in a section) so they stay suppressed. */
  .wwof-pnav-hamburger { display: flex; }
  .wwof-pnav-center {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(300px, 84vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    background: var(--wwof-surface, #fff);
    border-right: 1px solid var(--wwof-border, #E4E0D7);
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    padding: 76px 14px 20px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 220;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .wwof-pnav-center.pm-drawer-open { transform: translateX(0); }
  .wwof-pnav-center .wwof-mega-wrap { width: 100%; height: auto; }
  .wwof-pnav-center .wwof-pnav-tab {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
    min-height: 44px;
  }
  .wwof-pnav-center .wwof-mega { display: none !important; }
  .pm-nav-backdrop.show { display: block; }

  .pm-site-footer-inner { flex-direction: column; align-items: flex-start; }
  .pm-stage-card { padding: 14px 14px 18px !important; min-height: 0 !important; }
  .pm-page-head { flex-direction: column; align-items: stretch; }
  .pm-page-actions { width: 100%; }
  .pm-page-actions .wwof-btn { width: 100%; justify-content: center; }
  .pm-admin-grid-2,
  .pm-admin-grid-3,
  .pm-role-grid { grid-template-columns: 1fr; }
  .pm-dash-filters { flex-direction: column; align-items: stretch; }
  .pm-filter-actions { margin-left: 0; }
  .wwof-ticker-credit { display: none; }
  .pm-preview-stats { grid-template-columns: repeat(2, 1fr); }
  .pm-modal-preview { max-width: 96vw !important; }
  .pm-action-row { flex-direction: column; align-items: stretch; }
  .pm-action-ctas { width: 100%; }
  .pm-action-ctas .wwof-btn { flex: 1; justify-content: center; }
}
@media (max-width: 640px) {
  .pm-dash-stats { grid-template-columns: 1fr 1fr; }
  .wwof-pnav { min-height: 56px !important; }
  .wwof-pnav-logo img,
  .pm-logo-full { max-width: 140px !important; height: 32px !important; min-width: 96px; }
  .pm-logo-plate { height: 40px; padding: 3px 6px; }
  #topbar-user-name { display: none; }
  .pm-footer-links { gap: 6px 10px; }
  .wwof-snav { min-height: 44px !important; flex-wrap: nowrap; }
  .wwof-snav-tab { flex-shrink: 0; padding: 8px 10px !important; }
  .pm-login-card { padding: 24px 18px 18px; }
  .pm-login-brand-text { text-align: center; }
  .wwof-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .wwof-modal-footer .wwof-btn { width: 100%; justify-content: center; }

  /* Ticker stats (pending/in-approval/cycle) don't shrink or wrap by
     default — tighten spacing and drop the least critical stat so the
     bar doesn't overflow the viewport on a phone-width screen. */
  .wwof-ticker-stats { gap: 8px !important; padding-right: 10px !important; margin-right: 10px !important; }
  .wwof-ticker-stat:last-child { display: none; }

  /* Toast/session-warning alerts (approve/reject/submit confirmations):
     fixed right:20px + max-width:380px overflows off the left edge of
     any phone narrower than ~400px. Anchor both edges instead. */
  .wwof-toast,
  .wwof-toast-container {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    max-width: none !important;
  }
  .wwof-toast { width: auto; }
}
/* Browser zoom (125% / 150%): keep chrome from overflowing */
@media (max-height: 700px) {
  .pm-stage-card { min-height: 0 !important; }
  .pm-portal { padding-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-portal, .pm-stage-card, .pm-view, .pm-stat-card, .pm-step-card, .pm-login-card {
    animation: none !important;
  }
}

/* Light-mode surface lock (prevent dark bleed on zoom repaint) */
html:not(.wwof-dark) .wwof-pnav {
  background: #FBF9F5 !important;
}
html:not(.wwof-dark) .wwof-snav {
  background: #fff !important;
}
html:not(.wwof-dark) .pm-stage {
  background: #F0EDE7 !important;
}
html:not(.wwof-dark) .pm-stage-card {
  background: #fff !important;
}
html:not(.wwof-dark) .pm-site-footer {
  background: #FBF9F5 !important;
}
html:not(.wwof-dark) .wwof-ticker {
  background: #F3EDE0 !important;
}